Patt Vira | p5.js Coding Tutorial | Interactive Bridge with Bouncing Balls (matter.js + ml5.js) @pattvira | Uploaded October 2024 | Updated October 2024, 16 hours 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
🔗 Interactive Bridge with Bouncing Balls Code: editor.p5js.org/pattvira/sketches/kxhf0tEiW
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn

References:
🔗 matter.js:
🔗 Website brm.io/matter-js
🔗 Starter Code (from Springy Chain with matter.js Tutorial): editor.p5js.org/pattvira/sketches/zkMXLc5b_
🔗 Playlist: youtube.com/playlist?list=PL0beHPVMklwgaLt1xHqlKNvPZ7nKjHnH3
🔗 ml5.js:
🔗 Website: ml5js.org
🔗 ml5.js Handpose Example: editor.p5js.org/ml5/sketches/QGH3dwJ1A
🔗 ml5.js playlist: youtube.com/playlist?list=PL0beHPVMklwhxJ6G3Hn4uLQTDe4Y562Dr&si=fstnmy-6Q8ELkFVc
🔗 Inspiration: ml5.js+matter.js sketch by Golan Levin: editor.p5js.org/golan/sketches/y4AIaY3Xu

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