since making the site a couple months ago, i haven't touched it so let's go!
# updating `particles.js` this is my fun little particle snow-globe background
here's generally what we started with (hand-wavy): ```js // Constants (PARTICLE_COUNT, EXPLOSION_RADIUS, etc.) Particle: {x, y, vx, vy, radius, color, mass, update()} ParticleSystem: init(): setup canvas, create particles, bind events helpers: resize, gravity, mouse interaction animate() { this.drawConnections(); this.particles.forEach(particle => {...}); this.applyMouseForce(); requestAnimationFrame(() => this.animate()); } } ``` but basically we have a bunch of balls going around according to newtonian mechanics, and when you click, it exerts a radial, impinging force. particles form bonds when sufficiently close.
### some goals: - [ ] ~~make it TypeScript~~ - [x] add jsdoc comments - [x] add cluster awareness via union-find ```js ParticleSystem: ... updateParticles() { const particleCount = this.particles.length; for (let i = 0; i < particleCount; i++) { for (let j = i + 1; j < particleCount; j++) { this.applyGravity(this.particles[i], this.particles[j]); } this.particles[i].update({ x: this.canvas.width, y: this.canvas.height }); } const uf = detectClusters(this.particles, INTERACTION_RADIUS); applyClusterProperties(this.particles, uf); } ``` - [x] add drag - [x] add elasticity ```js class Particle { constructor(position, radius, color) { this.position = position; this.velocity = { x: (Math.random() - 0.5) * INITIAL_VELOCITY_RANGE, y: (Math.random() - 0.5) * INITIAL_VELOCITY_RANGE }; this.radius = radius; this.color = color; this.mass = Math.PI * radius * radius; this.originalColor = color; } update(bounds) { this.position.x += this.velocity.x; this.position.y += this.velocity.y; // Apply drag const speed = Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2); const dragForce = DRAG_CONSTANT * speed ** 2; const dragX = this.velocity.x * dragForce / speed; const dragY = this.velocity.y * dragForce / speed; this.velocity.x -= dragX / this.mass; this.velocity.y -= dragY / this.mass; // Elastic collision with walls if (this.position.x - this.radius < 0 || this.position.x + this.radius > bounds.x) { this.velocity.x *= -ELASTICITY_CONSTANT; this.position.x = Math.max(this.radius, Math.min(bounds.x - this.radius, this.position.x)); } if (this.position.y - this.radius < 0 || this.position.y + this.radius > bounds.y) { this.velocity.y *= -ELASTICITY_CONSTANT; this.position.y = Math.max(this.radius, Math.min(bounds.y - this.radius, this.position.y)); } } } ```

# ooh boy this feels scandalous but also so good ```js class ParticleSystem { ... constructor(canvas) { this.canvas = canvas; this.ctx = this.canvas.getContext('2d'); this.canvas.insertAdjacentHTML('beforebegin', `

`); ... } } ```