Recitation 6: Processing Animation – Ariana Alvarez

Recitation Exercise:

For this week’s recitation, I decided to create a new design and animate it in the form of a game. The initial idea was to have a rectangular box chase an ellipse that was “falling” from the top of the screen; and if the player lost, then the screen created a geometrical shape in the center that englobed the box and indicated its user that the game was over. Due to time constraints, I wasn’t able to fully develop my idea. Nevertheless, this was the final animation product of the recitation.

The code of the animation mainly focused on the inclusion of both mousePressed and keyCode, in order to show keyboard and mouse interaction. keyCode, was used to move the rectangular box that simulated “catching” the ellipse moving on the x and y axis at a certain spX and spY. Whereas, the mousePressed function was utilized to draw the rectangular strokes that indicated “game over”, once the moving ellipse had surpassed the movable rectangle.

int s = 20;
float x = 100;
float y = 0;
float spX = random(1,10);
float spY = random (1,10);
int d = 50;
int e = 200;
int c = color(random(50,225),0,200);

void setup() {
  size (1000,600);
  frameRate (10);
}

void draw() {
  float y = millis() / 10;
  line(y, 300, 50, 65);
  
  background(c);
  ellipse (x,y,s,s); 
  x = x + spX;
  y = y + spY;
  
  if (x > width) {
    spX = -spX;
  }
  if (y > height) {
    spY = -spY;
  }

  if (mousePressed == true) {
    noFill();
    strokeWeight(0.5);
    translate(width/2,height/2);
    rotate(frameCount);
    rectMode(CENTER);
    scale(random(0.1,3));
    rect(0, 0, 100, 100);

    } else if (keyCode == LEFT) {
    float x = width - millis() / 10;
    fill(255);
    rect(x, 200, e, d);
    } 
}

Recitation Homework:

Step 1:

For the first step, I followed the instructions by first setting the size of the canvas to 600×600. Then, I created a circle in the center of the screen by using the ellipse function, with a size of 200×200, and strokeWeight 15.

Step 2:

In order to make the circle expand and contract periodically, in this step I rearranged my code within “void setup” and “void draw” functions, that way, I had more control over the animation. I also determined two new variables, “x” and “a”, in order to identify with “x”, the size of the circle, and with “a”, the change this size would face. I also added the keyword frameRate, in order to have control over the speed in which the expansions and contractions were ocurring.

Step 3:

For this step, based on the instructions detailed for colorMode, I set this function to HSB, and included it within void setup. I later on introduced three new variables in order to identify HSB accordingly. Nevertheless, for this particular situation, the only setting within HSB that truly had to change was “H”, which stands for Hue. Therefore I introduced an if statement to perform such change in color, and obtain the desired results.

Step 4:

As a final step, in order to make the circle move according to the key arrows, I introduced a new keyword called keyCode. Before introducing keyCode, I had to declare four new variables regarding x, y, speed of x (spX), and the speed of y (spY). Nevertheless, in order for the functions to work, I created if statements so the circle moved according to the arrows, as well as it didn’t surpass the canvas delimited area. In the end, the animation was finalized as the following:

The code of the final animation looked as the following:

int a = 2;
int c = 100;
float h = 0;
float s = 100;
float b = 100;
float x = 300;
float y = 300;
float spX = 5;
float spY = 5;

void setup(){
  size (600,600);
  frameRate(80);
  colorMode(HSB, 300,100,100);

}

void draw() {
  background (255);
  stroke(h,s,b);
  strokeWeight(15);
  h++;
  if (h>300){
    h = 0;
  }
  
  if (c >=300 || c <=80) {
    a *= -1;
  }
  ellipse(x,y,c,c);
  c *= a;
  
  if (keyCode == UP) {
    y = y - spY;
  } else if (keyCode == DOWN) {
    y = y + spY;
  } else if (keyCode == RIGHT) {
    x = x + spX;
  } else if (keyCode == LEFT) {
    x = x - spX;
  }
  
  if (x > (width - c/2) || (y < (c/2))) {
    spX = spX * -1;
  }
  if (y > (height - c/2) || (y < (c/2))) {
    spY = spY * -1;
  } 
}

Most Interesting Functions:

mousePressed ( == true ) ; *used to fill in the screen
keyCode (UP, DOWN, LEFT, RIGHT) ;
colorMode (HSB) ;
frameRate (control speed of frames eg. 10) ;
“if” statements to control variables were definitely one of the key points in making the animation do what you want it to, and in what moment. It was a function mixed with all of the other ones. It helped me control everything from size, color, and even the direction in which I wanted to move it with the arrows and keyMode function.

Leave a Reply Cancel reply