[HELP] Make a text Appearing Letter by Letter

GGileWP

hi, i'm an italian student and i'm learning this fantastic programming language :)

i'm doing a project for my university, where i would like to have a text (internal or with an external file doesn't matter) that appears letter by letter like i'm typing it manually, is it possible? i'm searching everywhere but i was capable only to draw a WORD than substitute it with another word, but is not my case i want that all the letters i type stay and generate a full text ^^ i hope my english is good enough to let you understand what i need.

thanks any help would be 100% appreciated

akenaton

@GGileWP:: if i understand it s a kind of type writer you want have a look to Rita lib and the Rita typeWriter example

GGileWP

@akenaton is in this forum? can i have a link please?

Chrisir

Google

blyk

So here you go .. http://openprocessing.org/sketch/113262

It is one of my old code and you can reuse it.

Chrisir

to be honest, I wouldn't use the library and not use blyks approach

Do you know how setup() and draw() work?

so when you have background(0); at the beginning of draw() you clear you canvas.

now, what you want to do is each time draw runs, show the same word again, but with one letter more. The trick is the "one letter more" part. 1st round you want to show 0, then 1, then 2 letters etc. - so you need a variable howManyLettersToShow or so to store that number and increase it at the end of draw().

then e.g. look at substring() to use howManyLettersToShow

(or your teacher wants you to use a for-loop, the use howManyLettersToShow as an upper bound)

and look at framerate() please, see reference for all of those.

then do come back with detail question and showing your code

thank you!

Best, Chrisir ;-)

Ríbó

Cool. I'm trying to work this out, too. (If I can't, I'll try the blyk answer, thanks) Just started, here's where I'm at:

int lts = 0;
int howManyLettersToShow(){
  return lts++;

}

String test = "test string";

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


void draw(){
  howManyLettersToShow();
background (0);
text( test.substring(0,lts), 50,50);

}

So, this sort of works- but a StringIndexOutOfBoundsException happens once the String has completed.

Ríbó

//sorry for posting so much- 
//I'm just excited that things 
//(even these little things!) are happening. 


int lts = 0;
int howManyLettersToShow(){
  return lts++;

}

String test = "Ag deireadh na 1950dí, bhí na Stáit Aontaithe agus an Rúis Sóivéadach gafa le iomaíocht eacnamaíochta idé-eolaíochta agus míleata ar a dtugtar an 'Cogadh Fuair'. ";

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


void draw(){

  howManyLettersToShow();

background (0);
if (lts<=test.length()){
text( test.substring(0,lts), 50,50, 400,300);
}else{
text(test,50,50,400,300);

}

}

Chrisir

Does this work?

the function howmanyletterstoshow is a little over done but never mind

Remember to hit ctrl-t in the processing to get auto format please

;-)

_vk

A related discussion:

http://forum.processing.org/two/discussion/comment/41776/

Ríbó

:)

//overdone as in the name is too long? it works the first time, but I'm not able to reuse it. The second time I call it, (with k1 as a string parameter) the text just appears as a string, instead of 'type writer-ing' letter by letter.

int stage = 0;
int lts = 0;
int timeCheck1;

int howManyLettersToShow() {

  return lts++;
}

String test = "Ag deireadh na 1950dí, bhí na Stáit Aontaithe agus an Rúis Sóivéadach gafa le iomaíocht eacnamaíochta idé-eolaíochta agus míleata ar a dtugtar an 'Cogadh Fuair'. ";
String k1 = "cad nach dtuiginn tú a chroí?";
void setup() {

  frameRate(22);
  size(800, 600);
  textSize(22);
  fill(50, 200, 50);
}


void draw() {

  howManyLettersToShow();

  background (0);
  typeIt(test, 50, 50);




  rect(width/2, height/2, 50, 50);

  if (stage== 0 && mousePressed) { 


    stage = 3;
  }



  if (stage == 3) {

    howManyLettersToShow();

    background (0);

    typeIt(k1, 50, 450);
  }
}



void typeIt(String s, int x, int y) {

  if (lts<=s.length()) {
    text(s.substring(0, lts), x, y, 700, 300);
  } else {
    text(s, x, y, 700, 300);
  }
}

Ríbó

//accidental double post

Chrisir

You need to reset lts to 0

Also if I were you, I would have nothing outside the if-stage-clauses in draw()

Meaning the first line with test should also be in if(stage==0)

because now test would appear in all stages

Only background must be in the first line (outside if)

Chrisir

Afaik it makes sense to use the function mousePressed instead of the variable with the same name, since now (where you use the latter) it can happen that one mouse click is registered 3 times by the sketch.

The function doesn't do this.

_vk

As linked, an OOP approach:

