How to gather mapped data into a float array?

edited November 2017 in Questions about Code

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!

Answers

  • 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.

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

  • 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?

  • edited November 2017

    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).

  • @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));
      }
    }
    
  • 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);
      }
    }
    
  • edited November 2017 Answer ✓

    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);
      }
    }
    
  • 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.

Sign In or Register to comment.