let video;

let predictions = [];

​

let handX;

let handY;

​

let DIM = 20;

​

let treeSeed;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

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

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

  createEasyCam();

  // createEasyCam(p5.RendererGL);

  createEasyCam({distance:400});

  document.oncontextmenu = ()=>false;

  angleMode(DEGREES);

  treeSeed = random(1,1000);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background(0)

  // lights();

  // box(100,100,100,0,0);

  // Point matrice

  for(let i = 0; i<DIM;i++){

    for(let j = 0; j<DIM;j++){

    for(let k = 0; k<DIM;k++){

      let x = map(i,0,DIM,-1000,1000);

      let y = map(j,0,DIM,-1000,1000);

      let z = map(k,0,DIM,-1000,1000);

      stroke(225);

      point(x,y,z);

  }

  }

  }

  push();

  translate(0,200,0);

  rotateY(frameCount);

  randomSeed(treeSeed);

  branch(100);

  pop()

  push();

  translate(windowWidth/2, -windowHeight/2);

  push();

  scale(-1, 1);

  // image(video, 0, 0, width, height);

​

​

​

  // We can call both functions to draw all keypoints and the skeletons

  drawKeypoints();

​

  pop();

  pop();

  // print(handX + "    " + handY);

}

​

​

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const prediction = predictions[i];

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      fill(100);

      if(i==0 && j==5){

        fill(220);

         }

      noStroke();

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

    }

    handX = predictions[0].landmarks[5][0];

    handY = predictions[0].landmarks[5][1];

  }

}

​

​

function branch(len){

  strokeWeight(map(len,10,100,1,10));

  let r = 80 + random(-20,20);

  let g = 120 + random(-20,20);

  let b = 40 + random(-20,20);

  stroke(map(len,10,100,50,255));

  line(0,0,0,0,-len-2,0);

  translate(0,-len);

  print(handX);

  let growth = map(handX,windowWidth-300,0+100,25,10);

  if(len>growth){

    for (let i = 0; i<3; i++){

      rotateY(random(100,140));

      push();

      rotateZ(random(20,50));

      branch(len*0.7);

      pop();

    }

  }

//   else{

//     let r = 80 + random(-20,20);

//     let g = 120 + random(-20,20);

//     let b = 40 + random(-20,20);

//     fill(r,g,b,200);

//     noStroke();

//     translate(5,0,0);

//     rotateZ(90);

//     beginShape();

//     for (let i = 0; i<60; i++){

//       let rad = 7;

//       let x = rad*cos(i);

//       let y = rad*sin(i);

//       vertex(x,y);

//     }

//     for (let i = 135; i<45; i--){

//       let rad = 7;

//       let x = rad*cos(i);

//       let y = rad*sin(-i) + 10;

//       vertex(x,y);

//     }

//     endShape();

//   }

}

​

​