p5.js Coding Tutorial | Collage (Image Manipulation)

Опубликовано: 18 Июнь 2026
на канале: Patt Vira

3,461

173

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/
🔗 Collage:
🔗 Vertical Strips: https://editor.p5js.org/pattvira/sket...
🔗 Grid: https://editor.p5js.org/pattvira/sket...
🔗 Grid (Truly Randomized): https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist:    • START HERE: Creative Coding for Beginners

References:
🔗 p5.js get() function: https://p5js.org/reference/p5.Image/get/
🔗 Other tutorials using get() function:
🔗 ASCII Text Images and Videos:    • p5.js Coding Tutorial | ASCII Text Images ...
🔗 Drawing with Webcam:    • p5.js Coding Tutorial | Drawing with Webca...
🔗 Create Raster Graphics from Image:    • p5.js Coding Tutorial | Create Raster Grap...

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