let video;

let predictions = [];

let prevKeyPoint12 = { x: 0, y: 0 };

let velocities = []; // Array to store recent velocities

let numFramesForAverage = 20; // Number of frames over which to calculate the moving average

let prevTime = 0; // Initialize prevTime to 0

let avgDistance = 0;

let flowers = [];

// Sound variables

let song;

let amplitude;

let offset = 1000;

// Variables for symmetry

let maxaxis = 0;

let minaxis = 4;

let increment = 0.1;

let avgVelocity;

let magVel = 0;

let redKeyPoints = new Array(5).fill(null); // Pre-fill with null or some default value

let redIndex = 0; // This index will track the current position to update

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  //createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

​

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

    predictions = results;

  });

​

  video.hide();

//////

  angleMode(DEGREES);

  background(0, 0);

  // Create a flower object at the center of the canvas

  flowers.push(new Flower(width / 2, height / 2));

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background(0, 8);

​

  let handHeight = height;

  if (predictions.length > 0) {

    handHeight = predictions[0].landmarks[0][1];

    // drawKeypoints();

  }

​

  let newSymmetry = round(map(handHeight, 0, height, 30, 4));

  flowers.forEach(flower => {

    flower.updateSymmetry(newSymmetry);

    flower.updateAverageDistance(avgDistance); // Update each flower with the latest average distance

  });

​

  flowers.forEach(flower => {

    flower.update();

    flower.display();

  });

​

  // image(video, 0, windowHeight - 240, 640, 240);

}

​

function drawKeypoints() {

  let currentTime = millis();

  let blueKeyPoint = null;

  const maxRedKeyPoints = 5; // Maximum number of red keypoints to store

  let totalDistance = 0;

​

  // Pre-filter the keypoints you're interested in

  const indicesOfInterest = [0, 4, 8, 12, 16, 20]; // the keypoints you care about

  let filteredKeypoints = predictions.flatMap(prediction =>

    prediction.landmarks.filter((_, index) => indicesOfInterest.includes(index))

  );

​

  filteredKeypoints.forEach(keypoint => {

    const j = indicesOfInterest[filteredKeypoints.indexOf(keypoint)];

    // Apply colors and calculate as before

    if (j === 0) {

      fill(0, 0, 255); // Blue for keypoint 0

      blueKeyPoint = keypoint;

    } else if ([4, 8, 12, 16, 20].includes(j)) {

      fill(255, 0, 0); // Red for specified keypoints

      redKeyPoints[redIndex] = keypoint; // Update the current index in the circular buffer

      redIndex = (redIndex + 1) % maxRedKeyPoints;

    } else {

      fill(0, 255, 0); // Green for all other keypoints

    }

    noStroke();

    // ellipse(keypoint[0], keypoint[1], 10, 10);

    if (j === 12) {

      updateVelocityForKeyPoint12(keypoint, currentTime);

    }

  });

​

  // Calculate and log the average distance if needed

  if (blueKeyPoint && redKeyPoints.length > 0) {

    redKeyPoints.forEach(redKeyPoint => {

      totalDistance += dist(blueKeyPoint[0], blueKeyPoint[1], redKeyPoint[0], redKeyPoint[1]);

    });

    avgDistance = totalDistance / redKeyPoints.length;

    console.log(`Average distance: ${avgDistance.toFixed(2)}`);

  }

}

​

function updateVelocityForKeyPoint12(keypoint, currentTime) {

  let deltaTime = (currentTime - prevTime) / 1000; // Convert milliseconds to seconds

  if (deltaTime > 0) { // Avoid division by zero

    let currentVelocity = {

      x: (keypoint[0] - prevKeyPoint12.x) / deltaTime,

      y: (keypoint[1] - prevKeyPoint12.y) / deltaTime

    };

​

    velocities.push(currentVelocity);

    if (velocities.length > numFramesForAverage) {

      velocities.shift(); // Remove the oldest velocity

    }

​

    let avgVelocity = velocities.reduce((acc, val) => {

      acc.x += val.x;

      acc.y += val.y;

      return acc;

    }, {x: 0, y: 0});

​

    avgVelocity.x /= velocities.length;

    avgVelocity.y /= velocities.length;

​

    console.log(`Moving average velocity of keypoint 12: x=${avgVelocity.x.toFixed(2)}, y=${avgVelocity.y.toFixed(2)}`);

​

    prevKeyPoint12.x = keypoint[0];

    prevKeyPoint12.y = keypoint[1];

    prevTime = currentTime;

  }

}

​

​

​

​

// Flower class

class Flower {

 constructor(x, y) {

    this.pos = createVector(x, y);

    this.symmetry = int(random(4, 30)); // Initialize with random symmetry

    this.angle = 360 / this.symmetry;

    this.setupNoise();

    this.avgDistance = 0; // default value

​

  }

​

​

  updateSymmetry(newSym) {

    if (this.symmetry !== newSym) {

      this.symmetry = newSym;

      this.angle = 360 / this.symmetry;

    }

  }

  updateAverageDistance(newAvgDistance) {

    this.avgDistance = newAvgDistance;

  }

​

  setupNoise() {

    // Perlin noise setup

    this.xoff = random(0, 1000);

    this.yoff = this.xoff + offset;

    this.mx = map(noise(this.xoff), 0, 1, -width*0.6, width*0.6);

    this.my = map(noise(this.yoff), 0, 1, -height*0.6, height*0.6);

    this.px = this.mx;

    this.py = this.my;

    this.timer = 0;

  }

​

​

  update() {

    // Update previous positions

    this.px = this.mx;

    this.py = this.my;

let scale = map(this.avgDistance, 50, 300, 0.1, 1); // Adjust these values as needed

    this.mx = map(noise(this.xoff), 0, 1, -width * scale, width * scale);

    this.my = map(noise(this.yoff), 0, 1, -height * scale, height * scale);

    this.xoff += increment;

    this.yoff += increment;

    this.timer++;

​

    // Change symmetry based on timer

    if (this.timer % 100 === 0) {

      increment = random(0.01, 0.02);

      this.symmetry = int(random(maxaxis, maxaxis+1));

      this.angle = 360 / this.symmetry;

    }

  }

  display() {

    push();

    translate(this.pos.x, this.pos.y);

    // Get color based on timer

    let col = color(map(this.timer % 200, 0, 255, 100, 255), 

                    map(sin(this.timer * 0.05), -1, 1, 100, 255),  

                    map(cos(this.timer * 0.05), -1, 1, 100, 255));

    stroke(col);

    let sw = 2;

    strokeWeight(sw);

    // Draw the symmetry lines

    for (let i = 0; i < this.symmetry; i++) {

      rotate(this.angle);

      line(this.mx, this.my, this.px, this.py);

      push();

      scale(1, -1);

      line(this.mx, this.my, this.px, this.py);

      pop();

    }

    pop();

  }

}

​