My Personal Animation and Code:
This animation consisted of three different main concepts: the blinking circle’s movement is controlled by A,W,S,D, acting like arrow keys. The color changing and growing/shrinking square outline’s movement is controlled by the normal arrow keys, and the , mouse resets the background. The concept behind this animation is just to be able to draw different pattern and other things with the moving circle and square. The Square outline growing and shrinking provides a cool 3D looking effect to the drawing as the different outline colors layer next to each other. The code is bellow and so are videos of the circle drawing and then the square drawing and both reseting using mousePressed function. Because the background was its own mousePressed function and not included in void draw that allowed each circle and square to not be erased when a new one was drawn which created continues “lines” to draw with made out of circles and squares. The most interesting function I used was keyPressed because it allowed me to designate certain letter keys and arrow keys to different movements, which allowed me to create an animation that is completely different every time it is run based on the user’s movement of the arrow keys. It allowed me to practice writing the code for both keyPressed normal keys and the arrow keys. The code is at the end with the code for the homework.
Video 1: Square moving and reset
Video 2 :Circle moving and reset
Recitation Homework:
Step 1:
First I drew a black outlined circle with no fill in the center of a white 600×600 canvas. Code is at the end.
Step 2:
Then I made this black outline circle grow and shrink, which was not too difficult because I ha already used this for my recitation animation. In addition, we had a similar example code of a circle growing and shrinking during class. Code is at the end.
Step 3:
Next I made the circle change colors as it grew and shrunk which was more difficult. I changed the code first to randomize the color of the circle as it grew and struck and tried. I ended up using the same methods we used in class not Color mode because although I looked at the reference for color mode and asked other students and fellows about how to use color mode to have a smooth transition no one figured out quite how to write that correctly, so I stuck with the slightly choppier color transition I originally had used which looks more like a strobe or blinking effect. Code at the end.
Step 4:
In this step I made the circle move while shrinking and growing. This step was fairly easy just adding a keyPressed function identical to my recitation animation’s function only the background was added into void draw in order for the circle to be erased each time I draw a new one as it moves.
Code for my personal recitation animation:
int x;
int y;
int speed;
int c;
int u=200;
int v=200;
boolean rectIsShrinking=false;
void setup(){
size(600,600);
x= width/2;
y= height/2;
c=50;
speed=5;
background(0);
}
void draw (){
float r= random (255);
float g= random (255);
float b= random (255);
stroke (r,g,b);
strokeWeight(5);
noFill();
rect (x,y,c,c);
stroke (r,g,b);
fill(r,g,b);
noStroke();
ellipse (u,v,50,50);
if(rectIsShrinking)c–;
else c++;
if (c==0||c==150) rectIsShrinking= !rectIsShrinking;
}
void keyPressed(){
if (keyCode==UP){
y=y-speed;
}
if (keyCode==DOWN){
y=y+speed;
}
if (keyCode==LEFT){
x=x-speed;
}
if (keyCode==RIGHT){
x=x+speed;
}
println(key);
if (key == ‘w’ || key == ‘W’) {
v=v-speed;
}
println(key);
if (key == ‘s’ || key == ‘S’){
v=v+speed;
}
println(key);
if (key == ‘a’ || key == ‘A’){
u=u-speed;
}
println(key);
if (key == ‘d’ || key == ‘D’){
u=u+speed;
}
}
void mousePressed(){
background(0);
}
Code for step 1 of the homework:
int x;
int y;
void setup(){
size(600,600);
x= width/2;
y= height/2;
background(255);
}
void draw (){
background(255);
strokeWeight(10);
noFill();
ellipse (x,y,100,100);
}
Code for step 2 of the homework:
int x;
int y;
int speed;
int c;
boolean ellipseIsShrinking=false;
void setup(){
size(600,600);
x= width/2;
y= height/2;
c=50;
speed=5;
background(255);
}
void draw (){
background(255);
strokeWeight(10);
noFill();
ellipse (x,y,c,c);
if(ellipseIsShrinking)c–;
else c++;
if (c==0||c==150) ellipseIsShrinking= !ellipseIsShrinking;
}
Code for step 3 of the homework:
int x;
int y;
int speed;
int c;
boolean ellipseIsShrinking=false;
void setup(){
size(600,600);
x= width/2;
y= height/2;
c=50;
speed=5;
background(255);
}
void draw (){
background(255);
float r= random (255);
float g= random (255);
float b= random (255);
stroke (r,g,b);
strokeWeight(10);
noFill();
ellipse (x,y,c,c);
if(ellipseIsShrinking)c–;
else c++;
if (c==0||c==150) ellipseIsShrinking= !ellipseIsShrinking;
}
Code for homework Step 4:
int x;
int y;
int speed;
int c;
boolean ellipseIsShrinking=false;
void setup(){
size(600,600);
x= width/2;
y= height/2;
c=50;
speed=5;
background(255);
}
void draw (){
background(255);
float r= random (255);
float g= random (255);
float b= random (255);
stroke (r,g,b);
strokeWeight(10);
noFill();
ellipse (x,y,c,c);
if(ellipseIsShrinking)c–;
else c++;
if (c==0||c==150) ellipseIsShrinking= !ellipseIsShrinking;
}
void keyPressed(){
if (keyCode==UP){
y=y-speed;
}
if (keyCode==DOWN){
y=y+speed;
}
if (keyCode==LEFT){
x=x-speed;
}
if (keyCode==RIGHT){
x=x+speed;
}
}