Advanced Topic Tutorial 'Abracadabra: Speak With Your Hands in p5.js and ml5.js' is out of date.

[gracywhelihan]

Most appropriate sections of the p5.js website?

Tutorials

What is your operating system?

Mac OS

Web browser and version

Google Chrome 127.0.6533.89

Actual Behavior

For this tutorial there are many broken links and all of the example sketches throw errors because they are out of date. They do not have the correct m5l.js library in the html file and the ml5.js library has been updated so the code can be simplied

Expected Behavior

All of the links and examples should work and be up to date with the new changes that have been made to the ml5.js library. Also, the documentation of this tutorial should be updated to match the new code examples.

Steps to reproduce

Prerequisites

• Links to HandPose should be updated to https://docs.ml5js.org/#/reference/handpose

Step 1: Set up ml5.js

The examples used in this tutorial are not up to date with the new ml5 examples.

• The HTML file in the p5.js editor should include <script src="https://unpkg.com/ml5@1/dist/ml5.min.js">

• The static image example could link to the new ml5 example handPose-single-image by ml5

Step 2: understanding the data

• The data in the tutorial should be updated. When the data is output, the updated version of HandPose provides more detailed information and uses different data and syntax than in this example.

• The Examples: Annotation and Hats needs to be updated with the new version of the ml5.js library in the html file and can be simplified to match the handPose-single-image by ml5

• The Example: Using a live Webcam feed can be updated to link to the example handPose-keypoints by ml5

• Example: Hats using a live Webcam feed should then build off the previous Webcam feed example

Step 3 -  Adding interactivity 

• These examples and code should just be updated so they work and are based on the new ml5.js examples for hand pose.

Next Steps

In this section the link to FaceMesh is incorrect and should be https://docs.ml5js.org/#/reference/facemesh
Also, users might be encouraged to explore BodyPose rather than PoseNet, as it is part of the ml5.js library just like HandPose and FaceMesh.

Resources:
The ml5.js HandPose Example link is broken and should link to https://docs.ml5js.org/#/reference/handpose?id=examples
And the Interactivity in p5.js link is broken and should link to https://p5js.org/tutorials/conditionals-and-interactivity/

Would you like to work on the issue?

yes I would like to work on this issue