Part 1: Decoding Exercises
Rotate
Speculate
At first glance, I immediately notice that the square is the only thing rotating and when it does, it inverts the colors of the objects underneath it. The triangle and circle also invert the colors underneath them. I also notice that the spinner stays in the middle of the screen when you resize it.
Map & Investigate
When mapping out the code and playing around with the functions, I started with the blendMode function to see what different outputs would happen when I changed that filter. The filters altered how the shapes interacted with each other and their overlapping parts.
Explain
I included all my comments explaining which part of the code does what and you can click on the image to view more of the code.
Bounce
Speculate
For this one, the circle bounces back and forth between two points at a consistent speed. It's a very smooth transition that also stays at a constant speed and in the center of the screen when you resize the window. Also, the distance from the circle to the edge of the screen changes when you resize the screen. It's a bigger distance when the screen is wider and a smaller distance when the screen is narrower.
Map & Investigate
I was able to play with the starting and ending positions of the circle to see where those would move the circle and how it would impact its path. I also played with the map and sin functions to impact how far the circle would move and further played with where the circle starts and ends.
Explain
I included all my comments explaining which part of the code does what and you can click on the image to view more of the code.
Pulse
Speculate
When I first look at this loop, I notice that the circle is slowly changing the stroke width over an amount of time. There are no interactions when you click on the image, but this image is also resized and remains in the middle when you resize the window.
Map & Investigate
I played with the amount variable and the thickness variable to change the speed of the loop, the maximum and minimum thickness, and the amount of which the stroke weight of the circle changed. It didn't loop in the way that I originally thought and I'm not sure I know what each variable does, but I was able to play with it enough that I understand the basics of the function.
Explain
As I explained above, I'm not 100% sure I understand every part of these variables, but you can click on the image to go and see more of my comments.
Spinner 1
Speculate
When I'm first looking at this, I notice that the circle on the page rotates around a central origin as opposed to rotating around itself. There is also some sort of glow or somehow the circles are being left behind in a shadowy way that leaves the glow/shadow behind, but it doesn't stay on the screen. It erases itself and doesn't stay on the screen. This sketch is also still responsive to the width and height of the screen.
Map & Investigate
While I was able to play with the strokeWeight function and the radius, x, and y variables to change the speed and direction of the circle, I couldn't figure out why the glow was left behind. I'm thinking it has something to do with the cosine and/or sine functions, but I'm not sure.
Explain
You can click on the image to see more of my code, but I added my comments on what I think is happening in the design.
Spinner 2
Speculate
When you first look at this spinner, you notice that there is one circle that is rotating around a central point. That circle, as it moves, the circles behind it change in their gradients going from light grey to black. This circle also stays in the center of the screen as it's resized.
Map & Investigate
When I mapped out the code, there is only 1 circle that is being rotated around a new center point. The number of circles and how many are being produced behind the circle are calculated through the num and angle variables. The translate function is used to get the circle going around the center point of the screen. The background function has opacity added to the function which shows the extra circles after the main circle goes around.
Explain
I included a link to my comments below. Click on the image to see more of my comments.
Part 2: My Own Design
Reflect on the discoveries and challenges you encountered during the exercises. What graphic or animation effects are most pleasing to you? Where did you get stuck and what steps did you take to troubleshoot? What code-related techniques would you like to explore and practice more?
So for my own looping animation, I wanted to explore more with the sine and cosine waves and how to maybe use them diagonally or add several of them without having to hard code each one of them. I also really liked how smooth the waves made the animation and along with the drag created from the background, it's a really nice and calming animation. It's probably because I haven't used anything like this before, but it was harder trying to figure out which parts were looping specifically so I could put them in another loop. I tried to have the mouse change some effect of the circles, but that didn't work either. I tried putting the animation in a for loop to be activated by the mouse, but I don't think I'm understanding enough of how the function works to determine what exactly I need to use variables for to create a generative loop. I do want to keep working on this to add some sort of interactivity to the animation, but for now, I ended up just having these circles on the screen. Click here to go to the code.
Comments