From 29f3976a75480027448d1baf1491ce6c9634ce01 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Tue, 18 Dec 2012 15:49:39 +0000 Subject: [PATCH] Removing pixel lookup on landed canvas --- www/static/js/snow.js | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/www/static/js/snow.js b/www/static/js/snow.js index 831b65c..69c4751 100644 --- a/www/static/js/snow.js +++ b/www/static/js/snow.js @@ -34,7 +34,7 @@ (function() { var canvas = document.createElement('canvas'); - var context = canvas.getContext && canvas.getContext('2d'); + var context = canvas.getContext('2d'); var settleCanvas = document.createElement('canvas'); var settleContext = context && settleCanvas.getContext('2d'); var canvasStyle = canvas.style; @@ -44,11 +44,33 @@ var snowflakesPerPixelPerSecond = 0.02; var PIx2 = Math.PI*2; var assumedFps = 60; - + var settlePoint; + function resizeCanvas() { + settlePoint = Array(html.clientWidth); settleCanvas.width = canvas.width = html.clientWidth; settleCanvas.height = canvas.height = html.clientHeight; } + + function updateSettlePoints(flake) { + var size = flake.size * 0.8; // reduce coral effect + var xStart = Math.floor(flake.x - size); + var range = size * 2; + var newY; + + if (xStart < 0) { + range += xStart; + xStart = 0; + } + else if (xStart + range > settlePoint.length) { + range -= xStart + range - settlePoint.length; + } + + for (var i = 0; i < range; i++) { + newY = flake.y - (size * Math.cos( (i/range) * Math.PI - (Math.PI/2) )); + settlePoint[i + xStart] = Math.min(settlePoint[i + xStart] || Infinity, newY); + } + } var flakesToCreate = 0; function frame() { @@ -79,8 +101,12 @@ flake.tick(); // splice flake if it's now out of rendering zone - if (flake.y > canvas.height || settleContext.getImageData(flake.x, flake.y, 1, 1).data[3] > 200) { + if (flake.y >= canvas.height || flake.y >= settlePoint[Math.floor(flake.x)]) { activeFlakes.splice(i, 1); + // this flake effects our settle points + if (flake.alpha > 0.8) { + updateSettlePoints(flake); + } settleContext.fillStyle='rgba(255, 255, 255, ' + flake.alpha + ')'; settleContext.beginPath(); settleContext.arc(flake.x, flake.y, flake.size, 0, PIx2, true);