🎨WebGL & Canvas Experiments

Explore creative coding with interactive Canvas animations. Build particle systems, wave animations, and visual effects from scratch.

Visual Effect

Create mesmerizing particle effects with Canvas API

Interactive Canvas

Interactive Particle System! Move your mouse to emit particles. Click anywhere for a particle burst! Adjust controls to create different effects.

Active Particles

Target FPS

Particle Size

3px

Speed

Animation Controls

Running

Particle Count100

Speed2

Size3

FPS60

Color Scheme

Gravity

Trails

Code Reference

Canvas API

1// Basic Canvas Particle System
2 
3const canvas = document.getElementById('canvas');
4const ctx = canvas.getContext('2d');
5const particles = [];
6 
7class Particle {
8  constructor(x, y) {
9    this.x = x;
10    this.y = y;
11    this.vx = (Math.random() - 0.5) * 4;
12    this.vy = (Math.random() - 0.5) * 4;
13    this.radius = 2 + Math.random() * 3;
14    this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
15    this.life = 1.0;
16  }
17 
18  update() {
19    this.x += this.vx;
20    this.y += this.vy;
21    this.life -= 0.01; // Fade out over time
22  }
23 
24  draw(ctx) {
25    ctx.beginPath();
26    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
27    ctx.fillStyle = this.color;
28    ctx.globalAlpha = this.life;
29    ctx.fill();
30    ctx.globalAlpha = 1;
31  }
32}
33 
34function animate() {
35  // Clear with trail effect
36  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
37  ctx.fillRect(0, 0, canvas.width, canvas.height);
38 
39  // Update and draw particles
40  particles.forEach((particle, index) => {
41    particle.update();
42    particle.draw(ctx);
43 
44    // Remove dead particles
45    if (particle.life <= 0) {
46      particles.splice(index, 1);
47    }
48  });
49 
50  requestAnimationFrame(animate);
51}
52 
53// Spawn particles on click
54canvas.addEventListener('click', (e) => {
55  for (let i = 0; i < 20; i++) {
56    particles.push(new Particle(e.offsetX, e.offsetY));
57  }
58});
59 
60animate();

🎨 How It Works

Canvas particle systems create visual effects using hundreds or thousands of small objects. **Key concepts:** - **requestAnimationFrame**: Smooth 60fps animations - **Particle lifecycle**: Spawn → Update → Draw → Destroy - **Physics simulation**: Velocity, gravity, collisions - **Visual effects**: Trails, fading, color schemes **Performance tips:** - Limit particle count (100-500 is sweet spot) - Remove dead particles to prevent memory leaks - Use object pooling for better performance - Clear canvas efficiently (fillRect with alpha vs clearRect)

💡 Key Learnings

→Canvas 2D context provides drawing API for graphics
→requestAnimationFrame syncs animations with browser refresh
→Particle systems simulate physics with velocity and acceleration
→Trail effects use semi-transparent fills instead of full clears
→Lifecycle management prevents memory leaks
→Color schemes create different moods and effects
→Mouse interaction adds interactivity to visualizations
→Performance optimization is key for smooth animations

🎭 Creative Coding with Canvas

What is Canvas?

HTML5 Canvas is a 2D drawing API that lets you create graphics, animations, and interactive visualizations using JavaScript.

When to Use Canvas

Perfect for games, data visualizations, generative art, particle effects, and any graphics that need pixel-level control.

Performance Tips

Use requestAnimationFrame, limit particle counts, avoid unnecessary clears, and consider offscreen canvases for complex scenes.