Fun with MoveNet plus p5play and p5js - Creative Coding

Channel:
United States Steve's Makerspace
Subscribers:
7,360
Published on ● Video Link: https://www.youtube.com/watch?v=qEWi1V-q3aw


Duration: 22:17
1,725 views
42

In this creative coding video, learn how I used MoveNet for two projects - one that creates a flow field from the body image, and another that uses p5play to move balls in a flow around the body. MoveNet is a machine learning model that detects body parts, made by TensorFlow. See code and all references linked below.

MoveNet Skeleton:
https://editor.p5js.org/StevesMakerspace/sketches/hcXJZaTKqE

MoveNet + Flow field:
https://editor.p5js.org/StevesMakerspace/sketches/DqdxSpy0c

Movenet + p5play + Flow field:
https://editor.p5js.org/StevesMakerspace/sketches/y61C02eWH

ml5 PoseNet and p5play video:
   • Combining ml5 PoseNet and p5play to m...  

Animated Flow Field video:
   • 18: Perlin Noise Flow Fields in p5.js...  

p5play.org

Introduction to p5play video:
   • Introducing p5play: a Physics and Gam...  

ml5:
https://learn.ml5js.org/#/

MoveNet on TensorFlow:
https://www.tensorflow.org/hub/tutorials/movenet

The Coding Train - Beginners Guide to Machine Learning in JavaScript:
   • Beginners Guide to Machine Learning i...  

Article: MoveNet : Pose Estimation for Video with Intense Motion:
https://medium.com/axinc-ai/movenet-pose-estimation-for-video-with-intense-motion-2b92f53f3c8

https://p5js.org/

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

Steve's Patreon page: https://www.patreon.com/steves_makerspace

0:00 Introduction and Context
2:10 MoveNet Basic Skeleton code
5:52 MoveNet plus Flow Field code
13:57 MoveNet plus p5play with Ball Flow code
21:40 Outro



Other Videos By Steve's Makerspace


2025-03-24Real 3D in p5js - Uses 3D Glasses
2025-03-09Let's Talk - Channel Update & What Steve's Up To
2025-03-02How I Made Little Galleries - p5js generative art
2025-01-05Sedimentary Groove: Gen Art coding and project review in p5js
2024-05-25Fun with MoveNet plus p5play and p5js - Creative Coding
2024-05-14Gen Art Code Review: Surrender to the Dance
2024-01-0724: Where to go from here; the creative process; big list of resources: How to Code Generative Art
2024-01-0523: More Useful Functions in p5.js: How to Code Generative Art
2024-01-0322: Deeper Dive into Color in p5.js: How to Code Generative Art
2024-01-0121: Return, Break & Continue in p5.js: How to Code Generative Art
2023-12-3020: Intro to WEBGL-3D Graphics in p5.js: How to Code Generative Art
2023-12-2819: Clipping Function in p5.js: How to Code Generative Art
2023-12-2618: Perlin Noise Flow Fields in p5.js: How to Code Generative Art
2023-12-2417: Perlin Noise Grid Project in p5.js: How to Code Generative Art
2023-12-2216: Introduction to Perlin Noise in p5.js: How to Code Generative Art
2023-12-2015: Sine and Cosine to make wonky circles and meandering lines in p5.js: How to Code Generative Art
2023-12-1814: Array Examples from Steve's Projects in p5.js: How to Code Generative Art
2023-12-1813: Basics of Arrays in p5.js: How to Code Generative Art
2023-12-1611: Using a Buffer Canvas - createGraphics, Get, Image, Tint in p5.js: How to Code Generative Art
2023-12-1410: Creating Functions in p5.js: How to Code Generative Art
2023-12-139: On Being a Generative Artist - How to Code Generative Art - p5.js


Tags:
movenet
tensorflow
p5play
p5js
creative coding
flow field
posenet