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 lesson03-camera-organ-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 03.
3. Keep the VS Code terminal open while you work.

http://127.0.0.1:5173/

Step 4: Look At The Starter Screen

The canvas should show a working organ keyboard labeled Camera Organ.

Try mouse hover, mouse-down sound, double-click latch, and Stop All Sound.

Click Start Camera and allow camera access. The first code step will draw the hands.

Step 5: Find The Lesson Code

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

// Step 5 in the guide is finding this DrawOneFrame() code.

// Step 7: use each hand center to choose an organ key.
// AddCenterKeyChoices(vHands);

// Step 10: use the AirSynth-style checkbox choices instead of center only.
// AddEnabledPointKeys(vHands);

// Step 12: smooth camera key changes near key edges.
// AddStableCameraKeys(vHands);

// Step 13: lower each camera voice when several points are playing.
// SetCameraVoiceMixGain(vHands);
...
// Step 6: draw camera hands over the organ.
// DrawCameraHands(vHands);

// Step 8: highlight organ keys selected by camera points.
// DrawCameraKeyHighlights(vHands);

// Step 11: draw labels for enabled camera points.
// DrawCameraPointLabels(vHands);

// Step 9: make camera points play organ voices.
// UpdateCameraSounds(vHands);

Step 5 is this orientation step, so it does not have a camera call to uncomment.

Step 6: Draw Camera Hands Over The Organ

Change this:

// DrawCameraHands(vHands);

to this:

DrawCameraHands(vHands);

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

Step 7: Let Hand Centers Choose Keys

Change this:

// AddCenterKeyChoices(vHands);

to this:

AddCenterKeyChoices(vHands);

The readout should show the organ key under each hand center.

Step 8: Highlight Camera-Selected Keys

Change this:

// DrawCameraKeyHighlights(vHands);

to this:

DrawCameraKeyHighlights(vHands);

The selected keys should get a blue camera outline. A number badge appears when several camera points choose the same key.

Step 9: Play Camera Center Voices

Change this:

// UpdateCameraSounds(vHands);

to this:

UpdateCameraSounds(vHands);

Move a hand center onto a key. You should hear an organ note.

Step 10: Use The Center/Finger Voice Choices

The side panel has left and right choices for center, thumb, index, middle, ring, and pinky.

Change this:

// AddEnabledPointKeys(vHands);

to this:

AddEnabledPointKeys(vHands);

Try enabling Index or Middle. Each enabled point can make its own voice.

Step 11: Draw Labels For Enabled Points

Change this:

// DrawCameraPointLabels(vHands);

to this:

DrawCameraPointLabels(vHands);

Yellow labels are on organ keys. Blue or cyan labels are visible but not on a key.

Step 12: Smooth Camera Key Changes

Change this:

// AddStableCameraKeys(vHands);

to this:

AddStableCameraKeys(vHands);

This reduces flicker when a camera point moves near a key edge.

Step 13: Scale Volume For Several Camera Voices

Change this:

// SetCameraVoiceMixGain(vHands);

to this:

SetCameraVoiceMixGain(vHands);

Several camera points can still make several voices, including several voices on the same key, but the total level is more controlled.

Step 14: Experiment

• Turn on only Left Center and play one note at a time.
• Turn on several right-hand fingertips and try a chord.
• Put two enabled points on the same key and watch the key-count badge.
• Double-click a mouse note to latch it, then add camera voices on top.

Step 15: 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 sound does not start, click or let a camera point land directly on an organ key.
• If sound gets stuck, click Stop All Sound or refresh the page.