Exercise 1:
For the first part of the recitation exercise, I was asked to add a form of interactive animation in Processing to the image I had already created during the previous recitation. I decided that I would utilize the information I learned in class and implement a few clouds into my design to animate.
First off, I reorganized my processing code with void setup and void draw, making sure to separate the code into its rightful position. I also took a tip from Young and created separate void functions for each component in the design: void drawCloud, void drawAntenna, void drawBase, and void drawPlatform and then made sure to call it in my void draw function. This cleared up the code by a significant margin and allowed me to create integers that could easily be manipulated in the function. Most specifically, it allowed me to create two clouds from a single code as I added in the translate line of code, another tip taught my Young: translate(x,y);
I then decided that my choice of animation would be to move the clouds based off of the user’s keyboard input. I used integers to set the speed of the clouds to a set amount of 0, meaning that the clouds would be static unless told otherwise. Then, I created a separate void keyPressed function and began to write down conditions with if and else if functions that make use of the special keys on the keyboard. Using the notes from the slides provided by Young, I typed the code in carefully, making sure that there were no red errors. I set the clouds to move at a speed of 3 in the right direction when the right key is pressed and vice versa when the left key is utilized. I also wanted to add another function to the code in order to test my understanding of the function, and so added that whenever the shift button is pressed, the clouds’ speed/velocity would return to the set value of 0, meaning that it would stop in place, regardless where it ends up.
I had also wanted to create a reappearing and disappearing Sun/Moon whenever the user clicked a specific key, however, I did not have enough time during the recitation to complete my desired goal.
Code: https://github.com/cy1323/CelineYu/blob/master/Celine___Processing.pde
Exercise 2:
Step 1:
The first step, which was to create the circle was very simple as we had already created a lot of shapes during class. I used ellipse (x,y size, size), and then set int size = 150 as well as x and y to 150 at the top.
Screen Recording 2019-04-17 at 8.02.30 PM
Step 2:
The second step, which was to modify the circle so that it would pulse periodically (expand and contrast) was perhaps the most difficult step. I set an int movespeed = 2, so that I could call for it in a function to change the size of the circle. With if functions, I then set the parameters for when the circles should expand and contract.
Screen Recording 2019-04-17 at 11.27.00 PM
Step 3:
This step was quite simple considering the hints that the recitation blog provided me. I used colorMode (HSB) to my advantage and learned how to have the color changed on its own.
Screen Recording 2019-04-17 at 11.30.42 PM
Step 4:
The final step was also fairly easy to complete as I had already finished this translating function or “keyPressed” function in exercise 1. I used void keyPressed function and called on the keyCodes: RIGHT, LEFT, UP, DOWN, as well as SHIFT, so that I can move the circle up, down, left, right and also stop it in position. At first, I kept getting frustrated because whenever I moved the circle around, the outside stroke that changes color would leave behind a trail of color. I tried everything I could but still did not figure out how to fix the code. I then, went online to search for the answers to my problems, this is where I discovered adding a background(255) line to my drawCircle void, and voila, that fixed it.
Screen Recording 2019-04-17 at 11.34.34 PM
Code: https://github.com/cy1323/CelineYu/blob/master/Pulsing%20Circle
Lessons
The most significant features I learned from these exercises include the keyPressed() function as well as the colorMode(HSB) function. They provided me a full glance into what I can manipulate within Processing and was also my first attempt at creating animation within the coding language.