make everything one function

js/particles.js

@@ -1,36 +1,37 @@
-/* create particles animation
+function particles() {
+    /* create particles animation
         based on the amazing tutorial by 'Franks Labratory'
         https://youtu.be/d620nV6bp0A
-*/
+    */
 
-const canvas = document.getElementById('particles');
+    const canvas = document.getElementById('particles');
-const canvasContext = canvas.getContext('2d');
+    const canvasContext = canvas.getContext('2d');
 
-// read css colour variables from root element
+    // read css colour variables from root element
-const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle');
+    const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle');
-const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke');
+    const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke');
-const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover');
+    const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover');
 
-canvas.width = window.innerWidth;
+    canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
+    canvas.height = window.innerHeight;
 
-let particlesArray;
+    let particlesArray;
 
-// get mouse position
+    // get mouse position
-let mousePosition ={
+    let mousePosition ={
         x: undefined,
         y: undefined,
         radius: (canvas.height / 80) * (canvas.width / 80)
-};
+    };
 
-// add mouse position event listener
+    // add mouse position event listener
-window.addEventListener('mousemove', function(event){
+    window.addEventListener('mousemove', function(event){
         mousePosition.x = event.x;
         mousePosition.y = event.y;
-});
+    });
 
-// create particle class
+    // create particle class
-class Particle{
+    class Particle{
         constructor(x, y, directionX, directionY, size, colour) {
             this.x = x;
             this.y = y;
@@ -55,7 +56,7 @@ class Particle{
             if (this.y > canvas.height || this.y < 0){
                 this.directionY = -this.directionY;
             }
-
+            /*
             // collision detection between mouse and particles
             let dx = mousePosition.x - this.x;
             let dy = mousePosition.y - this.y;
@@ -74,7 +75,7 @@ class Particle{
                     this.y -= 10;
                 }
             }
-
+            */
             // move particle
             this.x += this.directionX;
             this.y += this.directionY;
@@ -82,10 +83,10 @@ class Particle{
             // draw particle
             this.draw();
         }
-}
+    }
 
-// create particle array
+    // create particle array
-function init(){
+    function init(){
         particlesArray = [];
         let numberOfParticles = (canvas.height * canvas.width) / 9000;
         for (let i = 0; i < numberOfParticles * 2; i++){
@@ -98,10 +99,10 @@ function init(){
 
             particlesArray.push(new Particle(x, y, directionX, directionY, size, colour));
         }
-}
+    }
 
-// check if particles are close enough to connect to eachother
+    // check if particles are close enough to connect to eachother
-function connect(){
+    function connect(){
         let opacityValue = 1;
         for (let a = 0; a < particlesArray.length; a++){
             for (let b = a; b < particlesArray.length; b++){
@@ -128,10 +129,10 @@ function connect(){
                 }
             }
         }
-}
+    }
 
-// animation loop
+    // animation loop
-function animate(){
+    function animate(){
         requestAnimationFrame(animate);
         canvasContext.clearRect(0, 0, innerWidth, innerHeight);
 
@@ -139,21 +140,22 @@ function animate(){
             particlesArray[i].update();
         }
         connect();
-}
+    }
 
-// resize event
+    // resize event
-window.addEventListener('resize', function(){
+    window.addEventListener('resize', function(){
         canvas.width = innerWidth;
         canvas.height = innerHeight;
         mousePosition.radius = ((canvas.height / 80) * (canvas.width / 80));
         init();
-});
+    });
 
-// mouse-out event (mouse leaving the window)
+    // mouse-out event (mouse leaving the window)
-window.addEventListener('mouseout', function(){
+    window.addEventListener('mouseout', function(){
         mousePosition.x = undefined;
         mousePosition.y = undefined;
-});
+    });
 
-init();
+    init();
-animate();
+    animate();
+}