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

Compare commits

base: asif:b3038644adc8b580bb30067068dbabf136715dc5
Branches Tags
asif:master
asif:v1.0
...
compare: asif:398e85a7b4d97d3a5ec04c4c535ca7f0cb48bac5
Branches Tags
asif:master
asif:v1.0

11 Commits
b3038644ad ... 398e85a7b4

Author SHA1 Message Date
Asif Bacchus 398e85a7b4 invert connectionDensity so it makes more sense 2020-04-08 07:52:15 -06:00
Asif Bacchus 07239b51b3 correction to numParticles check 2020-04-08 07:51:37 -06:00
Asif Bacchus 3983287420 allow for speed=0 2020-04-08 07:27:02 -06:00
Asif Bacchus 384589e9a2 add connection and connection density params 2020-04-08 07:21:24 -06:00
Asif Bacchus 99ddb6793f fix console message typos 2020-04-08 07:19:31 -06:00
Asif Bacchus 5871623a82 whoops! let parameters be implicitly defined! 2020-04-08 07:11:03 -06:00
Asif Bacchus f15eec2eb9 define parameters 2020-04-08 07:07:54 -06:00
Asif Bacchus 4ab3b04c9c function to check colours, console help displayed 2020-04-08 07:07:11 -06:00
Asif Bacchus 26cd9261e7 create func checkParams 
Better organization.
Added helpful console messages.
 2020-04-08 06:37:51 -06:00
Asif Bacchus e345b58555 change particles variable to avoid confusion 2020-04-08 06:31:19 -06:00
Asif Bacchus ba23f94eed hardcode speed division for consistency 2020-04-08 06:15:54 -06:00
2 changed files with 123 additions and 32 deletions
Show Stats 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(avoidMouse=false)'>
<body onload='particles(avoidMouse=false, speed=5)'>
<canvas id="particles"></canvas>
<!-- javascript -->
<script

153
js/particles.js
View File

@ -4,33 +4,14 @@ function particles(){
https://youtu.be/d620nV6bp0A
*/
// handle parameters
particles = (
typeof particles !== 'undefined'
&& Number.isFinite(particles)
) ? particles : 1;
sizeMultiplier = (
typeof sizeMultiplier !== 'undefined'
&& Number.isFinite(sizeMultiplier)
) ? sizeMultiplier : 3;
speed = (
typeof speed !== 'undefined'
&& Number.isFinite(speed)
&& (1 <= speed && speed <= 1000)
) ? (speed / 100) : 0.5;
avoidMouse = (
typeof avoidMouse !== 'undefined'
&& typeof avoidMouse === 'boolean'
) ? avoidMouse : true;
hover = (
typeof hover !== 'undefined'
&& typeof hover === 'boolean'
) ? hover : true;
// check parameters and use defaults as necessary
checkParams();
// read css colour variables from root element
const particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle');
const strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke');
const strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover');
// read css colour variables from root element, set defaults as necessary
let particleColour;
let strokeColour;
let strokeHoverColour;
checkColours();
// get canvas element, set context and size
const canvas = document.getElementById('particles');
@ -39,6 +20,7 @@ function particles(){
canvas.height = window.innerHeight;
let particlesArray;
speed = (speed !== 0) ? (speed / 100) : 0; // index speed to base 100 = 1
// get mouse position
let mousePosition ={
@ -102,8 +84,10 @@ function particles(){
}
// move particle
this.x += this.directionX * speed;
this.y += this.directionY * speed;
if (speed !== 0) {
this.x += this.directionX * speed;
this.y += this.directionY * speed;
}
// draw particle
this.draw();
@ -114,7 +98,7 @@ function particles(){
function init(){
particlesArray = [];
let numberOfParticles = (canvas.height * canvas.width) / 9000;
for (let i = 0; i < numberOfParticles * particles; i++){
for (let i = 0; i < numberOfParticles * numParticles; i++){
let size = (Math.random() * sizeMultiplier) + 1;
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2);
@ -132,7 +116,7 @@ function particles(){
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 / 10) * (canvas.height / 10)){
if (distance < (canvas.width / connectionDensity) * (canvas.height / connectionDensity)){
opacityValue = 1 - (distance / 20000);
// change colour on 'hover' if hover = true (default)
if(hover){
@ -172,7 +156,9 @@ function particles(){
for (let i = 0; i < particlesArray.length; i++){
particlesArray[i].update();
}
connect();
if(connections){
connect();
}
}
// resize event
@ -191,4 +177,109 @@ function particles(){
init();
animate();
function checkParams(){
if (typeof numParticles == 'undefined'){
numParticles = 1;
}
else if (Number.isFinite(numParticles)){
numParticles;
}
else{
numParticles = 1;
console.log("'numParticles' must be a finite number. Using default of '1'");
};
if (typeof sizeMultiplier == 'undefined'){
sizeMultiplier = 3;
}
else if (Number.isFinite(sizeMultiplier)){
sizeMultiplier;
}
else{
sizeMultiplier = 3;
console.log("'sizeMultiplier' must be a finite number. Using default of '3'");
};
if (typeof connections == 'undefined'){
connections = true;
}
else if (typeof connections === 'boolean'){
connections;
}
else{
connections = true;
console.log("'connections' must be either 'true' or 'false'. Using default of 'true'");
}
if (typeof connectionDensity == 'undefined'){
connectionDensity = (1 / 15) * 100;
}
else if (Number.isFinite(connectionDensity) && connectionDensity > 1){
connectionDensity = (1 / connectionDensity) * 100;
}
else{
connectionDensity = (1 / 15) * 100;
console.log("'connectionDensity' must be a finite number greater than 1. Using default of '15'");
}
if (typeof speed == 'undefined'){
speed = 50;
}
if (Number.isInteger(speed) && (0 <= speed && speed <= 1000)){
speed;
}
else{
speed = 50;
console.log("'speed' must be an integer between 1-1000. Using default of '50'");
};
if (typeof avoidMouse == 'undefined'){
avoidMouse = true;
}
else if (typeof avoidMouse === 'boolean'){
avoidMouse;
}
else{
avoidMouse = true;
console.log("'avoidMouse' must be either 'true' or 'false'. Using default of 'true'");
}
if (typeof hover == 'undefined'){
hover = true;
}
else if (typeof hover === 'boolean'){
hover;
}
else{
hover = true;
console.log("'hover' must be either 'true' or 'false'. Using default of 'true'");
}
}
function checkColours(){
if (getComputedStyle(document.documentElement).getPropertyValue('--col-particle').length === 0){
particleColour = '#000000';
console.log("CSS variable '--col-particle' is not set. Using 'black' (#000000).");
}
else{
particleColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle');
}
if (getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke').length === 0){
strokeColour = '#000000';
console.log("CSS variable '--col-particle-stroke' is not set. Using 'black' (#000000).");
}
else{
strokeColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke');
}
if (hover === true && getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover').length === 0){
strokeHoverColour = '#ff0000';
console.log("CSS variable '--col-particle-stroke-hover' is not set. Using 'red' (#ff0000).");
}
else{
strokeHoverColour = getComputedStyle(document.documentElement).getPropertyValue('--col-particle-stroke-hover');
}
}
}