Link to original.

TITLE: Moving Illustration
YOUR ROLE: Programmer
MEDIA: Creative Coding
SOFTWARE: Adobe Dreamweaver
CLASS: FMX 310
PROFESSOR: Santiago Echeverry
SEMESTER / TERM: SP 23
INSTITUTION: University of Tampa
DESCRIPTION: Traditionally, illustrations aren’t often meant to be interactive or mobile in any way, being instead static images that more often than not capture a moment of motion than have any within it. This Moving Illustration challenges that through an interactive element in the image itself, that being the eye of the mechanical mobile suit featured in the scene. For this project, I wanted to pay homage to one of my favorite anime series, Mobile Suit Gundam, and one of the designs from it in the form of the Zaku II. After finding a sufficient piece of artwork to trace over, I broke said illustration down into multiple segments that I could layer above or below one another, paying attention to what points there were and where certain colors split off into different ones. After I finished the illustration itself, I coded the eye ball to follow the mouse of the viewer in a limited range so it remained inside the head slot meant for it, just like in the original series, while adding a moving gradient to the lens of the mono-eye itself to simulate light and shadows as it moves.