How to gather mapped data into a float array?

mfuster

Hello, I've been banging my head against the wall with this one for a few days as my knowledge of Processing is next to null. I have a csv with Lux measurements. I am trying to retrieve the lux data and map it so that I can use it as an 'alpha' property in a rect() fill. I'm sure it's really simple but I just don't know where I am going wrong. This is my code:

Table table;
float [] luxValues;
float luxMapped;
float [] alpha;
int margin, graphHeight;
float overallMin, overallMax;
int RowCount;


void setup () {
  size(1200, 300);
  processData();
}

void draw () {
  background(20);

  for (int i=0; i<60; i++) {
    //fill(255,alpha);
    stroke(255);
    rect(margin+i*10, margin, 10, 10);
  }
  for (int i=61; i>60 && i<RowCount; i++) {
    //fill(255,alpha);
    stroke(255);
    rect(margin+(i-61)*10, margin+10, 10, 10);
  }
}


void processData() {
  table=loadTable("040617.csv", "header");
  RowCount = table.getRowCount();
  float[] luxValues = float(table.getStringColumn("lux"));
  overallMin = min(luxValues);
  overallMax = max(luxValues);

  margin = 50;

 for (int i=0; i<RowCount; i++) {
    float luxMapped = map(luxValues[i], overallMin, overallMax, 0, 255);

    // need to map luxValues onto a luxAlpha array here?
    //float[] alpha = luxMapped;??
  }
}

Any help or suggestions appreciated. Thanks!

mfuster

I'm sorry, I don't know what it is you want me to look at in the code of that link. I'm an Processing-idiot.

GoToLoop

Sorry, posted that in the wrong thread! X_X Just deleted it. 8-X

jeremydouglass

Can you give an example of the top three rows of your 040617.csv -- that is, the header and a couple data rows?

What is the current behavior of your sketch -- what do you want to happen with alpha and the rect, and what happens instead?

mfuster

Here are some sample rows of 040617.csv:

date,time,lux
04.06.2017,09:17:02,353
04.06.2017,09:17:03,354
04.06.2017,09:17:04,355
04.06.2017,09:17:06,356
04.06.2017,09:17:07,357

What I am attempting to do is map the lux values into 0 - 255 and then use these adjusted values to color (fill()) the rectangles. Either as RGB (grey) or as (255, adjusted lux value). I would like every rectangle to represent a lux reading of one second in a shade of grey.

At the moment I can not fill the rectangles with these values. I am having nullpointerexceptions, int[] does not convert to int, etc. type of messages on anything I attempt. The rectangles show up as white when the the sketch runs (and gives me no errors).

jeremydouglass

@mfuster:

Since your Table is already designed to add rows and columns, why not just add a column of mapped lux values to your table? This simplifies a lot of what you are doing.

Table table;
int margin;

void setup () {
  size(1200, 300);
  margin = 50;
  processData();
}

void draw () {
  background(20);
  stroke(255);

  // draw rectangles based on the luxMap of each row
  int i=0;
  for ( TableRow row : table.rows()) {
    fill(255, row.getFloat("luxMap"));
    rect(margin+i*10, margin, 10, 10);
    i++;
  }
}

void processData() {
  // load data
  table = loadTable("040617.csv", "header");

  // find lux min and max
  float[] luxValues = table.getFloatColumn("lux");
  float luxMin = min(luxValues);
  float luxMax = max(luxValues);

  // add a luxMap column to the table and calculate it
  table.addColumn("luxMap", Table.FLOAT);
  for ( TableRow row : table.rows()) {
    row.setFloat("luxMap", map(row.getInt("lux"), luxMin, luxMax, 0, 255));
  }
}

mfuster

Hi, I think this is working but I can't really tell as the squares go off the screen. I had thought of the following code, in order to get the squares in rows of 60 units. However, I don't know how to adapt it to your code.

void draw () {
  background(255);

  for (int i=0; i<60; i++) {
  //fill();
    stroke(0);
    rect(margin+i*((width-margin-margin)/60), margin, (width-margin-margin)/60, (height-margin-margin)/60);
  }
  for (int i=61; i>60 && i<RowCount+1; i++) {
    //fill();
    stroke(0);
    rect(margin+(i-61)*((width-margin-margin)/60), margin+(height-margin-margin)/60, (width-margin-margin)/60, (height-margin-margin)/60);
  }
}

jeremydouglass

If you want to create rows of sixty units in a 2D grid, use nested for loops.

Before the example was just counting up by i (x):

  // draw rectangles based on the luxMap of each row
  int i=0;
  for ( TableRow row : table.rows()) {
    fill(255, row.getFloat("luxMap"));
    rect(margin+i*10, margin, 10, 10);
    i++;
  }

...instead, count up by x (each column) then reset x and increment y (new row):

  // draw rectangles based on the luxMap of each row
  int x=0;
  int y=0;
  for ( TableRow row : table.rows()) {
    fill(255, row.getFloat("luxMap"));
    rect(margin+x*10, margin+y*10, 10, 10);
    x++;
    if (x>60) {
      x=0;
      y++;
    }
  }

To do these like traditional for loops, you would have a y loop, an x loop, and then retrieve each Table row by its index (y*60+x) inside the inner loop.

Something like this:

int rowunits = 60;
int size = 10;
for (y...) {
  for (x...) {
    row = table.getRow(y*rowunits+x)
    ...
    rect(margin+x*size, margin+y*size, size, size);
  }
}

mfuster

You're a star! It's working perfectly. I will study the code now and hopefully learn some more about Processing. Thank you so much for your time and explanations.