----- Coding Tutorial by Patt Vira ----- 

Name: Location-Based Data Viz

Video Tutorial: https://youtu.be/rX25ofN_dRY

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let r = 200; let h_num = 12; let m_num = 60; let s_num = 60;

let c1, c2;

​

let clocks = []; let cols = 4; let rows = 4; let size;

​

let table;

​

function preload() {

  table = loadTable("assets/timezone.csv", "csv", "header");

}

​

function setup() {

  createCanvas(500, 500);

  angleMode(DEGREES);

  c1 = color("#e91fa8");

  c2 = color("#b9dfee");

  size = width/cols;

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

    clocks[i] = [];

    for (let j=0; j<rows; j++) {

      let x = size/2 + i*size;

      let y = size/2 + j*size;

      let cityIndex = j*rows + i; 

      clocks[i][j] = new Clock(x, y, size/2 - 5, cityIndex);

    }

  }

}

​

function draw() {

  background("#410585");

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

    for (let j=0; j<rows; j++) {

      clocks[i][j].displayClock();

    }

  }

}