Add: Particle scaling depending on content size

src/parallax-css-testpage/particles.js

@@ -16,7 +16,7 @@
 function randomValue(min, max) {
     var value = (Math.random() * (+max - +min) + +min)
     // Prevent values that can be possible boring
-    return (value === 0 || value === 1)
+    return (min !== 0 && max !== 0 && (value === 0 || value === 1))
         ? randomValue(min, max)
         : value
 }
@@ -31,6 +31,17 @@ function getNodeHeight(node) {
     return (dimensions) ? dimensions.height : window.innerHeight
 }
 
+function calcParticleCount(scene, particleDensity) {
+    var referenceArea = 100 * 100 // 100px * 100px => px^2
+    var sceneVolume = scene.width * scene.height
+    var scale = 100
+    var particleFactor = (sceneVolume / referenceArea) / scale
+    var particleCount = Math.abs(Math.trunc(
+        particleFactor * particleDensity
+    ))
+    return particleCount || 0
+}
+
 
 //
 //  Data
@@ -233,14 +244,16 @@ function CreateScene({ canvasId, contentId, depth, fps }) {
 
 
 function CreateParticles(scene, {
-    amount,
+    density,
     color,
     size,
     speed,
     lifespan,
 }) {
     return Array.from(
-        { length: amount },
+        {
+            length: calcParticleCount(scene, density)
+        },
         function createParticle() {
             return Particle({
                 position:

src/parallax-css-testpage/template.html

@@ -26,6 +26,7 @@
         <div class="static full-bg bg-image"></div>
         <div class="static full-bg vcr-overlay"></div>
         <div class="static full-bg grid"></div>
+        <canvas id="debug-particles" class="static full-bg particles"></canvas>
         <canvas id="bg-particles" class="static full-bg particles"></canvas>
         <div class="static full-bg vignette"></div>
         <canvas id="fg-particles" class="static full-bg particles"></canvas>
@@ -94,7 +95,7 @@
                 depth: 2.5,
             },
             particles: {
-                amount: 50,
+                density: 15,
                 color: 'white',
                 size: 40,
                 speed: 0.5,
@@ -113,14 +114,13 @@
                 depth: 0.08,
             },
             particles: {
-                amount: 150,
+                density: 100,
                 color: 'white',
                 size: 7,
                 speed: 0.2,
                 lifespan: 8000 // in milliseconds
             }
         }
-
         var animation = Particles([
             fgParticleConfig,
             bgParticleConfig,