Optic Shift
This project was designed to show the anatomy of the eye with discoverable interactions that would effect the environment around the eye. The animations were made to be non-linear, and able to fire and layer in many unique ways.
My Role
This was a partner project, we tried out best to split up the work as evenly as possible. I did a lot of the original research into the parts of an eye, and what causes various optical problems. After this I jumped into the program Rive to start working on our interactive animations. I also worked on some of the previous iterations of the final eye design we went with.
Research
We started our research by determining what would be the most visually interesting aspects of the eye to depict through animation. We landed on near sighted, far sighted, astigmatism, color blindness, and glaucoma. From this point I did more research on the causation of these problems.
Rive Tests & Ideation
With our goal to create the interactions without UI I started creating tests in rive to figure out how to manipulate the shape of the eye for near and far sightedness. I started with a slider to prove that what we wanted to do was possible. Then I went through many iterations and days of figuring out the best way to use bones and joysticks in order to allow the users to feel as if they were manipulating the eye themselves.
After determining bones possible I moved onto tests to create an error state for the eye. I decided to create an object the users could grab and if they hovered over the eye while holding it, they would appear to be taking damage.
Running into Problems
One of the biggest problems we faced in this project was the program rive. Since it is still a new program that is constantly getting updates, there are certain design tools that aren't included yet. One of those tools being a blur overlay. So in order to create the blurring slider with the bones joy sticks we had to take the vector files of the buildings and move them into Figma to blur them. Then we had to export them back into Rive as images. There was a lot of trial and error in this step to figure out what kind of blending modes helped ease the blurring transition and allowed for our goal to be reached.
We also faced the challenge of two people working in the same file. Since Rive doesn't have version history we had to work smart in order to protect our progress. We determined the best way to do this was to have multiple frames, a final frame and a test frame. First we would test and interaction in the test frame and if it worked we would start applying it to the final frame. While that was happening the other partner would start testing a new interaction in the test frame. This allowed us to work cohesively together, and protect our file from corruption, or out files from breaking.
All Interactions
Eye Joystick: There are two small circles on the outside of the eye. When the user is pressing down on the circle and moving their mouse around the eye adapts to their movements.
Near and far sighted: These joysticks determine what kind of distance vision the eye has. The handle is attached to a joystick that allows the blurring animation to be scrubbed through as the user moves.
Astigmatism: When you click on the lens inside the eye it causes the lights in the buildings to spike out.
Color Blindness: The rods and cones at the back of the eye are indicated by different colors. If you click on a green rod then the whole screen becomes grey scale. If you click on a yellow cone then the who screen experiences a color shift. There is one rod and one cone each that reset the screen back to the original colors.
Glaucoma: When the mouse is left inside the space of the eye for too long then the screen begins to tunnel vision until the user removes the mouse.
Leaf Injury: When clicking on the bouncing bush and holding the leaf up to the eye, the state "ow" is revealed. This can be repeated as many times as the leaf intersects the pupil section of the eye.
Day/Night Mode: Clicking on the sun or moon will shift the background color palette of the screen. There are some animation changes between each mode.
