11.6: Painting with Pixels - p5.js Tutorial

From the creator

This video looks at how to make a painting from a live video source by reading the pixels to color shapes moving around a p5.js canvas. Code: https://thecodingtrain.com/tracks/pixels/pixels/painting-with-pixels 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/0tRpxGdaq 🎥 Previous: https://youtu.be/m1G6WBvrOBE 🎥 Next: https://youtu.be/YqVbuMPIRwY References: 🔗 loadPixels: https://p5js.org/reference/#/p5/loadPixels 🔗 updatePixels: https://p5js.org/reference/#/p5/updatePixels 🔗 lerpColor: https://p5js.org/reference/#/p5/lerpColor 🔗 Swarm: https://history.siggraph.org/experience/swarm-by-shiffman/ Related Coding Challenges: 🚂 52 Random Walker: https://youtu.be/l__fEY1xanY 🚂 50 Circle Packing: https://youtu.be/QHEQuoIKgNE 🚂 78 Simple Particle System: https://youtu.be/UcdigVaIYAk 🚂 90 Floyd-Steinberg Dithering: https://youtu.be/0L2n8Tg2FwI 🚂 102 2D Water Ripple: https://youtu.be/BZUdGqeOD0w 🚂 132 Fluid Simulation: https://youtu.be/alhpH6ECFvQ Timestamps: 0:00 Introduction 1:31 Add a random particle moving around the canvas 2:51 Get the particle color from the video 3:45 Scale down the pixel values 6:25 Color the pixel with R, G, B values from the video 7:05 Add more particles 8:16 Improvements 10:51 Additional things you could try 13:20 Outro Corrections: 02:40 This old example is not using classes in JavaScript. Check the accompanying code for an updated version! Editing by Mathieu Blanchette Music from Epidemic Sound 🚂 Website: https://thecodingtr

Published 2016-04-06 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.