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

Published: 15 October 2024
on channel: Patt Vira

1,861

121

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 Begin...

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

Watch video p5.js Coding Tutorial | Interactive Bridge with Bouncing Balls (matter.js + ml5.js) online without registration, duration hours minute second in high quality. This video was added by user Patt Vira 15 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,861 once and liked it 121 people.

520