p5.js Coding Tutorial | Interactive Dandelion (with ml5.js - faceMesh)

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

5,357

216

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

References:
🔗 ml5.js:
🔗 Website: https://ml5js.org/
🔗 ml5.js faceMesh Parts Example: https://editor.p5js.org/ml5/sketches/...
🔗 ml5.js playlist:    • ml5.js

Timestamps:
0:00 Intro
0:19 Display and rotate a string of text
03:57 Create a Letter class
07:49 Create an array of letter objects inside a ring
11:37 Create multiple rings of letters
19:50 Move letter objects by updating its position, velocity, and acceleration
23:02 Create a 'blowing' force based on mouse location
28:24 Explore faceMesh model in ml5.js
34:16 Integrate code from faceMesh example onto sketch
39:45 Create a 'blowing' force based on lips location