'Typewrite' effect: typing one by one with delay on the strings?

yunii

Hi there,

I am pretty new to processing and would like to know how I would approach the coding of a method to making some feedback messages look like it's being typed. I would think that you need to access the number of the letter in the string and make it delay one after another??

I searched around on OpenProcessing and fiddled with one example, although it goes backwards and I dont understand how the substring + text.length() work.

If I tried text.length() + 1 it gives a whole bunch of random letters where as I just want the letters of the string I declared to display.

Thank you very much in advanced for your attempts and assistance.

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

String text1 = "Hello, Make this a typewriter ";
PFont font;

void setup() {
  size(400, 400);
  smooth();
  font = loadFont("Arial-Black-48.vlw");
  textFont(font, 20);
}

void draw() {

  background(150);
  fill(255);
  text(text1, 0, 40, width, height);
 typewriteText();

}

void typewriteText(){
    if(text1.length() > 0) {
      text1 = text1.substring(0, text1.length() -1);
    }

}

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

GoToLoop

Perhaps you should take a quick look at some String methods: ;)
http://processing.org/reference/String.html

PhiLho

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

String text1 = "Hello, Make this a typewriter.";
PFont font;
int counter;

void setup() {
  size(400, 400);
  frameRate(5);
  smooth();
  font = createFont("Arial", 48);
  textFont(font, 20);
}

void draw() {

  background(150);
  fill(255);
  typewriteText();

}

void typewriteText(){
  if (counter < text1.length())
    counter++;
  text(text1.substring(0, counter), 0, 40, width, height);
}

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

Also: See To newcomers in this forum: read attentively these instructions (moved topic, reformatted code)

yunii

Oh i'm sorry I should have formatted the code! Thank you so much it makes so much more sense!! I was approaching wrong the whole time. Thank you again!

blyk

Here is my code http://www.openprocessing.org/sketch/113262

syang

Hey, not sure what the etiquette is surrounding reviving dead threads but I wanted to jump off of this after googling it as opposed to starting an entirely new thread. Apologies if it's frowned upon here!

Thanks to @PhiLho's code, this helped me with a sketch of mine that needed the simple typewriter effect but I'm trying to get it to occur only after a mouse press.

 
String text1 = "Hello, Make this a typewriter.";
PFont font;
int counter = 0;
boolean isPressed = false;
 
void setup() {
  background(150);
  size(400, 400);
  //frameRate(20);
  smooth();
  font = createFont("Arial", 48);
  textFont(font, 20);
}
 
void draw() {
 if ( mousePressed){
   isPressed= true;
  background(150);
  fill(255);
 //if (counter < text1.length())
    
  //text(text1.substring(0, counter), 0, 40, width, height);
  //counter++;
   text(text1.substring(0, counter), 0, 40, width, height);
   if (counter < text1.length()){
     //if (frameCount%4==0)
        counter++;
   }
  
  }
}

I've looked at other examples on this forum as well and have tried new functions and running draw() in there, booleans, using the mousePressed/Released/Clicked function and keep running into the issue of having to hold down the mouse button as opposed to just clicking and letting it go.

Any pointers on what is probably an obvious solution? I know that draw adds to the

counter++

but what can I do to push it after just one mouse click so the whole sentence goes through?

Thank you!

Chrisir

String text1 = "Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter."
  +"Hello, Make this a typewriter.";

PFont font;
int counter = 0;
boolean isPressed = false;

void setup() {
  background(150);
  size(400, 400);
  //frameRate(20);
  smooth();
  font = createFont("Arial", 48);
  textFont(font, 20);
}

void draw() {

  background(150);
  fill(255);
  //if (counter < text1.length())

  //text(text1.substring(0, counter), 0, 40, width, height);
  //counter++;
  text(text1.substring(0, counter), 0, 40, 
    width-20, height);
  if (counter < text1.length() && isPressed) {
    //if (frameCount%4==0)
    counter++;
  }
}

void mousePressed() {
  isPressed = !isPressed;
}

//void mouseReleased() {
//  isPressed= false;
//}

syang

Thank you, @chrisir!

Chrisir

Line 43 let‘s you toggle the value

jeremydouglass

I'm fond of using interpolation as an animation tool -- as you move the value from 0 to 1.0 you change how much of the string is revealed.

See example code here:

https://forum.processing.org/two/discussion/26040/how-to-make-some-texte-move-and-change-its-opacity

This approach is easy if you want each string (regardless of length) to be "typed" in the same amount of time. If you also want the per-character speed to be constant, then you additionally need to scale the animation time to the string length.