تتبع اليدين

المفهوم

تتبع اليدين يكتشف 21 نقطة مرجعية لكل يد. تُظهر WebXR Hand Input API هذه البيانات. المسافة بين الإبهام والسبابة (القرصة) هي إيماءة الاختيار القياسية.

الكود

// Hand tracking simulation: 21 landmarks
// Real: WebXR Hand Input API → frame.getJointPose()
// Simulation: animated hand skeleton
let joints = [];
function setup() {
  createCanvas(400, 280);
  // Simulate 21 hand landmarks (simplified)
  for (let i = 0; i < 21; i++) joints.push({x:0,y:0});
}
function draw() {
  background(11, 15, 20);
  let cx = mouseX, cy = mouseY;
  // Thumb tip (landmark 4) and index tip (8)
  let pinchDist = 30 + sin(frameCount*0.05)*20;
  let thumb = {x:cx-pinchDist/2, y:cy-20};
  let index = {x:cx+pinchDist/2, y:cy-20};
  // Draw simplified hand
  stroke(55,227,195,180); strokeWeight(2); noFill();
  line(cx,cy,thumb.x,thumb.y);
  line(cx,cy,index.x,index.y);
  fill(55,227,195); noStroke();
  ellipse(thumb.x,thumb.y,10,10);
  ellipse(index.x,index.y,10,10);
  // Pinch indicator
  let pinch = pinchDist < 35;
  fill(pinch ? [255,200,0] : [100,100,120]);
  text(pinch ? 'PINCH' : '---', cx-20, cy+30);
}

للمزيد

استكشف الدورات المجانية الأخرى على صفحة الورش.