In the 10,000 Letters of Love video, there is a hell of a lot of me wandering about and hitting things with hammers and wearing a top hat, but there are also other elements which form the scenes you see, things like trees, raindrops, grass and Zeppelins. I did think about creating more stylised clouds, too, but couldn’t come up with a good approach, so I ended up using a photo of the sky I took. Believe me, I have plenty.
Everything else was created in Processing, a programming language based on Java with a slightly simplified syntax and lots of nice built-in functions for animation and bits of maths. I’ve put a lot of the code on GitHub – bear in mind that the code uses moviemaker, which only runs until Processing 1.5 – later versions gutted the video functionality, which is very irritating.
Let’s start with the trees. The structure of this code was inspired by the work of the late, great Alasdair Turner – we use code like this on our course as an example of recursion. It’s not super-easy to understand, as you have to know a bit about classes and recursive methods and Processing’s matrix formalism. It might not have been the best example to start with actually, but it was the first thing I made, so there we go. Headline: it’s a fractal, innit? I spent ages tweaking probabilities and angles and scaling laws to get something treelike. It’s easy to make a fractal tree that actually looks nothing like a tree, it turns out.
All I did here was to add some sinusoidal motion to each component, and put in some random initial phase to make it a bit more organic. There’s also a version I did which uses a more physical particle-spring type model, but I think I used the simpler version, as the results weren’t quite as good for the full physics model, and it’s harder to write.
The grass was done in a similar way. I created an object that looks a bit like a single blade of grass using some Bezier vertices, and tweaked it to look vaguely realistic. This is a bit easier to follow if you’re new to Processing.
Having created one blade of grass, it’s pretty easy in Processing to create a load and give them some sine motion, giving each slightly different sizes, frequencies, and phases. The bottom of the grass is fixed, with the control points and tips varying with time.
The raindrops were created in exactly the same way. I created a raindrop object, and then gave it some “wobble”. Each raindrop has information about its size and position, so again, I could create a load and, for each, link its speed to its size (i.e. perceived distance from the viewer).
I played around with varying degrees of opacity in fill and outline, as well as speed. I really like how massive and slow these lazy raindrops are. Especially in the scene with the plumber, where they’re bigger than his head. Soggy.
The Zeppelins were meant to imply a transition to a populous and urban location. They were a bit of a faff, but not too bad. The zep body was made from a sphere() in Processing, preceded by a scale() function that stretched out the y axis (the direction of travel). The gondola was easy, it’s just a box() with a bit of translate() to put it in the right place. The fins were drawn using a beginShape()/endShape() setup. The rotors are just a series of stretched ellipses aligned using three rotateX() commands, plus a rotateX() command which affected all three and increased with frameCount – this has the effect of continuously rotating all three blades like a rotor. If you’ve done any animation in Processing and know your way around a pushMatrix()/popMatrix() you’re 90% there. Then it’s just a matter of linking these set of display components to a Zeppelin object and giving each Zeppelin a speed and position PVector so it knows where it is and where it’s going. Here are a few in a scene:
(If you don’t code but want to experiment, I recommend downloading Processing and having a play with some of the tutorials).
As I’ve hinted, creating multiple variations on the same objects is easy if you’re programming; you just create one thing you like, add some randomness, and then use arrays and loops to create variations. Brickwork is especially easy – I even though about doing some shadowcasting with a paper brickwork pattern, but it didn’t quite work, visually. I generally combined the different elements in After Effects, but it’s pretty easy to do it in Processing, if you’re so inclined. Above is a combination of a few of the elements in an early visualisation of the “Labyrinth of Brick” (rejected because there are a lot of elements and it was hard to see how this would play nicely with a paper set).
The rainy streaks in the Labyrinth of brick were straight-up asset reuse – they’re just the raindrops from Act 1. “So why do they have tails?” I hear you ask. Well, I’m using my favourite Processing trick of not using a background() call, but instead drawing a rectangle over the whole canvas which is a bit transparent. This means you get after-shadows of each object, and cometlike tails. They even turn up in the last scene, but you hardly see how nice they look spewed out of an outflow pipe:
Earlier in the process, I came up with some initial attempts at backgrounds – using a rising sun/moon,
and latterly, this weird moony spin:
Neither of these quite worked with the sets, for lighting reasons. As soon as decided to use the cloud photo, the sunrise didn’t make much sense visually. The spinny moon thing looks great on its own, but it’s bright enough to shine through a yellow set, which makes no sense – you should only be able to see the moonspin through a window or door. It was going to use it to mark Bazalgette’s Silent Hill-ish transition to the underworld, but I opted instead for the more understated version where the people and Zeppelins disappeared, and the raindrops fell.
Next time, I’ll talk about acting. Or “acting”; and maybe something on compositing and projecting.