Compare commits
11 Commits
b3038644ad
...
398e85a7b4
Author | SHA1 | Date |
---|---|---|
Asif Bacchus | 398e85a7b4 | |
Asif Bacchus | 07239b51b3 | |
Asif Bacchus | 3983287420 | |
Asif Bacchus | 384589e9a2 | |
Asif Bacchus | 99ddb6793f | |
Asif Bacchus | 5871623a82 | |
Asif Bacchus | f15eec2eb9 | |
Asif Bacchus | 4ab3b04c9c | |
Asif Bacchus | 26cd9261e7 | |
Asif Bacchus | e345b58555 | |
Asif Bacchus | ba23f94eed |
|
@ -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
|
||||
|
|
147
js/particles.js
147
js/particles.js
|
@ -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
|
||||
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,8 +156,10 @@ function particles(){
|
|||
for (let i = 0; i < particlesArray.length; i++){
|
||||
particlesArray[i].update();
|
||||
}
|
||||
if(connections){
|
||||
connect();
|
||||
}
|
||||
}
|
||||
|
||||
// resize event
|
||||
window.addEventListener('resize', function(){
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue