Today we will look at using ML tools and P5JS to make interactive artworks. We are using github as we will port the code to github so we can appreciate it in the browser
online P5js editor https://editor.p5js.org/
reference page https://p5js.org/reference/
Tutorials with the coding train https://thecodingtrain.com/tracks/code-programming-with-p5-js
bare minimum example for video feed in p5JS
https://editor.p5js.org/plummerfernandez/sketches/fIZrMVC4Bh
main page https://learn.ml5js.org/#/
posenet https://learn.ml5js.org/#/reference/posenet
posenet webcam demo https://editor.p5js.org/ml5/sketches/PoseNet_webcam
imageClassification https://learn.ml5js.org/#/reference/image-classifier
https://editor.p5js.org/ml5/sketches/ImageClassification_Video
bodypix https://learn.ml5js.org/#/reference/bodypix
https://editor.p5js.org/ml5/sketches/BodyPix_Webcam
https://editor.p5js.org/ml5/sketches/BodyPix_Webcam_Parts
bodypix segmentation (with segments in colour) https://editor.p5js.org/bitSpaz/sketches/Ofc2vYirB
facemesh https://learn.ml5js.org/#/reference/facemesh
https://editor.p5js.org/ml5/sketches/Facemesh_Webcam
faceApi https://learn.ml5js.org/#/reference/face-api
https://editor.p5js.org/ml5/sketches/FaceApi_Video_Landmarks
teachable machine https://teachablemachine.withgoogle.com/
if you train posenet on TM, paste the url to the model in this P5js sketch: https://editor.p5js.org/auduno/sketches/VaMqUyZJO
https://www.tensorflow.org/ article on posenet https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5
https://www.youtube.com/watch?v=EA3-k9mnLHs
Root directory: https://plummerfernandez.github.io/interactworkshop/
example 1: https://plummerfernandez.github.io/interactworkshop/example1