Recitation 7: Processing Animation by Haoquan Wang(Kenneth)

1. My processing animation

int c = 0;
float r1 = 92;
float r2 = 91;
float r3 = 71;
float g1 = 65;
float g2 = 87;
float g3 = 72;
float b1 = 39;
float b2 = 88;
float b3 = 68;
void setup() {
noStroke();
size(1500, 1500);
background(192, 180, 165);
}

void draw() {
drawRect();
reset();
}

void drawRect() {
if (mousePressed) {
c = c + 1;
}

if (c>=10) {
fill(r1, g1, b1);
rect(10, 10, 1480, 1480);
}

if (c>=25) {
fill(r2, g2, b2);
rect(190, 190, 1200, 1200);
}

if (c>=35) {
fill(r3, g3, b3);
rect(450, 570, 700, 700);
}

if (c>=40) {
c = 0;
}
println(c);
println(keyCode);
}

void changeColor1() {
r1 = random(0, 255);
g1 = random(0, 255);
b1 = random(0, 255);
fill(r1, g1, b1);
}

void changeColor2() {
r2 = random(0, 255);
g2 = random(0, 255);
b2 = random(0, 255);
fill(r2, g2, b2);
}

void changeColor3() {
r3 = random(0, 255);
g3 = random(0, 255);
b3 = random(0, 255);
fill(r3, g3, b3);
}

void keyPressed() {
changeColor1();
changeColor2();
changeColor3();
}

void reset() {
if (mouseX > 1300 && mouseY > 1300) {
fill(0);
rect(0,0,1500,1500);
}
}

This is my processing animation code

The video is here:

2. Homework

int count = 0;
int cycle = 75;
float h;
float weight;
float size;
float mouseScale;
int x = 300;
int y = 300;
int xspeed;
int yspeed;

void setup() {
size(600, 600);
colorMode(HSB, 100);
frameRate(70);
rectMode(CENTER);
}

void draw() {
if (keyPressed) {
if (keyCode == UP) {
yspeed =-10;
xspeed = 0;
} else if (keyCode==DOWN) {
yspeed = 10;
xspeed = 0;
} else if (keyCode ==LEFT) {
xspeed = -10;
yspeed = 0;
} else if (keyCode == RIGHT) {
xspeed = 10;
yspeed = 0;
}
}
size = 125 * sin(PI * count / cycle)+225;
if (height-y<size/2f) {
yspeed = -10;
xspeed = 0;
}
if (y<size/2f) {
yspeed = 10;
xspeed = 0;
}
if (width-x<size/2f) {
xspeed = -10;
yspeed = 0;
}
if (x<size/2f) {
xspeed = 10;
yspeed = 0;
}
x += xspeed;
y += yspeed;
translate(x, y);
background(100);
stroke(h, 100, 100);
strokeWeight(15);
ellipse(0, 0, size, size);
h+=0.5f;
if (h > 100) {
h=0;
}
count++;
}

With the help of Tom, I fix some problem that I have. For example, my previous basic code will draw many white lines in the circle. And also I don’t know how to set the boundry.

Here is the video:

Interesting functions that I use:

The first thing is colorMode(). I never use it before. It is very convenient to use. Another one is translate(). For this function, I am not quite familiar with it. So in the future, I will often use it. What I learn from this recitation is that frameRate is really important because at first, I didn’t set it, which result that the animation is not good in quality.