p5.js Coding Tutorial | Interactive Bridge with Bouncing Balls (matter.js + ml5.js)

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

4,850

204

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/
🔗 Interactive Bridge with Bouncing Balls Code: https://editor.p5js.org/pattvira/sket...
🔗 Introduction to Creative Coding Playlist:    • START HERE: Creative Coding for Beginners

References:
🔗 matter.js:
🔗 Website https://brm.io/matter-js/
🔗 Starter Code (from Springy Chain with matter.js Tutorial): https://editor.p5js.org/pattvira/sket...
🔗 Playlist:    • matter.js
🔗 ml5.js:
🔗 Website: https://ml5js.org/
🔗 ml5.js Handpose Example: https://editor.p5js.org/ml5/sketches/...
🔗 ml5.js playlist:    • ml5.js
🔗 Inspiration: ml5.js+matter.js sketch by Golan Levin: https://editor.p5js.org/golan/sketche...

Timestamps:
0:00 Intro
2:08 Create a Bridge class
6:42 Fix positions of the outer most circles to create a bridge
9:49 Walk through ml5.js documentation
11:38 Add ml5.js handpose example code to sketch
25:07 Use thumb and index fingers' positions as bridge's position
27:32 Create a bunch of color bouncy balls
35:07 Remove balls that are off screen
41:40 Final touches