p5.js Coding Tutorial | A Shattered Heart 💔 (with matter.js)

Опубликовано: 28 Апрель 2026
на канале: Patt Vira

2,254

132

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/
🔗 A Shattered Heart Code: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist:    • START HERE: Creative Coding for Beginners

Inspiration:
🔗 Lea Naisberg’s Piece:   / dgdfaswtqba

References:
🔗 matter.js: https://brm.io/matter-js/
🔗 matter.js playlist:    • matter.js

Timestamps:
0:00 Intro
0:33 Set up the physics engine and create a single rectangular body
5:55 Add mouse for some interactivity
8:36 Create multiple rectangular bodies
12:42 Preload an image to sketch
14:40 Create a grid of cells and check which contains color values
20:33 Combine matter.js and image sketches
24:59 Create a Rect class
29:01 Add pixels information to each Rect object
33:19 Add background
33:35 Add boundaries