My poster is kind of like a game. It has an interactive “eye” that I spent the most time on coding. Also there are rectangles of different sizes and text.
Some cool features: the color of the background changes depending on in how much frames (rectangle) the cursor is inside (basically how far from the center the cursor is); The color of the eye gradually changes as well. If you press “a” or “A” button, the poster resets.
This is the video of how it works:
this is the code:
String s1 = "IMA Fall 22 ";
String s5 = "End-Of-Semester";
String s6 = "Show";
String s2 = "Location: 8th floor";
String s3 = "Friday December 16";
String s4 = "6-8PM";
float angle = 0.0;
Eye e1;
float count = 0;
boolean state = false;
void setup() {
size(1024, 768);
background(255);
e1 = new Eye(width/2, height - 120, 120);
}
void draw() {
for (int i = 0; i < 1024/3 + 40; i+= 20) {
if (count < 19) {
rectangle(width, height, i);
} else {
background(255, 0, 255);
displayText();
if (keyPressed) {
if (key == 'a' || key == 'A') {
count = 0;
}
}
}
}
stroke(0);
e1.update(mouseX, mouseY);
e1.display(state);
}
void rectangle(float x, float y, float i) {
if (dist(mouseX, mouseY, x/2, y/2) < i) {
stroke(255, 0, 255);
count++;
} else {
stroke(255);
count = 0;
}
strokeWeight(4);
rect(i, i, x - i*2, y - i*2);
}
void displayText() {
fill(255, 255, 0);
textSize(60);
//ima fall 22
text(s1, width/23, 120);
textSize(100);
//end-of-semester
fill(255);
text(s5, width/26, 260);
//show
text(s6, width/26, 340);
textSize(50);
fill(255, 255, 0);
//location
text(s2, width/26, 440);
fill(0, 255, 255);
text(s3, width/26, 500);
text(s4, width/26, 560);
fill(255);
text("Press 'A' to reset", width/26, 620);
}
class Eye {
int x, y;
int size;
float angle = 0.0;
Eye(int tx, int ty, int ts) {
x = tx;
y = ty;
size = ts;
}
void update(int mx, int my) {
angle = atan2(my-y, mx-x);
}
void display(boolean state) {
pushMatrix();
translate(x, y);
fill(255);
ellipse(0, 0, size, size);
rotate(angle);
if (state == false) {
fill(count*10, 0, count * 10);
} else {
fill (255, 0, 255);
}
ellipse(size/4, 0, size/2, size/2);
popMatrix();
}
}
The format is not ideal, but thats the best one I found.
Homework
For homework, I decided to experiment with triangles. Just in case it won’t count for complex shapes, I will first introduce arrows as evidence that I am capable of working with “complex shapes”:
float ballY = 0;
float ballX = mouseX;
float ballSpeed = 0;
float count = 0;
void setup(){
size(600, 600);
}
void draw(){
background(0);
fill(255);
noStroke();
for (int i = 20; i < width; i+=50){
for (int k = 20; k < height; k+=50){
arrowRandom(i, k, random(10, 30), random(10, 30));
}
}
delay(100);
}
void arrowRandom(float x, float y, float lengthArrow, float sizeArrow){
fill(x-75, y-75, 255);
triangle(x - sizeArrow, y, x, y-sizeArrow, x + sizeArrow, y);
rect(x-sizeArrow/2, y, sizeArrow, lengthArrow);
}
Here I have random sizing of the arrows, way more than 100 of them.
Moving forward to my triangle experimentation that I was doing further.
Here, I have started from the same thing as the task wanted, however went wayy further with it.
Here I have different colors for each positioned triangle and the position is chosen randomly, as well as the size of the triangles.
code for this:
float type = 0;
int size = 0;
void setup() {
size(1000, 800);
}
void draw() {
background(0);
size = int(random(10, 200));
for (int i = size; i <= width-size; i += size) {
for (int j = size; j <= height-size; j += size) {
type = int(random(1, 5));
trianglePatternDisplay(i, j, type);
}
}
}
void trianglePatternDisplay(int i, int j, float type) {
if (type == 1) {
fill(255, 0, 255);
noStroke();
triangle(i-size/2, j - size/2, i -size/2, j + size/2, i + size/2, j + size/2);
} else if (type == 2) {
fill(255, 0, 0);
noStroke();
triangle(i-size/2, j -size/2, i + size/2, j - size/2, i + size/2, j + size/2);
} else if (type == 3) {
fill(255, 255, 0);
noStroke();
triangle(i - size/2, j +size/2, i + size/2, j +size/2, i + size/2, j - size/2);
} else {
fill(0, 255, 255);
noStroke();
triangle(i-size/2, j-size/2, i+size/2, j-size/2, i-size/2, j +size/2);
}
}
and then, as I needed to make it more interactive, I decided that I will create 4 pallets that are going to be controlled by the user. It looks like that (I included the instruction on the setup):
*in the video I pressed ‘1’ one time, ‘2’ two times, ‘3’ three times and ‘4’ four times.
the code:
float type = 0;
int size = 0;
boolean state = false;
void setup() {
size(1000, 800);
}
void draw() {
if (state == false) {
background(0);
textSize(50);
fill(255, 255, 0);
text("Press '1' or '2' or '3' or '4'", 50, height/2-100);
text("to start the pattern", 50, height/2);
fill(255);
textSize(30);
text("hint: each number represents a color palette", 50, height/2 + 200);
}
if (keyPressed && (key == '1' || key == '2' || key =='3' || key == '4')) {
background(0);
state = true;
size = int(random(10, 200));
for (int i = size; i <= width-size; i += size) {
for (int j = size; j <= height-size; j += size) {
type = int(random(1, 5));
trianglePatternDisplay(i, j, type, key);
}
}
delay(100);
}
}
void trianglePatternDisplay(int i, int j, float type, char key) {
int userChosen = -1;
if (key == '1') {
userChosen = 0;
} else if (key == '2') {
userChosen = 255;
} else if (key == '3') {
userChosen = 175;
} else {
userChosen = 75;
}
if (type == 1) {
fill(255, 0, userChosen);
noStroke();
triangle(i-size/2, j - size/2, i -size/2, j + size/2, i + size/2, j + size/2);
} else if (type == 2) {
fill(255, userChosen, 0);
noStroke();
triangle(i-size/2, j -size/2, i + size/2, j - size/2, i + size/2, j + size/2);
} else if (type == 3) {
fill(userChosen, 255, 0);
noStroke();
triangle(i - size/2, j +size/2, i + size/2, j +size/2, i + size/2, j - size/2);
} else {
fill(userChosen, 0, 255);
noStroke();
triangle(i-size/2, j-size/2, i+size/2, j-size/2, i-size/2, j +size/2);
}
}
if I had more time, I would’ve probably experimented a bit more with interaction (add mouseX and mouseY to control something). Also would’ve added the reset button that returns to the intruction.