Skip to content

Instantly share code, notes, and snippets.

@martinnormark
Last active May 9, 2023 10:50
Show Gist options
  • Save martinnormark/c358610957baab3011e98288246d56e6 to your computer and use it in GitHub Desktop.
Save martinnormark/c358610957baab3011e98288246d56e6 to your computer and use it in GitHub Desktop.
var NUM_PARTICLES = ( ( ROWS = 100 ) * ( COLS = 300 ) ),
THICKNESS = Math.pow( 80, 2 ),
SPACING = 8,
MARGIN = 100,
DRAG = 0.95,
EASE = 0.25,
PARTICLE_SIZE = 5, // Size of each particle
PARTICLE_COLOR = {r: 0, g: 255, b: 0, a: 1}, // Color of each particle
DRAG = 0.95,
EASE = 0.25,
/*
used for sine approximation, but Math.sin in Chrome is still fast enough :)http://jsperf.com/math-sin-vs-sine-approximation
B = 4 / Math.PI,
C = -4 / Math.pow( Math.PI, 2 ),
P = 0.225,
*/
container,
particle,
canvas,
mouse,
stats,
list,
ctx,
tog,
man,
dx, dy,
mx, my,
d, t, f,
a, b,
i, n,
w, h,
p, s,
r, c
;
particle = {
vx: 0,
vy: 0,
x: 0,
y: 0
};
function init() {
container = document.getElementById( 'container' );
canvas = document.createElement( 'canvas' );
ctx = canvas.getContext( '2d' );
man = false;
tog = true;
list = [];
w = canvas.width = COLS * SPACING + MARGIN * 2;
h = canvas.height = ROWS * SPACING + MARGIN * 2;
container.style.marginLeft = Math.round( w * -0.5 ) + 'px';
container.style.marginTop = Math.round( h * -0.5 ) + 'px';
for ( i = 0; i < NUM_PARTICLES; i++ ) {
p = Object.create( particle );
p.x = p.ox = MARGIN + SPACING * ( i % COLS );
p.y = p.oy = MARGIN + SPACING * Math.floor( i / COLS );
list[i] = p;
}
container.addEventListener( 'mousemove', function(e) {
bounds = container.getBoundingClientRect();
mx = e.clientX - bounds.left;
my = e.clientY - bounds.top;
man = true;
});
if ( typeof Stats === 'function' ) {
document.body.appendChild( ( stats = new Stats() ).domElement );
}
container.appendChild( canvas );
}
function step() {
if ( stats ) stats.begin();
if ( tog = !tog ) {
if ( !man ) {
t = +new Date() * 0.001;
mx = w * 0.5 + ( Math.cos( t * 2.1 ) * Math.cos( t * 0.9 ) * w * 0.45 );
my = h * 0.5 + ( Math.sin( t * 3.2 ) * Math.tan( Math.sin( t * 0.8 ) ) * h * 0.45 );
}
for ( i = 0; i < NUM_PARTICLES; i++ ) {
p = list[i];
d = ( dx = mx - p.x ) * dx + ( dy = my - p.y ) * dy;
f = -THICKNESS / d;
if ( d < THICKNESS ) {
t = Math.atan2( dy, dx );
p.vx += f * Math.cos(t);
p.vy += f * Math.sin(t);
}
p.x += ( p.vx *= DRAG ) + (p.ox - p.x) * EASE;
p.y += ( p.vy *= DRAG ) + (p.oy - p.y) * EASE;
}
} else {
ctx.clearRect(0, 0, w, h); // Clear the canvas
ctx.fillStyle = `rgba(${PARTICLE_COLOR.r},${PARTICLE_COLOR.g},${PARTICLE_COLOR.b},${PARTICLE_COLOR.a})`; // Set color
for ( i = 0; i < NUM_PARTICLES; i++ ) {
p = list[i];
ctx.beginPath(); // Start a new path for the circle
ctx.arc(p.x, p.y, PARTICLE_SIZE / 2, 0, Math.PI * 2, false); // Draw a circle
ctx.closePath(); // Close the path
ctx.fill(); // Fill the circle
}
}
if ( stats ) stats.end();
requestAnimationFrame( step );
}
init();
step();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment