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

set mouse avoidance via parameter, default enabled

Browse Source
This commit is contained in:
Asif Bacchus 2020-04-08 05:02:34 -06:00
parent 6b165f24da
commit bf5321eec5
2 changed files with 22 additions and 20 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"
crossorigin="anonymous"/>
</head>
<body onload='particles()'>
<body onload='particles(avoidMouse = false)'>
<canvas id="particles"></canvas>
<!-- javascript -->
<script

40
js/particles.js
View File

@ -1,4 +1,4 @@
function particles() {
function particles(avoidMouse = true) {
/* create particles animation
based on the amazing tutorial by 'Franks Labratory'
https://youtu.be/d620nV6bp0A
@ -56,26 +56,28 @@ function particles() {
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;
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;
}
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;
// avoid the mouse if avoidMouse = true (default)
if (avoidMouse){
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;
}
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;