11.7: Slit-Scan Video - p5.js Tutorial

From the creator

This video covers how to program a "slit-scan" effect in p5.js. Code: https://thecodingtrain.com/tracks/pixels/pixels/slit-scan 🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/f_M7gry32 🎥 Previous: https://youtu.be/0V3uYA1hafk References: 🔗 createCapture: https://p5js.org/reference/#/p5/createCapture 🔗 copy: https://p5js.org/reference/#/p5/copy 🔗 Catalogue of Slit-Scan Video Artworks and Research: http://www.flong.com/archive/texts/lists/slit_scan/index.html Related Coding Challenges: 🚂 47 Pixel Sorting in Processing: https://youtu.be/JUDYkxU6J0o 🚂 164 Slitscan Time Displacement Effect: https://youtu.be/hckvHFDGiJk 🚂 166 Image to ASCII: https://youtu.be/55iwMYv8tGI Timestamps: 0:00 Introduction 1:06 Diagram the slit-scanning effect 3:20 Starting coding 4:08 copy() function 7:20 Load the video pixels 8:10 Move the column of pixels across the canvas 8:39 Move background to setup 9:22 Reset value of x so animation continues 9:35 Variations you could try 10:50 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://w

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