Printing characters one by one?

Processing Coding Questions
1

Hello,

How can I print out string characters one by one?

Kind of like how in some RPG games when an NPC is talking the text will print out slowing at a certain speed each letter one by one.

However I’m not going left to right, I’m printing them out in a circle which I’ve managed to do; except all the letters end up getting printed out in each space rather than each letter one by one.

This is my bit of code that prints out the string in a circle,

for(int i = 1; i <= quote.length(); i++) {
    letterX = cntX + radius * cos(i*angleSpeed);
    letterY = cntY + radius * sin(i*angleSpeed);
    for(int j = 0; j < quote.length(); j++) {
      text(quote.charAt(j), letterX, letterY);
    }
  }

I’m counting out the individual characters and I though charAt() would pull them out individually, I now realize thats not the case and I really don’t know what direction I should go from here…

Here is the entirety of my code should you need or wish to view it,

int cntX, cntY; 
float letterX, letterY;
int radius = 260; 
String quote = "Everything you can imagine is real. | Pablo Pi-casso";
float angleSpeed = TWO_PI/quote.length();

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

void draw() {
  background(150);
  frameRate(0.5);
  printQuote();
}

void printQuote() { 
  
  int cntX = width/2; cntY = height/2;
  
  fill(255, 0, 0);
  textSize(30);
  
  for(int i = 1; i <= quote.length(); i++) {
    letterX = cntX + radius * cos(i*angleSpeed);
    letterY = cntY + radius * sin(i*angleSpeed);
    for(int j = 0; j < quote.length(); j++) {
      text(quote.charAt(j), letterX, letterY);
    }
  }
  
}
1 Like
2

i would do the looping like this:

int i, cntX, cntY; 
float letterX, letterY;
int radius = 260; 
String quote = "Everything you can imagine is real. | Pablo Pi-casso";
float angleSpeed = TWO_PI/quote.length();

void setup() {
  size(600, 600);
  frameRate(2);
  fill(255, 0, 0);
  textSize(30);
}

void draw() {
  background(150);
  printQuote();
  i++;
  if ( i > quote.length() ) i = 0; 
}

void printQuote() { 
  int cntX = width/2, cntY = height/2;
  for (int j = 0; j < i; j++) {
    letterX = cntX + radius * cos(j*angleSpeed);
    letterY = cntY + radius * sin(j*angleSpeed);
    text(quote.charAt(j), letterX, letterY);
  }
}
1 Like
3

Your use of charAt is correct

But you need to get rid of one for loop - the inner one

Have an upperBound for your for loop which you increase in draw (make it a global variable)

Remember that the screen gets updated only once at the end of draw(). Hence everything that is drawn in draw appears at the end of draw(). So you can not make an Animation using for loop. Instead use the fact that draw in itself loops automatically and put the variable responsible for the animation there (in our case upperBound which is to which number the for loop is allowed to run, the < part).

Check upperBound against length of the string also and reset to 0 then.

Chrisir

2 Likes