[HELP] Make a text Appearing Letter by Letter

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

Tagged:

Answers

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

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

  • edited May 2015

    Google

  • Answer ✓

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

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

  • edited May 2015

    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 ;-)

  • 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.

  • edited October 2015
    //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);
    
    }
    
    }
    
  • edited October 2015

    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

    ;-)

  • :)

    //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);
      }
    }
    
  • edited October 2015

    //accidental double post

  • 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)

  • 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.

  • 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
    
  • edited October 2015

    Cool! Plenty to think about. Thanks all!

  • _vk_vk
    edited October 2015

    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;

Sign In or Register to comment.