Part 1: Decoding Exercises
Random Squares
Speculate
This image is being driven by a random function to dray rectangles of different sizes across the canvas. There isn't any pattern to the rectangles or how they are placed on the screen. There are different clusters of rectangles across the canvas that are also randomly placed. You can interact with the design. Every time you click on the canvas, it redraws the rectangles in new areas in a new design so you are never seeing the same shapes and sizes in the same place. This design isn't responsive so when you adjust the size of the window, you have to reset the project to fit the current dimensions of the screen. The only way to get the project to reset it by clicking on the screen.
Map & Investigate
I first wasn't sure what the difference was between random() and randomSeed() so I changed that function to see the difference. That helped to see that random() is constantly choosing a random number and randomSeed() is randomly choosing the same number while the program is running. I continued playing with the for loop to see how the rectangles were iterated on the screen. I wondered why the x and y height part of the variables were multiplied by 9. I figured out this pushed the rectangles from being all lined up at the top of the screen. This code was really interesting to break down and figure out all the parts that created the design.
Explain
Here is a link to the comments that I made on the code.
10 Print
Speculate
For as much as I've seen this design, I'm still not 100% sure how it works. The program is generating a random assortment of lines that connect down to the bottom of the page. The design is iterative and builds upon itself. The lines all end up connecting to each other in some way. The design also starts over once it reaches the bottom. Once you resize the screen, the design restarts at the beginning, This design isn't super interactive, but you can resize the screen to restart the design.
Map & Investigate
I really wanted to understand how this code worked, so I worked backward. I started with what code I recognized, so I knew the initialize() function essentially reset the design, set the x and y to 0, and sets the spacing. I also knew the windowResized() function reset the design every time the window was resized and ran the initialize() function again. I then broke up the draw() function into parts. I started at the end with the if ( y > height) and the if ( x > width) statements. I recognized that the y if statement reset the design as well, and started the lines drawing at the top of the screen when the drawing is at the bottom of the screen. The x if statement started the drawing on a new line once the x position reached the end of the screen. Then I tackled the main if statement that drew the lines on the screen. It starts with an if statement that occurs 50% of the time. Depending on which side of the function the program chooses, the program draws a diagonal line that goes from the top to the bottom or the bottom to the top.
Explain
Here is the link to the comments I made in the code.
Random Walker
Speculate
This design starts by creating a random line of tiny circles in a random direction, almost like it's randomly walking across the screen. It constantly draws this design and expands in random ways across the screen. You can interact with this design. When you click on the screen the design erases and restarts where you clicked on the screen.
Map & Investigate
Once I saw the code for this design, I felt it was much more straightforward than I originally thought. There is a function called point() that draws points on the screen. It draws the initial point in the middle of the screen. The placement of the dots is based on a random function that determines whether or not the x or y increases or decreases. The x and y reset if the design starts to go off the screen and if the screen is resized. It also resets if the user clicks on the screen and resets to where the user previously clicked on the screen.
Explain
Here is a link to my comments on the code.
Perlin Noise Walker
Speculate
This design is a little more complicated than the last one. I'm not 100% sure how this one works. I know the points are being drawn in random, what looks like bezier curves, across the screen. This design resets once the window is resized and when the mouse is clicked. When the mouse is clicked the design doesn't start where the mouse is clicked, but it starts in a random position.
Map & Investigate
I still want to learn more about Perlin noise because I'm not 100% sure I understand it but analyzing this design helped. I know that there are noise values that pull random numbers to create a more natural, random design. The noise values are then mapped to the confines of the screen and draws random points in a line across the screen. The x and y noise values are then increased by 0.01 to help create the smooth flowing lines.
Explain
Here is the link to my comments in the code
Noisy Bezier Curve
Speculate
This design looks like it's drawing smooth bezier curves across the screen. The curves and lines look like they are connected and flowing into each other by the shadows that they leave. The design generally stays in the center of the screen, so while the direction of the slowing curves seems random, the scope of the design doesn't expand close to the edges of the screen. This design isn't interactive, but it will restart when the window is resized.
Map & Investigate
Once I saw the code for this program, it was simpler than I thought it would be. Each value of the bezier curve is randomly created with the noise function. This gives it a smooth functionality. The x and y values are being generated by taking the corresponding width and height and multiplying it by the noise. This is what helps keep it in the center of the screen. I'm not sure this helped me to understand Perlin noise or bezier curves more, but this as definitely helpful.
Explain
Here is a link to my comments in the code.
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?
I really liked the 10 print function and the random walker designs and part of the influenced my design. I also build off of last week's design with the looping circles. I created another design where I was able to accomplish some of what I wanted last week. I was also to randomize the colors and create a function that generated random circles across the screen. This was a fun design to play with and create. I did have some trouble with continuously getting the circles to generate on their own. I had them first generating after the mouse was clicked and since it was such a large space, it would have taken forever to fill up that space. Plus since I also added opacity to the background, the circles are disappearing and it made it feel even more empty. I went back to the example designs to help with the looping if statements to have everything computer generated.
Comments