hacks/Nimbus/Nimbus.js

   1 /* Copyright 2011 The Dominion of Awesome
   2  * See COPYING for licensing information */
   3 enyo.kind({
   4         name: "Drop",
   5         constructor: function() {
   6                 this.live = false;
   7         },
   8         start: function(w, h, perspective) {
   9                 this.x = Math.random() * w;
  10                 this.y = (Math.random() * h) / perspective;
  11                 this.t = (new Date()).getTime();
  12                 this.live = true;
  13         },
  14         draw: function(ctx, t) {
  15                 var dt = t - this.t;
  16                 if (dt < 100) {
  17                         ctx.save();
  18                         ctx.globalAlpha = 0.25;
  19                         ctx.beginPath();
  20                         ctx.moveTo(this.x, 0);
  21                         ctx.lineTo(this.x, this.y);
  22                         ctx.stroke();
  23                         ctx.restore();
  24                 } else if (dt < 750) {
  25                         ctx.save();
  26                         ctx.globalAlpha = (1.0 - ((dt - 500) / 250));
  27                         ctx.beginPath();
  28                         ctx.arc(this.x, this.y, Math.sqrt(dt) * 5, 0, 2 * Math.PI, false);
  29                         ctx.stroke();
  30                         ctx.restore();
  31                 } else {
  32                         this.live = false;
  33                 }
  34         }
  35 });
  36
  37 enyo.kind({
  38         name: "Nimbus",
  39         kind: "Hack",
  40         style: "background-color: white",
  41         drop_c: 0,
  42         drops: [],
  43         perspective: 0.3,
  44         components: [
  45                 {name: "raindrops", nodeTag: "canvas"}
  46         ],
  47         rendered: function() {
  48                 this.raindrops = this.$.raindrops.hasNode();
  49                 this.ctx = this.raindrops.getContext('2d');
  50                 this.resize(window.innerWidth, window.innerHeight);
  51
  52                 for (var i = 0; i < 100; i++)
  53                         this.drops.push(new Drop());
  54         },
  55         start: function() {
  56                 if (!this.timer)
  57                         this.timer = setInterval(this.draw.bind(this), 50);
  58         },
  59         stop: function() {
  60                 clearInterval(this.timer);
  61                 this.timer = null;
  62         },
  63         resize: function(w, h) {
  64                 this.raindrops.width = this.w = w;
  65                 this.raindrops.height = this.h = h;
  66
  67                 this.ctx.fillStyle = 'rgba(255,255,255,0.7)';
  68                 this.ctx.strokeStyle = 'rgb(128,128,128)';
  69                 this.ctx.lineWidth = '2';
  70         },
  71         draw: function() {
  72                 if (Math.random() > 0.3) {
  73                         this.drops[this.drop_c].start(this.w, this.h, this.perspective);
  74                         this.drop_c = (this.drop_c + 1) % 100;
  75                 }
  76                 var now = (new Date()).getTime();
  77                 this.ctx.fillRect(0, 0, this.w, this.h);
  78                 this.ctx.save();
  79                 this.ctx.scale(1.0, this.perspective);
  80                 for (var i = 0; i < this.drops.length; i++)
  81                         if (this.drops[i].live)
  82                                 this.drops[i].draw(this.ctx, now);
  83                 this.ctx.restore();
  84         }
  85 });