let isReady = false;

let index = 0;

let hashVertices = [];

​

function setup() {

  createCanvas(400, 400);

  const url = "https://spreadsheets.google.com/feeds/cells/1XT37VDhqFplsX1VBmkPPZoSyeqNBjty54lz9SZhv4zU/1/public/full?alt=json";

  httpGet(url, 'jsonp', false, function(response) {

    // when the HTTP request completes, populate the variable that holds the

    // earthquake data used in the visualization.

    console.log(response)

    let entries = response.feed.entry;

    for (let entryIdx = 5; entryIdx < response.feed.entry.length; entryIdx += 3) {

      console.log(entryIdx)

      console.log(response.feed.entry[entryIdx].content['$t'])

      hashRates.push(response.feed.entry[entryIdx].content['$t']);

      console.log("\n")

    }

    console.log(hashRates)

    isReady = true;

    background(255);

  });

}

​

function draw() {

  if (isReady) {

    console.log(hashRates[index])

    fill('black');

    text(hashRates[index], 10, 10);

    noFill();

    stroke(random(255), random(255), random(255));

    beginShape()

    let centerX = random(width);

    let centerY = random(height);

    hashVertices.push([centerX, centerY]);

    vertex(centerX, centerY);

    curveVertex(random(width), random(height));

    vertex(hashVertices[Math.floor(Math.random() * hashVertices.length)][0], hashVertices[Math.floor(Math.random() * hashVertices.length)][1]);

    endShape(CLOSE)

    if (index >= hashRates.length) {

      background(255);

      hashVertices = [];

      index = 0;

    } else {

      index += 1; 

    }

  } else {

    text("LOADING", width / 2, height / 2)

  }

}