Recitation 7: Processing Animation (by Weiyi He)

Code:

int a;
int b;
float c;
float i=0;
float angle=0;

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

void draw() {
background(#050E48);
painting();
//println(mouseX, mouseY);
rectMode(CENTER);

//interaction with the triangle
if ((mouseY>mouseX*(-1.08)+569.5)&&(mouseY<(-1.165)*mouseX+612.2)&&(mouseY<mouseX+320)) {
pushMatrix();
translate(252, 308);
angle=(frameCount%10-5)/2;
rotate(radians(angle));
strokeWeight(2);
stroke(255, 100);
fill(0);
triangle(248, -278, -132, 132, -117, 147);
popMatrix();
}

//interaction with red rect
if ((mouseX>231)&&(mouseX<300)&&(mouseY>423)&&(mouseY<492)) {
angle=frameCount;
pushMatrix();
translate(265, 455);
rotate(radians(angle));
noStroke();
fill(160, 28, 28);
rect(0, 0, 70, 70);
popMatrix();
} else {
noStroke();
fill(160, 28, 28);
rect(265, 455, 70, 70);
}

//interaction with arc
c=dist(mouseX, mouseY, 400, 150);

if ((c>45 && c<55)&&(mouseX>362 && mouseX<453)&&(mouseY>98 && mouseY<192)) {
stroke(255, 150);
noFill();
strokeWeight(i+10);
arc(400, 150, 100, 100, PI+PI/4, TWO_PI+PI/4, OPEN);
stroke(127, 3, 22);
noFill();
strokeWeight(i+3);
arc(400, 150, 100, 100, PI+PI/4, TWO_PI+PI/4, OPEN);
if (i<10) {
i=i+0.2;
}
} else {
i=0;
stroke(255, 150);
noFill();
strokeWeight(10);
arc(400, 150, 100, 100, PI+PI/4, TWO_PI+PI/4, OPEN);
stroke(127, 3, 22);
noFill();
strokeWeight(3);
arc(400, 150, 100, 100, PI+PI/4, TWO_PI+PI/4, OPEN);
}
}

void painting() {
strokeWeight(8);
stroke(255, 150);
noFill();
arc(180, 180, 40, 40, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(210, 150, 30, 30, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(240, 125, 35, 35, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(260, 105, 15, 15, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(280, 85, 25, 25, PI-PI/4, TWO_PI-PI/4, OPEN);

strokeWeight(2);
stroke(206, 115, 113);
fill(255, 150);
arc(180, 180, 40, 40, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(210, 150, 30, 30, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(240, 125, 35, 35, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(260, 105, 15, 15, PI-PI/4, TWO_PI-PI/4, OPEN);
arc(280, 85, 25, 25, PI-PI/4, TWO_PI-PI/4, OPEN);

strokeWeight(12);
stroke(255, 150);
line(160, 205, 323, 50);
line(370, 460, 520, 350);
line(480, 265, 580, 260);
strokeWeight(2);
stroke(0);
line(160, 205, 320, 52);
strokeWeight(4);
line(370, 460, 520, 350);
strokeWeight(5);
line(480, 265, 580, 260);

stroke(255, 100);
strokeWeight(1);
fill(127, 3, 22);
ellipse(180, 100, 30, 30);

strokeWeight(6);
fill(232, 157, 125, 230);
ellipse(270, 140, 18, 18);
fill(193, 58, 153);
ellipse(170, 235, 18, 18);

strokeWeight(4);
fill(239, 224, 16, 180);
ellipse(110, 380, 20, 20);

strokeWeight(2);
fill(0);
ellipse(230, 390, 18, 18);

strokeWeight(4);
fill(224, 152, 51, 200);
ellipse(165, 460, 23, 23);
fill(119, 98, 193, 140);
ellipse(110, 470, 23, 23);

strokeWeight(2);
fill(239, 224, 16, 180);
ellipse(155, 500, 15, 15);
fill(193, 58, 153, 180);
ellipse(190, 520, 20, 20);
fill(124, 50, 18);
ellipse(150, 550, 25, 25);

fill(127, 3, 22);
triangle(62, 155, 50, 195, 103, 200);
fill(239, 224, 16, 150);
triangle(100, 105, 55, 255, 165, 275);
fill(255, 180);
triangle(260, 260, 430, 365, 245, 460);
fill(0);
triangle(500, 30, 120, 440, 135, 455);

noStroke();
fill(124, 50, 18);
ellipse(10, 600, 150, 150);

strokeWeight(3);
stroke(124, 50, 18, 150);
fill(107, 160, 14, 100);
ellipse(500, 500, 80, 80);

}

Additional homework:

Code:

int a, b;
int posX, posY;

void setup() {
background(255);
size(600, 600);
colorMode(HSB);
}

void draw() {
background(255);
b=frameCount%155+100;
a=(frameCount*3)%400+100;
if (a>300) {
a=600-a;
}
noFill();
strokeWeight(20);
stroke(b, b, b);
ellipse(posX, posY, a, a);
posX=mouseX;
posY=mouseY;

if (mouseX>width-a/2) {
posX=width-a/2;
}
if (mouseX<a/2) {
posX=a/2;
}
if (mouseY>height-a/2) {
posY=height-a/2;
}
if (mouseY<a/2) {
posY=a/2;
}
}

List of the most interesting(important) functions I used:

  1. Using “if” to locate the region of a triangle (linear programming), a rectangle, and an arc (first restrict the area between 2 circles, then restrict the arc length by simply locating the 2 ends). Note that the coordinate system is different–the numbers still count when formulating functions, with only the Y-axis flipped downward (change the “>” with “<” when doing linear programming).
  2. “%”: taking the remainder取余. It helps to form a circulation simply with numbers.         // e.g. 1)the angle the triangle turns=(frameCount%10-5)/2; makes it seem as if it’s vibrating. 2)color of the circle –in HSB mode=frameCount%155+100; size of the circle=(frameCount*3)%400+100; if (a>300) {a=600-a;} –helps circle get big and small within a frame.
  3. “frameCount” guarantees a gradual motion as the frame increases. frameRate could also be used for setups.

Leave a Reply