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         preferences: [
  45                 {name: "intensity", label: "Intensity", kind: "Slider", maximum: 1, minimum: 0, snap: 0.01},
  46                 {name: "rainColor", label: "Rain Color", kind: "ListSelector", items: ["gray", "black", "blue", "red"]},
  47                 {name: "backgroundColor", label: "Background Color", kind: "ListSelector", items: [
  48                         {caption: "white", value: 'rgba(255,255,255,0.7)'},
  49                         {caption: "black", value: 'rgba(0,0,0,0.7)'}
  50                 ]}
  51         ],
  52         intensity: 0.7,
  53         rainColor: 'gray',
  54         backgroundColor: 'rgba(255,255,255,0.7)',
  55         components: [
  56                 {name: "raindrops", nodeTag: "canvas"}
  57         ],
  58         rendered: function() {
  59                 this.raindrops = this.$.raindrops.hasNode();
  60                 this.ctx = this.raindrops.getContext('2d');
  61                 this.resize(window.innerWidth, window.innerHeight);
  62
  63                 for (var i = 0; i < 100; i++)
  64                         this.drops.push(new Drop());
  65         },
  66         start: function() {
  67                 if (!this.timer)
  68                         this.timer = setInterval(this.draw.bind(this), 50);
  69         },
  70         stop: function() {
  71                 clearInterval(this.timer);
  72                 this.timer = null;
  73         },
  74         resize: function(w, h) {
  75                 this.raindrops.width = this.w = w;
  76                 this.raindrops.height = this.h = h;
  77
  78                 this.ctx.fillStyle = this.backgroundColor;
  79                 this.ctx.strokeStyle = this.rainColor;
  80                 this.ctx.lineWidth = '2';
  81         },
  82         preferencesChanged: function() {
  83                 this.ctx.fillStyle = this.backgroundColor;
  84                 this.ctx.strokeStyle = this.rainColor;
  85         },
  86         draw: function() {
  87                 if (Math.random() <= this.intensity) {
  88                         this.drops[this.drop_c].start(this.w, this.h, this.perspective);
  89                         this.drop_c = (this.drop_c + 1) % 100;
  90                 }
  91                 var now = (new Date()).getTime();
  92                 this.ctx.fillRect(0, 0, this.w, this.h);
  93                 this.ctx.save();
  94                 this.ctx.scale(1.0, this.perspective);
  95                 for (var i = 0; i < this.drops.length; i++)
  96                         if (this.drops[i].live)
  97                                 this.drops[i].draw(this.ctx, now);
  98                 this.ctx.restore();
  99         }
 100 });