Motion in Graphic Design

In this class we’ll investigate what happens when we use motion or animation techniques to create flat, 2D designs.

I’ve been exploring this in my own work. Here’s a simple, generative logo made with the physics library Box2D.

Here’s an image of a series of graphic prints created with randomized, moving arcs.

Draw loop in Rune.js

This is the way you would do it in Processing. DO NOT DO THIS!

See example code

Here’s a quick example of how to animate using the draw loop in Rune.js.

See example code

Here’s an animation example that reuses the same shapes.

See example code

Here’s an animation example that deletes shapes when they are not needed anymore.

See example code

Tweenlite

This is a completely different way of thinking about animation, without using the draw loop. Here’s a example of how to do a simple animation.

See example code

TweenLite is very powerful. For example, it has a bunch of different easings and other settings.

See example code

TimelineLite

Can be used to create sequences of animations.

See example code