Column values from CSV arranged in a grid

Processing Coding Questions
1

Hi there

I’ve been using Processing for years, but am stumped by what I think might be quite simple - I have searched but with no luck.

My aim is to take a list of string values from a column in a CSV and arrange them in a grid.

I can make a grid using for loops (as in code below), but all that happens in a nested loop is it repeats the first ten values.

For the sake of argument, let’s say the CSV has 100 rows. What I want to happen is the second row starts with the eleventh value from the CSV and we fill out the 10x10 grid with the 100 strings from the CSV.

Here’s where I’m upto:

Table table;
void setup() {
  size(600, 600);
  noLoop();
  table = loadTable("data.csv", "header");
}
void draw() {
  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
       text(table.getString(i, 3), 100 + i * 20, 100 + j * 20);
    }
  }
}

Hopefully someone get’s what I mean and can point me in the right direction… many thanks :slight_smile: Michael

Also… I have tried a variety of tricks using the i and j values (see below code snippet) to increment but am not quite there yet…

text((1 + i) * (1 + j), 100 + i * 20, 100 + j * 20);

2

Does the csv have 10 columns?

text(table.getString(i, 3)

Why 3, what about

text(table.getString( j, i)  .....

https://www.processing.org/reference/Table_getString_.html

3

Maybe a simpler way of looking at the problem is I’d like to arrange the numbers 1 - 100 consecutively in a 10x10 grid. Sample code (that isn’t quite right) below:

void setup() {
  size(600, 600);
  noLoop();
}
void draw() {
  for (int i = 0; i < 10; i++) {
    for (int j = 0; j < 10; j++) {
      text(i + j, 100 + i * 20, 100 + j * 20);
    }
  }
}

It seems like it should be easy - hence me asking!

1 Like
4

Hey thanks, for that I don’t want to replicate the layout of the CSV, I want to arrange the contents of one column in a grid. I just posted another code sample that may explain my query a bit better :slight_smile:

5

Ah, then let a 3rd variable k run, use k in getString [ text(table.getString(k, 3), ...]

say k++;

6

Amazing, thankyou! Just the prompt I needed. I’ve now got the 1 - 100 problem sorted (code below). I can extrapolate this to my CSV thing. Thanks for the help! :slight_smile:

int k = 1;

void setup() {
  size(600, 600);
  noLoop();
}

void draw() {
  for (int j = 0; j < 10; j++) {
    for (int i = 0; i < 10; i++) {
      text(k, 100 + i * 20, 100 + j * 20);
      k++;
    }
  }
}
1 Like
7

Hey, and welcome to the forum!

Great to have you here!

1 Like
8

Thanks, I’ve been using Processing for years - can’t believe I’ve never asked a question here (I’d have probably saved a few years worth of googling)… :man_shrugging:

2 Likes
9

k can be local (in draw()) and can / should start with 0 I guess

void draw() {
  int k = 0;
  for (int j = 0;
10

Yeah I guessed that for the CSV thanks, just wanted the 1-100 solution to be nice and clean :slight_smile:

1 Like