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                 } else {
  56                         this.display.width = 512;
  57                         this.display.height = 512;
  58                 }
  59         },
  60
  61         preferencesChanged: function() {
  62                 this.ictx.strokeStyle = this.phosphorColor;
  63                 if (this.displayStyle == 0) {
  64                         this.display.width = this.w;
  65                         this.display.height = this.h;
  66                 } else {
  67                         this.display.width = 512;
  68                         this.display.height = 512;
  69                 }
  70         },
  71
  72         draw: function() {
  73                 this.ictx.fillRect(0, 0, 512, 512);
  74                 this.ictx.beginPath();
  75                 for (var x = 0; x < 512; x++) {
  76                         var y = x ^ this.t;
  77                         this.ictx.moveTo(x, y);
  78                         this.ictx.lineTo(x+1, y+1);
  79                 }
  80                 this.ictx.stroke();
  81                 this.t = (this.t + 1) % 512;
  82
  83                 if (this.displayStyle == 0) {
  84                         for (var x = 0; x < this.w; x += 512) {
  85                                 for (var y = 0; y < this.h; y += 512) {
  86                                         this.ctx.drawImage(this.intermediate, 0, 0, 512, 512, x, y, 512, 512);
  87                                 }
  88                         }
  89                 } else {
  90                         this.ctx.drawImage(this.intermediate, 0, 0);
  91                 }
  92         },
  93
  94         start: function() {
  95                 if (this.timer) return;
  96                 this.timer = setInterval(this.draw.bind(this), 20);
  97         },
  98
  99         stop: function() {
 100                 clearInterval(this.timer);
 101                 this.timer = null;
 102         }
 103 });