// warning, only add noprotect if you're 100% sure you don't have infinite

// loops, or else you may freeze your browser

​

var url;

var cultures = [];

​

function preload() { // populate cultures array with culture objects

  // Loading data from the API.

  // *** Insert your API key here: ***

 var API_KEY = 'ba7fed2a-e5cb-4ccd-9281-2065b6527037';

 var query = 'culture';

  var params = '&size=100';

  url = 'https://api.harvardartmuseums.org/'+query+'?apikey='+API_KEY+params;

  loadJSON(url, gotResponse);

}

​

​

​

​

function setup() {

  createCanvas(900, 1300);

​

  // -----------------------------------

  // ----- 10 oldest bronze pieces -----

  // -----------------------------------

​

  title = createElement('h2', 'Most Popular Culture at HAM:');

  title.position(10, 20);

​

  // --------------------

  // ----- Timeline -----

  // --------------------

​

  // sort the item counts descending

  //  cultures.sort = function (cultureA, cultureB){

  //     if(cultureB.objectcount<cultureA.objectcount)

  //       return cultureB;

  //    else {

  //       return cultureA;

  //    }

  // }

 cultures.sort(function(a,b) {

    return b.objectcount - a.obejctcount;

});

  console.log(cultures);

​

​

  // Creating the ranking, links to images + date text

  for (var i = 0; i < 10; i++) {

    var thisLink = createA(cultures[i].name, i + 1 + '.) ' + cultures[i].objectcount);

    thisLink.position(10, 50 * i + 100);

    createElement('span', cultures[i].name + ', ' + cultures[i].objectcount).style('text-indent', '20px').style('font-size', '10pt').position(10, 50 * i + 100 + 23);

  }

  var label;

  var lineY;

  strokeCap(SQUARE);

  for (var index = 0; index < cultures.length; index++) {

​

    // Horizontal line

    lineY = map(cultures[index].objectcount, 0, 3000, 20, 1100);

    console.log(lineY)

    strokeWeight(2.5);

    stroke('brown');

    line(543.5, lineY, 570, lineY);

​

    // Text label for item date and name

    label = createDiv(cultures[index]);

    label = label.html(cultures[index].name, true);

    label.id('label' + index);

    label.style('display', 'none'); // Makes it invisible until draw

    // function sees your mouse on it

    label.style('width', '100px');

    label.style('font-size', '12px');

    label.style('font-family', 'sans-serif');

    label.position(580, lineY - 5);

  }

​

  // Start and end labels

  var timelineStart = createSpan('Most');

  timelineStart.style('font-weight', 'bold');

  timelineStart.style('font-family', 'sans-serif');

  timelineStart.position(450, 15);

​

  var timelineEnd = createSpan('Least');

  timelineEnd.style('font-weight', 'bold');

  timelineEnd.style('font-family', 'sans-serif');

  timelineEnd.position(450, 1100);

​

  // Start, end, and vertical lines

  strokeWeight(5);

  stroke('black');

  line(540, 20, 580, 20);

  line(540, 2000, 580, 2000);

  strokeWeight(3);

  line(541.5, 20, 541.5, 1100);

​

​

​

}

​

function draw() {

  // ------------------------------------

  // ----- Timeline mouseover event -----

  // ------------------------------------

​

  if (mouseX >= 545 && mouseX <= 575) {

    var label;

    var multipleItemsOnDate = false;

    var newX;

    var lineY;

​

    for (var index = 0; index < cultures.length; index++) {

      lineY = map(cultures[index].objectcount, 0, 3000, 20, 1100);

      if (int(mouseY) > (int(lineY) - 1) && int(mouseY) < (int(lineY) + 1)) {

​

        // Position the text label (handling more than 1 item per date)

        if (multipleItemsOnDate == true)

          newX = label.position().x + label.size().width + 5;

        label = select('#label' + index);

        label.position(newX, label.position());

​

        // Show the text label and draw a gold line for highlighted date

        label.show();

        strokeWeight(2.5);

        stroke('gold');

        line(543.5, lineY, 570, lineY);

        multipleItemsOnDate = true;

      } else {

        // Hide the text label and draw a brown line

        label = select('#label' + index);

        label.hide();

        strokeWeight(2.5);

        stroke('brown');

        line(543.5, lineY, 570, lineY);

      }

    }

  }

}

​

​

// ----------------------------------

// ----- JSON request functions -----

// ----------------------------------

​

function gotResponse(response) { 

 // This API is limited to 100 items per page. This code determines how many

 // pages there are, calls up each page, and loads each page's JSON into memory.

​

  var totalPages = response.info.pages;

  for (var currentPage = 1; currentPage <= totalPages; currentPage += 1) {

    url = url+'&page='+currentPage;

    loadJSON(url, gotPages);

  }

}

​

function gotPages(response) {

  // For each page of results, this code adds the results to cultures[] array.

 cultures = cultures.concat(response.records);

}