​

let myData;

​

let x = 300;

let y = 300;

let r = 0;

let speed = 0.25;

​

let hairNum = 100;

let beardColumns = 20

​

​

let beardRows = 5

let beardCol = (70, 30, 10);

​

let currentDay;

let calendarDay;

let date = ["11/17/2020", "11/18/2020", "11/19/2020", "11/20/2020", "11/21/2020", "11/22/2020", "11/23/2020"];

​

let sketchTime;

​

function preload() {

  myData = loadJSON('data.json');

}

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  frameRate(60);

​

  currentDay = 0;

  calendarDay = date[0];

  setTimeout(updateDay, 0);

  //setTimeout(growGrayHairs, 0);

  setInterval(updateDay, 24000);

  //setInterval(growGrayHairs, 24000);

}

​

function draw() {

  background(250);

​

  translate(x, y);

​

  dayToNightLoop();

​

  drawFace();

​

  drawBeard();

​

  drawCalendar();

​

  growGrayHairs();

}

​

function drawFace() {

​

  // head shape

  ellipseMode(CENTER);

  strokeWeight(0);

  stroke(0);

  fill(250, 200, 190);

  ellipse(0, -50, 250, 250);

  beginShape();

  vertex(123, -25);

  vertex(-123, -25);

  vertex(-75, 110);

  vertex(-30, 140);

  vertex(30, 140);

  vertex(75, 110);

  endShape();

​

  // left ear

  arc(114, 0, 40, 40, 270, 120);

  beginShape();

  vertex(133, 7);

  bezierVertex(133, 7, 120, 20, 115, 30);

  vertex(110, 30);

  vertex(110, 0);

  endShape();

  arc(100, 30, 30, 35, 270, 120);

​

  // right ear

  arc(-114, 0, 40, 40, 60, 270);

  beginShape();

  vertex(-133, 7);

  bezierVertex(-133, 7, -120, 20, -115, 30);

  vertex(-110, 30);

  vertex(-110, 0);

  endShape();

  arc(-100, 30, 30, 35, 60, 270);

​

  // hair

  strokeWeight(2);

  stroke(0);

  fill(50, 20, 10);

​

  beginShape();

  vertex(0, -175);

  bezierVertex(0, -175, -160, -230, -110, 0);

  endShape();

​

  beginShape();

  vertex(0, -175);

  bezierVertex(0, -175, -150, -170, -120, -10);

  vertex(-100, 10);

  bezierVertex(-100, 10, -105, -130, 20, -155);

  endShape();

​

  beginShape();

  vertex(20, -155);

  bezierVertex(20, -155, -125, -130, -90, 20);

  vertex(-85, 40);

  bezierVertex(-85, 40, -105, -110, 30, -145);

  endShape();

​

  beginShape();

  vertex(2, -175);

  bezierVertex(1, -175, 145, -210, 123, -17);

  vertex(110, 0);

  bezierVertex(110, 0, 100, -180, 30, -150);

  endShape();

​

  beginShape();

  vertex(20, -160);

  bezierVertex(20, -160, 110, -150, 90, 20);

  bezierVertex(90, 20, 130, -170, 15, -170);

  endShape();

​

  beginShape();

  vertex(30, -150);

  bezierVertex(30, -150, 70, -140, 80, -70);

  bezierVertex(80, -70, 80, -10, 121, -17);

  bezierVertex(121, -17, 80, -10, 85, -70);

  bezierVertex(85, -70, 90, -160, 15, -165);

  endShape();

}

​

function drawBeard() {

​

  strokeWeight(1);

  fill(beardCol);

​

  // side burns

  rect(-105, 10, 2, 12, 1);

  rect(-95, 10, 2, 12, 1);

  rect(105, 10, 2, 12, 1);

  rect(95, 10, 2, 12, 1);

  rect(-100, 30, 2, 12, 1);

  rect(-90, 30, 2, 12, 1);

  rect(-80, 30, 2, 12, 1);

  rect(100, 30, 2, 12, 1);

  rect(90, 30, 2, 12, 1);

  rect(80, 30, 2, 12, 1);

​

  // main beard nested array

  for (i = 0; i < beardColumns; i++) {

    for (j = 0; j < beardRows; j++) {

      rect(-95 + (i * 10), 50 + (j * 20), 2, 12, 1);

    }

  }

}

​

