Recitation 6: Processing Animation – Audrey Samuel

During last week’s recitation, we were required to create an interactive animation using Processing. We had to make sure we included some level of interaction by using the mousePressed or keyPressed functions etc. After watching a number of videos on Daniel Shiffman’s “The Coding Train” Youtube channel I felt much more ready to use all that I had learnt in class to design my animation.

I first began by defining my terms. I included float values for my circle’s x and y values as well as float values for the speed I wanted. I also wanted to include images as my background instead of simple colors. After looking on the Processing website, I learnt that I had to use “PImage” to define my images before void setup() as well. Next, under void setup() I included the size of my canvas (640×360), my two circles as well as the yellow and blue images I wanted to include in my background . Under void draw(), I used the if function to control the movement and speed of my circle. This took a lot of work to perfect. I visited a number of tutorials and used the class slides to learn how to properly use the if function. I had to first define – if CircleX was greater than width, speed would be -3 and if CircleX was less than 0 speed would be 3 (as seen in my code below). I then used the mouseX function to switch my background colors with the movement of my mouse. If the mouse crossed the white line, the background would change color. I found this to be a really useful function that I could use in the future. I then drew my ellipse and made sure I included speed. Finally, I included a line of code to change the color of the circle if a key was pressed. I was also able to increase the speed of the circle when a key was pressed. Overall this exercise was quite difficult and took a lot of trial and error before I perfected the circle’s movement etc. However, it was fun in the end and I enjoyed making my first animation.

float circleX = 0;
float circleY = 0;
float speedX = 3;
float speedY = 3;
PImage img;
PImage imgtwo;

void setup() {
size(640, 360);
img = loadImage("brown.jpg");
imgtwo = loadImage("green.jpg");
circleX = 200;
circleY = 100;
}

void draw() {
background(img);
if (circleX> width) {
speedX = -3;
}
if (circleX<0) {
speedX = 3;
}
if (circleY>height) {
speedY = -3;
}
if (circleY<0) {
speedY = 3;
}
//switching background colors with mouse click
if (mouseX >320) {
background(imgtwo);
}
//dividing the board in half
stroke(255);
line(320, 0, 320, height);
//Me Drawing my moving circle
fill(255, 191, 0);
strokeWeight(4);
stroke(225);
rectMode(CENTER);
ellipse(circleX, circleY, 100, 100);
circleX += speedX;
circleY += speedY;
//changing color of circle if key pressed
if (keyPressed) {
fill(255, 69, 0);
ellipse(circleX, circleY, 100, 100); 
//increase speed of circle with key pressed
circleX += speedX;
circleY += speedY;
}
}

VideoOfAnimation

Additional Recitation Homework:

Step 1:

For the additional recitation homework, we were required to sketch a circle at the center of our canvas. We had to make sure our canvas size was 600 x 600. 

Step 2:

Next we were required to modify the circle so that it expanded and contracted periodically. This was quite hard as I had no clue how to go about it at first. I looked over the slides and the Processing website and figured out that I had to use the “boolean” function here with an “if else” statement to define my parameters. I therefore began by defining my x and y sizes (both being 300) and “boolean CircleIsShrinking = false” before void setup(). I then included the size of my canvas under void setup and proceeded to include a background color of white (255), fill(255) for my circle and a stroke weight of 10 to deepen the border of my circle. I then drew in my circle including both the x and y values I had defined earlier and the radius as my ‘height and width’. Next I had to include a series of “if else” statements to increase the radius ++ or decrease the radius — thereby allowing it to expand and contract. As part of the boolean function, I learnt I had to define the maximum and minimum parameters of my radius splitting them with ||. I also learnt that including an exclamation mark before my boolean statement made it true. 

Step 3:

I then had to modify the sketch so that the outline changed color, by setting the colorMode() to HSB. This was quite a tedious task and I had to ask one of the learning assistants for help. I learnt that because I wanted the color to change randomly I had to define it on top using “float Color”. I then had to include colorMode(HSB) in void setup(). Under void draw() I included stroke (Color, 255, 255) and an If function which stated that if Color was greater than or equal to 255 (the maximum value for a color) then Color would equal to 0. If not – “else”, then Color would increase (Color++). This function made sure that the Color would keep changing from 0 until it reached 255 and when it reached 255 would set Color back to 0, creating a loop. 

Step 4:

Lastly, we were required to change the movement of the circle based on my keyboard’s arrow key input. I learnt here that I had to use the keyPressed function, and include keyCode = UP and keyCode = DOWN. I also had to include an if statement when using this code in order to modify the movement of x and y depending on which key was pressed. Overall, some of the useful functions I learnt during this recitation were mouseX, Boolean, keyPressed, keyCode, strokeWeight and PImage for background.