fix(parallax-css-testpage): Some small performance tweaks.

src/parallax-css-testpage/particles.js

@@ -77,13 +77,17 @@ function Particle({ position, direction, size, color }) {
 
 
 function Update(scene, particle) {
-    // Cache object access
+    // Cache object access -> Performance
     var width  = scene.width
     var height = scene.height
+    var color = particle.color
     var particleSize = particle.size
     var particleSizeValue = particleSize.value
     var particleSizeBound = particleSize.bound
+    var particleSizeBoundMin  = particleSizeBound.min
+    var particleSizeBoundMax  = particleSizeBound.max
     var particleSizeStep      = particleSize.step
+    var particleSizeDirection = particleSize.direction
     var particlePosition   = particle.position
     var particlePositionX  = particlePosition.x
     var particlePositionY  = particlePosition.y
@@ -93,12 +97,12 @@ function Update(scene, particle) {
 
     // Animate the pulse effect of the particle
     //
-    var isMaxSize = particleSizeValue >= particleSizeBound.max
-    var isMinSize = particleSizeValue <= particleSizeBound.min
+    var isMaxSize = particleSizeValue > particleSizeBoundMax
+    var isMinSize = particleSizeValue < particleSizeBoundMin
     var sizeDirection =
         (isMaxSize || isMinSize)
-            ? particleSize.direction * -1
-            : particleSize.direction
+            ? -particleSizeDirection
+            : particleSizeDirection
     var sizeValue =
         particleSizeValue + particleSizeStep * sizeDirection
 
@@ -110,10 +114,10 @@ function Update(scene, particle) {
     var left   = particlePositionX - sizeOffset
     var right  = particlePositionX + sizeOffset
 
-    var isRightEdge  = (left > width)
-    var isLeftEdge   = (right < 0)
-    var isTopEdge    = (bottom < 0)
-    var isBottomEdge = (top > height)
+    var isRightEdge  = (left > (width+1))
+    var isLeftEdge   = (right < -1)
+    var isTopEdge    = (bottom < -1)
+    var isBottomEdge = (top > (height+1))
 
     var positionX =
         (isRightEdge)
@@ -121,49 +125,52 @@ function Update(scene, particle) {
             : (isLeftEdge)
                 ? width + sizeOffset
                 : particlePositionX + particleDirectionX
-
     var positionY =
         (isBottomEdge)
             ? -sizeOffset
             : (isTopEdge)
                 ? height + sizeOffset
                 : particlePositionY + particleDirectionY
-
-    return Particle({
+    return {
         position: {
             x: positionX,
             y: positionY,
         },
-        direction: {
-            x: particleDirectionX,
-            y: particleDirectionY,
-        },
+        direction: particleDirection,
         size: {
             value: sizeValue,
             bound: particleSizeBound,
             step:  particleSizeStep,
             direction: sizeDirection
         },
-        color: particle.color
-    })
+        color: color
+    }
 }
 
 function Draw(scene, particle) {
     // Cache object access
-    var size     = particle.size.value
-    var position = particle.position
+    var particlePosition = particle.position
+    var particlePositionX = particlePosition.x
+    var particlePositionY = particlePosition.y
 
-    // Draw calculations
+    // Draw calculations -- 
     var yOffset = scene.yOffset * scene.depthScale
+    var size    = particle.size.value
     var drawOffset = size * 0.5
-    var y = yOffset + (position.y - drawOffset)
+    var x = particlePositionX - drawOffset
+    var y = yOffset + (particlePositionY - drawOffset)
+
     var ctx = scene.ctx
-    var isVisible = (size > 0) && (y < window.innerHeight) && (y > 0)
+    // var isVisible = (size > 0 && y < window.innerHeight && y > 0)
+    var isVisible = (size > 0)
 
     // Draw
     if (isVisible) {
         ctx.fillStyle = particle.color
-        ctx.fillRect(position.x - drawOffset, y, size, size)
+        // Round to full integer to prevent subpixel rendering
+        //  - The ~~ operator is equivalent to Math.trunc() but faster.
+        // ctx.fillRect(~~x, ~~y, size, size)
+        ctx.fillRect(x, y, size, size)
     }
 }
 
@@ -201,7 +208,7 @@ function Animate(scene, particles) {
     })
 
     // Function to animate the next frame
-    return function () {
+    return function nextFrame() {
         return Animate(
             scene,
             updatedParticles
@@ -290,7 +297,7 @@ function Particles(configs) {
 
     function animate(rendererList) {
         if (isRunning) {
-            rafId = requestAnimationFrame(function () {
+            rafId = requestAnimationFrame(function doRaf() {
                 animate(
                     rendererList.map(function doRender(render) {
                         return render()
@@ -326,7 +333,7 @@ function Particles(configs) {
         init: init,
         run: run,
         stop: stop,
-        onScreenSizeChange: function () {
+        onScreenSizeChange: function onResize() {
             stop()
             if (!throttled) {
                 throttled = true