Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Particles background
<canvas id="canvas"></canvas>
class Particle {
constructor(context, x, y, d = 2, color = '#9294AE', movement = 10, lerp = 0.05) {
this.context = context;
this.x = this.currentX = this.targetX = x;
this.y = this.currentY = this.targetY = y;
this.d = d;
this.lerp = lerp;
this.color = color;
this.movement = movement;
}
draw() {
var context = this.context,
r = this.d / 2;
context.fillStyle = this.color;
context.beginPath();
var x = this.x - r,
y = this.y - r;
if (Math.abs(this.targetX - this.currentX) < this.movement * 0.1) {
this.targetX = x + Math.random() * this.movement * (Math.random() < 0.5 ? -1 : 1);
}
if (Math.abs(this.targetY - this.currentY) < this.movement * 0.1) {
this.targetY = y + Math.random() * this.movement * (Math.random() < 0.5 ? -1 : 1);
}
this.currentX += (this.targetX - this.currentX) * this.lerp;
this.currentY += (this.targetY - this.currentY) * this.lerp;
context.arc(this.currentX, this.currentY, r, 0, Math.PI * 2, false);
context.closePath();
context.fill();
}
setTarget(x, y) {
}
}
class Canvas {
constructor(element, particleSpacing = 50) {
this.canvas = element;
this.context = element.getContext('2d');
this.particleSpacing = particleSpacing;
window.addEventListener('resize', () => this.init());
this.init();
}
init () {
this.stop();
this.clear();
this.resize();
this.createParticles();
this.animate();
}
resize() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}
clear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
createParticles() {
var cols = Math.floor(this.canvas.width / this.particleSpacing),
rows = Math.floor(this.canvas.height / this.particleSpacing),
colGutter = (this.particleSpacing + (this.canvas.width - cols * this.particleSpacing)) / 2,
rowGutter = (this.particleSpacing + (this.canvas.height - rows * this.particleSpacing)) / 2;
this.particles = [];
for (let col = 0; col < cols; col++) {
for (let row = 0; row < rows; row++) {
let x = col * this.particleSpacing + colGutter,
y = row * this.particleSpacing + rowGutter,
particle = new Particle(this.context, x, y);
this.particles.push(particle);
}
}
}
draw() {
this.clear();
if (this.particles) {
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].draw();
}
}
}
animate() {
this.draw();
this.animationFrame = window.requestAnimationFrame(() => this.animate());
}
stop() {
window.cancelAnimationFrame(this.animationFrame);
}
}
var cnvs = new Canvas(document.getElementById('canvas'));
$('body').mousemove(function(e) {
var x = (e.pageX * -1 / 10);
$("#canvas").animate({
right: x + 'px'
}, 10);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment