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         components: [
   8                 {name: "display", nodeTag: "canvas"}
   9         ],
  10
  11         t: 0,
  12         timer: null,
  13
  14         rendered: function() {
  15                 this.display = this.$.display.hasNode();
  16                 this.ctx = this.display.getContext('2d');
  17
  18                 this.intermediate = document.createElement('canvas');
  19                 this.intermediate.width = 512;
  20                 this.intermediate.height = 512;
  21                 this.ictx = this.intermediate.getContext('2d');
  22                 this.ictx.fillStyle = 'black';
  23                 this.ictx.fillRect(0, 0, 255, 255);
  24                 this.ictx.fillStyle = 'rgba(0,0,0,0.075)';
  25                 this.ictx.strokeStyle = '#00FF00';
  26
  27                 this.resize(window.innerWidth, window.innerHeight);
  28                 this.draw();
  29         },
  30
  31         resize: function(w, h) {
  32                 this.display.width = this.w = w;
  33                 this.display.height = this.h = h;
  34         },
  35
  36         draw: function() {
  37                 this.ictx.fillRect(0, 0, 512, 512);
  38                 this.ictx.beginPath();
  39                 for (var x = 0; x < 512; x++) {
  40                         var y = x ^ this.t;
  41                         this.ictx.moveTo(x, y);
  42                         this.ictx.lineTo(x+1, y+1);
  43                 }
  44                 this.ictx.stroke();
  45                 this.t = (this.t + 1) % 512;
  46
  47                 for (var x = 0; x < this.w; x += 512) {
  48                         for (var y = 0; y < this.h; y += 512) {
  49                                 this.ctx.drawImage(this.intermediate, 0, 0, 512, 512, x, y, 512, 512);
  50                         }
  51                 }
  52         },
  53
  54         start: function() {
  55                 if (this.timer) return;
  56                 this.timer = setInterval(this.draw.bind(this), 20);
  57         },
  58
  59         stop: function() {
  60                 clearInterval(this.timer);
  61                 this.timer = null;
  62         }
  63 });