update minified script, checksums and html SRI

Based on 1% of window width.
numParticles is a straight multiplier, so increment percentage. Simple.

index.html

@@ -17,8 +17,9 @@
     <canvas id="particles"></canvas>
 <!-- javascript -->
 <script
-    src="js/particles.min.js"
+    src="js/ab-particles.min.js"
     crossorigin="anonymous"
+    integrity="sha384-GyB27X5DbGI7EaqeCZWH6nlg1xEwP8P++83axSmabShThx8C0IqIDGkU6bf72iJj"
     async>
 </script>
 <!-- end javascript -->

js/ab-particles.js

@@ -1,6 +1,6 @@
 function particles(){
     /* particles animation
-        based on the amazing tutorial by 'Franks Laboratory'
+        inspired by the amazing tutorial by 'Franks Laboratory'
         https://youtu.be/d620nV6bp0A
     */
 
@@ -21,6 +21,10 @@ function particles(){
 
     let particlesArray;
     speed = (speed !== 0) ? (speed / 100) : 0; // index speed to base 100 = 1
+    opacity = opacity / 100;
+
+    // set overall canvas opacity
+    canvas.style.opacity = opacity;
 
     // get mouse position
     let mousePosition ={
@@ -97,7 +101,8 @@ function particles(){
     // create particle array
     function init(){
         particlesArray = [];
-        let numberOfParticles = (canvas.height * canvas.width) / 9000;
+        //let numberOfParticles = (canvas.height * canvas.width) / 9000;
+        let numberOfParticles = canvas.width * 0.01;
         for (let i = 0; i < numberOfParticles * numParticles; i++){
             let size = (Math.random() * sizeMultiplier) + 1;
             let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
@@ -110,7 +115,7 @@ function particles(){
         }
     }
 
-    // check if particles are close enough to connect to eachother
+    // check if particles are close enough to connect to each other
     function connect(){
         let opacityValue = 1;
         for (let a = 0; a < particlesArray.length; a++){
@@ -138,7 +143,7 @@ function particles(){
                         canvasContext.globalAlpha = opacityValue;
                         canvasContext.strokeStyle = strokeColour;
                     }
-                    canvasContext.lineWidth = 1;
+                    canvasContext.lineWidth = width;
                     canvasContext.beginPath();
                     canvasContext.moveTo(particlesArray[a].x, particlesArray[a].y);
                     canvasContext.lineTo(particlesArray[b].x, particlesArray[b].y);
@@ -179,26 +184,48 @@ function particles(){
     animate();
 
     function checkParams(){
+        if (typeof opacity == 'undefined'){
+            opacity = 100;
+        }
+        else if (Number.isFinite(opacity) && (0 <= opacity && opacity <= 100)){
+            opacity;
+        }
+        else{
+            opacity = 100;
+            console.log("'opacity' must be a finite number between 0 and 100. Using default of '100'.");
+        };
+
         if (typeof numParticles == 'undefined'){
-            numParticles = 1;
+            numParticles = 10;
         }
         else if (Number.isFinite(numParticles)){
             numParticles;
         }
         else{
-            numParticles = 1;
-            console.log("'numParticles' must be a finite number. Using default of '1'.");
+            numParticles = 10;
+            console.log("'numParticles' must be a finite number. Using default of '5'.");
         };
 
         if (typeof sizeMultiplier == 'undefined'){
-            sizeMultiplier = 3;
+            sizeMultiplier = 5;
         }
         else if (Number.isFinite(sizeMultiplier)){
             sizeMultiplier;
         }
         else{
-            sizeMultiplier = 3;
-            console.log("'sizeMultiplier' must be a finite number. Using default of '3'.");
+            sizeMultiplier = 5;
+            console.log("'sizeMultiplier' must be a finite number. Using default of '5'.");
+        };
+
+        if (typeof width == 'undefined'){
+            width = 1;
+        }
+        else if (Number.isInteger(width) && width > 0){
+            width;
+        }
+        else{
+            width = 1;
+            console.log("'width' must be an integer number of pixels greater than 0. Using default of '1'.");
         };
 
         if (typeof connections == 'undefined'){

js/ab-particles.min.js

@@ -0,0 +1 @@
+function particles(){let e,t,i;!function(){"undefined"==typeof opacity?opacity=100:Number.isFinite(opacity)&&0<=opacity&&opacity<=100?opacity:(opacity=100,console.log("'opacity' must be a finite number between 0 and 100. Using default of '100'."));"undefined"==typeof numParticles?numParticles=10:Number.isFinite(numParticles)?numParticles:(numParticles=10,console.log("'numParticles' must be a finite number. Using default of '5'."));"undefined"==typeof sizeMultiplier?sizeMultiplier=5:Number.isFinite(sizeMultiplier)?sizeMultiplier:(sizeMultiplier=5,console.log("'sizeMultiplier' must be a finite number. Using default of '5'."));"undefined"==typeof width?width=1:Number.isInteger(width)&&width>0?width:(width=1,console.log("'width' must be an integer number of pixels greater than 0. Using default of '1'."));"undefined"==typeof connections?connections=!0:"boolean"==typeof connections?connections:(connections=!0,console.log("'connections' must be either 'true' or 'false'. Using default of 'true'."));"undefined"==typeof connectionDensity?connectionDensity=1/15*100:Number.isFinite(connectionDensity)&&connectionDensity>1?connectionDensity=1/connectionDensity*100:(connectionDensity=1/15*100,console.log("'connectionDensity' must be a finite number greater than 1. Using default of '15'."));"undefined"==typeof speed&&(speed=50);Number.isInteger(speed)&&0<=speed&&speed<=1e3?speed:(speed=50,console.log("'speed' must be an integer between 1-1000. Using default of '50'."));"undefined"==typeof avoidMouse?avoidMouse=!0:"boolean"==typeof avoidMouse?avoidMouse:(avoidMouse=!0,console.log("'avoidMouse' must be either 'true' or 'false'. Using default of 'true'."));"undefined"==typeof hover?hover=!0:"boolean"==typeof hover?hover:(hover=!0,console.log("'hover' must be either 'true' or 'false'. Using default of 'true'."))}(),function(){0===getComputedStyle(document.documentElement).getPropertyValue("--col-particle").length?(e="#000000",console.log("CSS variable '--col-particle' is not set. Using 'black' (#000000).")):e=getComputedStyle(document.documentElement).getPropertyValue("--col-particle");0===getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke").length?(t="#000000",console.log("CSS variable '--col-particle-stroke' is not set. Using 'black' (#000000).")):t=getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke");!0===hover&&0===getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke-hover").length?(i="#ff0000",console.log("CSS variable '--col-particle-stroke-hover' is not set. Using 'red' (#ff0000).")):i=getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke-hover")}();const o=document.getElementById("particles"),n=o.getContext("2d");let s;o.width=window.innerWidth,o.height=window.innerHeight,speed=0!==speed?speed/100:0,opacity/=100,o.style.opacity=opacity;let l={x:void 0,y:void 0,radius:o.height/80*(o.width/80)};window.addEventListener("mousemove",function(e){l.x=e.x,l.y=e.y});class r{constructor(e,t,i,o,n,s){this.x=e,this.y=t,this.directionX=i,this.directionY=o,this.size=n,this.colour=s}draw(){n.beginPath(),n.arc(this.x,this.y,this.size,0,2*Math.PI,!1),n.fillStyle=e,n.fill()}update(){if((this.x>o.width||this.x<0)&&(this.directionX=-this.directionX),(this.y>o.height||this.y<0)&&(this.directionY=-this.directionY),avoidMouse){let e=l.x-this.x,t=l.y-this.y;Math.sqrt(e*e+t*t)<l.radius+this.size&&(l.x<this.x&&this.x<o.width-10*this.size&&(this.x+=10),l.x>this.x&&this.x>10*this.size&&(this.x-=10),l.y<this.y&&this.y<o.height-10*this.size&&(this.y+=10),l.y>this.y&&this.y>10*this.size&&(this.y-=10))}0!==speed&&(this.x+=this.directionX*speed,this.y+=this.directionY*speed),this.draw()}}function d(){s=[];let e=.01*o.width;for(let t=0;t<e*numParticles;t++){let e=Math.random()*sizeMultiplier+1,t=Math.random()*(innerWidth-2*e-2*e)+2*e,i=Math.random()*(innerHeight-2*e-2*e)+2*e,o=5*Math.random()-2.5,n=5*Math.random()-2.5,l="#8c5523";s.push(new r(t,i,o,n,e,l))}}window.addEventListener("resize",function(){o.width=innerWidth,o.height=innerHeight,l.radius=o.height/80*(o.width/80),d()}),window.addEventListener("mouseout",function(){l.x=void 0,l.y=void 0}),d(),function e(){requestAnimationFrame(e),n.clearRect(0,0,innerWidth,innerHeight);for(let e=0;e<s.length;e++)s[e].update();connections&&function(){let e=1;for(let r=0;r<s.length;r++)for(let d=r;d<s.length;d++){let c=(s[r].x-s[d].x)*(s[r].x-s[d].x)+(s[r].y-s[d].y)*(s[r].y-s[d].y);if(c<o.width/connectionDensity*(o.height/connectionDensity)){if(e=1-c/2e4,hover){let o=l.x-s[r].x,d=l.y-s[r].y;Math.sqrt(o*o+d*d)<200?(n.globalAlpha=e,n.strokeStyle=i):(n.globalAlpha=e,n.strokeStyle=t)}else n.globalAlpha=e,n.strokeStyle=t;n.lineWidth=width,n.beginPath(),n.moveTo(s[r].x,s[r].y),n.lineTo(s[d].x,s[d].y),n.stroke()}}}()}()}

js/integrity.sha384

@@ -0,0 +1,5 @@
+ab-particles.js
+sha384-Nr51BwOjKP19Q/gNGZWRJpRLfAqmN4GmM/VtlRUaaKIou2AJqYLbw/VzbJBeN1eO
+
+ab-particles.min.js
+sha384-GyB27X5DbGI7EaqeCZWH6nlg1xEwP8P++83axSmabShThx8C0IqIDGkU6bf72iJj

js/particles.min.js

@@ -1 +0,0 @@
-function particles(){let e,t,i;!function(){"undefined"==typeof numParticles?numParticles=1:Number.isFinite(numParticles)?numParticles:(numParticles=1,console.log("'numParticles' must be a finite number. Using default of '1'."));"undefined"==typeof sizeMultiplier?sizeMultiplier=3:Number.isFinite(sizeMultiplier)?sizeMultiplier:(sizeMultiplier=3,console.log("'sizeMultiplier' must be a finite number. Using default of '3'."));"undefined"==typeof connections?connections=!0:"boolean"==typeof connections?connections:(connections=!0,console.log("'connections' must be either 'true' or 'false'. Using default of 'true'."));"undefined"==typeof connectionDensity?connectionDensity=1/15*100:Number.isFinite(connectionDensity)&&connectionDensity>1?connectionDensity=1/connectionDensity*100:(connectionDensity=1/15*100,console.log("'connectionDensity' must be a finite number greater than 1. Using default of '15'."));"undefined"==typeof speed&&(speed=50);Number.isInteger(speed)&&0<=speed&&speed<=1e3?speed:(speed=50,console.log("'speed' must be an integer between 1-1000. Using default of '50'."));"undefined"==typeof avoidMouse?avoidMouse=!0:"boolean"==typeof avoidMouse?avoidMouse:(avoidMouse=!0,console.log("'avoidMouse' must be either 'true' or 'false'. Using default of 'true'."));"undefined"==typeof hover?hover=!0:"boolean"==typeof hover?hover:(hover=!0,console.log("'hover' must be either 'true' or 'false'. Using default of 'true'."))}(),function(){0===getComputedStyle(document.documentElement).getPropertyValue("--col-particle").length?(e="#000000",console.log("CSS variable '--col-particle' is not set. Using 'black' (#000000).")):e=getComputedStyle(document.documentElement).getPropertyValue("--col-particle");0===getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke").length?(t="#000000",console.log("CSS variable '--col-particle-stroke' is not set. Using 'black' (#000000).")):t=getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke");!0===hover&&0===getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke-hover").length?(i="#ff0000",console.log("CSS variable '--col-particle-stroke-hover' is not set. Using 'red' (#ff0000).")):i=getComputedStyle(document.documentElement).getPropertyValue("--col-particle-stroke-hover")}();const n=document.getElementById("particles"),o=n.getContext("2d");let s;n.width=window.innerWidth,n.height=window.innerHeight,speed=0!==speed?speed/100:0;let l={x:void 0,y:void 0,radius:n.height/80*(n.width/80)};window.addEventListener("mousemove",function(e){l.x=e.x,l.y=e.y});class r{constructor(e,t,i,n,o,s){this.x=e,this.y=t,this.directionX=i,this.directionY=n,this.size=o,this.colour=s}draw(){o.beginPath(),o.arc(this.x,this.y,this.size,0,2*Math.PI,!1),o.fillStyle=e,o.fill()}update(){if((this.x>n.width||this.x<0)&&(this.directionX=-this.directionX),(this.y>n.height||this.y<0)&&(this.directionY=-this.directionY),avoidMouse){let e=l.x-this.x,t=l.y-this.y;Math.sqrt(e*e+t*t)<l.radius+this.size&&(l.x<this.x&&this.x<n.width-10*this.size&&(this.x+=10),l.x>this.x&&this.x>10*this.size&&(this.x-=10),l.y<this.y&&this.y<n.height-10*this.size&&(this.y+=10),l.y>this.y&&this.y>10*this.size&&(this.y-=10))}0!==speed&&(this.x+=this.directionX*speed,this.y+=this.directionY*speed),this.draw()}}function c(){s=[];let e=n.height*n.width/9e3;for(let t=0;t<e*numParticles;t++){let e=Math.random()*sizeMultiplier+1,t=Math.random()*(innerWidth-2*e-2*e)+2*e,i=Math.random()*(innerHeight-2*e-2*e)+2*e,n=5*Math.random()-2.5,o=5*Math.random()-2.5,l="#8c5523";s.push(new r(t,i,n,o,e,l))}}window.addEventListener("resize",function(){n.width=innerWidth,n.height=innerHeight,l.radius=n.height/80*(n.width/80),c()}),window.addEventListener("mouseout",function(){l.x=void 0,l.y=void 0}),c(),function e(){requestAnimationFrame(e),o.clearRect(0,0,innerWidth,innerHeight);for(let e=0;e<s.length;e++)s[e].update();connections&&function(){let e=1;for(let r=0;r<s.length;r++)for(let c=r;c<s.length;c++){let d=(s[r].x-s[c].x)*(s[r].x-s[c].x)+(s[r].y-s[c].y)*(s[r].y-s[c].y);if(d<n.width/connectionDensity*(n.height/connectionDensity)){if(e=1-d/2e4,hover){let n=l.x-s[r].x,c=l.y-s[r].y;Math.sqrt(n*n+c*c)<200?(o.globalAlpha=e,o.strokeStyle=i):(o.globalAlpha=e,o.strokeStyle=t)}else o.globalAlpha=e,o.strokeStyle=t;o.lineWidth=1,o.beginPath(),o.moveTo(s[r].x,s[r].y),o.lineTo(s[c].x,s[c].y),o.stroke()}}}()}()}

scss/_palette.scss

@@ -1,9 +1,9 @@
 // colours used thoughout site
 :root {
-    --col-bg-canvas: #2c2830;
-    --col-particle: #ebe7c5;
-    --col-particle-stroke: #692e50;
-    --col-particle-stroke-hover: #9aa68b;
+    --col-bg: #212121;
+    --col-particle: #536878;
+    --col-particle-stroke: #035096;
+    --col-particle-stroke-hover: #0892d0;
 
     --col-text: #ebe7c5;
 }

scss/index.scss

@@ -8,6 +8,7 @@ import partials
 
 body {
     color: var(--col-text);
+    background-color: var(--col-bg);
 }
 
 h1 {
@@ -32,6 +33,5 @@ p {
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--col-bg-canvas);
     z-index: -999;
 }