Patt Vira | p5.js Coding Tutorial | Collage (Image Manipulation) @pattvira | Uploaded August 2024 | Updated October 2024, 26 minutes ago.
LET'S CONNECT
✨ Sign up for my newsletter at pattvira.com
✨ Instagram: instagram.com/pattvira
✨ Twitter: twitter.com/pattvira
--
Links:
🔗 p5.js editor: editor.p5js.org
🔗 Collage:
🔗 Vertical Strips: editor.p5js.org/pattvira/sketches/0B3-goH19
🔗 Grid: editor.p5js.org/pattvira/sketches/jTFI1P8Y1
🔗 Grid (Truly Randomized): editor.p5js.org/pattvira/sketches/-hUmZSlcX
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn

References:
🔗 p5.js get() function: p5js.org/reference/p5.Image/get
🔗 Other tutorials using get() function:
🔗 ASCII Text Images and Videos: youtu.be/4IyeLc6J1Uo
🔗 Drawing with Webcam: youtu.be/hHZcIMppkFc
🔗 Create Raster Graphics from Image: youtu.be/ruth6FZ2RK0

Timestamps:
0:00 Intro
0:38 Upload and resize image
3:23 Use get() function to get region of pixels from canvas
5:10 Example 1: vertical strips
9:01 Example 2: grid
16:19 Add margins