How to create a grid of colours using data from a csv file.

lanelps

I'm trying to create a grid of 3x100, and in each individual square is a different colour, which is getting its information from a csv file which contains rgb values for each square. The issue I'm having is the not all the colours are displaying, all the squares are the same colour except the first square which is at x:0 and y:0.

int totalrows;
float [] therows;

float [] theR;
float [] theG;
float [] theB;

squares [] s;

void setup() {
  size(600, 600, P2D);
  frameRate(2);
  //background(255);

  loadData();

  s = new squares[totalrows];
}

void draw() {

  background(255);
  for (int i=0; i<totalrows; i++) {
    s[i] = new squares(theR[i], theG[i], theB[i]);
    s[i].run();
  }
}

class squares {

  float r;
  float g;
  float b;

  float x;
  float y;

  squares(float _r, float _g, float _b) {

    r = _r;
    g = _g;
    b = _b;
  }

  void run() {

    stroke(0);
    //noStroke();

    for (int i=0; i<3*5; i+=5) {
      for (int j=0; j<totalrows*5; j+=5) {

        rect(i, j, 5, 5);
        fill(r, g, b);
      }
    }
  }
}

void loadData() {

  Table table;
  TableRow row;

  table = loadTable("1-5-2017.csv", "header");
  totalrows = table.getRowCount();

  theR = new float[totalrows];
  theG = new float[totalrows];
  theB = new float[totalrows];

  for (int i=0; i<totalrows; i++) {
    row = table.getRow(i);
    theR[i] = row.getInt("R");
    theG[i] = row.getInt("G");
    theB[i] = row.getInt("B");
  }
}

Here is a link to the files.

https://drive.google.com/open?id=0B8ubSSzmgWImNldSOGtfQkNHN1k

jeremydouglass

So class squares creates a "squares." That "squares" object contains a single RGB, a single xy, and a run routine which draws a long series of rects (as many as the count of a global variable, totalrows) based on that one color. Meanwhile, you created an array of squares. Each one draws all of them, in the same place. Every single draw loop (60 times a second) you destroy and recreate each squares with an RGB -- leaving each xy at 0,0. Each squares then runs, drawing a set of identical squares.

That definitely looks wrong. Either your class is a single square or it is a set of squares. You did it half one way and half the other.

kfrajer

The formatting link is not broken: https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text#latest

My suggestion below. Note the changes as they might be suitable to your objective based on the information provided.

Kf

int totalrows;
float [] therows;

float [] theR;
float [] theG;
float [] theB;

squares [] s;

void setup() {
  size(600, 600, P2D);
  frameRate(2);
  //background(255);

  loadData();

  s = new squares[totalrows];
  for (int i=0; i<totalrows; i++) {
    s[i] = new squares(i,theR[i], theG[i], theB[i]);
  }

  println(theR);
}

void draw() {

  background(255);
  for (int i=0; i<totalrows; i++) {
    s[i].run();
  }
}

class squares {

  final int len = 50;

  float r;
  float g;
  float b;

  float x;
  float y;
  int rowN;

  squares(int row, float _r, float _g, float _b) {

    rowN=row;
    r = _r;
    g = _g;
    b = _b;
  }

  void run() {

    stroke(0);
    //noStroke();

    for (int i=0; i<3*len; i+=len) {
      switch(i) {
        case 0*len:
        fill(r, 0,0);
        break;
        case 1*len:
        fill(0, g, 0);
        break;
        case 2*len:
        fill(0, 0, b);
        break;
      }
      rect(i, rowN*height/(1.0*totalrows), len, len);
    }
  }
}

void loadData() {

  Table table;
  TableRow row;

  table = loadTable("1-5-2017.csv", "header");
  totalrows = table.getRowCount();

  theR = new float[totalrows];
  theG = new float[totalrows];
  theB = new float[totalrows];

  for (int i=0; i<totalrows; i++) {
    row = table.getRow(i);
    theR[i] = row.getInt("R");
    theG[i] = row.getInt("G");
    theB[i] = row.getInt("B");
  }
}

lanelps

Ok awesome, I think I have it sorted now. kfrajer the code you revealed to me that I actually wanted a 1X100 grid with rgb values in each individual square. jeremydouglass thank you for explaining how my code was laid out, I was following a tutorial and trying to work my idea around the tutorial example. Thank you both very very much! The response time on this forum is excellent.