Recitation 7: Processing Animation-Ning Zhou

For my own project I made during the recitation, I used several functions learned from former class and put them in one project. I used the pattern I drew on the first recitation for processing which is the yin yang sign, as well as the checkerboard background. I wanted to discover something new so I chose the function of mouseMoved. Another reason I chose it was that it is completely random and unknown how the pattern will change when the mouse moves. So I though it would be fun because I feel everything random could creates much more fun and surprise. Also I really like the smile face and sad face. What I want the user to do in my project is to match the white ball (which is controlled by the mouse) to the white circle of the yin yang sign. But when the user moves the mouse, the ball with sad face would become bigger and bigger at the same time, and it will also keeps bouncing around randomly. So the goal is to match the white ball as soon as possible, just the same as what the text shows. Once the user matches correctly, there will be a cute smile face on the screen. Plus, there’s a way for cheating because I used the println function which can check the position of the ball.

code:

int x, y;
int size = 70;
int speedX, speedY;
int d = int(random(0,300));

void setup() {

size(600, 600);
fill(255);
speedX = int(random(2,10));
speedY = int(random(2,10));
}

void draw() {
background(186);

rect(0,0,100,100);
rect(100,100,100,100);
rect(200,200,100,100);
rect(300,300,100,100);
rect(400,400,100,100);
rect(500,500,100,100);
rect(200,0,100,100);
rect(400,0,100,100);
rect(0,200,100,100);
rect(0,400,100,100);
rect(400,200,100,100);
rect(200,400,100,100);
rect(100,300,100,100);
rect(100,500,100,100);
rect(300,100,100,100);
rect(500,100,100,100);
rect(300,500,100,100);
rect(500,300,100,100);

String s = “Match the whita ball! Be quick!”;
fill(0);
text(s, 510, 10, 90, 90);

noStroke();
fill(255);
circle(300,300,360);

fill(0);
arc(300, 300, 360, 360, HALF_PI+PI, HALF_PI+PI+PI, CHORD);

fill(0);
circle(300,210,180);

fill(255);
circle(300,390,180);

fill(255);
circle(300,210,50);

fill(0);
circle(300,390,50);

noStroke();
ellipse(x,y,size,size);

noStroke();
fill(255);
ellipse(mouseX,mouseY,50,50);

x = x + speedX;
if ((x > width) || (x < 0)){
speedX *= -1;
}
y = y + speedY;
if ((y > height) || (y < 0)){
speedY *= -1;
}

ballCheck();

}

void mouseMoved(){
fill(random(0,255),random(0,255),random(0,255));
size += random(0,7);
ellipse(x-size*0.3, y-size*0.1, size*0.05, size*0.05);
ellipse(x+size*0.3, y-size*0.1, size*0.05, size*0.05);
arc(x, y+size/4, size*0.6, size*0.6, PI, 2*PI);
}

void ballCheck(){
if((290 <= mouseX && mouseX <= 310) && (mouseY >= 200 && mouseY <= 220)){
background(255);
fill(120,234,45);
ellipse(150, 200, 75, 75);
ellipse(450, 200, 75, 75);
arc(300, 300, 400, 400, 0, PI);
textSize(32);
text(“congrats!!”, 10, 30);
fill(0, 102, 153);
text(“congrats!!”, 10, 60);
fill(0, 102, 153, 51);
text(“congrats!!”, 10, 90);
}
println(mouseX,mouseY);
}

For the additional homework, one thing I found quite interesting was the colorMode function. Although there’s still some defect in my final work about this function but I think this function could make very cool things. 

code:

int d = 300;
int dp = 5;
int a = 0;
int b = 0;
int c = 0;

void setup(){

size(600,600);

}

void draw(){
background(255);
strokeWeight(20);
stroke(a,b,c);
if(a < 255){
a++;}
if(b < 255){
b++;}
if(c < 255){
c++;}
if(a == 255){
a=0;}
if(b == 255){
b=0;}
if(c == 255){
c=0;}
colorMode(HSB,255);

circle(mouseX,mouseY,d);
d = d – dp;

if (d == 50){
dp = -dp;
}
if (d == 300){
dp = -dp;
}
}

Leave a Reply