let poemColor = [];

​

//set up poem table

let poems;

​

//set up poem array

let poemsArray = [];

​

//set up arrays for current hour

let poemsThisHour = [];

let titlesThisHour = [];

let authorsThisHour = [];

let linksThisHour = [];

​

//set up integer to choose a poem from poemsThisHour

let poemPicker;

​

//hour input for functions

let hourInput;

​

//set up clock and hand size and position variables

var clockRadius;

var clockX;

var clockY;

var handX;

var handY;

​

// this is the radius of the time indicator, not the path along which it's moving

var handRadius;

​

//boolean for whether mouseDragged or mouseReleased, to work in draw

let dragging;

​

//fake hour the mouse is dragging to

let draggedHour;

​

// set up lerpScale, mapping mouseX, mouseY relative to center of clock

var lerpScale;

​

//minutes

var m;

//hours

var h;

​

//timer

let timer = 60;

​

//load poems CSV

function preload() {

  poems = loadTable("poems.csv", "csv", "header");

}

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

​

  frameRate(60);

​

  //set predetermined colors

  poemColor[0] = color(171, 239, 255);

  poemColor[1] = color(171, 239, 255);

  poemColor[5] = color(255, 253, 179);

  poemColor[9] = color(255, 230, 0);

  poemColor[13] = color(255, 194, 0);

  poemColor[17] = color(255, 96, 16);

  poemColor[20] = color(39, 0, 204);

​

  //create poemColors 2 through 4

  for (i = 1; i <= 3; i++) {

    poemColor[i + 1] = lerpColor(poemColor[1], poemColor[5], i / 4);

  }

​

  //create poemColors 5 through 9

  for (i = 1; i <= 3; i++) {

    poemColor[i + 5] = lerpColor(poemColor[5], poemColor[9], i / 4);

  }

​

  //create poemColors 10 through 12

  for (i = 1; i <= 3; i++) {

    poemColor[i + 9] = lerpColor(poemColor[9], poemColor[13], i / 4);

  }

​

  //create poemColors 14 through 16

  for (i = 1; i <= 3; i++) {

    poemColor[i + 13] = lerpColor(poemColor[13], poemColor[17], i / 4);

  }

​

  //create poemColors 18 through 19

  for (i = 1; i <= 3; i++) {

    poemColor[i + 17] = lerpColor(poemColor[17], poemColor[20], i / 3);

  }

​

  //create poemColors 21 through 23

  for (i = 1; i <= 3; i++) {

    poemColor[i + 20] = lerpColor(poemColor[20], poemColor[0], i / 4);

  }

​

  //set color scale mapping

  lerpScale = map(mouseX, 50, width, 0, 1, true);

​

  //set clock position and size

  clockX = width / 2;

  clockY = height / 3 - 20;

  clockRadius = height / 3;

  handRadius = 15;

​

  //create array of poems from CSV

  poemsArray = poems.getArray();

​

  //set font size

  textSize(14);

​

  hourInput = hour();

​

  //draw background gradient, clock face, and find poems for current hour when sketch starts

  sky(hourInput);

  poemViz();

  currentPoems(hourInput);

  printPoem();

  currentTime(hour() + norm(minute(), 0, 60));

  textStyle(ITALIC);

  textAlign(RIGHT);

  textLeading(15);

  text('drag to see other poem-hours.\nclick celestial body to see present poem-hour.',width-10,572);

}

​

function sky(time) {

  //create gradient from 4-hours-ago color to current-hour color

  let gradientStartHour = time - 4;

  //loop to end of poemColor array if we've reached the beginning

  if (gradientStartHour < 0) {

    gradientStartHour = 23 - time - 4;

  }

  bgGradient(poemColor[gradientStartHour], poemColor[time]);

​

  //draw clock face

  noStroke();

  fill(poemColor[time]);

  circle(clockX, clockY, clockRadius);

}

​

function currentPoems(inputHour) {

  removeElements();

​

  //look at all the poems; find and create a new array of poems matching current hour

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

    if (poemsArray[i][0] == inputHour) {

      poemsThisHour.push(poemsArray[i][5]); //There must be a better 2D array way.

      titlesThisHour.push(poemsArray[i][2]);

      authorsThisHour.push(poemsArray[i][3]);

      linksThisHour.push(poemsArray[i][4]);

    }

  }

​

  //pick one of the poems at random between 0 and the number of current-hour poems

  poemPicker = int(random(poemsThisHour.length));

}

​

function printPoem() {

  rectMode(CORNER);

  poemX = 100;

  poemY = (height * 2) / 3 + 25;

  titleY = poemY - 40;

  poemW = 400;

  poemH = height / 3;

  let titleHeight = 0;

​

  //make text white or black depending on hour

  if (hourInput >= 18 && hourInput <= 23) {

    blendMode(BLEND);

    fill(255, 250);

  } else {

    blendMode(BLEND);

    fill(0, 175);

  }

​

  //if the title is longer than 300px, move the author and poem down

  let titleWidth = textWidth(titlesThisHour[poemPicker]);

  if (titleWidth > 300) {

    titleHeight++;

  }

​

  removeElements();

​

  textAlign(LEFT);

​

  //print it out

  textFont("Crimson Text");

  textStyle(BOLD);

  textLeading(17);

  text(titlesThisHour[poemPicker], poemX, titleY, poemW, height / 3);

  let a = createA(linksThisHour[poemPicker], "↗");

  a.position(poemX + textWidth(titlesThisHour[poemPicker]) + 4, titleY - 4);

​

  textStyle(ITALIC);

  text(

    authorsThisHour[poemPicker],

    poemX,

    poemY - 24 + titleHeight * 20,

    poemW,

    height / 3

  );

​

  textStyle(NORMAL);

  text(

    poemsThisHour[poemPicker],

    poemX,

    poemY + titleHeight * 20,

    poemW,

    height / 3

  );

}

