Removing pixel lookup on landed canvas

Author: jakearchibald

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);