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" href="css/index.min.css"
crossorigin="anonymous"/> crossorigin="anonymous"/>
</head> </head>
<body onload='particles()'> <body onload='particles(avoidMouse = false)'>
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
<!-- javascript --> <!-- javascript -->
<script <script

40
js/particles.js
View File

@ -1,4 +1,4 @@
function particles() { function particles(avoidMouse = 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
@ -56,26 +56,28 @@ function particles() {
if (this.y > canvas.height || this.y < 0){ if (this.y > canvas.height || this.y < 0){
this.directionY = -this.directionY; this.directionY = -this.directionY;
} }
/*
// collision detection between mouse and particles // avoid the mouse if avoidMouse = true (default)
let dx = mousePosition.x - this.x; if (avoidMouse){
let dy = mousePosition.y - this.y; let dx = mousePosition.x - this.x;
let distance = Math.sqrt((dx * dx) + (dy * dy)); let dy = mousePosition.y - this.y;
if (distance < mousePosition.radius + this.size){ let distance = Math.sqrt((dx * dx) + (dy * dy));
if (mousePosition.x < this.x && this.x < canvas.width - this.size * 10){ if (distance < mousePosition.radius + this.size){
this.x += 10; 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.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 < canvas.height - this.size * 10){
} this.y += 10;
if (mousePosition.y > this.y && this.y > this.size * 10){ }
this.y -= 10; if (mousePosition.y > this.y && this.y > this.size * 10){
this.y -= 10;
}
} }
} }
*/
// move particle // move particle
this.x += this.directionX; this.x += this.directionX;
this.y += this.directionY; this.y += this.directionY;