Animated Poster

For this exercise, I made a poster using processing! I used shapes, circles, and ellipses to create the main image in the center. It’s supposed to represent an eye looking around. The text on the top left then explains all of the information about the IMA Fall End-of-Semester Event.

For the homework assignment, the first task was to create a fixed pattern. I made a series of circles evenly spread out and distributed across my canvas. The background was painted green using fill(), and the circles were colored using the random color function. Since the color of the circles was set to random, every time the code was rerun, the color of the circles would change, as shown in the video below. 

 

This pattern was then taken a step further and made the circles flash different colors in rapid succession. The color switching was very fast and emulated a disco ball. I had a lot of difficulties getting the colors in the circles to switch, not the background. I learned later that the order of the code matters a lot, especially where the fill() function goes. 

 

My code:

void setup(){
size(1024, 768);
}

void draw(){
fill(random (255), random(255), random(255));
background (255);
background(20, 131, 34);

for (int rowY = 75; rowY <= height; rowY += 75) {
drawCircleRow(rowY);
}
}

void drawCircleRow(int rowY) {
for (int circleX = 75; circleX <= width; circleX += 75) {
ellipse(circleX, rowY, 50, 50);
}
}

Finally, I had to take the same code and convert it, so it was interactive. Meaning that a key was pressed when a mouse was clicked, or anything like that would affect the canvas. For mine, I took the same code for the flickering circles and made it interactive by adding the keyPress function to change the color of the circles. This was challenging because the randomization of colors was limited to a singular circle when I added the keypress function. 

My Code:

void setup(){
size(1024, 768);
}

void draw(){
fill(random (255), random(255), random(255));
background (255);
background(20, 131, 34);

for (int rowY = 75; rowY <= height; rowY += 75) {
drawCircleRow(rowY);
}
}

void drawCircleRow(int rowY) {
for (int circleX = 75; circleX <= width; circleX += 75) {
ellipse(circleX, rowY, 50, 50);

if (keyPressed == true) {
fill(0);
} else {
fill(255);
}
circle(25, 50, 50);
}
}

Processing is a good program if you know how to use it properly. We used it for designing and animating a poster which was a fun experience. However, I had a lot of trouble getting the code to do exactly what I wanted. Each number value has its purpose; whether it’s an x or y coordinate or the shape’s size, they’re all essential to understand when processing.