11.3: The Pixel Array - p5.js Tutorial

From the creator

This video looks at how to access the pixels of an HTML5 canvas in p5.js. Code: https://thecodingtrain.com/tracks/pixels/more-p5/pixel-array 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/A92PDk-1z 🎥 Previous: https://youtu.be/oLiaUEKsRws 🎥 Next: https://youtu.be/rNqaw8LT2ZU References: 🔗 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 Hello! 2:17 The pixel array 3:48 R, G, B values 6:26 The formula for getting the numerical pixel on the screen 7:43 loadPixels and updatePixels 10:00 Using a nested loop to change every pixel 13:00 Using pixelDensity() to deal with high density displays 14:21 Outro Editing by Mathieu Blanchette Animations by Jason Heglund 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/ 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi

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