How to make typewriter effect?

YJeoniiii

Hi,

I'm making typewriter and I have no idea where to start to fix.... And I'm not that good at processing even in english.... What I want to make is typewriting with trees.... Thank you very much in advanced for your attempts and assistance.

String text1 = " ";
PFont font;
boolean randomizer = false;

int rectWidth;

int maxParticles = 800; // the maximum number of active particles
ArrayList <Particle> particles = new ArrayList <Particle> (); // the list of particles

int drawMode = 0; // cycle through the drawing modes by clicking the mouse
color BACKGROUND_COLOR = color(255);
color PGRAPHICS_COLOR = color(0);
color BGRAPHICS_COLOR = color(128);

float fc001;
PGraphics pg,bg;

String texttype = "Start";




void setup() {
  size(1280, 720, P2D);
  smooth(16); // higher smooth setting = higher quality rendering
  font = loadFont("Arial-Black-48.vlw");
  textFont(font, 20);
  pg = createGraphics(width, height, JAVA2D);
  pg.beginDraw();
  pg.textSize(500);
  pg.textAlign(CENTER, CENTER);
  pg.fill(PGRAPHICS_COLOR);
  pg.text(texttype, pg.width/2, pg.height/2); 
  pg.endDraw();

  background(BACKGROUND_COLOR);

}

void addRemoveParticles() {
  // remove particles with no life left
  for (int i=particles.size()-1; i>=0; i--) {
    Particle p = particles.get(i);
    if (p.life <= 0) {
      particles.remove(i);
    }
  }
  // add particles until the maximum
  while (particles.size () < maxParticles) {
    particles.add(new Particle());
    }
}


void draw() {
   fc001 = frameCount * 0.1;
  addRemoveParticles();
  // update and display each particle in the list


  for (Particle p : particles) {
    p.update();
    p.display();
  }
}







void keyPressed() {
  if (key == BACKSPACE) {
    if(text1.length() > 0) {
      text1 = text1.substring(0, text1.length() - 1);
    }
  }
  else if (key == '1') {
    randomizer = false;
  }
  else {
    text1 += key;
    fc001=0;
    pg.background(255);
    pg.clear();
    pg.text(text1,width/2,height/2);
  }
}

TfGuy44

Your code is hard to read because it is not formatted properly. Edit your post, select your code, and press Ctrl+o.

Even when I do fix it and add what seems like the proper line breaks:

String text1 = " "; 
PFont font; 
boolean randomizer = false;

int rectWidth;

int maxParticles = 1000; // the maximum number of active particles 
ArrayList particles = new ArrayList (); // the list of particles

int drawMode = 0; // cycle through the drawing modes by clicking the mouse 
color BACKGROUND_COLOR = color(255); 
color PGRAPHICS_COLOR = color(0); 
color BGRAPHICS_COLOR = color(128);

float fc001; 
PGraphics pg, bg;

String texttype = "Start";

void setup() { 
  size(1280, 720, P2D); 
  smooth(16); // higher smooth setting = higher quality rendering 
  font = loadFont("Arial-Black-48.vlw"); 
  textFont(font, 20); 
  pg = createGraphics(width, height, JAVA2D); 
  pg.beginDraw(); 
  pg.textSize(500); 
  pg.textAlign(CENTER, CENTER); 
  pg.fill(PGRAPHICS_COLOR); 
  pg.text(texttype, pg.width/2, pg.height/2); 
  pg.endDraw(); 
  background(BACKGROUND_COLOR);
}

void addRemoveParticles() { // remove particles with no life left 
  for (int i=particles.size ()-1; i>=0; i--) { 
    Particle p = particles.get(i); 
    if (p.life <= 0) { 
      particles.remove(i);
    }
  } // add particles until the maximum 
  while (particles.size () < maxParticles) { 
    particles.add(new Particle());
  }
}

void draw() { 
  fc001 = frameCount * 0.1; 
  addRemoveParticles(); // update and display each particle in the list 
  for (Particle p : particles) { 
    p.update(); 
    p.display();
  }
}

void keyPressed() { 
  if (key == BACKSPACE) { 
    if (text1.length() > 0) { 
      text1 = text1.substring(0, text1.length() - 1);
    }
  } else if (key == '1') { 
    randomizer = false;
  } else { 
    text1 += key; 
    fc001=0; 
    pg.background(255); 
    pg.clear(); 
    pg.text(text1, width/10, height/10);
  }
}

Now I am missing your Particle class. Obviously this is an important part of your sketch - why leave it out?

For that matter, why does a typewriter - which displays letters - have particles?

YJeoniiii

Oh, I'm sorry. This is a Particle class. This particle makes like a alphabet tree. And When you type it shows trees instead of letters. And exactly I am just mixing examples that's why I have no enough understanding about codes.

class Particle {
  PVector loc,bloc;
  float maxLife, life, lifeRate;

  Particle() {
    getPosition();
    // set the maximum life of the Particles depending on the drawMode
    switch(drawMode) {
      case 0: maxLife = 1.25; break;
      case 1: maxLife = 1.0; break;
      case 2: maxLife = 0.75; break;
      case 3: maxLife = 0.5; break;
    }
    // randomly set a life and lifeRate for each Particle
    life = random(0.5 * maxLife, maxLife);
    lifeRate = random(0.01, 0.02);
  }

  void update() {
    // the velocity/direction of each Particle is based on a flowfield using Processing's noise() method
    // drawMode 0: no extras (an xy-position will always return the same angle)
    // drawMode 1: dynamic noise (an xy-position will return a slightly different angle on every frame)
    // drawMode 2: rotation (the angle of each xy-position is globally rotated)
    // drawMode 3: dynamic noise + rotation (combines drawModes 1 & 2)
    float angle = noise(loc.x * 0.1, loc.y * 0.1, drawMode==1 || drawMode==3 ? fc001 : 0) * TWO_PI;
    PVector vel = PVector.fromAngle(angle + (drawMode==2 || drawMode==3 ? fc001 : 0));

    loc.add(vel);
    life -= lifeRate; // decrease life by the lifeRate (the particle is removed by the addRemoveParticles() method when no life is left)
  }

  void display() {
    fill(0,255,0); // white fill
    stroke(0, 125); // transparant black stroke
    float r = 8 * life/maxLife; // radius of the ellipse
    ellipse(loc.x+random(1,PI/6), loc.y+random(1,PI/6), r, r); // draw ellipse
  }

  // get a random position inside the text
  void getPosition() {
    while (loc == null || !isInText (loc)) loc = new PVector(random(width), random(height));
//    while (loc == null || !isInBg (bloc)) bloc = new PVector(random(width), random(height));

  }

  // return if point is inside the text
  boolean isInText(PVector v) {
    return pg.get(int(v.x), int(v.y)) == PGRAPHICS_COLOR;
  }

  /*boolean isInBg(PVector k) {
    return bg.get(int(k.x), int(k.y)) == BGRAPHICS_COLOR;
  }
  */
}

_vk

I've made this msg box once for a tic tac toe board, it includes a typewriter effect, if you want to have a look... It's simple. This is just the class, no instance built cause the full code is much more complex, and the instantiation is done inside another bigger class, but it is functional and commented.

edit: I added a simple instantiation :)

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(s[0], new PVector(20, 20), 560, f);


}

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

void keyPressed(){
  index++;
  index%=s.length;

  messages.setText(s[index]);
  messages.animateText();
}




/**
 *************************************
 * 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