let table;

let r;

let g;

let b;

// let's create a grid of 100 x 100 squares

// total of 10,000 squares

// of size 8 x 8

let gridSize = 10000;

let sqDim = 8;

let xVal = 0;

let yVal = 0;

​

function preload() {

  table = loadTable('data/data-makin-stuff.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(800, 800);

  // count the rows and columns

  print(table.getRowCount() + ' total rows in table');

  print(table.getColumnCount() + ' total columns in table');

  print(table.getString((31787-2), 2));

  print(table.getString((31787-2), 3));

  print(table.getString((31787-2), 4));

}

​

function draw() {

  background(220);

  noStroke();

  for (let x = 0; x < gridSize; x++) {

    // get the rectangle color from the table

    r = int(table.getString((15835-2+(4*x)), 2));

    g = int(table.getString((15835-2+(4*x)), 3));

    b = int(table.getString((15835-2+(4*x)), 4));

    fill(r, g, b);

    // draw the rectangle

    rect(xVal, yVal, sqDim);

    xVal = xVal + sqDim;

    if ((x+1) % 100 == 0) {

      yVal = yVal + sqDim;

      xVal = 0;

    }

  }

  noLoop();

//   r = int(table.getString((31787-2), 2));

//   g = int(table.getString((31787-2), 3));

//   b = int(table.getString((31787-2), 4));

//   fill(r, g, b);

//   rect(0, 0, sqDim, sqDim);

//   r = int(table.getString((31788-2), 2));

//   g = int(table.getString((31788-2), 3));

//   b = int(table.getString((31788-2), 4));

//   fill(r, g, b);

//   rect(8, 0, sqDim, sqDim);

//   r = int(table.getString((31789-2), 2));

//   g = int(table.getString((31789-2), 3));

//   b = int(table.getString((31789-2), 4));

//   fill(r, g, b);

//   rect(0, 8, sqDim, sqDim);

//   r = int(table.getString((31790-2), 2));

//   g = int(table.getString((31790-2), 3));

//   b = int(table.getString((31790-2), 4));

//   fill(r, g, b);

//   rect(8, 8, sqDim, sqDim);

}