CSV and javacript mode

mfuster

Hi, I've made a sketch that runs off csv files. It works great on java mode in processing but when I export it to javascript mode the page shows the screen, but is blank. How can I get the sketch to read the csv files in javascript mode? thanks

GoToLoop

Are we supposed to guess w/o seeing your code or some other example? 8-}

Regardless, just know that Pjs' API is still pretty much stuck @ Processing 1.5.1:
http://ProcessingJS.org/reference/

Therefore P2 functions like loadTable() is unavailable there. Go w/ loadStrings() + split() instead. :-\"

mfuster

Sorry about that. I thought it might be a general issue (as in it doesn't do tables, or they have to be on a server, etc) hence I didn't put my code. But here is:

import processing.sound.*;
String[] LTables = {"01-04.07.2016 lux.csv", "01.07.2016 lux.csv", "02.06.2016 lux.csv","02.07.2016 lux.csv", "03-04.07.2016 lux.csv","03.06.2016 0 lux.csv","03.06.2016 1 lux.csv","04.07.2016 lux.csv","06-07.06.2016 lux.csv", "06.06.2016 lux.csv", "20.04.2016 0 lux.csv", "20.04.2016 1 lux.csv","20.04.2016 2 lux.csv"};    
Table table;
Table table1;
Table table2;

TableRow row;
TableRow row1;
TableRow row2;

float fData;
float fData1;
float fData2;

float fNoise;
float fNoise1;
float fNoise2;

PFont font;
int index = 0;
int i = 0;
int y = 0;
int z = 0;
int mapMin = 0;
int mapMax = 7500;

float lerpFdata;
float lerpFdata1;
float lerpFdata2;

float lerpFNoise;
float lerpFNoise1;
float lerpFNoise2; 
int timer = 0;
int timerDelay = 1000; // how often the next row of data is loaded
float lerpEase = 0.01; // lerp easing factor

SinOsc sine0;
SinOsc sine1;
SinOsc sine2; //Processing sound

void setup() { 
  //fullScreen();
  size(1062,600); //testing screen
  background(0);
  noCursor();


  font = createFont("Arial", 14, true);
  frameRate(60); //keep at least 60 for smoothness

  //Processing sound
  sine0 = new SinOsc(this);
  sine0.play();
  sine1 = new SinOsc(this);
  sine1.play();
  sine2 = new SinOsc(this);
  sine2.play();

}

void draw () {
  background(0);

  //random function
  if (i==0) {
    int randomTable0 = int(random(12));
  println(LTables[randomTable0]); 
   table = loadTable(LTables[randomTable0], "header");
    row = table.getRow(0);
  }
  if (y==0) {
    int randomTable1 = int(random(12));
  println(LTables[randomTable1]); 
  table1 = loadTable(LTables[randomTable1], "header");
  row1 = table1.getRow(0);
  }
  if (z==0) {
     int randomTable2 = int(random(12));
  println(LTables[randomTable2]); 
  table2 = loadTable(LTables[randomTable2], "header");
   row2 = table2.getRow(0);
  }
  // delay update of new data and reset timer
  if (millis() >= timer) {
    timer = millis() + timerDelay/100;
    row = table.getRow(i); // get a new row of data
    row1 = table1.getRow(y); // get a new row of data
    row2 = table2.getRow(z); // get a new row of data
    fData = map(row.getInt("lux"), mapMin, mapMax, 0, 255); // get new data from row
    fData1 = map(row1.getInt("lux"), mapMin, mapMax, 0, 255); // get new data from row
    fData2 = map(row2.getInt("lux"), mapMin, mapMax, 0, 255); // get new data from row
    // increment row counter
    i++;
    y++;
    z++;
    //  check to see if at end of data
    if (i >= table.getRowCount()) {
      i = 0;//if so, loop back to first row
    }
      if (y >= table1.getRowCount()) {
    y = 0;//if so, loop back to first row
  }
  else if (z >= table2.getRowCount()) {
    z = 0;//if so, loop back to first row
  }
  }


//screen0
  fData = map(row.getInt("lux"), mapMin, mapMax, 0, 255);
  lerpFdata = lerp(lerpFdata, fData, lerpEase);
  fill(255, lerpFdata);
  noStroke();
  rect(width/3-100,0,200,height);


  //screen1
  fData1 = map(row1.getInt("lux"), mapMin, mapMax, 0, 255);
  lerpFdata1 = lerp(lerpFdata1, fData1, lerpEase);
  fill(255, lerpFdata1);
  noStroke();
  rect(width/3+105,0,200,height);

  //screen2
  fData2 = map(row2.getInt("lux"), mapMin, mapMax, 0, 255);
  lerpFdata2 = lerp(lerpFdata2, fData2, lerpEase);
  fill(255, lerpFdata2);
  noStroke();
  rect(width/3+310,0,200,height);

  //sound
 fNoise = map(lerpFdata, 0, 255, 0,100);
 sine0.freq(fNoise);
 //sound1
 fNoise1 = map(lerpFdata1, 0, 255, 0, 100);
 sine1.freq(fNoise1);
  //sound2
 fNoise2 = map(lerpFdata2, 0, 255, 0, 100);
 sine2.freq(fNoise2);


  // draw text
  fill(255);
  textFont(font);
  textAlign(LEFT);
  TableRow firstRow = table.getRow(0);
  TableRow lastRow = table.getRow(table.getRowCount()-1);

  TableRow firstRow1 = table1.getRow(0);
  TableRow lastRow1 = table1.getRow(table1.getRowCount()-1);

  TableRow firstRow2 = table2.getRow(0);
  TableRow lastRow2 = table2.getRow(table2.getRowCount()-1);


  text(row.getString("date")+ " " +row.getString("time"),width/3-95, height -80);
  text("lx: "+row.getInt("lux"), width/3-95, height -60);
  text("55º51'.26''N 4º14'.35'' W", width/3-95, height -40);


  text(row1.getString("date")+ " " +row1.getString("time"), width/3+110, height - 80);
  text("lx: "+row1.getInt("lux"), width/3+110, height -60);
  text("55º51'.26''N 4º14'.35'' W", width/3+110, height -40);

  text(row2.getString("date")+ " " +row2.getString("time"), width/3+315, height -80);
  text("lx: "+row2.getInt("lux"), width/3+315, height -60);
  text("55º51'.26''N 4º14'.35'' W", width/3+315, height -40);

}

GoToLoop

I thought I was clear that Pjs got no support for features introduced in P2 like Table? :-@
And you also got a cardinal sin: Loading resources after setup() had finished. :-&

Moreover, processing.sound is a Java library and thus doesn't work in JS.
You're gonna need to look up for some JS library w/ those features. #:-S

My advice is if you wanna deploy for the web and needs to use libraries, go w/ p5js instead: :(|)

1. http://p5js.org/reference/
2. http://p5js.org/libraries/
3. https://GitHub.com/processing/p5.js/wiki/Processing-transition

mfuster

Man, forums.... one great place to come and get abused for free. Thanks, and for your help.