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: 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)'}
55 backgroundColor: 'rgba(255,255,255,0.7)',
57 {name: "raindrops", nodeTag: "canvas"}
59 rendered: function() {
60 this.raindrops = this.$.raindrops.hasNode();
61 this.ctx = this.raindrops.getContext('2d');
62 this.resize(window.innerWidth, window.innerHeight);
64 for (var i = 0; i < 100; i++)
65 this.drops.push(new Drop());
69 this.timer = setInterval(this.draw.bind(this), 50);
72 clearInterval(this.timer);
75 resize: function(w, h) {
76 this.raindrops.width = this.w = w;
77 this.raindrops.height = this.h = h;
79 this.ctx.fillStyle = this.backgroundColor;
80 this.ctx.strokeStyle = this.rainColor;
81 this.ctx.lineWidth = '2';
83 preferencesChanged: function() {
84 this.ctx.fillStyle = this.backgroundColor;
85 this.ctx.strokeStyle = this.rainColor;
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;
92 var now = (new Date()).getTime();
93 this.ctx.fillRect(0, 0, this.w, this.h);
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);