Random rows/columns in a csv file and print text with typewriter effect

Full code below in case anyone needs it in the future:

/* This sketch randomly selects rows from a CSV file
 these rows are then printed out to screen using 
 a 'typewriter' style effect.
 I want the text to print out and then stay on screen for 5 seconds.
 I then want the screen to stay blank for 5 seconds before starting again. 
 */

int state=0; // state of the program 
Table table; // table object 
int timer; //creates a a timer variable
int counter = 0; //creates a counter variable and sets it to zero 
String full; //a string to combine amount + name 
String amount; //a string to combine amount + name 
String newAmount; // a string with new amount 
String newName; // a string ith newNames


void setup() {
  // size(1000, 1000); //size
  fullScreen();
  PFont font; //font 
  table = loadTable("nameISP.csv", "header");
  smooth(); 
  font = createFont("HoeflerText-Italic-48", 48); //creates font
  textFont(font, 120); //text font 
  textAlign(CENTER, CENTER); //aligns text to Center
  selectRow(); //calls selectRow fucntion 
  timer=millis();
}

void draw() {
  switch (state) { 

    //this calls typeWriter1
  case 0:
    // this will be exectued if state = 0
    background (0); //background 
    typeWriter1();
    break; // break for case 0 


  case 1:
    //this is the break between typewriter 1 + 2 

    if (millis()-timer > 5000) { //if 5 seconds has passed 
      timer=millis();
      state=2;  // move on
    }
    break; //break for case 1 

    //this calls typeWriter2 
  case 2:
    background(0); //background 
    text(newAmount, 0, 40, width/2, height/2); //keeps Amount on screen for duration of sketch 
    typeWriter2();
    break; //break for case 2

    //this should keep typewriter2 text on screen for 5 seconds 
  case 3: 

    if (millis()-timer > 5000) {
      timer=millis();
      background(0); //this background clears screen between iterations 
      state=4;
    }

    break;
   case 4:
    if (millis()-timer > 5000) {
      timer=millis();
      selectRow();
      state=0;
    }
    break;
  }
}

//---------------------------------------------------------------------


// Tyewriter1 pulls the first column, prints it too screen, and waits a few seconds 
void typeWriter1() {

  text(newAmount.substring(0, counter), 
    0, 40, width/2, height/2); //text to print 
  if (millis()-timer > 100) { //this is the typewriter effect 
    counter++;      // go to next letter 
    timer=millis(); // reset timer
  }

  if (counter > newAmount.length()) { //this if statement resets counter to 0 when text is finished 
    counter = 0; // reset
    state = 1; //go to state one 
    timer=millis(); // reset timer
  }
}

void typeWriter2() {

  text(newName.substring(0, counter), 
    100, 40, width, height ); //text to print 
  if (millis()-timer > 100) { //this is the typewriter effect 
    counter++;      // go to next letter 
    timer=millis(); // reset timer
  }
  if (counter > newName.length()) { //this if statement resets counter to 0 when text is finished 
    counter = 0; // reset
    state = 3;
    timer=millis(); // reset timer
  }
}


void selectRow() {  

  TableRow row;  //Table row object 
  String amount="", name=""; //two strings representing columns in csv
  row = table.getRow((int)random(table.getRowCount())); //print a random row  
  amount = row.getString("IP"); //a string with amount
  name = row.getString("ISP"); // prints name for row
  full = amount + " " +  name;  //combines name and row into new String called full 
  newAmount = amount;
  newName = name; 
  println (full); //just prints to serial monitor so I can test all is working
}
//
2 Likes

Hi everybody,

Resurrecting this old thread as I’m back with this project once again!

I would like to now host this project on a webpage, permanently—my question is if I should ‘rewrite’ the code with p5.js or can I use it as it is already using processing.js or some other method.

Thanks!

(Belatedly, sorry – If you are still doing this:)

Do you want the webpage sketch to be drawing its CSV data from a server-side csv file? Or do you want the user to be able to select / load their own CSV file?

In general: p5.Table / p5.TableRow are not exactly the same as Processing’s Table and TableRow classes, but the API is very close.