let isReady = false;

let index = 1;

let hashVertices = [];

let hashDates = [];

let centerX = 0;

let centerY = 0;

​

function setup() {

  createCanvas(1000, 800);

  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.

    let entries = response.feed.entry;

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

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

      hashDates.push(response.feed.entry[entryIdx - 2].content['$t'])

    }

    isReady = true;

    background(255);

    frameRate(30);

    hashVertices = [random(width), random(height)];

  });

}

​

function draw() {

  if (isReady) {

    clear();

    noFill();

    let num = Number(hashRates[index]);

    beginShape(LINES);

    num = Math.floor(num);

    strokeWeight(1)

    for (let i = 0; i < num; i+= 50) {

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

      // beginShape()

      vertex(centerX, centerY)

      centerX = random(width);

      centerY = random(height);

      // vertex(hashVertices[index - 1][1], hashVertices[index - 1][1])

      vertex(centerX, centerY)

      hashVertices.push([centerX, centerY]);

      // vertex(centerX, centerY);

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

      // vertex(hashVertices[index][0], hashVertices[index][1]);

      // endShape(CLOSE)

    }

    endShape()

    fill('white');

    text(`ETHEREUM HASH RATE:\t${hashRates[index]}`, 10, 10);

    text(`DATE:\t${hashDates[index]}`, 10, 30);

​

    if (index >= hashRates.length) {

      background(255);

      hashVertices = [];

      index = 1;

    } else {

      index += 1;

    }

  } else {

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

  }

}