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

change stroke colour when mouse nearby

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-08 04:18:55 -06:00
parent 507c5f6e38
commit e52855f954
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/particles.js
View File

@ -102,7 +102,16 @@ function connect(){
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)); 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)){ if (distance < (canvas.width / 7) * (canvas.height / 7)){
opacityValue = 1 - (distance / 20000); opacityValue = 1 - (distance / 20000);
canvasContext.strokeStyle = `rgba(140, 85, 31, ${opacityValue})`; // 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.strokeStyle = `rgba(60, 40, 15, ${opacityValue})`;
}
else {
canvasContext.strokeStyle = `rgba(140, 85, 31, ${opacityValue})`;
}
canvasContext.lineWidth = 1; canvasContext.lineWidth = 1;
canvasContext.beginPath(); canvasContext.beginPath();
canvasContext.moveTo(particlesArray[a].x, particlesArray[a].y); canvasContext.moveTo(particlesArray[a].x, particlesArray[a].y);