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

Published: 15 October 2024
on channel: 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

On this page of the site you can watch the video online p5.js Coding Tutorial | Interactive Bridge with Bouncing Balls (matter.js + ml5.js) with a duration of hours minute second in good quality, which was uploaded by the user Patt Vira 15 October 2024, share the link with friends and acquaintances, this video has already been watched 4,850 times on youtube and it was liked by 204 viewers. Enjoy your viewing!

147