function updateDay() {

​

  if (currentDay == 0) {

    greyHairNum = myData.Day0.touchedBeard.length;

    calendarDay = date[0];

  }

​

  if (currentDay == 1) {

    greyHairNum = myData.Day1.touchedBeard.length;

    calendarDay = date[1];

  }

​

  if (currentDay == 2) {

    greyHairNum = myData.Day2.touchedBeard.length;

    calendarDay = date[2];

  }

​

  if (currentDay == 3) {

    greyHairNum = myData.Day3.touchedBeard.length;

    calendarDay = date[3];

  }

​

  if (currentDay == 4) {

    greyHairNum = myData.Day4.touchedBeard.length;

    calendarDay = date[4];

  }

​

  if (currentDay == 5) {

    greyHairNum = myData.Day5.touchedBeard.length;

    calendarDay = date[5];

  }

​

  if (currentDay == 6) {

    greyHairNum = myData.Day6.touchedBeard.length;

    calendarDay = date[6];

  }

  if (currentDay > 6) {

    currentDay = 0;

    greyHairNum = myData.Day0.touchedBeard.length;

    calendarDay = date[0];

  }

​

  console.log("24 hours ellapsed");

  console.log("Number of grey hairs = " + greyHairNum);

  console.log("currentDay = " + currentDay + ", calendarDay = " + calendarDay);

​

  currentDay++;

}

​

//need to figure out how to store the time variable correctly

function growGrayHairs() {

  //remap recorded times

  sketchTime = frameCount;

  //map(sketchTime, 0, 60, 0, 24);

  randomSeed(greyHairNum);

​

  for (i = 0; i < greyHairNum; i++) {

    //map(myData.Day0.touchedBeard[i], 0, 24, 0, sketchTime);

​

    fill(150);

    rect(random(-100, 100), random(50, 130), 2, 12, 1);

  }

}

​

function dayToNightLoop() {

​

  push();

  fill(0);

  rotate(r);

  r = r + speed;

  rectMode(CENTER);

  rect(0, -300, 1200, 600);

  pop();

}

​

function drawCalendar() {

​

  push();

  strokeWeight(1);

  stroke(255, 0, 0);

  fill(255);

  rect(-250, -250, 100, 100);

​

  // calendar boxes

  for (i = 0; i < 7; i++) {

    for (j = 0; j < 5; j++) {

      rect(-235 + (i * 10), -215 + (j * 10), 10, 10);

    }

  }

​

  // date

  noFill();

  textAlign(CENTER);

  text(calendarDay, -200, -230);

  pop();

}

​

//notes

​

// if (myData.Day0.touchedBeard[i] >= sketchTime - 0.02 || myData.Day1.touchedBeard[i] <= sketchTime + 0.02) {

//   fill(150);

//   rect(random(-100, 100), random(40, 140), 2, 12, 1);

// }

​

// if (currentDay == 0) {

//     for (i = 0; i < greyHairNum; i++) {

//       //map(myData.Day0.touchedBeard[i], 0, 24, 0, sketchTime);

​

//       fill(150);

//       rect(random(-100, 100), random(50, 130), 2, 12, 1);

//     }

//   }

​

//   if (currentDay == 1) {

//     for (i = 0; i < greyHairNum; i++) {

//       //map(myData.Day0.touchedBeard[i], 0, 24, 0, sketchTime);

​

//       fill(150);

//       rect(random(-100, 100), random(50, 130), 2, 12, 1);

//     }

//   }

//   if (currentDay == 2) {

//     for (i = 0; i < greyHairNum; i++) {

//       //map(myData.Day0.touchedBeard[i], 0, 24, 0, sketchTime);

​

//       fill(150);

//       rect(random(-100, 100), random(50, 130), 2, 12, 1);

//     }

//   }

​

//    if (currentDay == 3) {

//     for (i = 0; i < greyHairNum; i++) {

//       //map(myData.Day0.touchedBeard[i], 0, 24, 0, sketchTime);

​

//       fill(150);

//       rect(random(-100, 100), random(50, 130), 2, 12, 1);

//     }

//   }

​

//   if (currentDay == 4) {

//     for (i = 0; i < greyHairNum; i++) {

//       for (j = 0; j < beardColumns; j++) {

//         for (k = 0; k < beardRows; k++) {

//           //map(myData.Day4.touchedBeard[i], 0, 24, 0, sketchTime);

​

//           fill(150);

//           rect(-95 + (i * 10), 50 + (j * 20), 2, 12, 1);

//         }

//       }

//     }

//   }

​

//   if (currentDay == 5) {

//     for (i = 0; i < greyHairNum; i++) {

//       for (j = 0; j < beardColumns; j++) {

//         for (k = 0; k < beardRows; k++) {

//           //map(myData.Day5.touchedBeard[i], 0, 24, 0, sketchTime);

​

//           fill(150);

//           rect(-95 + (i * 10), 50 + (j * 20), 2, 12, 1);

//         }

//       }

//     }

//   }

​

//   if (currentDay == 6) {

//     for (i = 0; i < greyHairNum; i++) {

//       for (j = 0; j < beardColumns; j++) {

//         for (k = 0; k < beardRows; k++) {

//           //map(myData.Day6.touchedBeard[i], 0, 24, 0, sketchTime);

​

//           fill(150);

//           rect(-95 + (i * 10), 50 + (j * 20), 2, 12, 1);

//         }

//       }

//     }

//   }