Part 1: Decoding Exercises
Moire Patterns
The design looks to be 2 sets of lines in the shape of a rectangle. The one in the background is set and doesn't move, but the one on top responds to the movement of the x position mouse. The lines rotate and spin depending on where the mouse is. The design stays in the middle of the screen when the screen is resized and there are no other user interactions with the design.
Here is the link to the code with my comments on how the code actually works.
Animated Grid
In this design, there is a grid of boxes that span the width and height of the screen. The radius of the boxes then grows and shrinks at a random speed to look like waves or mimic movement in the design. The design is responsive since if the screen size changes, then the original and changing sizes of the boxes gets larger or smaller depending on the screen. This design is also interactive. If the user clicks on the screen, the radius of the boxes will change and the speed of which the boxes will also change.
Here is the link to the code with my comments on how the code works.
Interrupted Grid
This design is a grid of rectangles that fills up the size of the canvas. Inside the grid, there are circles that replace some of the rectangles. It seems to be a random amount of circles in a random placement in the grid. There are no user interactions with the design, but if the window resizes, the amount and placement of the circles change at random.
Here is the link to the code with my comments on how the code works.
Georg Nees' Schotter
This design is another static design that spans the full width and height of the screen. The top half of the grid is filled with static rectangles with some minor rotation. As you go down the screen, the rotation on the rectangles increases at a random rate. Some of the rectangles are rotated more than others. The design isn't interactive, but it's responsive. Once the scene is resized, the degree of rotation on the rectangles randomly changes, but still keeps the majority of the rotation at the bottom of the screen
Here is the link to the code with my comments on how the code works.
Vera Molnar's Un, deux, trois
This design is a static design that draws lines in a random pattern and that seems to be randomly rotated. The top third of the design has the most spaced-out lines and there is only one line that is rotated in some sort of way. The second third of the design has two lines that are slightly spaced out, but not so much that you can't tell that they are together. These lines are still rotated randomly but seem closer together because there are two lines next to each other instead of the one. The bottom third of the design has three lines next to each other in a similar way as the second third of the design. These lines also seem closer together because of the fact that there are three lines next to each other. This design isn't interactive, but it is responsive as the angles of the lines change along with the width and height of the design when the canvas is resized.
Here is the link to the code with my comments on how the code works.
Part 2: My Design
I had a good time creating this one. I kind of already had an idea of what I wanted to do because I remembered working on something similar last summer for creative coding. I wanted to elaborate more on this small project and design it in another way. I wish I spent more time with the random function in my design, but I couldn't figure out a good way to incorporate that into this design. I liked the idea of having a design that was both somewhat interactive and responsive.
Comments