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: "raindrops", nodeTag: "canvas"}
47 rendered: function() {
48 this.raindrops = this.$.raindrops.hasNode();
49 this.ctx = this.raindrops.getContext('2d');
50 this.resize(window.innerWidth, window.innerHeight);
52 for (var i = 0; i < 100; i++)
53 this.drops.push(new Drop());
57 this.timer = setInterval(this.draw.bind(this), 50);
60 clearInterval(this.timer);
63 resize: function(w, h) {
64 this.raindrops.width = this.w = w;
65 this.raindrops.height = this.h = h;
67 this.ctx.fillStyle = 'rgba(255,255,255,0.7)';
68 this.ctx.strokeStyle = 'rgb(128,128,128)';
69 this.ctx.lineWidth = '2';
72 if (Math.random() > 0.3) {
73 this.drops[this.drop_c].start(this.w, this.h, this.perspective);
74 this.drop_c = (this.drop_c + 1) % 100;
76 var now = (new Date()).getTime();
77 this.ctx.fillRect(0, 0, this.w, this.h);
79 this.ctx.scale(1.0, this.perspective);
80 for (var i = 0; i < this.drops.length; i++)
81 if (this.drops[i].live)
82 this.drops[i].draw(this.ctx, now);