Recitation6: processing animation Cathy Wang

My first animation is based on the image I made in the last recitation. With help from my classmate and learning assistant, I use “mouseX” and “rotate” to make an animation. At first, We couldn’t change the color no matter how we changed the numerical value. Then it turns out that we didn’t add the “void draw” function. We try to rotate the broader of the pattern and change the color of the pattern as we move the mouse.

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

void draw(){

background(108, 35, 8);
beginShape();

fill(11, mouseX/4, mouseY/4);
triangle(100, 280, 140, 280, 100, 400);
endShape();
beginShape();
fill(mouseX/4, mouseY/4, 11);

quad(140, 280, 220, 60, 480, 60, 400, 280);
fill(mouseY/4, 11, mouseX/4);
endShape();
beginShape();
quad(400, 280, 580, 280, 640, 100, 460, 100);
fill(mouseX/4, 11, mouseY/4);
endShape();
beginShape();
quad(360, 500, 380, 460, 520, 460, 500, 500);
fill(mouseX/10, mouseX/10, mouseY/10);
endShape();
beginShape();
quad(100, 400, 400, 400, 365, 500, 100, 500);
fill(mouseY/10, 11, mouseX/10);
endShape();
beginShape();
quad(500, 500, 700, 500, 700, 280, 580, 280);
fill(mouseX/10, 11, mouseY/10);
endShape();
noStroke();
beginShape();
fill(mouseX/4, mouseX/4, mouseY/10);
quad(300, 100, 360, 100, 270, 280, 210, 280);
endShape();
noStroke();
beginShape();
fill(37, 66, 106);
quad(360, 100, 500, 160, 490, 180, 320, 180);
endShape();
beginShape();
fill(mouseX/10, mouseY/10, mouseX/10);
quad(270, 280, 440, 280, 490, 180, 320, 180);
endShape();
stroke(251, 255, 196);

line(200, 300, 300, 100);
line(300, 100, 360, 100);
line(360, 100, 500, 160);
line(500, 160, 400, 360);
line(400, 360, 260, 300);
line(260, 300, 320, 180);
line(320, 180, 560, 180);
line(560, 180, 480, 340);
line(480, 340, 350, 340);
line(200, 300, 340, 360);
line(340, 360, 350, 340);
stroke(0, 0, 0);
translate(300, 300);
rotate(PI/mouseX*1000);
line(100, 20, 100, 500);
line(100, 500, 700, 500);
line(700, 500, 700, 20);
line(700, 20, 100, 20);

}


The additional homework is as follows:
float x=55;
float c=2;

void setup() {
size(600, 600);
background(255);

strokeWeight(10);
colorMode(HSB, 100, 100, 100);

}

void draw() {
background(0, 0, 100);
stroke(color(x, 100, 100));
ellipse(300, 300, x, x);
x = x+c;
c= c+0.05;

if(x>=150 || x<=30){
c=c*-1;
}

}


Leave a Reply