Perlin noise + vectorfield + particles = fun

Admittedly, the result of this equation might not be everyone’s definition of fun, so in order for you to decide whether this post is worth reading at all, I’ll start by putting up something I made using the aforementioned perlin noise, a vectorfield and some particles.

(Note: the videos in this post are actually png imagesequences compiled into swf-files, loaded by a simple player I wrote for the purpose because I didn’t succeed in converting the sequence into a video with decent quality – yet. Beware, the videos are quite a lot of MBs for quite a few seconds of imagery.)


If that was indeed fun to watch, you might want to know how that animation was made. Basically it comes down to this: create an image filled with noise, map each pixel’s colorvalue to a vector (which is something with a direction and a magnitude), and end up with a field of vectors at every location of the image. Finally, throw a lot of particles on it and let the vectors act as some kind of mysterious forces on them. Result: moving particles! To make their trajectories visible, every particle increases the brightness of every pixel it visits a little. This way, areas with a lot of traffic become very bright while other areas stay more dimmed, or completely black.

I made a little tool to play around with this concept, using 6348 particles. Just randomize the noise until you spot a nice one and then press start. You can safely toggle both the particles and the noise without anything changing in the drawing, those two layers are merely to show what’s going on. (To actually see the drawing, you have to turn both particles and noise off)


After endless hours of fun with that, I realized perlin noise had another interesting property I could use: you can render it using a set of inputvalues, and if you don’t change those values, the noise will always render the same. Not much hoorays yet, but: when you change the values (or at least some of them) slightly, the noise also changes slightly. Hmmm…

On to the final step: after an image was rendered (somewhere in the range of 150-250 iterations), I changed the noise a little bit, set the particles back to their startingpositions and let them move again. Since the noise was slightly different, the drawn endresult was slightly different as well. Restarting this process a few hundred times, collecting all the images in between, was how the animations on this page came to be.

All the rendering, storing the images, changing the noise and resetting the particles was automated (with a small php-script to post the images to, since Flash can’t write to disk). More particles and more iterations meant better results, but also longer rendertimes. The videos in this post took about 1.5 hours to render, which resulted in about 10 seconds of video.

Two more examples:



I’m not sure what the next step will be. I already started on rewriting this tool (in Flash) with a better interface and more options but I’m not sure whether that one will ever be finished; I might just skip on to rebuilding it in either Processing or XNA to make the creation of the animations go waaaaay faster.

Dance the night away with PartyHardies

When a colleague comes up to you and asks for some help with a little project he has in mind, remember to not believe the part where he convincingly explains that “it will only take half a day. max!”. Being unaware of this golden rule, I was obviously excited for eternal respect at such a low price, so… there I was: dedicated to the PartyHardies project, and no way back. Luckily it included lots of suave dancemoves by colorful creatures – they certainly kept the spirit up.

The idea was simple: the colleague, an animator/designer/illustrator, has a yearly tradition of creating special (online) birthday invitations, and this year he decided to put up an avatar creator for his friends. Using that tool, they would be able to create their own little dance and save it, along with the message whether they wanted to come drink his free beer or not. Todo-list for me: create the editor, create the gallery where all results could be viewed, set up the backend (mysql+php) and make all animations work.

Despite the simple idea the project was quite challenging, especially with the rather rocksolid deadline (birthdays don’t move) and the fact that this was my first encounter with  animations nested as deeply as these (animations in animations in animations). There are still some sync-related bugs with that in the editor, but in the end I think it all worked out very well, given the time we had. Oh, and this was the first time ever I created a spiralshaped slider. Pure win!

The endresult can be seen by clicking the screenshot below, but since that leads to the public version of the site with only the gallery (no possibility to create anything yourself), I  stripped out the editor-part for you to enjoy at the very bottom of this post.

Concept, design and animations were done by VinzEnd, as well as convincing me that the spiral-slider really was an integral part of the “deeper concepts of the site” which “could not be changed or left out“. And last but not least: thanks to Corstiaan for rewriting the mp3-player, saved me some time in the end.


This is my blog. There are many like it, but this one is mine.

Yes, it’s time for yet another blog to hit the web, and time for me to put some of the digital things I do online. Why? Mainly to keep track of the many Flash-projects I do at work, but having a blog might also be a good incentive for me to indeed finish some of the little programming experiments I do at home now and then. Yay.

What to expect here: mostly Flash, some pictures, some code-generated videos and in the future probably some Processing and XNA material. Stay tuned