Interactive Code Art with p5.js

June 24, 2025 • 👁️ Loading...

I've been experimenting with p5.js lately - it's a JavaScript library that makes coding visual art surprisingly simple and fun. Here's a quick demo of what you can create with just a few lines of code.

Live Animation

The Code

This animation demonstrates several key p5.js concepts:

Responsive Canvas Setup

function setup() {
  // Make canvas responsive to container size
  let containerWidth = document.getElementById('p5-container').offsetWidth;
  let canvasWidth = min(containerWidth - 20, 800);
  let canvasHeight = min(canvasWidth * 0.5, 400);
  
  let canvas = createCanvas(canvasWidth, canvasHeight);
  canvas.parent('p5-container');
  
  // Adjust particle count for smaller screens
  let particleCount = width < 600 ? 30 : 50;
  
  // Initialize particles with random properties
  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: random(width),
      y: random(height),
      vx: random(-2, 2),
      vy: random(-2, 2),
      size: random(3, 8),
      hue: random(180, 220)
    });
  }
}

Cross-Platform Input Handling

// Track mouse/touch position
let currentX = mouseX;
let currentY = mouseY;

// Handle touch on mobile
if (touches.length > 0) {
  currentX = touches[0].x;
  currentY = touches[0].y;
}

// Attract particles to mouse/touch
let dx = currentX - particle.x;
let dy = currentY - particle.y;
let distance = sqrt(dx * dx + dy * dy);

if (distance < 100) {
  particle.vx += dx * 0.0001;
  particle.vy += dy * 0.0001;
}

Connection Lines

// Draw lines between nearby particles
particles.forEach(other => {
  let d = dist(particle.x, particle.y, other.x, other.y);
  if (d < 80) {
    stroke(0, 242, 255, map(d, 0, 80, 100, 0));
    line(particle.x, particle.y, other.x, other.y);
  }
});

Mobile Touch Support

function touchStarted() {
  // Handle touch events for mobile - only if touch is within canvas
  if (touches.length > 0) {
    let touch = touches[0];
    // Only add particle if touch is within canvas bounds
    if (touch.x >= 0 && touch.x <= width && touch.y >= 0 && touch.y <= height) {
      addParticleAtPosition(touch.x, touch.y);
      // Only prevent default for touches within the canvas
      return false;
    }
  }
  // Allow normal scrolling for touches outside canvas
  return true;
}

Why p5.js?

p5.js makes creative coding accessible by handling the canvas setup, animation loops, and providing intuitive drawing functions. It's perfect for:

• Data visualization prototypes
• Interactive art installations
• Educational coding demos
• Generative art experiments
• Mobile-responsive interactive content

The library abstracts away WebGL complexity while still giving you access to powerful graphics capabilities. Built-in touch support makes it easy to create experiences that work across devices.

Next Steps

Some ideas to extend this demo:

• Add physics simulation with gravity
• Implement particle collision detection
• Create particle systems that respond to audio
• Generate static art pieces with randomized parameters

Check out the p5.js examples gallery for more inspiration!

Try clicking or tapping on the animation above to add more particles.