Recitation In-Class Animation Exercise:
In recitation 7, I converted the motifs I recreated from Vasily Kandinsky’s Three Sounds into an animated recreation. My design intention was to change the color of shapes when my mouse moves on top of certain shapes. To make this animation happen, I created a color variable and setting it to the color of a certain shape. Then, I use an if statement to get the color state of my mouse. If the color state of my mouse equals the color state I set, change the color of the shape to another one. For instance, when my mouse is on the purple circle, the color will change into light green. In the end, I animated the color of a light blue pentagon, three triangles, a large purpose circle, and two small yellow circles.
Below is a video showing my animation: IMG_5551
Recitation Homework Exercise:
In the homework assignment, I started by creating a hollow circle at the center of my canvas. I created int variable ballX and ballY referring to the center location of the circle. I also created an int variable, radius, to set the radius length. I drew the circle with the ellipse function and setting wider stroke weight.
Then, I used an if statement to change the circle size larger and smaller iteratively. I created an int variable, growspeed, with an initial value of 5. I set that radius will keep growing at grow speed of 5. I used an if statement to say, when radius reaches 150, radius will start to decline. Another if statement saying if radius becomes smaller than 5, radius will increase. I learned that in creating animation, I always have to set a background for each frame. If not, I will see my animation on each frame.
Third, I used the color mode function at setup, changing color mode to HSB. I also created a float variable, c, for the color to change. Number of c only changes between 0 and 255Under draw function, I used an if statement and said if float variable c is greater or equals to 255, c becomes 0. If not, c increases by one.
Lastly, I used keyPressed() function to move the circle. For instance, I used an if statement to say, if I press the left arrow key and x coordinate of the ball center is greater than the circle’s diameter, x coordinate of the ball center will decrease by ball Speed.
Below is a video showing the size and color changes of my circle. When I pressed the directional arrow keys, my circle will move around the screen. Besides, I also set the condition that the circle will not move out of the screen.
List of interesting functions I used:
strokeWeight(); //setting stroke weight of the shapes
ellipse(); // create circles
get(); //get the value of something
colorMode(HBS); //set color mode into HBS
frameRate(60); set the speed of frames changing
keyCode == LEFT ; // if you press the left arrow key
keyPressed(); //when certain keys are pressed, something will happen
Code for in-class exercise:
//set the size of the canvas
void setup() {
size (700, 700);
}
void draw () {
background(15, 21, 57);
//section 3
//big purple circle-1
fill(104, 83, 142);
stroke(10);
strokeWeight(2);
ellipse(450, 120, 150, 150);
color a = color(104, 83, 142); //set condition of the color state
if (a == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(183, 198, 172);
stroke(10);
strokeWeight(2);
ellipse(450, 120, 150, 150);
}
//circle 2
fill(216, 186, 109);
stroke(10);
strokeWeight(1);
ellipse(400, 200, 30, 30);
color b = color(216, 186, 109); //set condition of the color state
if (b == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(155, 76, 64);
stroke(10);
strokeWeight(2);
ellipse(400, 200, 30, 30);
}
//circle 3
fill(216, 186, 109);
stroke(10);
strokeWeight(1);
ellipse(250, 300, 15, 15);
color c = color(216, 186, 109); //set condition of the color state
if (c == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(155, 76, 64);
stroke(10);
strokeWeight(2);
ellipse(250, 300, 15, 15);
}
//circle 4
fill(216, 186, 109);
stroke(10);
strokeWeight(1);
ellipse(450, 200, 15, 15);
color d = color(216, 186, 109); //set condition of the color state
if (d == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(155, 76, 64);
stroke(10);
strokeWeight(2);
ellipse(450, 200, 15, 15);
}
//big light blue shape
fill(215, 230, 232);
noStroke();
triangle(180, 135, 105, 300, 400, 230);
quad(105, 300, 400, 230, 600, 460, 180, 500);
color e = color(215, 230, 232); //set condition of the color state
if (e == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(250, 159, 13);
noStroke();
triangle(180, 135, 105, 300, 400, 230);
quad(105, 300, 400, 230, 600, 460, 180, 500);
}
//triangle 1
fill(112, 135, 191);
stroke(10);
strokeWeight(1);
triangle(290, 290, 310, 450, 180, 420);
color f = color(112, 135, 191); //set condition of the color state
if (f == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(198, 48, 53);
stroke(10);
strokeWeight(1);
triangle(290, 290, 310, 450, 180, 420);
}
//triangle 2
fill(147, 96, 82);
stroke(10);
strokeWeight(1);
triangle(320, 310, 370, 390, 280, 375);
color g = color(147, 96, 82);
if (g == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(198, 48, 53);
stroke(10);
strokeWeight(1);
triangle(320, 310, 370, 390, 280, 375);
}
//triangle 3
fill(193,172,182);
stroke(10);
strokeWeight(1);
triangle(280,340,300,480,260,440);
color h = color(193,172,182);
if (h == get(mouseX, mouseY) ) { //create a boolean variable; if position of the mouse ditects color purple, changes the color to green
fill(172,193,178);
stroke(10);
strokeWeight(1);
triangle(280,340,300,480,260,440);
}
//section 1 all other shapes unchanged
//bottom rectangle
fill(0,0,0);
stroke(10);
strokeWeight(1);
rect(80, 530, 550, 20);
//left stroke
fill(0,0,0);
stroke(10);
strokeWeight(1);
triangle(75, 120, 95, 120, 85, 560);
fill(69, 95,77);
stroke(10);
strokeWeight(1);
triangle(75, 560, 95, 560, 85, 580);
noFill();
stroke(10);
strokeWeight(4);
beginShape();
vertex(260,260);
quadraticVertex(360, 270, 300, 110);
endShape();
noFill();
stroke(10);
strokeWeight(4);
beginShape();
vertex(270,270);
quadraticVertex(360, 270, 300, 110);
endShape();
noFill();
stroke(10);
strokeWeight(4);
beginShape();
vertex(270,270);
quadraticVertex(370, 280, 310, 120);
endShape();
//section 2 rectangles on the right side
//black rect
fill(0,0,0);
stroke(10);
strokeWeight(1);
rect(560,280,140,50);
//green rect
fill(187,211,164);
stroke(10);
strokeWeight(1);
rect(560,285,35,20);
//brown rect
fill(155,144,117);
stroke(10);
strokeWeight(1);
rect(598,285,70,20);
//another kinds of brown
fill(75,61,35);
stroke(10);
strokeWeight(1);
rect(575,305,45,20);
//another kind of dark green
fill(24,52,18);
stroke(10);
strokeWeight(1);
rect(625,305,70,20);
}
Codes for homework exercise:
int ballX;
int ballY;
int radius;
int ballSpeed;
int growSpeed;
float c;
float size = 300;//create a variable if you want to change the value of something
boolean pulse = false; //create a boolean variable to define the state of increase/decrease
void setup() {
size(400, 400);
colorMode(HSB); // float variable c only changes between 0 and 255, when setting the color mode to HSB
smooth();
frameRate(60);
ballX = width/2;
ballY = height/2;
radius = 10;
ballSpeed = 20;
growSpeed = 5;
}
void draw() {
background(255);
if (c >= 255) {
c=0;
} else {
c++;
}
//color changes
strokeWeight(20);
noFill();
stroke(c, 255, 255);
ellipse(ballX, ballY, radius*2, radius*2);
//circle size changes larger and smaller in a loop
radius = radius + growSpeed;
if(radius > 150) {
growSpeed = -2;
}
if(radius < 5) {
growSpeed = 2;
}
}
//pressing arrow keys in four directions will make the circle move
void keyPressed() {
if ( (keyCode == LEFT) && (ballX > radius*2) ) //setting the condition that pressing left arrow key and x coordinate of the ball must be greater than radius
{
ballX = ballX – ballSpeed;
}
if ( (keyCode == RIGHT) && (ballX < width-radius*2) )
{
ballX = ballX + ballSpeed;
}
if ( (keyCode == UP) && (ballY > radius*2) )
{
ballY = ballY – ballSpeed;
}
if ( (keyCode == DOWN) && (ballY < height-radius*2) )
{
ballY = ballY + ballSpeed;
}
}