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