Interactive Mirror Lab | Creative Coding Workshop

🎨 Live Code Editor

// 🎨 CREATIVE CODING PLAYGROUND
// The webcam is available as 'capture'
// Press ⌘+Enter (or Ctrl+Enter) to run your code!

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(RGB, 255, 255, 255);
}

function draw() {
  background(20, 20, 30);
  
  if (capture && capture.loadedmetadata && capture.width > 0) {
    // EXAMPLE 1: Mirror effect with tint
    push();
    translate(width, 0);
    scale(-1, 1);
    tint(0, 200, 255, 200); // Cyan tint
    image(capture, 0, 0, width, height);
    pop();
    
    // EXAMPLE 2: Add animated text
    fill(255, 200, 0);
    textAlign(CENTER, CENTER);
    textSize(64);
    let wave = sin(frameCount * 0.05) * 50;
    text("HELLO!", width / 2, height / 2 + wave);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// 💡 TRY THESE IDEAS:
// 1. Change the tint color (red, green, blue, alpha)
// 2. Add multiple copies of the video at different positions
// 3. Use filter(BLUR) or filter(INVERT) for effects
// 4. Draw shapes that follow your movement
// 5. Sample colors from the video and use them
// 6. Create a kaleidoscope effect with rotation

Available p5.js functions: createCanvas, background, push, pop, translate, scale, rotate, tint, image, fill, stroke, noStroke, noFill, rect, ellipse, circle, line, triangle, textAlign, textSize, text, filter, colorMode, frameCount, sin, cos, map, constrain

Tips: Use Tab for indentation • ⌘+Enter to run • Check browser console for errors