Strange Attractors

After stealing Keith Peter’s strange attractor code I knocked up a quick Flex app. Click and drag to pan, mouse wheel or buttons to zoom. Enjoy!

Example | Source

A simple water effect using convolution filters

There is a certain graphical effect I’ve seen many times in various forms. Its an effect that attempts to roughly simulate the surface of water. On a recent project I wanted to add this as a subtle effect underneath items being dragged around, as if the items causes ripples in the surface they were on.

It turns out this effect is bitmap based, and at its core is a convolution matrix. Briefly, a convolution matrix is a grid of numbers. When a convolution filter is applied to an image, each pixel has its new value calculated based upon its surrounding neighbours . The grid is used to determine how much its neighbours should contribute towards its new value. Many effects can be achieved with this method including blurs, sharpening and in our case, a ripple effect.

 

Example | Source

In this example, the ripple effect is created by storing the current and previous frames. The convolution filter is applied to the current frame. This causes areas of white to ’spread’ in a circular fashion. We then subtract the previous frame (which will be less ’spread’) from the current to leave only the ‘peaks’ of the wave.

Using this animation as a basis, it’s possible to create some pretty nice looking effects (if a bit useless). Most of these work on the principle of drawing the water effect above into an output bitmap each frame, usually using some sort of blend mode, then slowly blurring or darkening the result each frame.

Example | Source

Example | Source

Example | Source

Cellular Automata – Part 2

Continuing on from my previous post, I’m playing with a set of rules for cellular automata first discovered by a guy called Marvin Minsky. In this example the rules attempt to crudely simulate a network of neurons.

Each pixel represents a neuron, and is connected to each of its 8 neighbouring pixels. The brightness of a pixel represents how exited it is, and is directly dependant on how excited its 8 neighbours are. If the sum of all it’s neighbours reaches some threshold, the neuron ‘fires’ and is reset to black. The neuron is then inhibited from firing for a short time.

In the example below you can click anywhere in the black rectangle to excite some neurons manually. You should then see their brightness propagating to their neighbours and so on. The top slider adjusts the speed at which a neuron ‘recovers’ after firing and acts as a way of controlling the period of the pattern. The second slider adjusts the threshold at which a neuron fires. Larger values require neighbours  of the neuron to be more excited before it fires.

Example | Source

If you watch for long enough, spirals and other reoccurring phenomena begin to appear. Increasing the frequency slider seems to speed up the pattern up to a point before it turns to noise. Bringing the frequency back down again will tend to reinstate a pattern in the same family as the first, but noticeably different. Also, a pattern will also not last forever – swirls are eventually swallowed up by other swirls while new ones are born.

With something a rich as this being produced by such simple rules, it’s hard to imagine the amount of complexity being produced by a human brain every millisecond, where each neuron is hooked up to thousands of others in a dense 3D network.

On a technical note: This example forced me to a take a closer look at some of Flash’s bitmap methods. Originally I used a brute force approach to get it working by looping through all pixels and using getPixel() and setPixel(). This resulted in a 128×128 map running at less than 10fps on my machine. I’ve used convolution filters in the past so I could immediately see its use for the ’sum the neighbours’ part of the algorithm, however I continued to use the brute force approach for testing if a pixel had reached its threshold and setting it to black. I then discovered just how useful the BitmapData.threshold() function really is. Check out the code if you’re interesting in seeing how it’s used, needless to say, a few threshold calls and a convolution filter turned out to be much quicker than looping through a quarter million pixels each update.

Cellular Automata – How the Leopard gets its spots.

I’ve been reading up on how you can take a set of individual ‘things’, give each thing a rule to iterate, then sit back and watch them exhibit some interesting behaviour. These systems are classified as ‘Cellular Automata’ (http://en.wikipedia.org/wiki/Cellular_automata) and can be simulated in a number of different ways.

One such simulation is an array of pixels in an image. By initially randomly assigning each pixel a value of 1 or 0 (corresponding to white or black) we end up with a ‘noisy’ image like this.

Now come the rules.

• If 5 or more of your neighbours are ‘on’, then switch off.
• Else switch ‘on’

If we iterate this rule over time we get the following effect (click to regenerate).

Example | Source

The pixels seemingly organise themselves into blobs of colour on a global scale – however there is no ‘global’ rule dictating this behaviour, it arises from the local rules alone.

This particular example has been likened to the development of camouflage patterns in various animals. Something similar to the local rules outlined above governs the interactions of skin cells of the animal during the embryonic stage. Specifically each skin cell is initially either hormone producing, or not. This initial configuration is governed by the genes inherited by its parent, but is roughly analogous to the ‘noisy’ image earlier. Over time the cells interact. Hormone producing cells affect the other cells nearby. A certain amount of hormone flooding a cell will convert it to producing hormones too. Too much hormone causes it to revert to being a non-hormone producing cell. These rules are slightly different between species, but the principle is the same. By applying these simple rule over time the cells organise themselves into recognisable patterns that are each unique, but clearly belong to a particular ‘family’ of pattern, such as zebra stripes or the spots on a leopard.