​

function poemViz() {

  let poemY = 0;

  let poemCount = 0;

  let poemPlacementRadius = clockRadius * 0.55;

  rectMode(CENTER);

​

  push();

  //move the whole thing so the clock center is the origin

  translate(clockX, clockY);

​

  //for every hour,

  for (let poemHour = 0; poemHour <= 23; poemHour++) {

    push();

​

    //find and count the number of poems matching the hour

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

      if (poemsArray[i][0] == poemHour) {

        poemCount++;

      }

    }

​

    //move them by translating from angle along the clock circle based on hour. i don't completely get how this works and why x = sin and y = cos, but it works

    translate(

      sin(poemHour * 15) * clockRadius * 0.56,

      -cos(poemHour * 15) * clockRadius * 0.56

    );

​

    //rotate each block by 15 degrees per hour, then flip it 180 so it's drawing outwards instead of inwards

    rotate(poemHour * 15 - 180);

​

    //fill it with the corresponding hour color

    noStroke();

    fill(poemColor[poemHour]);

​

    //draw a rectangle for each poem in poemsArray matching the hour

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

      if (poemsArray[i][0] == poemHour) {

        rect(0, 0 - poemY, 15, 10);

        poemY -= 12;

      } else {

        poemY = 0;

        poemCount = 0;

      }

    }

    pop();

  }

  pop();

}

​

function currentTime(time) {

  blendMode(BLEND);

​

  //start at top instead of at 6AM

  let h = map(time, 0, 24, 0, 360) - 90;

  handX = cos(h) * clockRadius * 0.43;

  handY = sin(h) * clockRadius * 0.43;

​

  push();

  //move the whole thing so the clock center is the origin

  translate(clockX, clockY);

​

  //draw a hand at the current time if not dragging

  if (!dragging) {

    noStroke();

    fill(255);

    circle(handX, handY, handRadius);

  }

​

  pop();

}

​

function bgGradient(topColor, bottomColor) {

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

    let interColor = map(i, height - i, height, 0, 1);

    let lineColor = lerpColor(topColor, bottomColor, interColor);

    stroke(lineColor);

    line(0, i, width, i);

  }

}

​

let startTimer;

​

function draw() {

  //if the mouse isn't being dragged, draw the sky and clock face and the poem visualization for the current hour

  if (!dragging) {

    hourInput = hour();

    // if (startTimer) {

    //   if (frameCount % 60 == 0 && timer > 0) {

    //     timer--;

    //   }

    //   if (timer == 0) {

    //     resetClock(hour());

    //   }

    // }

  } else {

    //if the mouse is being dragged, find the distance between it and the clock hand

    let dx = mouseX - handX - clockX;

    let dy = mouseY - handY - clockY;

​

    //find the angle between the mouse position and the clock hand

    draggedAngle = atan2(dy, dx);

    //find the new clock hand position from this angle

    dHandX = cos(draggedAngle) * clockRadius * 0.43;

    dHandY = sin(draggedAngle) * clockRadius * 0.43;

​

    //find the dragged hour corresponding to the angle

    draggedHour = int(map(draggedAngle, 1, 361, 6, 31));

    //if the hour is less than 1, loop back around to 23

    if (draggedHour < 0) {

      draggedHour = draggedHour + 24;

    }

​

    hourInput = draggedHour;

​

    //draw the sky and clock face corresponding to the dragged hour

    sky(hourInput);

    poemViz(hourInput);

    currentPoems(hourInput);

​

    console.log(poemsThisHour.length);

​

    //draw a clock hand at the dragged hour

    noStroke();

    fill(255);

    circle(dHandX + clockX, dHandY + clockY, handRadius);

​

    //find the distance between the mouse and the new clock hand position

    dx = mouseX - dHandX;

    dy = mouseY - dHandY;

  }

}

​

function mouseDragged() {

  dragging = true;

  removeElements();

  poemsThisHour = []; //There must be a better 2D array way.

  titlesThisHour = [];

  authorsThisHour = [];

  linksThisHour = [];

}

​

function mouseReleased() {

  dragging = false;

  startTimer = true;

​

  sky(hourInput);

  poemViz(hourInput);

​

  //print out a poem from the currentPoems

  printPoem();

​

  //update the clock hand to point to the dragged hour

  currentTime(hourInput);

  // textStyle(ITALIC);

  // textAlign(RIGHT);

  // textLeading(15);

  // text('drag to see other poem-hours.\nclick celestial body to see present poem-hour.',width-10,572);

}

​

// function resetClock(hourInput) {

//   timer = 60;

//   removeElements();

//   poemsThisHour = [];

//   titlesThisHour = [];

//   authorsThisHour = [];

//   linksThisHour = [];

//   sky(hourInput);

//   poemViz(hourInput);

//   currentPoems(hourInput);

//   printPoem();

//   currentTime(hourInput);

//   startTimer = false;

// }

​

function mousePressed() {

  if (dist(mouseX, mouseY, clockX, clockY) < clockRadius / 2) {

    removeElements();

    poemsThisHour = [];

    titlesThisHour = [];

    authorsThisHour = [];

    linksThisHour = [];

    sky(hourInput);

    poemViz(hourInput);

    currentPoems(hourInput);

    printPoem();

    currentTime(hourInput);

  }

}

​