flow field

Real time Flow Field

Sunday, January 11th, 2009 | Building Things, Processing | 2 Comments

To go with my recent post Flow Fields in Processing here is a real time version of my flow field. This one is without easing so sudden changes in direction are a bit abrupt. Smaller objects move quicker than larger ones.

Click on the black square below to begin – then press any key to see the flow field which governs the movement.

Download Code

All the best,
Leafcutter John.

Tags: , ,

Flow Fields in Processing

Sunday, January 11th, 2009 | Uncategorized | 2 Comments

I’m fast becoming obsessed with Processing much to the detriment of everything and everyone in my life. Actually my partner is very encouraging and she likes these images nearly as much as I do. I first became aware of flow fields through the work of flight404 who has made some beautiful things in Processing. He describes using Perlin Noise to create a flow field but he’s not very detailed in his description of how to do it or what a flow field actually is.  I spent yesterday trying to work it out and I think I came up with a solution which matches pretty closely the method I found about 10 mins ago HERE

In the following images Perlin Noise is used to create a array/grid of angles which affect any objects which are directly above them. The grid looks like this (the angles change every frame):


As you can see the area of the screen is split into rows and columns creating a grid. Each grid cell has a direction (derived from Perlin Noise). An object placed on the grid can read the direction directly below it and move in that direction. See my Real time Flow Field.

The images below are from my experiments with a more advanced version of the system where objects turn gradually according to their mass which diminishes out over time. The coloured examples map colour to size or angle (click to see them full size).





Tags: , ,

Social Links



For you YOUTUBE VIDEO pleasure