Part 1: Decoding Exercises
Lissajous Curve
This design looks to be drawing lines of circles in curves across the screen. There is a randomness to where the curve and line are moving across the page. It also feels like the line starts to slow down a little bit when it starts to change direction and speeds up after it gets started moving in that direction. The design isn't interactive, but it does reset after resizing the screen.
Here is the link to my commented code.
More Parametric Equations
This design follows a long pattern of flow while moving the line across the screen. The pattern looks similar to the Lissajous curves seen above where it probably follows a sine or cosine, or maybe some combination of both, to create the flow seen on the screen. This design isn't interactive, but it is responsive when you change the width of the screen. The design restarts and repeats the same pattern.
Here is the link to my commented code.
Recursive Circles
This design is very similar to the design we created this past summer in creative coding. There are multiple circles drawn in the center of the page. Each one seems to be exponentially larger away from the previous circle. The circles start with a small circle in the middle of the page and then each circle grows exponentially larger until it reaches the width and height of the page. This design is not interactive, but it's responsive as the design stays in the center and gets smaller or larger, to its maximum width, when the screen is resized.
Here is the link to my commented code.
Recursive Squares
This design creates squares in a specific pattern across the screen. The number of squares created depends on the width and height of the screen. If the screen is larger, the amount of squares is increased to make a more intensive pattern while the screen is smaller, there are fewer squares. It's a static design, but also fun to interact with. The pattern seems almost mathematical in the determination of where the squares are placed on the canvas.
Here is a link to my commented code.
Rotating Recursive Squares
This design is similar to the previous static design. The grid is still there, but now it's rotating. The entire design itself is rotating as well as each of the individual squares are rotating the create interesting effects during its rotating. There are times when you can see every part of the squares, there are times when the squares create a new design and there are times that all the squares overlap to create a complete square. The squares seem to be rotating at a constant speed and the design isn't interactive, but it is responsive.
Here is the link to my commented code.
Part 2: My Own Design
I really liked the effects the first two designs created, where they created these soothing patterns and I wanted to experiment more with these types of patterns. I decided to create something similar and just spend this week playing around with the different types of interactions that I could do with these different types of designs. I utilized different shapes and lines to get different interactions with the curves and sine and cosine waves.
Comments