1 /* Copyright 2011 The Dominion of Awesome
2 * See COPYING for licensing information */
5 constructor: function() {
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();
14 draw: function(ctx, t) {
18 ctx.globalAlpha = 0.25;
20 ctx.moveTo(this.x, 0);
21 ctx.lineTo(this.x, this.y);
24 } else if (dt < 750) {
26 ctx.globalAlpha = (1.0 - ((dt - 500) / 250));
28 ctx.arc(this.x, this.y, Math.sqrt(dt) * 5, 0, 2 * Math.PI, false);
40 style: "background-color: white",
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)'}
54 backgroundColor: 'rgba(255,255,255,0.7)',
56 {name: "raindrops", nodeTag: "canvas"}
58 rendered: function() {
59 this.raindrops = this.$.raindrops.hasNode();
60 this.ctx = this.raindrops.getContext('2d');
61 this.resize(window.innerWidth, window.innerHeight);
63 for (var i = 0; i < 100; i++)
64 this.drops.push(new Drop());
68 this.timer = setInterval(this.draw.bind(this), 50);
71 clearInterval(this.timer);
74 resize: function(w, h) {
75 this.raindrops.width = this.w = w;
76 this.raindrops.height = this.h = h;
78 this.ctx.fillStyle = this.backgroundColor;
79 this.ctx.strokeStyle = this.rainColor;
80 this.ctx.lineWidth = '2';
82 preferencesChanged: function() {
83 this.ctx.fillStyle = this.backgroundColor;
84 this.ctx.strokeStyle = this.rainColor;
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;
91 var now = (new Date()).getTime();
92 this.ctx.fillRect(0, 0, this.w, this.h);
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);