Displaying Text

For this assignment, I chose to display the text in the Processing window.

My initial idea was to create a string of letters that would appear in the window and move in some interesting way. After watching some YouTube tutorials and browsing the Processing forum, my first attempt to create the letter-objects that would appear in a typewriter effect, move around some arbitrary curve and then “find home” miserably failed (I am still not too sure why, but my best-educated guess is because I had a hard time with passing polar coordinates and translating them to regular coordinates).

From the second try, my goal was to create a string of letters that would be placed around the circle and would move around it if the mouse is pressed. To add some fun to it, I decided to place another string inside the circle, and make it change the size in a noise-like pattern, also when the mouse is pressed. This appeared to be more realistic and feasible with my skills, so I just went for implementing this with my code.

The most challenging part appeared to be the math: finding the arclength, placing each letter and making sure the spacing is right, and doing the whole polar coordinates thing.

Here’s the code:

String myText = "hello, I am...";
String anotherText = "Movement!";
PFont font;
float radius = 100;
float x, arclength, angle, move, t;

void setup(){
  size (340, 680);
  font = createFont("Calm", 64);
  textFont(font);
  textAlign(CENTER);
  smooth();
}

void draw(){
  
  background(0);
  
  x = 10;
  arclength = 0;
  
  circles();
  
  // Place the bigger circle
  translate(width/2, height/2);
  noStroke();
  ellipse(0, 0, radius*2, radius*2);
  
  push();
    fill(0);
    textSize(50+t);
    text(anotherText, 0, x);
  pop();
  
  for(int i=0; i<myText.length(); i++){
    
     // Place the next letter
    arclength += textWidth(myText.charAt(i))/2;
    angle = 5*PI/4 + arclength/radius + move;
    
    push();
      translate(radius*cos(angle), radius*sin(angle));
      rotate(angle+PI/2);
      text(myText.charAt(i), 0, 0);
    pop();
    
    // Place the next letter
    arclength += textWidth(myText.charAt(i))/2;
  
  // Move the string if the mouse is pressed
    if (mousePressed){
      move += 0.0082;
      t += random(-0.5,0.5);
    }
  }

}

// Make a background of color-changing circles
void circles(){
  for (int i = 0; i < 50; i++) {
    push();
      fill(random(200,250), random(200,250), random(200,250));
      ellipse(random(width), random(height), radius/10, radius/10);
    pop();  
  }
}

And the demo: