1 ctx.beginPath(); 2 var rain_height = Rain.height * dpr; 3 for (var i = rain.length - 1; i >= 0; i--) { 4 ????var r = rain[i]; 5 ????var real_x = r.x * dpr; 6 ????var real_y = r.y * dpr; 7 ????ctx.moveTo(real_x, real_y); 8 ????ctx.lineTo(real_x - demo.wind * r.z * dpr * 1.5, real_y - ?????9 ????????rain_height * r.z);10 }11 ctx.lineWidth = Rain.width * dpr;12 ctx.strokeStyle = demo.rain_color;13 ctx.stroke();

1 for (var i = drops.length - 1; i >= 0; i--) {2 ????var d = drops[i];3 ????var real_x = d.x * dpr - d.radius;4 ????var real_y = d.y * dpr - d.radius;5 ????ctx.drawImage(d.canvas, real_x, real_y);6 }

 1 Rain.prototype.init = function() { 2 ????this.y = Math.random() * -100; 3 ????this.z = Math.random() * 0.5 + 0.5; 4 ????this.splashed = false; 5 } 6 Rain.prototype.recycle = function() { 7 ????demo.rain_pool.push(this); 8 } 9 // recycle rain particle and create a burst of droplets10 Rain.prototype.splash = function() {11 ????if (!this.splashed) {12 ????????this.splashed = true;13 ????????var drops = demo.drops;14 ????????var drop_pool = demo.drop_pool;15 16 ????????for (var i=0; i<16; i++) {17 ????????????var drop = drop_pool.pop() || new Drop();18 ????????????drops.push(drop);19 ????????????drop.init(this.x);20 ????????}21 ????}22 }

 1 // Droplet definition 2 function Drop() { 3 ????this.x = 0; 4 ????this.y = 0; 5 ????this.radius = Math.round(Math.random() * 2 + 1) * demo.dpr; 6 ????this.speed_x = 0; 7 ????this.speed_y = 0; 8 ????this.canvas = document.createElement(‘canvas‘); 9 ????this.ctx = this.canvas.getContext(‘2d‘);10 ????11 ????// render once and cache12 ????var diameter = this.radius * 2;13 ????this.canvas.width = diameter;14 ????this.canvas.height = diameter;15 16 ????var grd = this.ctx.createRadialGradient(this.radius, this.radius , 1, this.radius, this.radius, this.radius);17 ????grd.addColorStop(0, demo.rain_color);18 ????grd.addColorStop(1, demo.rain_color_clear);19 ????this.ctx.fillStyle = grd;20 ????this.ctx.fillRect(0, 0, diameter, diameter);21 }22 Drop.prototype.init = function(x) {23 ????this.x = x;24 ????this.y = demo.height;25 ????var angle = Math.random() * Math.PI - (Math.PI * 0.5);26 ????var speed = Math.random() * Drop.max_speed;27 ????this.speed_x = Math.sin(angle) * speed;28 ????this.speed_y = -Math.cos(angle) * speed;29 }30 Drop.prototype.recycle = function() {31 ????demo.drop_pool.push(this);32 }

 1 var Ticker = (function(){ 2 ????var PUBLIC_API = {}; 3 ?4 ????// public 5 ????// will call function reference repeatedly once registered, passing elapsed time and a lag multiplier as parameters 6 ????PUBLIC_API.addListener = function addListener(fn) { 7 ????????if (typeof fn !== ‘function‘) throw(‘Ticker.addListener() requires a function reference passed in.‘); 8 ?9 ????????listeners.push(fn);10 11 ????????// start frame-loop lazily12 ????????if (!started) {13 ????????????started = true;14 ????????????queueFrame();15 ????????}16 ????};17 18 ????// private19 ????var started = false;20 ????var last_timestamp = 0;21 ????var listeners = [];22 ????// queue up a new frame (calls frameHandler)23 ????function queueFrame() {24 ????????if (window.requestAnimationFrame) {25 ????????????requestAnimationFrame(frameHandler);26 ????????} else {27 ????????????webkitRequestAnimationFrame(frameHandler);28 ????????}29 ????}30 ????function frameHandler(timestamp) {31 ????????var frame_time = timestamp - last_timestamp;32 ????????last_timestamp = timestamp;33 ????????// make sure negative time isn‘t reported (first frame can be whacky)34 ????????if (frame_time < 0) {35 ????????????frame_time = 17;36 ????????}37 ????????// - cap minimum framerate to 15fps[~68ms] (assuming 60fps[~17ms] as ‘normal‘)38 ????????else if (frame_time > 68) {39 ????????????frame_time = 68;40 ????????}41 42 ????????// fire custom listeners43 ????????for (var i = 0, len = listeners.length; i < len; i++) {44 ????????????listeners[i].call(window, frame_time, frame_time / 16.67);45 ????????}46 ????????47 ????????// always queue another frame48 ????????queueFrame();49 ????}50 51 ????return PUBLIC_API;52 }());

 1 demo.step = function(time, lag) { 2 ????// localize common references 3 ????var demo = window.demo; 4 ????var speed = demo.speed; 5 ????var width = demo.width; 6 ????var height = demo.height; 7 ????var wind = demo.wind; 8 ????var rain = demo.rain; 9 ????var rain_pool = demo.rain_pool;10 ????var drops = demo.drops;11 ????var drop_pool = demo.drop_pool;12 ????13 ????// multiplier for physics14 ????var multiplier = speed * lag;15 ????16 ????// spawn drops17 ????demo.drop_time += time * speed;18 ????while (demo.drop_time > demo.drop_delay) {19 ????????demo.drop_time -= demo.drop_delay;20 ????????var new_rain = rain_pool.pop() || new Rain();21 ????????new_rain.init();22 ????????var wind_expand = Math.abs(height / new_rain.speed * wind); // expand spawn width as wind increases23 ????????var spawn_x = Math.random() * (width + wind_expand);24 ????????if (wind > 0) spawn_x -= wind_expand;25 ????????new_rain.x = spawn_x;26 ????????rain.push(new_rain);27 ????}28 ????29 ????// rain physics30 ????for (var i = rain.length - 1; i >= 0; i--) {31 ????????var r = rain[i];32 ????????r.y += r.speed * r.z * multiplier;33 ????????r.x += r.z * wind * multiplier;34 ????????// remove rain when out of view35 ????????if (r.y > height) {36 ????????????// if rain reached bottom of view, show a splash37 ????????????r.splash();38 ????????}39 ????????// recycle rain40 ????????if (r.y > height + Rain.height * r.z || (wind < 0 && r.x < wind) || (wind > 0 && r.x > width + wind)) {41 ????????????r.recycle();42 ????????????rain.splice(i, 1);43 ????????}44 ????}45 ????46 ????// splash drop physics47 ????var drop_max_speed = Drop.max_speed;48 ????for (var i = drops.length - 1; i >= 0; i--) {49 ????????var d = drops[i];50 ????????d.x += d.speed_x * multiplier;51 ????????d.y += d.speed_y * multiplier;52 ????????// apply gravity - magic number 0.3 represents a faked gravity constant53 ????????d.speed_y += 0.3 * multiplier;54 ????????// apply wind (but scale back the force)55 ????????d.speed_x += wind / 25 * multiplier;56 ????????if (d.speed_x < -drop_max_speed) {57 ????????????d.speed_x = -drop_max_speed;58 ????????}else if (d.speed_x > drop_max_speed) {59 ????????????d.speed_x = drop_max_speed;60 ????????}61 ????????// recycle62 ????????if (d.y > height + d.radius) {63 ????????????d.recycle();64 ????????????drops.splice(i, 1);65 ????????}66 ????}67 ????68 ????demo.draw();69 }

 1 // handle interaction 2 demo.mouseHandler = function(evt) { 3 ????demo.updateCursor(evt.clientX, evt.clientY); 4 } 5 demo.touchHandler = function(evt) { 6 ????evt.preventDefault(); 7 ????var touch = evt.touches[0]; 8 ????demo.updateCursor(touch.clientX, touch.clientY); 9 }10 demo.updateCursor = function(x, y) {11 ????x /= demo.width;12 ????y /= demo.height;13 ????var y_inverse = (1 - y);14 ????15 ????demo.drop_delay = y_inverse*y_inverse*y_inverse * 100 + 2;16 ????demo.wind = (x - 0.5) * 50;17 }18 19 document.addEventListener(‘mousemove‘, demo.mouseHandler);20 document.addEventListener(‘touchstart‘, demo.touchHandler);21 document.addEventListener(‘touchmove‘, demo.touchHandler);