let poseNet;

let pose;

let angle;

let v2; //between sun and earth

let star = [];

let starNum;

​

var appleTrees=[];

let treeNum;

var tree = [];

var colR, colG, colB;

var mouse = 0;

var earthAng;

​

//for year change

let yearLable = 2024;

var givenYear;

var a = 0;

var b = 0;

var c = 0;

var d = 0;

var e = 0;

var f = 0;  

​

var tableMonth;

var currentMonth= 0; //for change of month

​

//background gradient

const Y_AXIS = 1;

const X_AXIS = 2;

let c1, c2;

​

let sunImg;

let earthImg;

let gradientImg;

​

var mouse = 0;

​

​

function preload(){

  tableMonth = loadTable("month.csv","csv","header");

  sunImg = loadImage('sun.png');

  earthImg = loadImage('earth.png');

  gradientImg = loadImage('gradient.png');

  backSound = loadSound('back.wav');

  forwardSound = loadSound('forward.wav');

}

​

​

function setup(){

  createCanvas(windowWidth, windowHeight);

  var F = [-1,1]

  var K = random(F);

  givenYear = yearLable+floor(random(5,8))*K;

  video = createCapture(VIDEO);

  //size based on real capture

  video.size(4*height/3,height);

  video.hide();

  poseNet = ml5.poseNet(video,modelLoaded);

  poseNet.on('pose',gotPoses);

  noStroke();

  starNum = random(80,120);

  for (var m=0; m<starNum; m++){

     star.push(new Stars());

   }

  treeNum = 5;

  for(var n=0; n<3; n++){

    appleTrees.push(new Tree(random(width*0.7,width),random(height)));

  }

  for(var k=0; k<2; k++){

    appleTrees.push(new Tree(random(0,width*0.3),random(height*0.8,height*1.1)));

  }

  colR = tableMonth.getColumn('r');

  colG = tableMonth.getColumn('g');

  colB = tableMonth.getColumn('b');

}

​

function gotPoses(poses){

  //console.log(poses);

  //just get the first pose when there are multiple people

  if(poses.length>0){

    pose = poses[0].pose;

  }

}

​

function modelLoaded(){

  console.log('poseNet ready!');

}

​

function draw(){

  background(50);

  //

  //draw background

  var temLow = tableMonth.getColumn('temLow');

  var temHigh = tableMonth.getColumn('temHigh');

  var a1 = map(temHigh[currentMonth],30,100,30,220);

  var a2 = map(temLow[currentMonth],90,20,30,220);

  c1 = color(204,102,0,a1);

  c2 = color(0,102,153,a2);

  setGradient(0,0,width,height,c2,c1,Y_AXIS);

  if(mouse == 0){

    Start();

  }

  if(mouse == 2){

    End();

  }

  if(mouse == 1){

      //draw trees

    push();

    if(currentMonth>=0){

       //drawGround();

      for(var n=0; n<treeNum; n++){

        appleTrees[n].ground();

      }

​

      for(var t=0; t<treeNum; t++){

        appleTrees[t].show();

      }

    }

    pop();

​

    //draw black circle

    fill(0);

    image(gradientImg,width*0.5-height*0.55,height*0.5-height*0.55,height*1.1,height*1.1)

​

    //draw stars

    for (var m=0; m<starNum; m++){

       star[m].show();

     }

​

    push();

    //flip the image

    scale(-1,1);

    translate(-width,0);

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

​

    //check if there a valid pose first, then draw

    if(pose){

     let v0 = createVector(-1, 0);

     let v1 = createVector(pose.rightWrist.x-4*height/3*0.5,pose.rightWrist.y-height*0.5)

     angle = v0.angleBetween(v1);

     //print(angle);

    }

    pop();

​

    v2 = p5.Vector.fromAngle(-angle,height*0.35);//sun and earth distance

​

    image(sunImg,width*0.5-height*0.12,height*0.5-height*0.12,height*0.24,height*0.24);

​

    createMonth();

    drawEarth();

    drawMonthLable();

    drawYearLable();

    //Draw Temp

    /*var d1 = temHigh[currentMonth]*2;

    var d2 = temLow[currentMonth];

    fill(255);

    rect(height*0.1,height*0.5,height*0.05,-d1);*/

  }

}

​

​

