hacks/Pixelfade/Pixelfade.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Pixelfade",
   5         kind: "Hack",
   6         style: "background-color: yellow; background-position: center center",
   7         components: [
   8                 {name: "canvas", nodeTag: "canvas", onclick: "canvasClick"},
   9                 {name: "wallpaperService", kind: "PalmService",
  10                  service: 'palm://com.palm.systemservice',
  11                  method: 'getPreferences',
  12                  onSuccess: "gotWallpaper"}
  13         ],
  14         create: function() {
  15                 this.inherited(arguments);
  16                 this.$.wallpaperService.call({
  17                         keys: ['wallpaper'],
  18                         subscribe: false
  19                 });
  20         },
  21         rendered: function() {
  22                 this.canvas = this.$.canvas.hasNode();
  23                 this.context = this.canvas.getContext('2d');
  24                 this.resize(window.innerWidth, window.innerHeight);
  25                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  26
  27                 this.faders = [];
  28                 for (var i = 0; i < 10; i++) {
  29                         var img = new Image();
  30                         img.src = "hacks/Pixelfade/pixelfade" + i + ".gif";
  31                         this.faders.push(img);
  32                 }
  33         },
  34         start: function() {
  35                 this.resize(window.innerWidth, window.innerHeight);
  36
  37                 if (this.timer)
  38                         clearInterval(this.timer);
  39                 this.fade_val = 9;
  40                 this.fade_dir = -1;
  41                 this.fade_end = -1;
  42                 this.timer = setInterval(this.fade_all.bind(this), 50);
  43
  44                 if (!this.spotTimer)
  45                         this.spotTimer = setInterval(this.do_fade_spot.bind(this), 3000);
  46         },
  47         stop: function() {
  48                 clearInterval(this.timer);
  49                 this.timer = null;
  50                 clearInterval(this.spotTimer);
  51                 this.spotTimer = null;
  52                 clearTimeout(this.fadeInTimer);
  53                 this.fadeInTimer = null;
  54         },
  55         resize: function(w, h) {
  56                 this.canvas.style.width = w + 'px';
  57                 this.canvas.style.height = h + 'px';
  58                 this.canvas.width = w;
  59                 this.canvas.height = h;
  60                 this.context.fillColor = 'black';
  61                 this.context.fillRect(0, 0, w, h);
  62         },
  63         hidden: function() {
  64                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  65         },
  66         canvasClick: function(inSender, inEvent) {
  67                 clearTimeout(this.fadeInTimer);
  68                 clearInterval(this.spotTimer);
  69                 this.spotTimer = setInterval(this.do_fade_spot.bind(this), 3000);
  70                 this.fader_go(inEvent.clientX, inEvent.clientY);
  71         },
  72         gotWallpaper: function(inSender, inResponse) {
  73                 enyo.log("got background: " + JSON.stringify(inResponse));
  74                 this.setStyle('background-image: url(' + inResponse.wallpaper.wallpaperFile + '); background-alignment: center center');
  75         },
  76         do_fade_spot: function() {
  77                 var x = Math.floor(Math.random() * this.canvas.width);
  78                 var y = Math.floor(Math.random() * this.canvas.height);
  79                 this.fader_go(x, y);
  80         },
  81         fade_all: function() {
  82                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  83                 if (this.fade_val == this.fade_end) {
  84                         clearInterval(this.timer);
  85                         this.timer = null;
  86                         if (this.fade_dir == -1)
  87                                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  88                         else
  89                                 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
  90                 } else {
  91                         for (var x = 0; x < this.canvas.width; x += 64) {
  92                                 for (var y = 0; y < this.canvas.height; y += 64) {
  93                                         this.context.drawImage(this.faders[this.fade_val], x, y);
  94                                 }
  95                         }
  96                 }
  97                 this.fade_val += this.fade_dir;
  98         },
  99         fader_go: function(x, y) {
 100                 this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 101                 this.fader_count = 0;
 102                 this.time_faders(x, y);
 103                 this.faderptr = new Array(10);
 104                 for (var i=0; i < 10; i++)
 105                         this.faderptr[i] = 0;
 106                 this.t0 = (new Date()).getTime();
 107                 this.faderRunning = true;
 108                 clearInterval(this.timer);
 109                 this.timer = setInterval(this.fader.bind(this), 50);
 110         },
 111         time_faders: function(xpos, ypos) {
 112                 this.fadertimes = [];
 113                 for (var y = 0; y < this.canvas.height; y += 64) {
 114                         for (var x = 0; x < this.canvas.width; x += 64) {
 115                                 var xd = x - xpos;
 116                                 var yd = y - ypos;
 117                                 this.fadertimes.push({
 118                                         t: 125 - Math.sqrt(xd*xd + yd*yd) / 8,
 119                                         x: x,
 120                                         y: y
 121                                 });
 122                         }
 123                 }
 124                 this.fadertimes.sort(function(a, b) { return a.t - b.t });
 125         },
 126         fader: function() {
 127                 var tnow = (new Date()).getTime();
 128                 var td = (tnow - this.t0) / 8.0;
 129                 for (var i = 0; i < 10; i++) {
 130                         while (this.faderptr[i] < this.fadertimes.length && this.fadertimes[this.faderptr[i]].t < td - i * 10) {
 131                                 var xpos = this.fadertimes[this.faderptr[i]].x;
 132                                 var ypos = this.fadertimes[this.faderptr[i]].y;
 133                                 this.context.clearRect(xpos, ypos, 64, 64);
 134                                 this.context.drawImage(this.faders[i], xpos, ypos);
 135                                 this.faderptr[i]++;
 136                         }
 137                 }
 138                 if (this.faderptr[9] >= this.fadertimes.length) {
 139                         clearTimeout(this.timer);
 140                         this.fadeInTimer = setTimeout(function() {
 141                                 this.fade_val = 9;
 142                                 this.fade_dir = -1;
 143                                 this.fade_end = -1;
 144                                 this.timer = setInterval(this.fade_all.bind(this), 50);
 145                         }.bind(this), 750);
 146                 }
 147         }
 148 });