Recitation 6: Processing Animation – Lillie Yao

Recitation Exercise: For this weeks recitation, we had to work individually to add some sort of animation into a project that involved interaction. I chose to add onto the project that I created during last weeks recitation.

I coded so that the background would change colors every time I pressed the mouse button on my computer. At first, I couldn’t get the mousePressed() command to work because I just added it to the bottom of my code that I previously had. I realized that I needed to put all of my previous code into void draw() in order for the mousePressed to command to run and put size(600,600) inside void setup(). After I did that, my code ran and worked perfectly.

My code:

void setup(){
size(600,600);
}

void draw() {
fill(255,0,0,220); // big red circle
noStroke();
ellipse(350,100,65,65);

fill(0,0,0,220); //big black rectangle
noStroke();
quad(20,100,440,100,470,170,50,170);

fill(255,255,0,130); // big yellow rectangle
noStroke();
quad(270,30,320,30,410,210,360,210);

fill(255,255,255,180); // big white rectangle
noStroke();
quad(280,120,410,120,330,270,200,270);

fill(0,0,0,150); //small black rec
noStroke();
quad(160,230,280,230,290,250,170,250);

fill(255,0,0,130); // small red circle
noStroke();
ellipse(240,230,20,20);

fill(255,255,0,100); // small yellow rectangle
noStroke();
quad(195,190,215,190,255,260,235,260);

fill(0,0,0,100); // small black trap rectangle
noStroke();
quad(230,235,260,235,235,280,205,280);
}

void mousePressed() {
int r = int(random(0,255));
int g = int(random(0,255));
int b = int(random(0,255));
background(r,g,b);
}

Additional homework:

Step 1/2:

In this step, we had to code a circle shape that increased and decreased in size. I coded it so that the circle would get bigger and smaller when I pressed the “Up” and “Down” key. I don’t have the exact code as I kept adding to the original to create up to Step 3.

Step 3:

In this step of the assignment, I had to make the circle change multiple colors smoothly. I had the most trouble doing this because I couldn’t figure out where to put the code and what commands to use. I experimented with float and colorMode. I had problems because the circle would not change rainbow colors (instead grayscale) and it wasn’t moving smoothly either. In the end, I ended up only using colorMode and just declaring a color outside of the void setup() function. It was very interesting to use colorMode, float, and declaring the color function because I have never used that before. Although colorMode was hard to figure out, it definitely made my code much simpler than before.

My code:

int y = 0;
color c = color(0,150,255);
void setup(){
size(600,600);
colorMode(RGB);
}

void draw(){
background(255);
noFill();
// float c = random(0,255);

ellipse(width/2, height/2,y,y);
strokeWeight(18);
if (key == CODED) {
if (keyCode == UP) {
y–;
stroke(c–);
} else if (keyCode == DOWN) {
y++;
stroke(c++);
}
}
}

Leave a Reply