p5.js Coding Tutorial | Text Rain (Drawing w Webcam)
LET'S CONNECT
✨ Sign up for my newsletter at https://www.pattvira.com
✨ Instagram: / pattvira
✨ Twitter: / pattvira
--
Links:
🔗 p5.js editor: https://editor.p5js.org/
🔗 Text Rain Code: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist: • START HERE: Creative Coding for Beginners
Credit:
🔸 Original Text Rain by Camille Utterback and Romy Achituv: http://camilleutterback.com/projects/...
Related Videos:
🔗 Drawing with Webcam Tutorial: • p5.js Coding Tutorial | Drawing with Webca...
🔗 Interactive Falling Text Rain: • p5.js Coding Tutorial | Interactive Fallin...
References:
🔗 p5.js textBounds() function: https://p5js.org/reference/#/p5.Font/...
Timestamps:
0:00 Intro
0:38 Use createCapture() to get video from webcam
3:04 Draw a letter using text()
5:00 Turn video to black and white using filter() with threshold mode
6:30 Get color and brightness value of pixel at location (x, y)
8:53 Move letter based on video's brightness value
11:30 Write a Letter class
15:02 Create multiple Letter objects