Lesson Steps

Step 1: Download And Unzip

1. Download the starter zip from the link above.
2. Find the zip file in your Downloads folder.
3. Right-click the zip file and choose Extract All....
4. Open the extracted folder.

Step 2: Open The Folder In VS Code

1. Open Visual Studio Code.
2. Choose File > Open Folder....
3. Select the extracted lesson01-hello-hands-starter folder.
4. Click Select Folder.

Open the folder, not just one file. VS Code needs the folder so it can find the launch task.

Step 3: Start The App

1. In VS Code, choose Terminal > Run Task....
2. Choose Start Lesson 01.
3. If VS Code asks which task to run, choose Start Lesson 01 again.
4. Keep the VS Code terminal open while you work.

http://127.0.0.1:5173/

Step 4: Look At The Starter Screen

Do not click Start Camera yet. The first coding step does not need the camera.

The canvas should show Hello, hands.

First coding step:
1. Open app.js.
2. Find DrawHelloWorld().
3. Change "Hello, hands."
4. Save, refresh, test.

Step 5: Find The Lesson Code

1. Go back to VS Code.
2. Open app.js.
3. Find function DrawOneFrame().

DrawHelloWorld();
// DrawCameraImage();
// DrawHandLinesAndPoints(vHands);
// DrawHandsOnly(vHands);
// DrawHandEllipseAndCentroid(vHands);
// DrawHandNumbers(vHands);

Lines that start with // are comments. JavaScript skips them.

Step 6: Try A Tiny Change

1. Find this line in DrawHelloWorld().

oCtx.fillText("Hello, hands.", oCanvas.width / 2, oCanvas.height / 2);

2. Change the text inside the quotes.
3. Save with Ctrl+S.
4. Refresh the browser page.

You do not need Start Camera for this text-only step.

Step 7: Show The Camera

In DrawOneFrame(), change this:

DrawHelloWorld();
// DrawCameraImage();

to this:

// DrawHelloWorld();
DrawCameraImage();

1. Save with Ctrl+S.
2. Refresh the browser.
3. Click Start Camera.
4. If the browser asks for camera permission, click Allow.

Step 8: Draw Hand Lines And Points

// DrawCameraImage();
DrawHandLinesAndPoints(vHands);

Save, refresh, click Start Camera, and hold one or both hands where the camera can see them.

Step 9: Show Hands Only

// DrawHandLinesAndPoints(vHands);
DrawHandsOnly(vHands);

Save, refresh, click Start Camera, and hold your hand in view. The camera picture should be hidden.

Step 10: Draw Ellipses And Centers

// DrawHandsOnly(vHands);
DrawHandEllipseAndCentroid(vHands);

You should see green skeleton lines, yellow dots, a white ellipse, and a red center dot.

Step 11: Print Left And Right Hand Numbers

// DrawHandEllipseAndCentroid(vHands);
DrawHandNumbers(vHands);

The readout should show numbers like this:

Left hand
  Centroid x: 210 px
  Centroid y: 260 px
  Ellipse area: 52000 px

Right hand
  Centroid x: 730 px
  Centroid y: 250 px
  Ellipse area: 61000 px

Step 12: Experiment

• Move your hand left and right. Watch Centroid x.
• Move your hand up and down. Watch Centroid y.
• Move your hand closer to the camera. Watch Ellipse area.
• Move your hand farther from the camera. Watch Ellipse area again.

Step 13: Stop The App

1. Go back to VS Code.
2. Click inside the terminal that is running the server.
3. Press Ctrl+C.
4. If it asks Terminate batch job?, type Y and press Enter.

If Something Goes Wrong

• If VS Code cannot find the task, make sure you opened the whole folder.
• If camera permission is blocked, use Chrome or Edge and allow camera access for http://127.0.0.1:5173.
• If the page is old, save with Ctrl+S, refresh, and test again.