Yale Center for Engineering Innovation and Design


Interactive motion graphics for Yale’s central creative hub.

Motion Graphics • Interactive Design


Demo: The cursor’s hover illuminates CEID logos in a randomly generated grid.


Yale Center for Engineering Innovation and Design (CEID) commissioned a suite of interactive, ambient motion graphics to celebrate the redesign of their logo. These motion graphics appear in their website, in their newsletters, and inside the physical space.
 


CEID Logo

CEID Logo grid, off of which many of the generative graphics are based.


In p5.js, the new logo comes to life by responding to user input, randomly generating across the canvas, and other unexpected actions

Demo: Writing “hello” in cursive by generating CEID logos following the cursor’s movement.




Demo: Filling the canvas by generating CEID logos in random RGB colors following the cursor’s movement.


Demo: The CEID logo becomes a mouth with eyes that follow the cursor.


Demo: 6 CEID logos come together to form snowflakes, falling softly across the canvas.
CEID Christmas card featuring a Christmas tree drawn using the interactive design.