This weeks recitation we expand on what we worked last week, and animate the graphics in processing using loops. I decided to work off of the example my instructor showed me in our lecture, a simple function that draws a stick man.
I started off animating the stick man by making it follow the mouse, at first I only made it follow the x position, but later also included y position.
I tried to give it more interactivity, and make something happen when the mouse is pressed. I tried messing with the angle of the function as it was one of the original parameters that my instructor chose. But I didnt really like this interaction so I started trying other stuff.
I then gave the stick man flashing colors and also leaving a trail behind him as the mouse is clicked, this lead me to my next idea of leaving a frame of its previous position as if it is an afterimage or blur in typical animation technique.
I changed the code and declared a counter variable so that it does not clears the shadows after a certain frame count.
I also tried a alternative technique of storing the positions as a variable, making it possible to only have one shadow.
Recitation Homework:
I started off only drawing one ellipse. The ellipse function is very useful as it takes care of all the math for me, I don’t have to write a lot of math formulas to draw a circle.
I later realized that the circle on the example gif seemed a lot thicker than my circle, so I created two circles, one filled and one white to create the inner hole. I also made the color of the circle change depending on the same variable that controls size.
I made the circle moveable with the keyboard inputs from the user.
I also set boundaries so that the circle does not leave the page.
This recitation was pretty useful as it got me more familiar with processing syntax, and prepares me well to tackle more ambitious projects with the use of processing. Also giving me a better understanding of how the frames can be modified by code to produce animations with simple programming logic.
Code below:
circle:
int size;
int velocity = 2;
int xpos= width/2;
int ypos= height/2;
int xv= 5;
int yv = 5;
void setup(){
size(600,600);
size=60;
xpos= width/2;
ypos= height/2;
}
void draw(){
background(width/2);
if (size >=width/2){
velocity *= -1;
}
if (size <= 50){
velocity *= -1;
}
size+=velocity;
colorMode(HSB, width/2);
fill(size,size+100,250);
ellipse(xpos,ypos,size,size);
fill(width/2);
ellipse(xpos,ypos,size-40,size-40);
if (keyPressed){
if (key == CODED) {
if (keyCode == UP & ypos>=0) {
//fillVal = 255;
ypos += -yv;
} else if (keyCode == DOWN & ypos<= height) {
//fillVal = 0;
ypos += yv;
}
else if (keyCode == RIGHT & xpos<= width){
xpos += xv;
}
else if (keyCode == LEFT & xpos>=0){
xpos += -xv;
}
}
}
}
Stick man:
int xpos;
int ypos;
int curx;
int cury;
float angle;
boolean colors = false;
int counter = 0;
void setup(){
size(600,600);
background(255);
//stickman(100,100,0);
xpos = 0;
ypos = 0;
}
void draw(){
if (mouseX >= xpos){
xpos+=1;
}
else if(mouseX <= xpos){
xpos-=1;
}
if (mouseY >= ypos){
ypos+=1;
}
else if(mouseY <= ypos){
ypos-=1;
}
if (mousePressed){
//angle+=0.1;
//colors = true;
if (counter >= 30){
counter=0;
//background(255);
curx = xpos;
cury = ypos;
stickman(curx,cury,0,false);
}
else{
counter+=1;
background(255);
stickman(curx,cury,0,false);
}
}
else{
background(255);
colors = false;
}
stickman(xpos,ypos,angle,colors);
//int randx = int(random(width));
//int randy = int(random(height));
//stickman(randx,randy,0.5);
}
void stickman(int x,int y, float angle,boolean colors){
pushMatrix();
translate(x-40,y-40);
rotate(angle);
//rect(20,20,40,160);
ellipse(40,40,30,30);
line(40,55,40,150);
line(40,55,20,100);
line(40,55,60,100);
line(40,150,20,200);
line(40,150,60,200);
if (colors){
float r = random(255);
float g = random(255);
float b = random(255);
fill(r,g,b);
}
else{
fill(255);
}
popMatrix();
}