Recitation 6: Processing Animation

Intro

During this recitation we were asked to create an animation in Processing. This was to integrate the new types of coding that we learned in class, into the drawing that we created last week.

Original Animation

Maze processing code

When I was creating this maze animation, I used a number of techniques that we had learned in class. I used the drawing skills that we learned last week to create the walls of the maze. In order to make the circle move I had to use the keyPressed() function. This was a challenge only because I had forgotten to initialize the x and y directions of the circle. 

int circleX;
int circleY;
int speedY =10;
int speedX = 10;
int r;

void setup() {
size(600, 300);
r = 10;

}

void draw() {

background(0);
noStroke();
rect(100, 0, 400, 100);
rect(0, 50, 50, 500);
rect(50, 150, 300, 200);
rect(350, 400, 500, 350);
rect(400, 200, 150, 300);

ellipse(circleX, circleY, r, r);

}

void keyPressed() {
if (keyCode == RIGHT){
circleX=circleX+speedY;}
if (keyCode == LEFT){
circleX=circleX-speedX;}
if (key == CODED) {
if (keyCode == UP) {
circleY=circleY-speedY;}
if (keyCode == DOWN) {
circleY=circleY+speedY;}
}}

Homework

growing and shrinking

I struggled a lot with this homework. I originally had the circle able to grow, but it never stopped growing. With the help of a fellow, they reminded me of the use of the !. This meant that now once a certain radius was hit, the circle would shrink in the opposite direction. The color also raised issues for me as well, I had a hard time figuring out what the parameters were that went with the colorMode(HSB) function. 

int r;
boolean circleShrinks=false;
int circleRadius = 200;
int circleX;
int circleY;
int speedUpd = 10;
int speedLr = 10;

void setup() {
size(600, 600);
r =200;
circleX = height/2;
circleY = height/2;
}

void draw() {
background(255);
colorMode(HSB, 360, 100, 100, 100);
background(360);
stroke(r,100,255);
fill(360);
strokeWeight(20);
ellipse(circleX, circleY, r, r);
if(circleShrinks)r–;
else r++;
if(r==0 || r==400) circleShrinks=!circleShrinks;
}
void keyPressed() {
if (keyCode == RIGHT){
circleX=circleX+speedLr;}
if (keyCode == LEFT){
circleX=circleX-speedLr;}
if (key == CODED) {
if (keyCode == UP) {
circleY=circleY-speedUpd;}
if (keyCode == DOWN) {
circleY=circleY+speedUpd;}

}}

Interesting Functions

keyPressed() – This function can be used to allow movement of shapes by the use of the arrow keys. It can also assign different keys on the keyboard to change thing like color, or transparency. 

colorMode(HSB)- This changes the way that Processing displays color

Leave a Reply