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

hover effect based on parameter (default enabled)

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-08 05:10:24 -06:00
parent bf5321eec5
commit 8d08d145c4
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -8,7 +8,7 @@
href="css/index.min.css" href="css/index.min.css"
crossorigin="anonymous"/> crossorigin="anonymous"/>
</head> </head>
<body onload='particles(avoidMouse = false)'> <body onload='particles(avoidMouse = false, hover = false)'>
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<!-- javascript --> <!-- javascript -->
<script <script

12
js/particles.js
View File

@ -1,4 +1,4 @@
function particles(avoidMouse = true) { function particles(avoidMouse = true, hover = true) {
/* create particles animation /* create particles animation
based on the amazing tutorial by 'Franks Labratory' based on the amazing tutorial by 'Franks Labratory'
https://youtu.be/d620nV6bp0A https://youtu.be/d620nV6bp0A
@ -111,14 +111,22 @@ function particles(avoidMouse = true) {
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);
// if the mouse is close to particles, change the line colour // change colour on 'hover' if hover = true (default)
if(hover){
let dx = mousePosition.x - particlesArray[a].x; let dx = mousePosition.x - particlesArray[a].x;
let dy = mousePosition.y - particlesArray[a].y; let dy = mousePosition.y - particlesArray[a].y;
let mouseDistance = Math.sqrt((dx * dx) + (dy * dy)); let mouseDistance = Math.sqrt((dx * dx) + (dy * dy));
if (mouseDistance < 200) { if (mouseDistance < 200) {
// change colour if mouse is close
canvasContext.globalAlpha = opacityValue; canvasContext.globalAlpha = opacityValue;
canvasContext.strokeStyle = strokeHoverColour; canvasContext.strokeStyle = strokeHoverColour;
} }
else {
// use regular stroke colour
canvasContext.globalAlpha = opacityValue;
canvasContext.strokeStyle = strokeColour;
}
}
else { else {
canvasContext.globalAlpha = opacityValue; canvasContext.globalAlpha = opacityValue;
canvasContext.strokeStyle = strokeColour; canvasContext.strokeStyle = strokeColour;