From c0e44242573069126df12b05d738feb141cffc59 Mon Sep 17 00:00:00 2001 From: Asif Bacchus Date: Wed, 8 Apr 2020 05:00:04 -0600 Subject: [PATCH] make everything one function --- js/particles.js | 278 ++++++++++++++++++++++++------------------------ 1 file changed, 140 insertions(+), 138 deletions(-) diff --git a/js/particles.js b/js/particles.js index 9a9e73f..34919ee 100644 --- a/js/particles.js +++ b/js/particles.js @@ -1,159 +1,161 @@ -/* create particles animation - based on the amazing tutorial by 'Franks Labratory' - https://youtu.be/d620nV6bp0A -*/ +function particles() { + /* create particles animation + based on the amazing tutorial by 'Franks Labratory' + https://youtu.be/d620nV6bp0A + */ -const canvas = document.getElementById('particles'); -const canvasContext = canvas.getContext('2d'); + const canvas = document.getElementById('particles'); + const canvasContext = canvas.getContext('2d'); -// read css colour variables from root element -const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle'); -const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke'); -const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover'); + // read css colour variables from root element + const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle'); + const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke'); + const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover'); -canvas.width = window.innerWidth; -canvas.height = window.innerHeight; + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; -let particlesArray; + let particlesArray; -// get mouse position -let mousePosition ={ - x: undefined, - y: undefined, - radius: (canvas.height / 80) * (canvas.width / 80) -}; + // get mouse position + let mousePosition ={ + x: undefined, + y: undefined, + radius: (canvas.height / 80) * (canvas.width / 80) + }; -// add mouse position event listener -window.addEventListener('mousemove', function(event){ - mousePosition.x = event.x; - mousePosition.y = event.y; -}); + // add mouse position event listener + window.addEventListener('mousemove', function(event){ + mousePosition.x = event.x; + mousePosition.y = event.y; + }); -// create particle class -class Particle{ - constructor(x, y, directionX, directionY, size, colour) { - this.x = x; - this.y = y; - this.directionX = directionX; - this.directionY = directionY; - this.size = size; - this.colour = colour; - } - // method to draw individual particles - draw(){ - canvasContext.beginPath(); - canvasContext.arc(this.x, this.y, this.size, 0, Math.PI * 2, false); - canvasContext.fillStyle = particleColour; - canvasContext.fill(); - } - // check particle position, mouse position, move particle and draw it - update(){ - // check if particle is still within canvas - if (this.x > canvas.width || this.x < 0){ - this.directionX = -this.directionX; + // create particle class + class Particle{ + constructor(x, y, directionX, directionY, size, colour) { + this.x = x; + this.y = y; + this.directionX = directionX; + this.directionY = directionY; + this.size = size; + this.colour = colour; } - if (this.y > canvas.height || this.y < 0){ - this.directionY = -this.directionY; + // method to draw individual particles + draw(){ + canvasContext.beginPath(); + canvasContext.arc(this.x, this.y, this.size, 0, Math.PI * 2, false); + canvasContext.fillStyle = particleColour; + canvasContext.fill(); } - - // collision detection between mouse and particles - let dx = mousePosition.x - this.x; - let dy = mousePosition.y - this.y; - let distance = Math.sqrt((dx * dx) + (dy * dy)); - if (distance < mousePosition.radius + this.size){ - if (mousePosition.x < this.x && this.x < canvas.width - this.size * 10){ - this.x += 10; + // check particle position, mouse position, move particle and draw it + update(){ + // check if particle is still within canvas + if (this.x > canvas.width || this.x < 0){ + this.directionX = -this.directionX; } - if (mousePosition.x > this.x && this.x > this.size * 10){ - this.x -= 10; + if (this.y > canvas.height || this.y < 0){ + this.directionY = -this.directionY; } - if (mousePosition.y < this.y && this.y < canvas.height - this.size * 10){ - this.y += 10; - } - if (mousePosition.y > this.y && this.y > this.size * 10){ - this.y -= 10; - } - } - - // move particle - this.x += this.directionX; - this.y += this.directionY; - - // draw particle - this.draw(); - } -} - -// create particle array -function init(){ - particlesArray = []; - let numberOfParticles = (canvas.height * canvas.width) / 9000; - for (let i = 0; i < numberOfParticles * 2; i++){ - let size = (Math.random() * 5) + 1; - let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2); - let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2); - let directionX = (Math.random() * 5) - 2.5; - let directionY = (Math.random() * 5) - 2.5; - let colour = '#8c5523'; - - particlesArray.push(new Particle(x, y, directionX, directionY, size, colour)); - } -} - -// check if particles are close enough to connect to eachother -function connect(){ - let opacityValue = 1; - for (let a = 0; a < particlesArray.length; a++){ - for (let b = a; b < particlesArray.length; b++){ - let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) + ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y)); - if (distance < (canvas.width / 7) * (canvas.height / 7)){ - opacityValue = 1 - (distance / 20000); - // if the mouse is close to particles, change the line colour - let dx = mousePosition.x - particlesArray[a].x; - let dy = mousePosition.y - particlesArray[a].y; - let mouseDistance = Math.sqrt((dx * dx) + (dy * dy)); - if (mouseDistance < 200) { - canvasContext.globalAlpha = opacityValue; - canvasContext.strokeStyle = strokeHoverColour; + /* + // collision detection between mouse and particles + let dx = mousePosition.x - this.x; + let dy = mousePosition.y - this.y; + let distance = Math.sqrt((dx * dx) + (dy * dy)); + if (distance < mousePosition.radius + this.size){ + if (mousePosition.x < this.x && this.x < canvas.width - this.size * 10){ + this.x += 10; } - else { - canvasContext.globalAlpha = opacityValue; - canvasContext.strokeStyle = strokeColour; + if (mousePosition.x > this.x && this.x > this.size * 10){ + this.x -= 10; + } + if (mousePosition.y < this.y && this.y < canvas.height - this.size * 10){ + this.y += 10; + } + if (mousePosition.y > this.y && this.y > this.size * 10){ + this.y -= 10; + } + } + */ + // move particle + this.x += this.directionX; + this.y += this.directionY; + + // draw particle + this.draw(); + } + } + + // create particle array + function init(){ + particlesArray = []; + let numberOfParticles = (canvas.height * canvas.width) / 9000; + for (let i = 0; i < numberOfParticles * 2; i++){ + let size = (Math.random() * 5) + 1; + let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2); + let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2); + let directionX = (Math.random() * 5) - 2.5; + let directionY = (Math.random() * 5) - 2.5; + let colour = '#8c5523'; + + particlesArray.push(new Particle(x, y, directionX, directionY, size, colour)); + } + } + + // check if particles are close enough to connect to eachother + function connect(){ + let opacityValue = 1; + for (let a = 0; a < particlesArray.length; a++){ + for (let b = a; b < particlesArray.length; b++){ + let distance = ((particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) + ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y)); + if (distance < (canvas.width / 7) * (canvas.height / 7)){ + opacityValue = 1 - (distance / 20000); + // if the mouse is close to particles, change the line colour + let dx = mousePosition.x - particlesArray[a].x; + let dy = mousePosition.y - particlesArray[a].y; + let mouseDistance = Math.sqrt((dx * dx) + (dy * dy)); + if (mouseDistance < 200) { + canvasContext.globalAlpha = opacityValue; + canvasContext.strokeStyle = strokeHoverColour; + } + else { + canvasContext.globalAlpha = opacityValue; + canvasContext.strokeStyle = strokeColour; + } + canvasContext.lineWidth = 1; + canvasContext.beginPath(); + canvasContext.moveTo(particlesArray[a].x, particlesArray[a].y); + canvasContext.lineTo(particlesArray[b].x, particlesArray[b].y); + canvasContext.stroke(); } - canvasContext.lineWidth = 1; - canvasContext.beginPath(); - canvasContext.moveTo(particlesArray[a].x, particlesArray[a].y); - canvasContext.lineTo(particlesArray[b].x, particlesArray[b].y); - canvasContext.stroke(); } } } -} -// animation loop -function animate(){ - requestAnimationFrame(animate); - canvasContext.clearRect(0, 0, innerWidth, innerHeight); + // animation loop + function animate(){ + requestAnimationFrame(animate); + canvasContext.clearRect(0, 0, innerWidth, innerHeight); - for (let i = 0; i < particlesArray.length; i++){ - particlesArray[i].update(); + for (let i = 0; i < particlesArray.length; i++){ + particlesArray[i].update(); + } + connect(); } - connect(); -} -// resize event -window.addEventListener('resize', function(){ - canvas.width = innerWidth; - canvas.height = innerHeight; - mousePosition.radius = ((canvas.height / 80) * (canvas.width / 80)); + // resize event + 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) + window.addEventListener('mouseout', function(){ + mousePosition.x = undefined; + mousePosition.y = undefined; + }); + init(); -}); - -// mouse-out event (mouse leaving the window) -window.addEventListener('mouseout', function(){ - mousePosition.x = undefined; - mousePosition.y = undefined; -}); - -init(); -animate(); + animate(); +} \ No newline at end of file