Rotating Text

String oneName = "over";
String otherName = "whelmed";
String displayed ="";
float theta, deg;
int interval = 875; // 3.5s
int time;
PImage img;
PFont font;

void setup() {
size(1200,675);
img = loadImage("overwhelmed.jpg");
font = createFont("gillsans",40);
background(img);
displayed = oneName;
time = millis();
textFont(font);
fill(0,0,128);
}

void draw() {
background(img);

translate(width/1.3,height/2);
theta +=0.01;
deg +=0.01;
rotate(theta);
rotate(radians(deg));
textAlign(CENTER);
delay(10);
text(displayed,0,0);
if (millis() - time > interval) {
displayed = displayed.equals(oneName)? otherName:oneName;
time = millis();
}
}

Code

Video Demonstration

This code uses the previous code (blinking text) but incorporates another function. This function causes the text to rotate whilst blinking. It uses the rotate function to do so. Before the program was very simple so I made a few changes so that the program will relate to the word I have chosen to represent one emotion during COVID-19. Instead of blinking one word, this code changes between two words. I split the word overwhelmed into over and whelmed to make it look more interesting. Since there were two words, I slowed down the time interval from 2 seconds to 3.5 seconds. I also changed theta from 0.005 to 0.01 so that each turn is larger. As for the background, I chose an image that could be used as an aesthetic visual representation of feeling overwhelmed. To do this I had to make sure the size of the screen was the same as my picture. I downloaded the image from google and added the file to my sketch. To load the image, I had to use the function PImage and loadImage to display the image when I ran the code. Finally, I changed the font of the text using the PFont and textFont functions. and chose a colour that would compliment the light blue background.

(click the functions underlined to learn more about them)

Rotating Text

Code

Video Demonstration

Function