let video;

let predictions = [];

​

//will store hand coordinates from posenet

let handX;

let handY;

​

//Dimensions of cube particles

let DIM = 20;

​

//will hold seed value for tree creating

let treeSeed;

​

let song;

​

//initial values for portal maths

let n = 4;

let d = 50;

​

//stores status of shift button for portal activation

let pass = 0;

​

//loading in audio assets

function preload(){

  song = loadSound('portal soundtrack.mp3');

  song2 = loadSound('tree soundtrack.mp3');

}

function setup() {

  song2.loop();

  //WEBGL canvas for 3D

  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();

  //pluggin to travers around WEBGL canvas with mouse

  createEasyCam();

  createEasyCam({distance:400});

  document.oncontextmenu = ()=>false;

  angleMode(DEGREES);

  treeSeed = random(1,1000);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background(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);

  }

  }

  }

  //Draw Portal

  if(pass == 1){

    song2.stop();

    song.loop();

  push();

  translate(0, 0, -width);

  stroke(235);

  noFill();

  strokeWeight(2)

  beginShape();

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

    //mathematical formula for Maurer Rose

    let k = i*d;

    let r = sin(n*k)*500;

    let x = r*cos(k);

    let y = r*sin(k);

    vertex(x,y);

  }

  endShape();

  //change values slowly

  n+=0.0001;

  d+=0.01;

  pop();

  }

  //create tree and rotate 

  push();

  translate(0,200,0);

  rotateY(frameCount);

  scale(2);

  randomSeed(treeSeed);

  branch(100);

  pop()

  push();

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

  push();

  scale(-1, 1);

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

​

​

​

  drawKeypoints();

​

  pop();

  pop();

}

​

​

​

// 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(255,0,0);

         }

      noStroke();

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

    }

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

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

  }

}

​

//functions makes the tree

function branch(len){

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

  let glowColor = color(255, 255, 255); // Set the glow color

​

   ambientMaterial(glowColor); // Set the ambient material for the glow

​

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

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

  translate(0,-len);

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

  // let growth = 14

  if(len>growth){

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

      rotateY(random(100,140));

      push();

      rotateZ(random(20,50));

      branch(len*0.7);

      pop();

    }

  }

}

​

//detect mouse press for portal

function keyPressed() {

  if (keyCode  === SHIFT) {

    pass = 1;

  } else {

    pass = 0;

  }

}

​

​