For the original poster design, I found a design online and I wanted to make an interactive version of it. I created a function called circles which would create three ellipses of different shapes. The function takes in size as a variable which is the size of the outermost circle. I think I struggled the most creating the original pattern.
The following is the code for the poster:
int start = 0; int start2 = 0; int start3 = 0; void setup() { size(1024, 768); background(#FAAA8D); } void draw() { circles(700); fill(0); textSize(25); text("Event: IMA Fall 22 End-Of-Semester Show", 300, 324); textSize(29); text("Location: 8th floor", 370, 364); text("Day: Friday December 16", 370, 404); text("Time: 6pm to 8pm", 370, 444); } void circles(int size) { noStroke(); fill(#50B2C0); ellipse(width/2, height/2, start, start); start = start + 5; if (start >= size) { start = start - 5; fill(#FF4000); ellipse(width/2, height/2, start2, start2); start2 = start2 + 5; if (start2 > size/1.2) { start2 = start2 - 5; fill(#F1E4F3); ellipse(width/2, height/2, start3, start3); start3 = start3 + 5; if (start3 >= size/1.5) { start3 = start3 - 5; } } } }
Task #1: Add a Fixed Pattern
To create a pattern, I had to change the original function since I had set the position as the middle of the screen. I used a nested for loop to create the design throughout the whole screen.
The code to create the pattern is the following:
int start = 0; int start2 = 0; int start3 = 0; void setup() { size(1024, 768); background(#FAAA8D); } void draw() { for (int x=0; x < 1024; x = x + 100) { for (int y=40; y < 801; y = y + 100) { noStroke(); fill(#50B2C0); ellipse(x, y, start, start); start = start + 5; if (start >= 100) { start = start - 5; fill(#FF4000); ellipse(x, y, start2, start2); start2 = start2 + 5; if (start2 > 100/1.2) { start2 = start2 - 5; fill(#F1E4F3); ellipse(x, y, start3, start3); start3 = start3 + 5; if (start3 >= 100/1.5) { start3 = start3 - 5; } } } } fill(0); textSize(25); text("Event: IMA Fall 22 End-Of-Semester Show", 300, 324); textSize(29); text("Location: 8th floor", 370, 364); text("Day: Friday December 16", 370, 404); text("Time: 6pm to 8pm", 370, 444); } }
Task #2: Add a Random Pattern
To create a random pattern, I used a for loop (which is kind of pointless inside the draw loop since I don’t use the variable created inside the for loop but it looks cooler) and then all the variables for the function (the size, x, and y) are inputted using the random function.
The following is the code for the random pattern:
int start = 0;
int start2 = 0;
int start3 = 0;
void setup() {
size(1024, 768);
background(#FAAA8D);
}
void draw() {
for (int x=1; x < 100; x++) {
circles(int(random(700)), int(random(1024)), int(random(768)));
}
fill(0);
textSize(25);
text("Event: IMA Fall 22 End-Of-Semester Show", 300, 324);
textSize(29);
text("Location: 8th floor", 370, 364);
text("Day: Friday December 16", 370, 404);
text("Time: 6pm to 8pm", 370, 444);
}
void circles(int size, int x, int y) {
noStroke();
fill(#50B2C0);
ellipse(x, y, start, start);
start = start + 5;
if (start >= size) {
start = start - 5;
fill(#FF4000);
ellipse(x, y, start2, start2);
start2 = start2 + 5;
if (start2 > size/1.2) {
start2 = start2 - 5;
fill(#F1E4F3);
ellipse(x, y, start3, start3);
start3 = start3 + 5;
if (start3 >= size/1.5) {
start3 = start3 - 5;
}
}
}
}
Task #3: Make it interactive
For the interactive part, instead of making the position random, I made it follow the x and y position of the mouse. mouseX and mouseY are my favorite functions because it’s super interactive and always fun to have something follow the cursor.
The following is the code for the interactive poster:
int start = 0; int start2 = 0; int start3 = 0; void setup() { size(1024, 768); background(#FAAA8D); } void draw() { for (int x=1; x < 100; x++) { circles(int(random(500)), mouseX, mouseY); } fill(0); textSize(25); text("Event: IMA Fall 22 End-Of-Semester Show", 300, 324); textSize(29); text("Location: 8th floor", 370, 364); text("Day: Friday December 16", 370, 404); text("Time: 6pm to 8pm", 370, 444); } void circles(int size, int x, int y) { noStroke(); fill(#50B2C0); ellipse(x, y, start, start); start = start + 5; if (start >= size) { start = start - 5; fill(#FF4000); ellipse(x, y, start2, start2); start2 = start2 + 5; if (start2 > size/1.2) { start2 = start2 - 5; fill(#F1E4F3); ellipse(x, y, start3, start3); start3 = start3 + 5; if (start3 >= size/1.5) { start3 = start3 - 5; } } } }