Recitation

For the recitation, based on my work for the last recitation, I want to make some animation by clicking the mouse. I found there are some quadrangles in certain positions on the canvas. Therefore, I want to make them rotate while clicking. I started with an easier task which makes one block of shape appear and disappear by every click of the mouse. I shared some major progress I made during the process of achieving it.

void mousePressed() or if(mousePressed)

First all, I put the code under corresponding void setup and void draw function. Then I modified the code for drawing the first shape on the topic. I set the algorithm that in every loop of draw function, when the mouse is pressed (I use if(mousePressed) here), if the shape is drawn last time, then do not draw this time, vise Versa. Then I tried to run the code, and I found the problem.

As the video shows, when clicking the mouse once, the shape is flashing. I soon realized the problem that in class, we discussed the difference between void mousePressed() and if(mousePressed). Since I use if(mousePressed) here, within the time of every click, the code may have been executed multiple times, making the shape flashing. And this is not what I want. Therefore, I moved this block of code under the function of void mousePressed(). Then, the code will only be executed once for every click.

Creating a list

Then, I started to code for rotating the quadrangles in the middle of the canvas. Since I want the quadrangle to rotate certain angles every time, I recalled what I learn about Python’s “list” data type. I want to store all the rotating angles into a list so that I can call it easily without writing it every time. However, when I tried to declare a list variable, processing responded to me with an error message. Therefore, I searched online for the correct use of the list data type in Java. I learned at https://www.w3schools.com/java/java_arraylist.asp about the declare, add an item, access item for a list and applied it to my work. By using for loop, I added 10 different angles with equal intervals into the list.

“

ArrayList<Float> angleList = new ArrayList<Float>();

  for(int i = 0; i <= 20; i++){

    angleList.add(PI*i/10);

  }

”

rotate() and translate ()

Then I was trying to make the quadrangle rotate. By checking the reference, “rotate()” is straightforward to use. However, when I first put the angle into the rotate function, I met two unexpected problems. The first one is that when I clicked once, the majority of the shapes rotate. I then realized the rotate function makes all the following drawings rotate. So, I add a line of code that “rotate(-angleList.get(rotate_1));” to rotate the rest of the shapes back to the normal place. However, this time, when I click the mouse, the quadrangle disappeared.

I tested it for different angles, then I realized that the quadrangle is rotating around the (0, 0) instead of the center of the shape so that it went outside of the canvas. Then I recalled the “translate()” function we discussed in class but I was not sure how it could be useful at that time. I then figured it out by translating the origin point to the center of the shape, then rotate it. After that, I translated it back so that it would not affect other drawings.

Note: I only code for one quadrangle since for others, it only repeats the steps above without additional difficulty level.

Homework Assignment

Scale()

Step 1 is very straight forward to me. However, when doing step 2, I intuitively want to use scale() function. I tried to use “scale(1.1)” and assumed that while every loop of the draw function is executed, the circle will expand to 1.1 times than before. However, it did not perform in this way. The circle remained still. Then I realized since every time it will draw a new circle so that the magnification did not change. So I abandoned using scale() and applied another variable to update the diameter within every draw loop.

HSB

By applying the hint, I set the color mode to HSB. However, the color is always black when I adjust the value of H. Then I looked it up online and did some research about how H, S, and B will affect the color. In Erik D. Kennedy’s “The HSB Color System: A Practitioner’s Primer,” it describes that “Hue = “Color of the Rainbow”, Saturation = “Richness”, and Brightness = Brightness, Duh.” The website also gives some examples. Based on it, I realized that I need to set S and B to a higher value and make H changing to fulfill the requirement of the assignment. Step 4 is straight forward as well since we had some similar practices during class.

Interesting function:

rotate()

translate ()

ArrayList<Float>

colorMode(HSB)

void mousePressed()

code for recitation: link to google drive

code for assignment: link to google drive