PFont f;
MsgBox messages;
String[] s = { 
  "Hello folks, I'm a message Box. Welcome", 
  "A second message, to exemplify", 
  "And even a third to be typewrited"
};
int index =0;


void setup() {
  size(600, 100);
  f = createFont ("arial", 15);
  messages = new MsgBox("please press any key.", new PVector(20, 20), 560, f);
}

void draw() {
  messages.run();
}

void keyPressed() { 
  messages.setText(s[index]);
  messages.animateText();

  index++;
  index%=s.length;
}




/**
 *************************************
 * Code for a Message Box.*
 * by _vk 2014oct                    *
 *************************************
 *
 ** It displays a text, animating as a typewriter 
 ** There is a neat breathing bullet also
 */


/**
 *************************************************
 *************************************************
 **             CLASS MSGBOX                    **
 *************************************************
 *************************************************
 */

class MsgBox {


  /**
   ******************************************************************************************
   **                                    MEMBER FIELDS                                      **
   ******************************************************************************************
   */

  // the text and a holder
  String text, displayText;

  //positioning 
  PVector bgPos, textPos;
  float w, h;

  //font and color
  color textColor  =#ffffff, bgColor = color(30);
  PFont font;

  //timimng
  int timer, wait;




  /**
   ******************************************************************************************
   **                                    CONSTRUCTOR                                       **
   ******************************************************************************************
   */


  /*************THE CONSTRUCTOR**********/
  //it takes the text, positioning stuff and init everything
  MsgBox(String _tx, PVector _bg, float _w, PFont _f) {
    bgPos   = _bg;
    font    = _f;
    w       = _w;
    h       = 26;
    text    = _tx;

    displayText = text;
    textFont(font, 15);

    //calc text pos relative to bg pos
    textPos = new PVector(bgPos.x + 27, (bgPos.y + h) - 8);

    // the speed of "typing"
    wait = 40;
  }







  /**
   ******************************************************************************************
   **                                  LOGIC FUNCTIONS                                     **
   ******************************************************************************************
   */





  /*************RUN IS WRAPPER 4 ALL FUNCTIONALITY - *********/
  void run() {
    update();
    display();
  }//run




  /*************DISPLAY IS WRAPPER 4 ALL DRAWING - *********/
  void display() {
    drawBg();
    drawBullet();
    drawText();
  }//display





  /*************SETS A NEW TEXT, - *********/
  void setText(String s) {
    if (!text.equals(s)) {
      text = s;
      displayText = text;
    }
  }//setText





  /*************SETS DISPLAY TEXT TO EMPTY THUS TRIGGERING THE ANIMATION - ****************/
  /*************ALSO SETS THE TIMER. TIMER IS FOR THE SPEED OF EACH CHAR APPEARING - *********/
  void animateText() {   
    displayText = "";
    timer = millis();
  }//animateText





  /********************* - ANIMATE IT - ***************************/
  void update() {
    if (!isFinished() && (millis() - timer) > wait) {      
      displayText = text.substring(0, displayText.length()+1);
      timer = millis();
    }
  }//update()




  /********** - CHECK IF BOTH STRING ARE SAME SIZE - ***************/
  boolean isFinished() {
    return displayText.length() == text.length();
  }//isFinished







  /**
   ******************************************************************************************
   **                                    DRAWING FUNCTIONS                                 **
   ******************************************************************************************
   */




  /*************************DRAWS BG***********************/
  void drawBg() {
    rectMode(CORNER);
    noStroke();
    fill(bgColor);
    rect(bgPos.x, bgPos.y, w, h);
  }//drawBg








  /*************************DRAWS TEXT***********************/
  void drawText() {
    fill(textColor);
    text(displayText, textPos.x, textPos.y);
  }//drawText








  /*************************DRAWS THE BULLET***********************/
  void drawBullet() {
    // time
    float t  = radians(millis());

    // a trig fancy function to be used as size off bullet
    float delta = 2 + (cos(sin(radians(t*6))+radians(t*6))) * 9;

    //pos
    float y     = bgPos.y + h/2.;
    float x     = bgPos.x + 12;

    //actual draw
    fill(142);
    ellipse(x, y, delta, delta);
    noStroke();
  }//drawBullet
}//MsgBox

Ríbó

Cool! Plenty to think about. Thanks all!

_vk

Can you tell me please what is the significance of index%=s.length; on line 26?

% is the modulo operator. It keeps the incrementing value within desired max (array length). try this:

void draw(){
    println(frameCount% 30);
}

I could have said:

 index = (index+1)%s.length;

But then I can't use ++ so first I increment index++ then I use modulo to avoid kep it in desired range index%=s.length;. Same thing as index = index % s.length;