11.4: Brightness Mirror - p5.js Tutorial

From the creator

This video looks at how to create an abstract mirror in a p5.js canvas based on the brightness values of the pixels from live video. Code: https://thecodingtrain.com/tracks/pixels/pixels/brightness-mirror 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/nFOs57gVh 🎥 Previous: https://youtu.be/nMUMZ5YRxHI 🎥 Next: https://youtu.be/m1G6WBvrOBE References: 🔗 loadPixels: https://p5js.org/reference/#/p5/loadPixels 🔗 updatePixels: https://p5js.org/reference/#/p5/updatePixels Videos: 🎥 map(): https://youtu.be/nicMAoW6u1g Related Coding Challenges: 🚂 47 Pixel Sorting in Processing: https://youtu.be/JUDYkxU6J0o 🚂 102 2D Water Ripple: https://youtu.be/BZUdGqeOD0w Timestamps: 0:00 Introduction 1:23 Loading the video's pixels 3:35 Brightness value of the pixels 4:25 Discuss performance issues 6:04 Add a vScale variable 7:16 Draw a rectangle for every pixel 10:00 Map pixel size to the video brightness 12:26 Mirror the video image 13:39 Outro Editing by Mathieu Blanchette Music from Epidemic Sound 🚂 Website: https://thecodingtrain.com/ 👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide 🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box 💡 GitHub: https://github.com/CodingTrain 💬 Discord: https://thecodingtrain.com/discord 💖 Membership: http://youtube.com/thecodingtrain/join 🛒 Store: https://standard.tv/codingtrain 🖋️ Twitter: https://twitter.com/thecodingtrain 📸 Instagram: https://www.instagram.com/the.coding.train/

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