GestureScape

https://github.com/zlyup/gesturescape
Admin
An interactive 3D particle art experience that fuses classical landscape aesthetics with gesture...
Tokens:1,386
Snippets:16
Trust Score:5.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Initialize MediaPipe Hands and Camera

Source: https://github.com/zlyup/gesturescape/blob/main/index.html

Sets up the MediaPipe Hands model with specified options and initializes the camera utility for video stream processing. The `onFrame` callback sends video frames to the Hands model.

```javascript
const hands = new Hands({locateFile: (file) => 
`https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
});
hands.setOptions({
  maxNumHands: 1,
  modelComplexity: 0, // 降低模型复杂度以提升性能，因为粒子系统很重
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5
});
hands.onResults(onResults);

const cameraUtils = new Camera(videoElement, {
  onFrame: async () => {
    if(canvasElement.width !== videoElement.videoWidth) resizeCanvas();
    await hands.send({image: videoElement});
  },
  width: 320,
  height: 240
});
cameraUtils.start().then(() => statusText.innerText = "系统就绪").catch(e => statusText.innerText = "摄像头未授权");
```

--------------------------------

### Wiki Directory Structure

Source: https://github.com/zlyup/gesturescape/wiki/介绍

This code block illustrates the directory structure of the wiki. It is useful for understanding how the documentation is organized within the project.

```bash
/wiki
  ├── 项目概述.md
  ├── 快速开始.md
  ├── 使用指南.md
  ├── 开发者文档.md
  ├── API参考.md
  ├── 艺术概念.md
  ├── 常见问题.md
  ├── 贡献指南.md
  └── 版本历史.md
```

--------------------------------

### Handle Window Resize Event

Source: https://github.com/zlyup/gesturescape/blob/main/index.html

Adds an event listener to adjust camera aspect ratio and renderer size when the browser window is resized. This ensures the visual output remains consistent with the viewport.

```javascript
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
```

--------------------------------

### Process Hand Landmarks for Gesture Control

Source: https://github.com/zlyup/gesturescape/blob/main/index.html

This function processes detected hand landmarks to determine hand activity and map hand openness to a target scale. It's used within the MediaPipe `onResults` callback.

```javascript
if (HandLandmarks && results.multiHandLandmarks.length > 0) {
  isHandActive = true;
  statusText.innerText = "手势控制中 (张开幅度控制山高)";
  for (const landmarks of results.multiHandLandmarks) {
    drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {color: 'rgba(1,75,61,0.97)', lineWidth: 2});
    drawLandmarks(canvasCtx, landmarks, {color: '#0059ff', lineWidth: 1});
    // 计算手掌张开程度
    const wrist = landmarks[0];
    const middleTip = landmarks[12];
    const distance = Math.sqrt(Math.pow(wrist.x - middleTip.x, 2) + Math.pow(wrist.y - middleTip.y, 2));
    // 映射到 0.0 ~ 1.0
    let val = (distance - 0.15) * 3.0;
    targetScale = Math.max(0.0, Math.min(1.2, val));
  }
} else {
  isHandActive = false;
  statusText.innerText = "请将手放入镜头区域";
}
canvasCtx.restore();
```
Tokens:
Raw