11.5: Checkbox Mirror - p5.js Tutorial

From the creator

This video looks at how to read the pixels from a live video and alter DOM elements (checkboxes) to create an abstract mirror. Code: https://thecodingtrain.com/tracks/pixels/pixels/checkbox-mirror 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/InloDe5YE 🎥 Previous: https://youtu.be/rNqaw8LT2ZU 🎥 Next: https://youtu.be/0V3uYA1hafk References: 🔗 createCheckbox: https://p5js.org/reference/#/p5/createCheckbox 🔗 loadPixels: https://p5js.org/reference/#/p5/loadPixels 🔗 updatePixels: https://p5js.org/reference/#/p5/updatePixels 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:03 Thresholds 2:39 Add a slider 3:12 Assign the value of the slider to the threshold 4:49 Add checkboxes 6:35 Hard code the video size 8:18 Add the checkboxes to a div 8:53 Edit the html 10:00 Add styling to the div 11:03 Add linebreaks 13:31 Add an array to keep track of checkboxes 14:31 Use the threshold to check/uncheck the boxes 15:22 Create an index for the checked boxes 17:20 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

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