let outerPupilX = 20;

let outerPupilY = 20;

let innerPupilX = 20;

let innerPupilY = 20;

let eyeHeightDefault = 50;

let dR;

let dL;

let dD;

let dT;

let angle;

let percentArrLeft;

let percentArrBottom;

let percentArrRight;

let pieChartLeft;

let pieChartBottom;

let pieChartRight;

​

function preload() {

  myData = loadJSON('confirmed_cases.json');

  //font = loadFont('myriad-std-sketch');

}

​

function setup() {

  createCanvas(600, 600);

  background(165, 61, 19);

  textFont('Martel');

  percentArrLeft = Object.values(myData.Age)

  percentArrBottom = Object.values(myData.Sex)

  percentArrRight = Object.values(myData.Ethnicity)

  pieChartLeft = new pieChart(100, 300, percentArrLeft, 200);

  pieChartRight = new pieChart(500, 300, percentArrRight, 100);

  pieChartBottom = new pieChart(300, 500, percentArrBottom, 180);

}

​

function draw() {

  background(165, 61, 19);

  //background(0);

  eye();

  //trigger function to draw graph depending on where cursor is

  checkLoc();

​

  //draw four placeholder shapes for checking loc

  //right

}

​

function checkLoc() {

  dL = dist(100, 300, mouseX, mouseY);

  dR = dist(500, 300, mouseX, mouseY);

  dD = dist(300, 500, mouseX, mouseY);

  dT = dist(300, 50, mouseX, mouseY);

  // check if cursor hovers over triggers

  //TODO: change hover trigger area, show what data it describes on hover

  if (dL < 100) {

    pieChartLeft.display()

    label(width-200, 60, "Age")

  } else if (dR < 50) {

    pieChartRight.display()

    label(20, 80, "Ethnicity")

  } else if (dD < 90) {

    pieChartBottom.display()

    label(width /3+40,60, "Sex")

  } else if (dT < 80) {

    fill(255)

    textSize(15)

    text("confirmed cases by disability", mouseX + 15, mouseY, 30)

  } else {}

  //TODO: display name of vis somewhere

}

​

function label(xloc, yloc, col) {

  textSize(20)

  xLoc = xloc;

  fill(255)

  textSize(15)

  text(`confirmed cases by ${col}`, mouseX + 15, mouseY, 30)

  let labelArr = [];

  for (i in myData[col]) {

    labelArr.push(i + ":  " + myData[col][i] + "%")

  }

  let grey;

  textSize(24)

  for (i = 0; i < labelArr.length; i++) {

    gray = map(i, 0, labelArr.length, 0, 255);

    fill(gray);

    text(labelArr[i], xloc, yloc + 60 * i, width-200, height);

  }

}

​

function eye() {

  noStroke();

  push();

  translate(width / 2, height / 2);

  fill(255);

  // d = dist(mouseX, mouseY, width / 2, height / 2);

  arc(0, -10, 50, eyeHeightDefault, 0.4, PI - 0.4);

  arc(0, 10, 50, eyeHeightDefault, PI + 0.4, -0.4);

  fill(139, 69, 19);

  ellipse(outerPupilX, outerPupilY, 20);

  fill(0);

  ellipse(innerPupilX, innerPupilY, 10);

  pop();

  //pupil follows cursor 

  outerPupilY = map(mouseY, 0, height, -5, 5, true);

  outerPupilX = map(mouseX, 0, width, -10, 10, true);

  innerPupilY = map(mouseY, 0, height, -10, 10, true);

  innerPupilX = map(mouseX, 0, width, -12, 12, true);

  //create an illusion of eyelid

  fill(165, 61, 19);

  ellipse(width / 2, map(mouseY, height, 0, 100, height / 2 + 10), width / 8, height / 7);

}

​

class pieChart {

  constructor(x, y, distribution, diameter) {

    this.x = x;

    this.y = y;

    this.distribution = distribution;

    //diameter increase over time

    this.diameter = diameter;

  }

  display() {

    let lastAngle = 0;

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

      let gray = map(i, 0, this.distribution.length, 0, 255);

      angle = map(this.distribution[i], 0, 100, 0, 360);

      fill(gray);

      arc(

        this.x,

        this.y,

        this.diameter,

        this.diameter,

        lastAngle,

        lastAngle + radians(angle)

      );

      lastAngle += radians(angle);

    }

    if (mouseIsPressed) {

      this.label()

    }

  }

  label() {

    //fill(255,255,255,50);

    //rect(20,20,560,560);

    fill(13, 22, 200);

    //text exerpt of news to the background.

  }

}