make text appear letter by letter

Birckk

I've made this code thingy but can't find any other way than the one shown down below to make the letters appear one by one :) hope someone can help.

boolean begin = false;
int time;
int elapsedTime;

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


void draw() { 
  String start = "This is a quickstory...";
  String story= "";

  background(0,0,0);

  if (elapsedTime>=1500){  start = start+" and it's a fun one :).."; }
  if (elapsedTime>=3000){  start = start+" but it can quickly get a little hectic!!!"; }

  if (elapsedTime>=5000){story = story+"I";}
  if (elapsedTime>=5100){story = story+" ";}
  if (elapsedTime>=5200){story = story+"o";}
  if (elapsedTime>=5300){story = story+"n";}
  if (elapsedTime>=5400){story = story+"c";}
  if (elapsedTime>=5500){story = story+"e";}
  if (elapsedTime>=5600){story = story+" ";}
  if (elapsedTime>=5700){story = story+"t";}
  if (elapsedTime>=5800){story = story+"o";}
  if (elapsedTime>=5900){story = story+"o";}
  if (elapsedTime>=6000){story = story+"k";}
  if (elapsedTime>=6100){story = story+" ";}
  if (elapsedTime>=6200){story = story+"a";}
  if (elapsedTime>=6300){story = story+" ";}
  if (elapsedTime>=6400){story = story+"w";}
  if (elapsedTime>=6500){story = story+"a";}
  if (elapsedTime>=6600){story = story+"l";}
  if (elapsedTime>=6700){story = story+"k";}
  if (elapsedTime>=7500){story = story+" down to the beach but ended up getting cold feet and went home again"; }

  if (begin) {

    elapsedTime = millis() - time;
    text("Press E to end", 20, 30);

    text(start, 20, 50);
    text(story, 20, 70);

  }
  else { textAlign(CENTER);text("Press S to start", 300, 300); textAlign(LEFT); }

}

void keyPressed(){ 
    if (key == 's' || key == 'S') {
    time = millis();
    // start music
    begin = true;
  }
    if (key == 'e' || key == 'E') {
    begin = false;
  }
}

kfrajer

Check this code below. There is an exercise at the end if you decide to pursue it. I am using the computer's clock to keep track of time. When I show a letter, then I tell the computer to show the next letter ONLY when next time is reached, which I define as soon as I change the letter.

Notice that if you pressed and drag the mouse, you can change the size of the text. There is an extra exercise of changing the rate the letters are shown dragging along the width, for you to do.

Press P to toggle the play/pause state.

Keep the reference handy as it will help you in your coding journey:

https://processing.org/reference/

For instance, you need this to understand what I did:

https://processing.org/reference/String_substring_.html

Notice this is one of many approaches to do this. The way you did it is one way but it is lots to work to change it or include new features. This approach gives more flexibility.

Finally, there is a new forum: https://discourse.processing.org

Kf

boolean begin = false;

int updateRate=120; //units in msecs
int nextTime;

String mytext="";
String screenText="";
int textPosition=0;

void setup() { 
  size (600, 600, JAVA2D);

  mytext="Lorem ipsum dolor sit amet, sit tempor. Dui enim, gravida orci in turpis ullamcorper neque enim. Consequat luctus et justo dictum interdum. Mauris fusce, augue orci sit quis in amet,"; 
  mytext+="donec sollicitudin faucibus lobortis rutrum hac, ut curabitur sem ullamcorper sed eget, wisi et morbi lorem commodo augue aliquam. Ante tristique a.";
  mytext+="Sociis a volutpat dui, wisi nunc in ultricies viverra nunc, eos sed habitasse lacus. Purus porttitor ac sed nec ante. Consectetuer mauris lobortis, condimentum luctus quis,";
  mytext+=" cursus dolor dui lacus id mattis mauris, pretium adipiscing congue tempor mauris gravida elit, ex ultrices amet justo. Sit mauris proin placerat ultrices, ut nullam etiam libero.";
  mytext+="Malesuada semper condimentum justo proin, parturient egestas dolor, erat rutrum quis sem ut a. Adipiscing felis, at orci non nunc ut sapien. Hymenaeos malesuada, nulla per aliquam aperiam,";
  mytext+="wisi dolor. At sit feugiat egestas et, tincidunt varius id purus in, malesuada libero, wisi ligula rhoncus nulla massa vel feugiat. Nec sollicitudin. Vel tortor nibh wisi. Mollis sed in";
  mytext+="dapibus vitae morbi elit, consectetuer mauris dolor elementum, purus vel pellentesque in morbi sit.";
  nextTime=-1;

  surface.setTitle("Press P to play/pause effect");
}


void draw() {
  background(0);

  if (begin && millis()>nextTime) {

    textPosition++;
    screenText=mytext.substring(0, textPosition);

    nextTime=millis()+updateRate;
  }

  text(screenText, 100, 100, 500, 500);
}

void keyPressed() { 

  if (key == 'p' || key == 'P') {   
    begin = !begin;
  }
}

void mouseDragged(){

  textSize(int(map(mouseY,0,height,6,18)));  //Drag along height changes text size

  textSize(int(map(mouseY,0,height,6,18)));  //EXERCISE: Drag along width changes typing rate

}

Birckk

It took a little time to figure out how you set it up but it's not that difficult once you figure out how the substring works. I put up this question in the hope of something like the tool "substring" to display a "length" of the string in correlation to the time. thanks again and enjoy the summer :)

ps. the "mini task" is fun and all but i know how to update "updaterate" in correlation to the mouseY for vertical position :) "updaterate=50+mouseY" as an example. it can of course be modified a lot to also be going faster rather than only slower and change the values and so on