Week 4: Shivering Letters

//a string of text
String s = "Shivering in Abu Dhabi";
// Create an array the same size as the length of the String
Letter[] letters = new Letter[s.length()];
//Check the font list
//println(PFont.list());
PFont f;

void setup() {
  size(600, 600);
  f = createFont("Courier New", 30);
  textFont(f);

  // The initial position
  int x = 100;
  for (int i = 0; i < s.length (); i++) {
    letters[i] = new Letter(x, height/2, s.charAt(i)); 
    x += textWidth(s.charAt(i));
  }
}

void draw() { 
  background(255,255,0);

  // loop through the letters array and display letters
  for (int i = 0; i < letters.length; i++) {
    letters[i].display();

    // If the mouse is pressed the letters shiver; otherwise, they return to their original location or station
    if (mousePressed) {
      letters[i].shiver();
    } else {
      letters[i].station();
    }
  }
}

class Letter {
  float x,y;
  float X,Y;
  float fluctuation;
  char letter;

  Letter (float _x, float _y, char _c) {
    X = x = _x;
    Y = y = _y;
    x = random(width);
    y = random(height);
    fluctuation = random(TWO_PI);
    letter = _c; 
  }


  void display() {
    //Choose random color for each letter
    fill(random(255));
    //strokeWeight(2);
    textAlign(CENTER);
    textSize(30);
    pushMatrix();
    translate(x,y);
    rotate(fluctuation);
    text(letter,0,0);
    popMatrix();
  }

  // Fluctuate the letters
  void shiver() {
    x += random(-5,5);
    y += random(-5,5);
    fluctuation += random(-1,1);
  }

  // Return the letter to the initial positions using lerp function
  void station() {
    x = lerp(x,X,0.05);
    y = lerp(y,Y,0.05);
    fluctuation = lerp(fluctuation,0,0.05);
  }
}

Motivation

I want to display letters in a shaky form representing how tremendously the temperature fluctuates between daytime and night time in Abu Dhabi. I can wear sweaters at night or early morning and shorts at noon.

Process

I want to make the letter blink in different shades of one color (I should have chosen red!) to represent the temperature change. When the mouse is pressed, individual letters moved freely around the initial position and they come back to the station and stand still when the mouse is released. Also, I based the code for my class Letter on  our class file circleLetterSketch and took reference from The Coding Train Youtube channel. In the coding and googling process, I discovered the println(PFont.list()) funtion to know all the fonts available in Processing after some failed trials with different random fonts I searched the names on the internet. Also, the lerp function is also used to fluctuate letters within a limited range to create a shaking effect as if the letters were shivering because of the cold night or foggy morning here these days.