Everything you need to run a successful 2-hour Interactive Mirror Lab workshop
Welcome participants, explain workshop goals, ensure everyone has camera access working. Show inspiring examples from the resources page.
Start with simple mirroring, then introduce edge detection and posterization. Let participants experiment with controls. Discuss the history of mirrors in art and video art pioneers.
Introduce frame differencing and motion detection. Move to full body pose tracking. This is where it gets magical—give participants time to play and discover.
10-minute break. Encourage participants to share discoveries with each other.
Introduce Tone.js and color-to-sound mapping. Move to face tracking with AR accessories. Discuss synesthesia and the history of visual music.
Hand tracking theremin. This is the most complex interaction—give participants time to master the pinch gesture and explore musical scales.
Open playground for experimentation. Share the resources page. Encourage participants to continue exploring at home. Q&A and closing thoughts.
Don't rush through early slides. The simple mirror (Slide 1) establishes the foundation. Make sure everyone understands the concept before moving forward.
The controls are there to be played with. Give participants 2-3 minutes of free exploration on each slide before explaining the technical details.
Use the historical references in the speaker notes. Show images of Kusama's Infinity Rooms, Nam June Paik's TV Buddha, or Myron Krueger's Videoplace. Context makes the technology meaningful.
Camera permissions are the #1 technical issue. Address this in the first 5 minutes. Have participants test on the home page before starting slides.
Open presenter mode (/presenter) on a second screen or device. Speaker notes contain rich context, technical details, and discussion prompts.
If something breaks in the playground, that's a teaching moment. Show participants how to debug, read error messages, and iterate.
Check browser permissions (usually a camera icon in the address bar). Chrome/Edge work best. Safari may require additional permissions. Firefox sometimes has WebGL issues.
This is open-source educational material. The code uses p5.js (LGPL), MediaPipe (Apache 2.0), and Tone.js (MIT). All are free for commercial and non-commercial use.
MediaPipe runs entirely in the browser using WebAssembly and TensorFlow.js. The ML models are downloaded once and run locally. No data leaves your device—complete privacy.
Pose tracking (Slide 4) detects 33 body landmarks. Face mesh (Slide 6) detects 478 facial landmarks. Hand tracking (Slide 7) detects 21 landmarks per hand. Different models for different use cases.
Yes! The playground (Slide 8) has full p5.js access. Try filters (filter(BLUR)), blend modes (blendMode(MULTIPLY)), or particle systems. Check the p5.js reference for ideas.
Slides 3, 5, and 7 use Tone.js for audio synthesis. We introduce audio gradually—first as simple triggers (Slide 3), then as color-to-sound mapping (Slide 5), finally as a full instrument (Slide 7).
Have participants capture screenshots of their favorite effects and create a shared gallery. Discuss what makes each effect interesting or beautiful.
Use Slide 7 (gesture instrument) for a group performance. Assign different participants to different scales or base notes. Record the result.
In the playground, challenge participants to combine techniques from multiple slides. Can they add pose tracking to the color synth? Edge detection to face tracking?
Discuss the implications of face tracking, surveillance, and privacy. Reference artists like Zach Blas and Adam Harvey who critique facial recognition technology.
Pick one artist or artwork from the references (Nam June Paik, Myron Krueger, Golan Levin) and research their work. How does it relate to what we built today?
Excellent video tutorials on p5.js, computer vision, and creative coding. His enthusiasm is contagious.
Friendly machine learning library for the web. Great for extending this workshop with image classification, style transfer, etc.
Comprehensive guide to machine learning for artists. Includes theory, tutorials, and philosophical discussions.
Curated platform for creative coding, digital art, and interactive installations. Great for finding contemporary examples.
The live coding community. Check out Algorave events and the manifesto: 'Show us your screens!'
Questions or feedback? This workshop is open-source and community-driven.