Interactive Design: “ShapeShifter”

By Jour Morton

The animation I’ve designed includes a functionality that enables it to alter its color and expression in response to a finger sweep on a mousepad.

The animation undergoes the following changes as the mouse is moved in different directions (left to right)

1. When the mouse is stable, the image remains fixed.

2. The eyes and wheels become larger When the mouse is moved straight down the middle to the bottom.

3. When the mouse is moved to the bottom left, the color changes from olive to green, and the eyes and lips move left.

4. When the mouse is moved to the right, the eyes and wheels become smaller, and the color changes to orange.

5. When the mouse is moved to the bottom-right, the eyes and wheels become larger again.

Select link to view code

2 comments

Leave a comment