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!

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

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

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

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.

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

Can be used to create sequences of animations.