/hacks/Nimbus/Nimbus.js
/* Copyright 2011 The Dominion of Awesome
* See COPYING for licensing information */
enyo.kind({
name: "Drop",
constructor: function() {
this.live = false;
},
start: function(w, h, perspective) {
this.x = Math.random() * w;
this.y = (Math.random() * h) / perspective;
this.t = (new Date()).getTime();
this.live = true;
},
draw: function(ctx, t) {
var dt = t - this.t;
if (dt < 100) {
ctx.save();
ctx.globalAlpha = 0.25;
ctx.beginPath();
ctx.moveTo(this.x, 0);
ctx.lineTo(this.x, this.y);
ctx.stroke();
ctx.restore();
} else if (dt < 750) {
ctx.save();
ctx.globalAlpha = (1.0 - ((dt - 500) / 250));
ctx.beginPath();
ctx.arc(this.x, this.y, Math.sqrt(dt) * 5, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.restore();
} else {
this.live = false;
}
}
});
enyo.kind({
name: "Nimbus",
kind: "Hack",
style: "background-color: white",
drop_c: 0,
drops: [],
perspective: 0.3,
preferences: [
{name: "intensity", label: "Intensity", kind: "Slider", maximum: 1, minimum: 0, snap: 0.01},
{name: "rainColor", label: "Rain Color", kind: "ListSelector", items: colorList},
{name: "backgroundColor", label: "Background Color", kind: "ListSelector", items: [
{caption: "white", value: 'rgba(255,255,255,0.7)'},
{caption: "gray", value: 'rgba(128,128,128,0.7)'},
{caption: "black", value: 'rgba(0,0,0,0.7)'}
]}
],
intensity: 0.7,
rainColor: 'gray',
backgroundColor: 'rgba(255,255,255,0.7)',
components: [
{name: "raindrops", nodeTag: "canvas"}
],
rendered: function() {
this.raindrops = this.$.raindrops.hasNode();
this.ctx = this.raindrops.getContext('2d');
this.resize(window.innerWidth, window.innerHeight);
for (var i = 0; i < 100; i++)
this.drops.push(new Drop());
},
start: function() {
if (!this.timer)
this.timer = setInterval(this.draw.bind(this), 50);
},
stop: function() {
clearInterval(this.timer);
this.timer = null;
},
resize: function(w, h) {
this.raindrops.width = this.w = w;
this.raindrops.height = this.h = h;
this.ctx.fillStyle = this.backgroundColor;
this.ctx.strokeStyle = this.rainColor;
this.ctx.lineWidth = '2';
},
preferencesChanged: function() {
this.ctx.fillStyle = this.backgroundColor;
this.ctx.strokeStyle = this.rainColor;
},
draw: function() {
if (Math.random() <= this.intensity) {
this.drops[this.drop_c].start(this.w, this.h, this.perspective);
this.drop_c = (this.drop_c + 1) % 100;
}
var now = (new Date()).getTime();
this.ctx.fillRect(0, 0, this.w, this.h);
this.ctx.save();
this.ctx.scale(1.0, this.perspective);
for (var i = 0; i < this.drops.length; i++)
if (this.drops[i].live)
this.drops[i].draw(this.ctx, now);
this.ctx.restore();
}
});