Moving is an art project featuring geometric animations I make. The animations are mainly hosted on a dedicated site on Tumblr, but I also share on other networks including Instagram, Twitter and Ello (yep, that's still going strong).

Not that you really need to have a reason to make things like this, but I started out making these one-off animations to hone my sense of motion and timing. I then found it developed into something in it's own right, so just ran with it.

From an art direction point of view, my one rule is that the animations must start and end on a blank white frame. I kind of like the idea that they come out of nothing and return to nothing.

Process

A lot of people have asked me how I go about making these animations, so I thought I'd go into the process a bit and describe the project in more detail, like I did with the Malika Favre site.

Ideas
There's no fixed process in terms of how I come up with the ideas for the final animations themselves. In some cases I had a clear visualisation in my head before I began making it and stuck rigidly to that.

In others the end result comes about by changing or manipulating a previous animation. And in others it is a combination of happy accidents and feedback loops, or a result of the constraints of my limited knowledge of the software I use.

Creating a GIF
Let's start with an animation as an example...

All gifs (as you no doubt know) are made up of a number of static images or frames, that then get played in sequence by your computer, either once through or in a loop.

The frames for the animation above are shown below.

All my animations are output as a sequence of images like this which I then compile together to make the final gif. I convert the sequence of images into a gif mainly using Photoshop. But gifsicle is a good, free command line way to do it too.

Creating an image sequence

As long as you have a sequence of images as output, it doesn't really matter what source software you use to produce that sequence.

To start with I was using Flash for this, hand drawing animations on a timeline and then exporting them as a png sequence. Stuff like this and this.

I wasn't that happy with these. I wanted to try to get to a place where the animations were coded and more dynamic, so I could just adjust parameters to make new things faster. I also wanted an easier way to add dimensionality and depth. Many of the ideas I had involved 3D animations using negative space and orthographic projection, but this was proving harder to create in Flash.

So, I will be eternally grateful to gif animation legend, Dave Whyte (of bees and bombs fame) for sharing the source code to one or two of his gifs as it made me see that Processing would be a better tool to be using.

Processing

Processing (if you've never encountered it) is open source software aimed at artists and visual designers and reduces the barriers to creating visual and interactive art.

I've used it a little bit in the past to make interactive things for installations and stuff, but it didn't occur to me that using it in a more systematic way could give such control for making animations and outputting image sequences.

And how Dave Whyte does this is as clever as it is obvious with hindsight.

It's firstly about having two modes set up for yourself in a Processing sketch.

In one mode you can preview your animation by scrubbing it using the mouse cursor from left to right across the sketch. This is very useful for iterating and developing your animation.

The second mode is a recording mode which you can then switch to when you are happy with what you have created. In this mode, instead of getting a cursor-controlled preview when you run the sketch, a numbered sequence of images of your animation is saved out to the folder where the sketch resides.

A practical example

It's quite hard to explain this stuff in the abstract, so I thought I'd put a simple code example up for you to try if you're interested.

The example will spin a line drawn cube when you move your mouse from left to right. And if you set the 'recording' flag to true it will output the animation as a sequence of png images.

To try it out, you'll first need to make sure you have Processing 2 installed (not the new 3.0 beta). You can download Processing here

Then copy the source code here into a new sketch and press the play button at the top to run it.

From here, you should be able to mess about and make your own animations which you can output as images and reassemble into a gif or mov using other software.

Hope this is useful to someone, feel free to share if so.

I've also put together a couple of videos to show a bit more stuff.

The first video below shows a Processing sketch being run and how it can be 'scrubbed' to preview the animation.

The second video is a whole load of my gifs rolled together into one long epic video just for the hell of it.

Also, there's a couple of things I want to do next when I have time.

Firstly I want to try to make my animations interactive in the browser — (there's a single example over here of how that might work using the excellent three.js.

And secondly, I'd really love to try to use some Moving animations as custom designs for knitwear where I currently work at Knyttan. That would be super cool, we'll see!

Anyway, cheers for stopping by.

(ノ^_^)ノ