// Canvas Playground - Particle System
// Click anywhere to spawn particles!
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const particleCountEl = document.getElementById('particle-count')
const fpsEl = document.getElementById('fps')
const clearBtn = document.getElementById('btn-clear')
// High DPI support
function setupCanvas() {
const rect = canvas.getBoundingClientRect()
const dpr = window.devicePixelRatio || 1
canvas.width = rect.width * dpr
canvas.height = rect.height * dpr
ctx.scale(dpr, dpr)
canvas.style.width = rect.width + 'px'
canvas.style.height = rect.height + 'px'
}
setupCanvas()
window.addEventListener('resize', setupCanvas)
// Particle class
class Particle {
constructor(x, y) {
this.x = x
this.y = y
this.size = Math.random() * 8 + 4
this.speedX = (Math.random() - 0.5) * 4
this.speedY = (Math.random() - 0.5) * 4
this.life = 1
this.decay = Math.random() * 0.01 + 0.005
this.hue = Math.random() * 60 + 260 // Purple to pink range
}
update(mouseX, mouseY) {
// Move towards mouse slightly
if (mouseX && mouseY) {
const dx = mouseX - this.x
const dy = mouseY - this.y
const dist = Math.sqrt(dx * dx + dy * dy)
if (dist < 150) {
this.speedX += dx * 0.001
this.speedY += dy * 0.001