Variable Shapes Coding Project
For this project, I chose the Android Logomark.
Final Composition
The final composition plots the logomark in a 3x3 grid. The sketch maps the shapes to the mouse movement and tests the size of the robot according to the mouse position. The arms, legs, antennae, and eyes grow and shrink proportionately, while the head and body change at different rates. The body rotates on mouseY position. On mouse pressed, the grid disappears and is replaced by a single logomark in the center of the canvas. While the mouse is held, the single logomark remains visible. The sketch tests the position of the arms and legs according to the mouseX position. The height of the smile grows and shrinks according to the mouseY position. On the 3x3 grid, the color changes on keyReleased.
1 = blue
2 = red
3 = yellow
4 = green
Press “Enter” to return to the android green.
The colors are based on the 4 colors of Google.
The eye size is randomly assigned on mouse click.
The final composition plots the logomark in a 3x3 grid. The sketch maps the shapes to the mouse movement and tests the size of the robot according to the mouse position. The arms, legs, antennae, and eyes grow and shrink proportionately, while the head and body change at different rates. The body rotates on mouseY position. On mouse pressed, the grid disappears and is replaced by a single logomark in the center of the canvas. While the mouse is held, the single logomark remains visible. The sketch tests the position of the arms and legs according to the mouseX position. The height of the smile grows and shrinks according to the mouseY position. On the 3x3 grid, the color changes on keyReleased.
1 = blue
2 = red
3 = yellow
4 = green
Press “Enter” to return to the android green.
The colors are based on the 4 colors of Google.
The eye size is randomly assigned on mouse click.
My intention for the final composition is to create random new shapes from the shapes of the robot by randomizing and rotating them. My intent on the mouse press, is to show the original logomark and the characteristics of the brand (the friendly, community-focused aspect of the Android brand). Since the original logomark is harder to distinguish in the grid composition, I used the subtle mouse press element to honor the original logo.
Centered Logomark
This sketch tests the position of the arms and legs according to the mouseX position and the length of the tongue according to the mouseY position. On mouse click, the color of the tongue is randomly assigned. The sketch leaves the trace of the arms and legs.
This sketch tests the position of the arms and legs according to the mouseX position and the length of the tongue according to the mouseY position. On mouse click, the color of the tongue is randomly assigned. The sketch leaves the trace of the arms and legs.
Gradual changes in grid
This sketch increases the head, body, antennae, and left eye sizes at different rates from to to bottom.
This sketch increases the head, body, antennae, and left eye sizes at different rates from to to bottom.
This sketch increases the head, body, antennae, and left eye sizes at different rates from left to right.
This sketch increases the head, body, antennae, and left eye sizes at different rates from the top-left corner to the bottom-right corner, and decreases the size of the right eye in the same direction.
Random changes in grid
On mouse press, this sketch refreshes and generates the android robot in a 5x5 grid with random arm lengths.
On mouse press, this sketch refreshes and generates the android robot in a 5x5 grid with random arm lengths.
On mouse press, this sketch refreshes and generates the android robot in a 5x5 grid with random eye sizes and body rectangle widths.
On mouse press, this sketch refreshes and generates the android robot in a 5x5 grid with random eye sizes and a random background color.
Mouse responsive changes varying for each tile
This sketch maps the logomark to the mouse position. The shapes of the logomark grow proportionately as the mouse moves overtop of them.