diff --git a/docs/reference/handpose.md b/docs/reference/handpose.md
index ef57b99..a90351c 100644
--- a/docs/reference/handpose.md
+++ b/docs/reference/handpose.md
@@ -12,25 +12,98 @@ Handpose is a machine-learning model that allows for palm detection and hand-ske
The ml5.js Handpose model is ported from the [TensorFlow.js Handpose implementation](https://github.com/tensorflow/tfjs-models/tree/master/handpose).
-## Quickstart
+## Getting Started
+Ready to give it a try? Feel free to follow our instructions to build your first Handpose project!
+
+### Demo
+[p5 Web Editor](iframes/pose-estimation ':include :type=iframe width=100% height=550px')
+
+### Quickstart
+First of all, copy and paste the following code into your **index.html** file:
+
+```html
+
+
+
+
+ Hand Pose Keypoints Detection using Handpose and p5.js
+
+
+
+
+
+
+
Hand Pose Keypoints Detection using Handpose and p5.js
+
+
+
+
+```
+
+Then, add the code below to your **script.js** file:
```js
-let predictions = [];
-const video = document.getElementById('video');
+let handpose;
+let video;
+let hands = [];
+
+function preload() {
+ // Load the handpose model
+ handpose = ml5.handpose();
+}
+
+function setup() {
+ createCanvas(640, 480);
+
+ // Create a video element and hide it
+ video = createCapture(VIDEO);
+ video.size(width, height);
+ video.hide();
-// Create a new handpose method
-const handpose = ml5.handpose(video, modelLoaded);
+ // Start detecting hands from the webcam video
+ // Call function "gotHands" upon receiving output from the model
+ handpose.detectStart(video, gotHands);
+}
-// When the model is loaded
-function modelLoaded() {
- console.log('Model Loaded!');
+function draw() {
+ // Draw the webcam video
+ image(video, 0, 0, width, height);
+
+ // Draw all the tracked hand points
+ for (let i = 0; i < hands.length; i++) {
+ let hand = hands[i];
+ for (let j = 0; j < hand.keypoints.length; j++) {
+ let keypoint = hand.keypoints[j];
+ fill(0, 255, 0);
+ noStroke();
+ circle(keypoint.x, keypoint.y, 10);
+ }
+ }
}
-// Listen to new 'hand' events
-handpose.on('hand', results => {
- predictions = results;
-});
+// Callback function for when handpose outputs data
+function gotHands(results) {
+ // Save the output to the hands variable
+ hands = results;
+}
```
+
+Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-keypoints) and try it yourself on p5.js web editor!
+
+### Additional Examples
+* [Handpose-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-parts)
+* [Handpose-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-single-image)
+* [Handpose-start-stop](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-start-stop)
+
+TODO (link p5 web editor examples once uploaded)
+
+### Tutorials
+
+**PoseNet on The Coding Train**
+
+
+TODO (link new youtube video once uploaded)
+
## Methods
#### ml5.handpose()
@@ -118,8 +191,4 @@ handpose.detect(media, ?callback);
- **callback(output, error)**: OPTIONAL. A callback function to handle the output of the estimation, see output example above.
**Returns:**
-A promise that resolves to the estimation output.
-
-### Examples
-
-TODO (link p5 web editor examples once uploaded)
\ No newline at end of file
+A promise that resolves to the estimation output.
\ No newline at end of file
diff --git a/docs/reference/iframes/handpose-keypoints/index.html b/docs/reference/iframes/handpose-keypoints/index.html
new file mode 100644
index 0000000..caee91f
--- /dev/null
+++ b/docs/reference/iframes/handpose-keypoints/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+ p5.js iframe
+
+
+
+
+
+
Hand Pose Keypoints Detection Model
+
(Add description.) Ensure to enable the webcam.
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/reference/iframes/handpose-keypoints/main.html b/docs/reference/iframes/handpose-keypoints/main.html
new file mode 100644
index 0000000..fc9afb1
--- /dev/null
+++ b/docs/reference/iframes/handpose-keypoints/main.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/reference/iframes/handpose-keypoints/script.js b/docs/reference/iframes/handpose-keypoints/script.js
new file mode 100644
index 0000000..3335da3
--- /dev/null
+++ b/docs/reference/iframes/handpose-keypoints/script.js
@@ -0,0 +1,45 @@
+// Copyright (c) 2023 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+let handpose;
+let video;
+let hands = [];
+
+function preload() {
+ // Load the handpose model
+ handpose = ml5.handpose();
+}
+
+function setup() {
+ createCanvas(640, 480);
+ // Create the webcam video and hide it
+ video = createCapture(VIDEO);
+ video.size(width, height);
+ video.hide();
+ // start detecting hands from the webcam video
+ handpose.detectStart(video, gotHands);
+}
+
+function draw() {
+ // Draw the webcam video
+ image(video, 0, 0, width, height);
+
+ // Draw all the tracked hand points
+ for (let i = 0; i < hands.length; i++) {
+ let hand = hands[i];
+ for (let j = 0; j < hand.keypoints.length; j++) {
+ let keypoint = hand.keypoints[j];
+ fill(0, 255, 0);
+ noStroke();
+ circle(keypoint.x, keypoint.y, 10);
+ }
+ }
+}
+
+// Callback function for when handpose outputs data
+function gotHands(results) {
+ // save the output to the hands variable
+ hands = results;
+}
\ No newline at end of file