353 lines
11 KiB
TypeScript
353 lines
11 KiB
TypeScript
export default class Particle {
|
|
getLimitedRandom = function (min: number, max: number, roundToInteger?: any) {
|
|
var number = Math.random() * (max - min) + min;
|
|
if (roundToInteger) {
|
|
number = Math.round(number);
|
|
}
|
|
return number;
|
|
};
|
|
|
|
returnRandomArrayitem = function (array: string | any[]) {
|
|
return array[Math.floor(Math.random() * array.length)];
|
|
};
|
|
|
|
constructor() {}
|
|
|
|
init() {
|
|
var ParticleNetworkAnimation: any, PNA: any;
|
|
ParticleNetworkAnimation = PNA = function () {};
|
|
|
|
PNA.prototype.init = function (element: any) {
|
|
console.log(this);
|
|
this.$el = document.getElementsByClassName(element);
|
|
|
|
this.container = element;
|
|
this.canvas = document.createElement('canvas');
|
|
this.sizeCanvas();
|
|
this.container.appendChild(this.canvas);
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.particleNetwork = new ParticleNetwork(this);
|
|
|
|
this.bindUiActions();
|
|
|
|
return this;
|
|
};
|
|
|
|
PNA.prototype.bindUiActions = function () {
|
|
(window as any).on('resize', () => {
|
|
// this.sizeContainer();
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.sizeCanvas();
|
|
this.particleNetwork.createParticles();
|
|
});
|
|
};
|
|
|
|
PNA.prototype.sizeCanvas = function () {
|
|
this.canvas.width = this.container.offsetWidth;
|
|
this.canvas.height = this.container.offsetHeight;
|
|
};
|
|
|
|
// PNA = {
|
|
// init: function (element: any) {
|
|
// console.log(element);
|
|
|
|
// this.$el = document.getElementsByClassName(element);
|
|
|
|
// this.container = element;
|
|
// this.canvas = document.createElement('canvas');
|
|
// this.sizeCanvas();
|
|
// this.container.appendChild(this.canvas);
|
|
// this.ctx = this.canvas.getContext('2d');
|
|
// // this.particleNetwork = new ParticleNetwork(this);
|
|
|
|
// this.bindUiActions();
|
|
|
|
// return this;
|
|
// },
|
|
// bindUiActions: function () {
|
|
// (window as any).on('resize', () => {
|
|
// this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
// // this.sizeContainer();
|
|
// this.sizeCanvas();
|
|
// this.particleNetwork.createParticles();
|
|
// });
|
|
// },
|
|
// sizeCanvas: function () {
|
|
// this.canvas.width = this.container.offsetWidth;
|
|
// this.canvas.height = this.container.offsetHeight;
|
|
// }
|
|
// };
|
|
console.log(PNA);
|
|
|
|
var Particle: any = (parent: any, x: any, y: any) => {
|
|
const network = parent;
|
|
const canvas = parent.canvas;
|
|
return {
|
|
ctx: parent.ctx,
|
|
particleColor: this.returnRandomArrayitem(network.options.particleColors),
|
|
radius: this.getLimitedRandom(1.5, 2.5),
|
|
opacity: 0,
|
|
x: x || Math.random() * canvas.width,
|
|
y: y || Math.random() * canvas.height,
|
|
velocity: {
|
|
x: (Math.random() - 0.5) * parent.options.velocity,
|
|
y: (Math.random() - 0.5) * parent.options.velocity
|
|
}
|
|
};
|
|
};
|
|
// console.log(Particle);
|
|
|
|
Particle.update = function () {
|
|
if (this.opacity < 1) {
|
|
this.opacity += 0.01;
|
|
} else {
|
|
this.opacity = 1;
|
|
}
|
|
// Change dir if outside map
|
|
if (this.x > this.canvas.width + 100 || this.x < -100) {
|
|
this.velocity.x = -this.velocity.x;
|
|
}
|
|
if (this.y > this.canvas.height + 100 || this.y < -100) {
|
|
this.velocity.y = -this.velocity.y;
|
|
}
|
|
|
|
// Update position
|
|
this.x += this.velocity.x;
|
|
this.y += this.velocity.y;
|
|
};
|
|
|
|
Particle.draw = function () {
|
|
// Draw particle
|
|
this.ctx.beginPath();
|
|
this.ctx.fillStyle = this.particleColor;
|
|
this.ctx.globalAlpha = this.opacity;
|
|
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
|
|
this.ctx.fill();
|
|
};
|
|
|
|
var ParticleNetwork: any = function (parent: { canvas: any; ctx: any; }) {
|
|
this.options = {
|
|
velocity: 1, // the higher the faster
|
|
density: 15000, // the lower the denser
|
|
netLineDistance: 200,
|
|
netLineColor: '#929292',
|
|
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
|
|
};
|
|
this.canvas = parent.canvas;
|
|
this.ctx = parent.ctx;
|
|
|
|
this.init();
|
|
};
|
|
|
|
ParticleNetwork.prototype.init = function () {
|
|
// Create particle objects
|
|
this.createParticles(true);
|
|
|
|
// Update canvas
|
|
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
|
|
|
this.bindUiActions();
|
|
};
|
|
|
|
ParticleNetwork.prototype.createParticles = function (isInitial) {
|
|
// Initialise / reset particles
|
|
var me = this;
|
|
this.particles = [];
|
|
var quantity = (this.canvas.width * this.canvas.height) / this.options.density;
|
|
|
|
if (isInitial) {
|
|
var counter = 0;
|
|
clearInterval(this.createIntervalId);
|
|
this.createIntervalId = setInterval(
|
|
function () {
|
|
if (counter < quantity - 1) {
|
|
// Create particle object
|
|
this.particles.push(new Particle(this));
|
|
} else {
|
|
clearInterval(me.createIntervalId);
|
|
}
|
|
counter++;
|
|
}.bind(this),
|
|
50
|
|
);
|
|
} else {
|
|
// Create particle objects
|
|
for (var i = 0; i < quantity; i++) {
|
|
this.particles.push(new Particle(this));
|
|
}
|
|
}
|
|
};
|
|
|
|
ParticleNetwork.prototype.createInteractionParticle = function () {
|
|
// Add interaction particle
|
|
this.interactionParticle = new Particle(this);
|
|
this.interactionParticle.velocity = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
this.particles.push(this.interactionParticle);
|
|
return this.interactionParticle;
|
|
};
|
|
|
|
ParticleNetwork.prototype.removeInteractionParticle = function () {
|
|
// Find it
|
|
var index = this.particles.indexOf(this.interactionParticle);
|
|
if (index > -1) {
|
|
// Remove it
|
|
this.interactionParticle = undefined;
|
|
this.particles.splice(index, 1);
|
|
}
|
|
};
|
|
|
|
ParticleNetwork.prototype.update = function () {
|
|
if (this.canvas) {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
this.ctx.globalAlpha = 1;
|
|
|
|
// Draw connections
|
|
for (var i = 0; i < this.particles.length; i++) {
|
|
for (var j = this.particles.length - 1; j > i; j--) {
|
|
var distance,
|
|
p1 = this.particles[i],
|
|
p2 = this.particles[j];
|
|
|
|
// check very simply if the two points are even a candidate for further measurements
|
|
distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
|
|
if (distance > this.options.netLineDistance) {
|
|
continue;
|
|
}
|
|
|
|
// the two points seem close enough, now let's measure precisely
|
|
distance = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
|
|
if (distance > this.options.netLineDistance) {
|
|
continue;
|
|
}
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.strokeStyle = this.options.netLineColor;
|
|
this.ctx.globalAlpha = ((this.options.netLineDistance - distance) / this.options.netLineDistance) * p1.opacity * p2.opacity;
|
|
this.ctx.lineWidth = 0.7;
|
|
this.ctx.moveTo(p1.x, p1.y);
|
|
this.ctx.lineTo(p2.x, p2.y);
|
|
this.ctx.stroke();
|
|
}
|
|
}
|
|
|
|
// Draw particles
|
|
for (var i = 0; i < this.particles.length; i++) {
|
|
this.particles[i].update();
|
|
this.particles[i].draw();
|
|
}
|
|
|
|
if (this.options.velocity !== 0) {
|
|
this.animationFrame = requestAnimationFrame(this.update.bind(this));
|
|
}
|
|
} else {
|
|
cancelAnimationFrame(this.animationFrame);
|
|
}
|
|
};
|
|
|
|
ParticleNetwork.prototype.bindUiActions = function () {
|
|
// Mouse / touch event handling
|
|
this.spawnQuantity = 3;
|
|
this.mouseIsDown = false;
|
|
this.touchIsMoving = false;
|
|
|
|
this.onMouseMove = function (e) {
|
|
if (!this.interactionParticle) {
|
|
this.createInteractionParticle();
|
|
}
|
|
this.interactionParticle.x = e.offsetX;
|
|
this.interactionParticle.y = e.offsetY;
|
|
}.bind(this);
|
|
|
|
this.onTouchMove = function (e) {
|
|
e.preventDefault();
|
|
this.touchIsMoving = true;
|
|
if (!this.interactionParticle) {
|
|
this.createInteractionParticle();
|
|
}
|
|
this.interactionParticle.x = e.changedTouches[0].clientX;
|
|
this.interactionParticle.y = e.changedTouches[0].clientY;
|
|
}.bind(this);
|
|
|
|
this.onMouseDown = function (e) {
|
|
this.mouseIsDown = true;
|
|
var counter = 0;
|
|
var quantity = this.spawnQuantity;
|
|
var intervalId = setInterval(
|
|
function () {
|
|
if (this.mouseIsDown) {
|
|
if (counter === 1) {
|
|
quantity = 1;
|
|
}
|
|
for (var i = 0; i < quantity; i++) {
|
|
if (this.interactionParticle) {
|
|
this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
|
|
}
|
|
}
|
|
} else {
|
|
clearInterval(intervalId);
|
|
}
|
|
counter++;
|
|
}.bind(this),
|
|
50
|
|
);
|
|
}.bind(this);
|
|
|
|
this.onTouchStart = function (e) {
|
|
e.preventDefault();
|
|
setTimeout(
|
|
function () {
|
|
if (!this.touchIsMoving) {
|
|
for (var i = 0; i < this.spawnQuantity; i++) {
|
|
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
|
|
}
|
|
}
|
|
}.bind(this),
|
|
200
|
|
);
|
|
}.bind(this);
|
|
|
|
this.onMouseUp = function (e) {
|
|
this.mouseIsDown = false;
|
|
}.bind(this);
|
|
|
|
this.onMouseOut = function (e) {
|
|
this.removeInteractionParticle();
|
|
}.bind(this);
|
|
|
|
this.onTouchEnd = function (e) {
|
|
e.preventDefault();
|
|
this.touchIsMoving = false;
|
|
this.removeInteractionParticle();
|
|
}.bind(this);
|
|
|
|
// this.canvas.addEventListener('mousemove', this.onMouseMove);
|
|
// this.canvas.addEventListener('touchmove', this.onTouchMove);
|
|
// this.canvas.addEventListener('mousedown', this.onMouseDown);
|
|
// this.canvas.addEventListener('touchstart', this.onTouchStart);
|
|
// this.canvas.addEventListener('mouseup', this.onMouseUp);
|
|
// this.canvas.addEventListener('mouseout', this.onMouseOut);
|
|
// this.canvas.addEventListener('touchend', this.onTouchEnd);
|
|
};
|
|
|
|
ParticleNetwork.prototype.unbindUiActions = function () {
|
|
if (this.canvas) {
|
|
// this.canvas.removeEventListener('mousemove', this.onMouseMove);
|
|
// this.canvas.removeEventListener('touchmove', this.onTouchMove);
|
|
// this.canvas.removeEventListener('mousedown', this.onMouseDown);
|
|
// this.canvas.removeEventListener('touchstart', this.onTouchStart);
|
|
// this.canvas.removeEventListener('mouseup', this.onMouseUp);
|
|
// this.canvas.removeEventListener('mouseout', this.onMouseOut);
|
|
// this.canvas.removeEventListener('touchend', this.onTouchEnd);
|
|
}
|
|
};
|
|
|
|
const pna = new PNA();
|
|
console.log(pna);
|
|
|
|
pna.init(document.getElementsByClassName('particle-network-animation')[0]);
|
|
}
|
|
}
|