For this week’s assignment, I decided to make a generative text design rather than making a data visualisation – don’t really know why, I just thought it would be cooler.
In class, when we were going through examples, I wanted to do do something so that each letter of the word would be its own object, meaning that I could manipulate each letter and not have it so that it is bound by the whole word. I started by making each letter go under a class. I used Aaron’s example of inputting texts and the text formatting, though I changed the text font into another monospaced font.
Using a Processing example on processing.org, I was able to manipulate pieces of code so that I got my letters to vibrate, move and shake in a fashion that, to me, resembled what it would be like in an earthquake. I, therefore, decided to change the word to “Earthquake”, instead of the original “Ivory” that I had inputted. The soil background was just for more of an “earthy” effect – not much reason to it.
Originally, I programmed it so that when the mouse was pressed, the letters would move in arbitrary directions (like an earthquake where things go everywhere) and then when released, would move back to the home position. However, I felt like this quick and instant movement into the home position did not resemble a real earthquake and so I attempted to write some code so that the movement towards the home position would be slower and more subtle. I tried to mimic Aaron’s use of speed and acceleration in his project that he showed us, but didn’t get that to work no matter how much I tried. I then resorted to google to find out what other functions I could use.
After experimenting with many different types of functions, I resorted to asking a friend for help. He suggested I used some maths, where I would write a function that would get the difference between the x position and the home x position (and the difference between the y position and the home y position) and divide that by a certain number and then equate that to x, so that there would be a movement back towards the initial home position that is slower. I tried to implement what he suggested, but I couldn’t get it to work.
After thinking about what other functions I could try and use, my friend asked me if I had used the lerp () function before. I said that I have, but only when drawing lines and not for moving objects around. He said that the concept is the same and would probably work in the case of my project. I, therefore, started playing around with the lerp function in the hopes that I could finally get the letters to do what I wanted it to do.
Before I explain the next process that I took, I feel that it’s important for me to include my code so that I could refer to it whilst describing.
Here is the main setup tab:
import geomerative.*;
RFont font;
PImage bg;
String message = "EARTHQUAKE";
Letter[] letters;
void setup() {
size(900, 600);
bg = loadImage ("soil.jpg");
background(255);
textSize (70);
RG.init(this);
font = new RFont("Courier New Bold.ttf", 1000);
letters = new Letter[message.length()];
int x = 250;
for (int i = 0; i < message.length(); i++) {
letters[i] = new Letter(x,310,message.charAt(i));
x += textWidth(message.charAt(i));
}
}
void draw() {
background(bg);
for (int i = 0; i < letters.length; i++) {
letters[i].display(); // Display all letters
if (mousePressed) {
letters[i].shake();
} else {
letters[i].secondPosition();
}
if (keyPressed) {
letters[i].home();
}
}
}
Here is the letters class tab:
class Letter {
char letter;
float homex, homey;
float x, y;
Letter (float _x, float _y, char _letter) {
homex = x = _x;
homey = y =_y;
letter = _letter;
}
void display() {
fill(255);
textAlign(CENTER);
text(letter, x, y);
}
void shake() {
x += random(-8, 8);
y += random(-8, 8);
}
void secondPosition() {
lerp(x, homex, 0.07);
lerp(y, homey, 0.07);
}
void home() {
x = lerp(x, homex, 0.02);
y = lerp(y, homey, 0.02);
}
}
The first lerp functions that I got to work were the ones seen in under the void secondPosition () function, where I did not equate x and y to the lerp functions. This meant that rather than moving back to the home positions, when I clicked the mouse and the letters started moving haphazardly around and I released the mouse, the letters would stay in the place where I released the mouse. I thought that this was pretty cool and represented the reality of the earthquake well – if we were to imagine the letters being actual objects (like furniture for example), after an earthquake happens, the furniture would not move back by itself and would require some sort of other movement to move it back (humans moving it) or to move it around even more (aftershocks of the earthquakes, perhaps). I wanted to keep the code, but it wasn’t what I originally wanted to do, I still wanted a function that would move my letters back to the original position.
I realised that I needed more than a mousePressed () function if I wanted to to do two different things with the lerp () function. At this point, after experimenting with the lerp () function even more, I realised that equating x and y to the lerp functions would move the letters back. I wanted to keep the two ideas of 1) allowing for aftershocks to happen (continued shaking away from initial position) and 2) allowing for “clean-up” to happen (smoother movement towards initial letter position). I decided to allocate movement 1 to mouse press and movement 2 to key press.
This produced the effect shown in the video below:
If I were to improve this project, I would change and play around with the colour of the text. I played around with the lerpColor () function but couldn’t get it to work.
DISCLAIMER: Maybe I should have put this at the top…sorry that there’s a lot of words in this post but I’m pretty proud of the process that I took to finish this project and was able to use code that I actually understand and found to not be complicated and I was able to debug my own code when it didn’t work and I’m just very thankful for friends (shoutout to Navya and Abdullah) who directed me in the way that allowed me to discover things myself and help me realise that I could do something cool! I shall end the blog post now.