let video;

let predictions = [];

​

let autoHue = true;

let manualHue = 0;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

  handpose.on("predict", results => {

    predictions = results;

  });

​

  // video.hide();

  colorMode(HSB);

  background(0);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  // Optional: Add a slight transparency to create a trail effect

  // fill(0, 8);

  // rect(0, 0, width, height);

 fill(0, 0, 0, 80); // Adjust the last value to control the trail's length

rect(-width , -height, width, height);

  translate(width / 2, height / 2); // Center the drawing coordinates

  drawing();

}

​

function drawing() {

  for (let i = 0; i < predictions.length; i++) {

    const prediction = predictions[i];

    const hue = autoHue ? frameCount % 360 : manualHue;

    const x = prediction.landmarks[8][0] - width / 2; // Adjust for centered coordinates

    const y = prediction.landmarks[8][1] - height / 2; // Adjust for centered coordinates

​

    // Draw the point with aftertrail

    drawSymmetricalPoints(x, y, hue);

  }

}

​

function drawSymmetricalPoints(x, y, hue) {

  const numAxes = 12;

  const angleBetweenAxes = 360 / numAxes;

​

  for (let axis = 0; axis < numAxes; axis++) {

    const angle = angleBetweenAxes * axis;

    const symX = cos(angle) * x - sin(angle) * y;

    const symY = sin(angle) * x + cos(angle) * y;

​

    fill(hue, 100, 100);

    noStroke();

    ellipse(symX, symY, 10); // Draw the point

  }

}