Inspired by Aaron Koblin’s designs, I want to do similar work that can make visual graphics out of taking data from various sources of information.
Role: Developer, Visual Designer
Responsibilities: Coding, Visual Design
When this project started, I envisioned designing this using 3D sprites of the Pokemon. But as I tried to go about that, I realized that using complicated models like that would require rendering designs that p5.js did not have the capability for, which really bringing into perspective of the feasibility of the tools I was using. So I simplified my original idea to using spherical shapes to represent the egg shells, and smaller cubical shapes that would represent the embryos.
In the images below, the respective spheres are representational images of Bulbasaur, Charmander, Squirtle, and Pikachu eggs. The data for each egg is pulled from a public JSON database of Pokemon data, using the max/min height of the creature in km as the dimensions of the spherical egg shell and the max/min weight in kg as the dimensions of the cubical embryo. The visual would pulsate between the max/min values, which gave the image the illusion of a living, breathing organism. The user feel I was aiming for was for potential users to experience the ability to examine a 3D object in a digital space. To do that, I added a function into the program that allows the rotation of the object to be controlled by where the user moves their mouse, allowing the design to have an interactive experience with the visual itself. As the user moves through the different types of eggs, they can get a feel of each Pokémon’s size in comparison to the next.
In terms of design choices, a few things I paid attention to was time and motion, color, and scale. For all the shapes, I left the strokes to show the shape outlines. While it was smart to remove the fill for the egg shell (we would not be able to see the embryo otherwise), I left the fill on the embryos to indicate the embryos' mass. While I tried to keep the color choices true to the actual color of the Pokémon, the color choices tend to appear more analogous. But using one or two complementary colors on the cube's edge adds some accent into the design. For example, Bulbasaur is a grass-type AND a poison-type Pokémon. This resulted in using mostly green with a complement of a dark red/purple outline on the embryo added small details to the image. Below are the respective images of each egg blown up to their maximum size as seen in the program.
Test it Out!
This is a preview of the finished project, imported from the p5.js website. To try the animations, follow the instructions below on the blank canvas to the left:
How to Use:
To see the code, click here
Click slowly on the canvas to the left to reveal the egg.
Move the mouse around to rotate the egg.
Click any key on keyboard to change the egg type. Guess which Pokemon the eggs belong to.
The dimensions of egg shell is min/max pokemon heights and embryo is min/max pokemon weights.
Double click mouse to clear the screen.
Looking back on this project, there are a few things I could still improve on this project. One thing I thought of is to link the zooming of the egg with the scrolling of the mouse. Doing so would also improve the user experience, as it adds another aspect of interaction design to the project.
The other thing I learned is the ability to pivot. As I had intended to use 3D Pokemon sprites in the beginning, only to find out that I bit off more than I could chew, I had to allow myself to pivot and use something a lot simpler, like spheres and cubes. But in doing so, this allowed me to experiment with the motion graphics, allowing me to create the illusion of life in these models. Overall, this project is a very simplified version of what I had in mind when I started, but has also given me the opportunity to explore new design methods that I wouldn't have otherwise thought of before.