function mouseClicked(){

  mouse = 1;

}

​

function Start(){

  textAlign(CENTER);

  fill(250);

  textStyle(BOLD);

  textSize(height*0.09);

  text("Time Machine",width*0.5,height*0.32);

  textStyle(NORMAL);

  textSize(height*0.06);

  text("Rotate your arm to the Specified Year",width*0.5,height*0.45);

  push();

  textStyle(BOLD);

  fill(244, 81, 30);

  textSize(height*0.045);

  text("Go to "+ givenYear + " ...",width*0.5,height*0.6);

  pop();

  push()

  textStyle(ITALIC);

  textSize(height*0.04);

  text("Tap the screen to start！",width*0.5,height*0.7);

  pop();

}

​

function End(){

  textAlign(CENTER);

  fill(250);  

  textStyle(BOLD);

  textSize(height*0.09);

  text("END",width*0.5,height*0.45);

}

​

​

​

function createMonth(){

  if (angle>=0-PI/12 && angle<PI/6-PI/12){currentMonth=0;}

  if (angle>=PI/6-PI/12 && angle<PI/3-PI/12){currentMonth=1;}

  if (angle>=PI/3-PI/12 && angle<PI/2-PI/12){currentMonth=2;}

  if (angle>=PI/2-PI/12 && angle<2*PI/3-PI/12){currentMonth=3;}

  if (angle>=2*PI/3-PI/12 && angle<5*PI/6-PI/12){currentMonth=4;}

  if (angle>=5*PI/6-PI/12 && angle<PI-PI/12){currentMonth=5;}

  if (angle>=-PI-PI/12 && angle<-5*PI/6-PI/12){currentMonth=6;}

  if (angle>=-5*PI/6-PI/12 && angle<-2*PI/3-PI/12){currentMonth=7;}

  if (angle>=-2*PI/3-PI/12 && angle<-PI/2-PI/12){currentMonth=8;}

  if (angle>=-PI/2-PI/12 && angle<-PI/3-PI/12){currentMonth=9;}

  if (angle>=-PI/3-PI/12 && angle<-PI/6-PI/12){currentMonth=10;}

  if (angle>=-PI/6-PI/12 && angle<0-PI/12){currentMonth=11;}

}

​

function drawEarth(){

  push();

  translate(width*0.5,height*0.5);

  //fill(0,255,0,180);

  //ellipse(v2.x,v2.y,height*0.09);

  translate(v2.x,v2.y);

  rotate(frameCount/90);

  image(earthImg,-height*0.05,-height*0.05,height*0.1,height*0.1);

  pop();

}

​

​

function drawMonthLable(){ 

  var v3 = v2.mult(1.3);

  var monthLable = tableMonth.getColumn('monthLable');

  fill(255);

  push();

  textAlign(CENTER);

  translate(width*0.5,height*0.5);

  textSize(height*0.025);

  text(monthLable[currentMonth],v3.x,v3.y);

  pop();

  push();

  textAlign(LEFT);

  textSize(height*0.03);

  text(monthLable[currentMonth],height*0.1,height*0.25);

  pop();

  push();

  fill(244, 81, 30)

  textAlign(LEFT);

  textSize(height*0.03);

  text("Move your arm to go to "+ givenYear + " ...",height*0.1,height*0.1);

  pop();

}

​

function drawYearLable(){

  if(currentMonth == 11){

    a = 1;

  }

  if (a == 1 && currentMonth == 0){

      b = 1;

      c = 0;

    }

  if(currentMonth == 0){

    c = -1;

  }

  if (c == -1 && currentMonth == 11){

      d = -1;

    }

  e = a+b;

  f = c+d;

  if(e == 2){

    yearLable++;

    a = 0;

    b = 0;

    forwardSound.play();

  }

  if(f == -2){

    yearLable--;

    c = 0;

    d = 0;

    backSound.play();

  }

  if(currentMonth == 2 || currentMonth == 10 ){

    a = 0;

    b = 0;

    c = 0;

    d = 0;

  }

  push();

  fill(255);

  textSize(height*0.1);

  textAlign(LEFT);

  text(yearLable,height*0.1,height*0.2);

  pop();

  if(yearLable == givenYear){

    mouse = 2;

  }

  return(mouse);

}

​

