asif/ab-particles
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

make everything one function

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-08 05:00:04 -06:00
parent 89263b1495
commit c0e4424257
1 changed files with 140 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

278
js/particles.js
View File

@ -1,159 +1,161 @@
/* create particles animation function particles() {
based on the amazing tutorial by 'Franks Labratory' /* create particles animation
https://youtu.be/d620nV6bp0A 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, x: undefined,
y: undefined, y: undefined,
radius: (canvas.height / 80) * (canvas.width / 80) 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.x = event.x;
mousePosition.y = event.y; mousePosition.y = event.y;
}); });
// create particle class // create particle class
class Particle{ class Particle{
constructor(x, y, directionX, directionY, size, colour) { constructor(x, y, directionX, directionY, size, colour) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.directionX = directionX; this.directionX = directionX;
this.directionY = directionY; this.directionY = directionY;
this.size = size; this.size = size;
this.colour = colour; 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;
} }
if (this.y > canvas.height || this.y < 0){ // method to draw individual particles
this.directionY = -this.directionY; 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
// collision detection between mouse and particles update(){
let dx = mousePosition.x - this.x; // check if particle is still within canvas
let dy = mousePosition.y - this.y; if (this.x > canvas.width || this.x < 0){
let distance = Math.sqrt((dx * dx) + (dy * dy)); this.directionX = -this.directionX;
if (distance < mousePosition.radius + this.size){
if (mousePosition.x < this.x && this.x < canvas.width - this.size * 10){
this.x += 10;
} }
if (mousePosition.x > this.x && this.x > this.size * 10){ if (this.y > canvas.height || this.y < 0){
this.x -= 10; this.directionY = -this.directionY;
} }
if (mousePosition.y < this.y && this.y < canvas.height - this.size * 10){ /*
this.y += 10; // collision detection between mouse and particles
} let dx = mousePosition.x - this.x;
if (mousePosition.y > this.y && this.y > this.size * 10){ let dy = mousePosition.y - this.y;
this.y -= 10; 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;
// 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 { if (mousePosition.x > this.x && this.x > this.size * 10){
canvasContext.globalAlpha = opacityValue; this.x -= 10;
canvasContext.strokeStyle = strokeColour; }
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 // animation loop
function animate(){ function animate(){
requestAnimationFrame(animate); requestAnimationFrame(animate);
canvasContext.clearRect(0, 0, innerWidth, innerHeight); canvasContext.clearRect(0, 0, innerWidth, innerHeight);
for (let i = 0; i < particlesArray.length; i++){ for (let i = 0; i < particlesArray.length; i++){
particlesArray[i].update(); particlesArray[i].update();
}
connect();
} }
connect();
}
// resize event // resize event
window.addEventListener('resize', function(){ window.addEventListener('resize', function(){
canvas.width = innerWidth; canvas.width = innerWidth;
canvas.height = innerHeight; canvas.height = innerHeight;
mousePosition.radius = ((canvas.height / 80) * (canvas.width / 80)); 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(); init();
}); animate();
}
// mouse-out event (mouse leaving the window)
window.addEventListener('mouseout', function(){
mousePosition.x = undefined;
mousePosition.y = undefined;
});
init();
animate();