Patt Vira | p5.js Coding Tutorial | Interactive Fridge Magnets (with ml5.js) @pattvira | Uploaded July 2024 | Updated October 2024, 23 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 Fridge Magnets Code: editor.p5js.org/pattvira/sketches/f3nZuIPZi
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Credits:
🔗 Magnet Poetry by Lea Naisberg: instagram.com/p/C8xXy0NR_IJ/?img_index=1
References:
🔗 ml5.js: ml5js.org
Timestamps:
0:00 Intro
0:20 ml5.js - machine learning library for the web
1:04 Intro to handPose() model
9:43 Get thumb and index finger locations
11:13 Create one magnet
17:38 Create a Magnet class
21:47 Make it interactive with mouse location
25:36 Combine ml5.js and magnet sketches
26:53 Make it interactive with fingers' location
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 Fridge Magnets Code: editor.p5js.org/pattvira/sketches/f3nZuIPZi
🔗 Introduction to Creative Coding Playlist: youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn
Credits:
🔗 Magnet Poetry by Lea Naisberg: instagram.com/p/C8xXy0NR_IJ/?img_index=1
References:
🔗 ml5.js: ml5js.org
Timestamps:
0:00 Intro
0:20 ml5.js - machine learning library for the web
1:04 Intro to handPose() model
9:43 Get thumb and index finger locations
11:13 Create one magnet
17:38 Create a Magnet class
21:47 Make it interactive with mouse location
25:36 Combine ml5.js and magnet sketches
26:53 Make it interactive with fingers' location