I spent the weekend at BarCampLondon6 at the offices of the Guardian near King’s Cross Station. I think my brain is too full of interesting things I’ve picked up over the last couple of days (not to mention too deprived of sleep) to actually process any of it into a coherent blog post, but you’ll get an idea of my thoughts by looking at my posts on Twitter tagged #barcamplondon6, and my Flickr set from the event. Thanks to the organisers for their hard work, and to all the people who took part.

My talk was about Processing. The photos below are by Rain Rabbit.

Me:

The audience (yes, I probably should have picked a bigger room):

You can view the slides on Slideshare:

Finally, here’s one of me playing with Auduino an Arduino-based synthesiser created by Peter Knight from tinker.it:

In passing, he mentioned that his smoke effects were created using photographs of nebulae. He didn’t give any details about exactly how this works, but I thought it was such a good idea that I decided to have a go for myself.

The concept I came up with is simple: use a particle system to generate smoke-like behaviour, but instead of drawing each particle as a simple “blob,” draw an image of a nebula. The older the particle, the larger and more transparent the image. Fairly simple, but it creates remarkably realistic effects.

The particle system I used is based on the Traer physics library (in fact, I used some of their sample code to create the smoke behaviour) but you could use any system you like.

The images I used are show below. I took pictures of nebulae I found via Google and cropped out the most interesting parts, then applied a circular gradient mask in Photoshop and saved the resulting image as a transparent PNG. The original PNG images are included in the ZIP file which is linked at the bottom of this post.

Here are a couple of videos showing the results from this process:

UPDATE: The videos have been moved to Vimeo, please see: Smoke 1, Smoke 2, Smoke 3.

The Processing source code for my simple example (along with the images used to create it) can be found in this ZIP file: smoke.zip. If you run this code, you’ll first see the particles drawn as red dots. If you press the ‘i’ key, the images will be drawn. Pressing ‘p’ hides the red dots. Finally, the ‘m’ key toggles mouse following mode. Don’t forget, you’ll need the Traer physics library for this to work. I used the OpenGL drawing mode because it considerably speeds up image drawing, but it will work using the default Processing renderer.

This is just a basic sketch of how the idea works, and as I said, I have no idea if this is exactly how Robert Hodgin does it. Either way, I think it looks pretty good.

UPDATE: Videos have been moved to Vimeo.

I just noticed that I got linked to from Create Digital Motion, a blog about digital video production and computer animation. Cheers guys! However, the post says that there is “more at [my] personal site” and.. well, there isn’t. Or wasn’t, until now.

The post is about Radiohead’s “House of Cards” video which has been getting a lot of coverage on t’interwebs this week. I’ll spare the technical details as you’re almost certainly familiar with them by now (if not, have a look at this post). My two attempts (so far) are below, along with a little info about how they were made. You can view both the videos in higher quality by clicking through to YouTube Vimeo.

House of Cards, Experiment One from Jamie M on Vimeo.

The first set of experiments is based on a really simple particle system. The x, y and z co-ordinates of each point in the data cloud are turned into a particle, which is then “bounced” off a hard surface using very basic physics. The position of each particle of each frame in the video is calculated the correct number of times to produce the animation effect. By bouncing the particles at different angles relative to the “camera,” appearance of the bouncing particle cloud can be changed, creating some unusual visuals. The next section of the video is created by duplicating each point three times, to create three versions of Thom’s head. Finally, every particle is given a random velocity, creating an “explosion” effect which again is modelled as a large number of bouncing physical objects.

House of Cards, Experiment Two from Jamie M on Vimeo.

The second video is simpler: no physical simulation, just a set of lines. Every point is connected to another point with a line. The number of points slowly increases over the video, so Thom’s face slowly appears from randomness.

I’ve put some higher-quality stills from the videos on my Flickr account.

This is an extremely scruffy alpha version hacked together in a couple of hours, but it works. The initial configuration is a Gosper Glider Gun. You can pause the simulation using the softkey, and then use the arrow keys on the keypad to move a “cursor” around. Click the main select button to flip the cell under the cursor from on to off and back again. Then press the Resume softkey to start running again.

Download the .jar file here.
(either click this link with your phone’s browser or download on your computer and send to your phone).

Thanks to Nigel Crawley (who I met at BarCampBrighton2) for the inspiration!

“Tadpoles” simulation

See the full article for more.

The separation and cohesion rules come for “free” by attaching every particle to every other particle with a negative Attraction and a Spring. It’s quite feasible that this could have been done with two Attractions, but the Spring has the useful method currentLength() which I used to detect which other particles are nearby in order to implement the alignment rule.

I made the simulation pseudo-3D by displaying the current Z-axis position of a particle as the colour of its stroke – more distant particles are lighter, closer ones are darker. Imagine looking down from above on a tank full of murky water which contains forty tadpoles*. The schools seem to emerge from the translucent water and then sink back into the depths.

The simulation is very sensitive to initial conditions and is therefore unstable when tinkered with. If you play with the values in the source code (change the number of tadpoles, change the strength of the attractions or the springs, etc) then the simulation may fall apart completely, or start to look much less realistic and natural. I arrived at the values through trial and error – they seemed to produce the best-looking effect. I’m sure a more stable simulation could be arrived at with further work.

* Disclaimer – I have no idea whether tadpoles actually move in schools

I decided to implement a basic Turtle for Processing. This is extremely simple – it can only drive forward and back, turn left or right through a specified angle and raise or lower its “pen”. But, combined with some simple programming routines and a bit of recursion, it can create some really nice patterns.

The Processing source code for the Turtle class can be found here: turtle.pde

A couple of examples using this class:

Donut Spiral – based on one of the examples of Logo on its Wikipedia page.

Koch Snowflake – this is based on the Logo source code found on the Wikipedia page for the Koch Snowflake. Click to zoom in on the fractal (Warning: I haven’t implemented any bounding for the zoom, so the fractal simply gets larger each time. The program will get slower to run the more times you click!)

The latest thing I’ve created using Processing is a version of Conway’s Game Of Life which you can find at j4mie.org/misc/life. Have a tinker and let me know what you think.