function Stars(){

  this.angle = random(-PI,PI);

  this.dis = random (0,height*0.48);

  this.pos = p5.Vector.fromAngle(this.angle,this.dis);

  this.size = random(height*0.005,height*0.01);

  this.col = color(255,random(40,170));

  this.show = function(){

    push();

    translate(width*0.5,height*0.5);

    translate(this.pos);

    noStroke();

    fill(this.col);

    ellipse(0,0,this.size);

    pop();

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​

//function for trees

function Tree(w,h){

  var branchNum = tableMonth.getColumn('branchNum');

  this.len = height*random(0.15,0.25);

  this.thick = this.len*0.1;

  this.pos = createVector(w,h);

  this.colR = random(100,110);

  this.colG = 80+random(-10,10);

  this.colB = 50;

  this.ang1 = random(PI/50,PI/3.5);

  this.ang2 = random(-PI/3.5,-PI/50);

  this.ang3 = random(PI/50,PI/3.5);

  this.ang4 = random(-PI/3.5,-PI/50);

  this.show = function(){

    push();

    translate(this.pos);

    stroke(this.colR,this.colG,this.colB,230);

    Branch1(this.len,branchNum[currentMonth],this.thick,this.ang1,this.ang2);

    Branch2(this.len,branchNum[currentMonth],this.thick,this.ang3,this.ang4);

    pop();

  }

  this.ground = function(){

    noStroke(); 

    fill(colR[currentMonth],colG[currentMonth],colB[currentMonth],80);

    ellipse(this.pos.x,this.pos.y+height*0.03,height*0.55,height*0.25);

  }

}

​

function Leave(){

  var leaveColor = color(colR[currentMonth],colG[currentMonth],colB[currentMonth]);

  var leaveWidth = tableMonth.getColumn('leaveWidth');

  var leaveHeight = tableMonth.getColumn('leaveHeight');

  var currentLeaveWidth = leaveWidth[currentMonth];

  var currentLeaveHeight = leaveHeight[currentMonth];

  push();

  fill(leaveColor);

  ellipse(0,0,height*currentLeaveWidth,height*currentLeaveHeight);

  pop();

}

​

function Snow(){

  var snowWidth = tableMonth.getColumn('snowWidth');

  var snowHeight = tableMonth.getColumn('snowHeight');

  var currentSnowWidth = snowWidth[currentMonth];

  var currentSnowHeight = snowHeight[currentMonth];

  push();

  fill(250,150);

  ellipse(0,0,height*currentSnowWidth,height*currentSnowHeight);

  pop();

}

​

function Branch1(len,num,thick,ang1,ang2){

  strokeWeight(thick);

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

  push();

  translate(0,-len);

  if (num>0){

    len = len*0.65;

    thick = thick*0.65;

    num--;

    push();

    rotate(ang1+noise(currentMonth*10)*0.2);

    Branch1(len,num,thick,ang1,ang2);

    //add leaves

    if(num<2){

       push();

       translate(0,-len);

       noStroke();

       Leave();

       pop();

     }

    //add snow

    if(currentMonth == 11 || currentMonth == 0 || currentMonth == 1){

      if(num<3){

       push();

       translate(0,-0.5*len);

       noStroke();

       Snow();

       pop();

     }

    }

    pop();

​

    push();

    rotate(ang2-noise(currentMonth*20)*0.2);

    Branch1(len,num,thick,ang1,ang2);

    if(num<2){

       push();

       translate(0,-len);

       noStroke();

       Leave();

       pop();

     }

    pop();

  }

  pop();

}

​

function Branch2(len,num,thick,ang3,ang4){

  strokeWeight(thick);

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

  push()

  translate(0,-len);

  if (num>0){

    len = len*0.65;

    thick = thick*0.65;

    num--;

    push();

    rotate(ang3+noise(currentMonth*10)*0.2);

    Branch2(len,num,thick,ang3,ang4);

     if(num<2){

       push();

       translate(0,-len);

       noStroke();

       Leave();

       pop();

     }

    pop();

    push();

    rotate(ang4-noise(currentMonth*20)*0.2);

    Branch2(len,num,thick,ang3,ang4);

     if(num<2){

       push();

       translate(0,-len);

       noStroke();

       Leave();

       pop();

     }

    pop();

  }

  pop();

}