week 4 assignment: typography/ text output

INSPIRATION

I created this piece to demonstrate how relatively easy to fall into old habits and spiral downward and, on the flip side, how difficult it is to recover, relapse, and then get clean again.

PROCESS

First I made these two sentences exploded. With every DOWN key pressed, the alphabets move faster and it gets darker until it’s completely pitch black.

Then, if you start clicking the UP button, the background begins to get brighter and the alphabets begin to shrink. Until it suddenly cuts to black, and then it brightens up, with the words too small to register.

DEMO

CODES

// a string of text
String s = "stupid mistake "; 
String t = "why did you do?";

// declare an array of Circle objects, called letters
// set it to be the same size as the length of the String
Letter letters[] = new Letter[s.length()];
Letter letters1[] = new Letter[t.length()];

PFont f;
int fontSize = 25;
int bg = 255;

void setup(){
  size(450, 450);
  f = createFont("Skia-Regular_Black-Extended", 25);
  textFont(f);

  // radius of the  circle of letters
  int radius = 50;
  int radius1 = 75; 
  
  // start the words halfway around the circle 
  // (left side. normally in processing circles, angles, and rotations 
  // start on the right side) 
  float startingAngle = PI;
  
  // where is the center of the circle
  float circleCenterX = width/2;
  float circleCenterY = height/2;
  
  // loop through all the characters in the String
  for (int i =0; i<s.length();i++){
     // the get the angle using i as a multiplier
     float angle = startingAngle + i*TWO_PI/s.length();
     
     // cosine of an angle equals adjacent/hypoteneuse 
     // thus: cos(angle) = x/radius 
     // and algebra: x = cos(angle)*radius
     float x = cos(angle)*radius + circleCenterX+random(-2, 2)*noise(frameCount*.01);
     // y is same but sine
     float y = sin(angle)*radius + circleCenterY+random(-2, 2)*noise(frameCount*.01);
     
     //make a new Circle object for each letter
     letters[i] = new Letter(x, y, s.charAt(i));
  }
  
   for (int l =0; l<t.length();l++){
     // the get the angle using i as a multiplier
     float angle = startingAngle + l*TWO_PI/t.length();
     
     // cosine of an angle equals adjacent/hypoteneuse 
     // thus: cos(angle) = x/radius 
     // and algebra: x = cos(angle)*radius
     float x1 = cos(angle)*radius1 + circleCenterX;
     // y is same but sine
     float y1 = sin(angle)*radius1 + circleCenterY;
     
     //make a new Circle object for each letter
     letters1[l] = new Letter(x1, y1, t.charAt(l));
  }
}

void draw(){
  background(bg);
  textSize(fontSize);
  // loop through the letters array and call all needed functions
  for (int i =0; i<s.length();i++){
     letters[i].update();
     letters[i].display();
     letters[i].checkEdges();
     letters1[i].update();
     letters1[i].display();
     letters1[i].checkEdges();
  }  
}

// when the down and up key is pressed assign a random x & y speed and changes background color 
void keyPressed(){
  if (key == CODED && keyCode == DOWN){
       for (int i =0; i<s.length();i++){
        letters[i].xSpeed = random(-5*i,5)*noise(frameCount*.01+i*0.01);
        letters[i].ySpeed = random(-5,5*i)*noise(frameCount*.01+i*0.01);
        letters1[i].xSpeed = random(-5,5*i)*noise(frameCount*.01+i*0.01);
        letters1[i].ySpeed = random(-5*1,5)*noise(frameCount*.01+i*0.01); 
        }
        fontSize += 25;
        bg -=20;
          if (bg<30){
        bg = 0;
        }
  }
    else if (key == CODED && keyCode == UP){
        for (int i =0; i<s.length();i++){
          letters[i].xSpeed = random(-5/(i+1),5/(i+1))*noise(frameCount*.01+i*0.01);
          letters[i].ySpeed = random(-5/(i+1),5/(i+1))*noise(frameCount*.01+i*0.01);
          letters1[i].xSpeed = random(-5/(i+1)/(i+1),5)*noise(frameCount*.01+i*0.01);
          letters1[i].ySpeed = random(-5/(i+1),5/(i+1))*noise(frameCount*.01+i*0.01);
        }
        if (bg <255){
          bg += 10;
        }
        else {
            bg = 255;
          }
        if(fontSize >=5){
          fontSize -= 10; 
        }
        else {
          fontSize = 1;
        }
  }
}

class Letter {
  float x, y;
  float xSpeed, ySpeed;
  char letter;
  int fontSize; 

  Letter(float _x, float _y, char _c) {
    x = _x;
    y = _y;
    xSpeed = ySpeed = 0;
    letter = _c;
  }

  void update() {
    x += xSpeed;
    y += ySpeed;
    xSpeed *= .90;
    ySpeed *= .90;
  }

  void display() {
    fill(0);
    text(letter,x,y);
  }

  void checkEdges() {
    if (y>height) {
      y=0;
    }
    if (y<0) {
      y=height;
    }
    if (x>width) {
      x=0;
    }
    if (x<0) {
      x=width;
    }
  }
}