hacks/Munch/Munch.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: 'Munch',
   5         kind: 'Hack',
   6         style: "background-color: black",
   7         align: "center",
   8         pack: "center",
   9         preferences: [
  10                 {name: "phosphorColor", label: "Phosphor Color", kind: "ListSelector", items: [
  11                         {caption: "green", value: '#00FF00'},
  12                         {caption: "blue", value: '#3030FF'},
  13                         {caption: "red", value: '#FF2020'},
  14                         {caption: "magenta", value: '#FF20FF'},
  15                         {caption: "cyan", value: '#00FFFF'},
  16                         {caption: "yellow", value: '#FFFF00'},
  17                         {caption: "amber", value: '#9F9F00'}
  18                 ]},
  19                 {name: "displayStyle", label: "Style", kind: "ListSelector", items: [
  20                         {caption: "tiled", value: 0},
  21                         {caption: "centered", value: 1}
  22                 ]}
  23         ],
  24         phosphorColor: '#00FF00',
  25         displayStyle: 0,
  26
  27         components: [
  28                 {name: "display", nodeTag: "canvas"}
  29         ],
  30
  31         t: 0,
  32         timer: null,
  33
  34         rendered: function() {
  35                 this.display = this.$.display.hasNode();
  36                 this.ctx = this.display.getContext('2d');
  37
  38                 this.intermediate = document.createElement('canvas');
  39                 this.intermediate.width = 512;
  40                 this.intermediate.height = 512;
  41                 this.ictx = this.intermediate.getContext('2d');
  42                 this.ictx.fillStyle = 'black';
  43                 this.ictx.fillRect(0, 0, 255, 255);
  44                 this.ictx.fillStyle = 'rgba(0,0,0,0.075)';
  45                 this.ictx.strokeStyle = this.phosphorColor;
  46
  47                 this.resize(window.innerWidth, window.innerHeight);
  48                 this.draw();
  49         },
  50
  51         resize: function(w, h) {
  52                 if (this.displayStyle == 0) {
  53                         this.display.width = this.w = w;
  54                         this.display.height = this.h = h;
  55                 }
  56         },
  57
  58         preferencesChanged: function() {
  59                 this.ictx.strokeStyle = this.phosphorColor;
  60                 if (this.displayStyle == 0) {
  61                         this.display.width = this.w;
  62                         this.display.height = this.h;
  63                 } else {
  64                         this.display.width = 512;
  65                         this.display.height = 512;
  66                 }
  67         },
  68
  69         draw: function() {
  70                 this.ictx.fillRect(0, 0, 512, 512);
  71                 this.ictx.beginPath();
  72                 for (var x = 0; x < 512; x++) {
  73                         var y = x ^ this.t;
  74                         this.ictx.moveTo(x, y);
  75                         this.ictx.lineTo(x+1, y+1);
  76                 }
  77                 this.ictx.stroke();
  78                 this.t = (this.t + 1) % 512;
  79
  80                 if (this.displayStyle == 0) {
  81                         for (var x = 0; x < this.w; x += 512) {
  82                                 for (var y = 0; y < this.h; y += 512) {
  83                                         this.ctx.drawImage(this.intermediate, 0, 0, 512, 512, x, y, 512, 512);
  84                                 }
  85                         }
  86                 } else {
  87                         this.ctx.drawImage(this.intermediate, 0, 0);
  88                 }
  89         },
  90
  91         start: function() {
  92                 if (this.timer) return;
  93                 this.timer = setInterval(this.draw.bind(this), 20);
  94         },
  95
  96         stop: function() {
  97                 clearInterval(this.timer);
  98                 this.timer = null;
  99         }
 100 });