JavaScript Cellular Automata

Over the last few days I have started learning JavaScript. Creating a simple 2D cellular automata seemed like a good start.

The cells in an outer totalistic CAs get updated based on their 8 immediate neighbouring cells surrounding them. The most famous example would be John Conway‘s Game Of Life.

To see the results of the Outer Totalistic Cellular Automata click here. A bit of CSS to pretty things up and there it is. There is a drop down list of preset rules to show the sorts of emergent behavior that can arise from cellular automata.

If you are interested, the source code is available here.

So far JavaScript has been a relatively pleasant experience. Most of my time was spent on the “how to do” rather than the “what to do”. Once you know the basics of programming any new language mostly comes down to syntax.


Multiphase Smoothed-Particle Hydrodynamics

Smoothed-Particle Hydrodynamics (SPH) is a method of simulating fluid flow. It is based on representing a fluid by a large number of discreet (individual) particles. Each particle has properties like position, pressure, density, mass, etc. The particles are fed through a bunch of equations that make them move in a fluid like flow.

If you are a maths nerd then one of the better and recommended papers for SPH fluids is Particle-based Viscoelastic Fluid Simulation.

Multiphase SPH is when you have 2 or more fluids with different densities etc (think oil and water) that flow around each other and clump together.

I have always had a fascination with simulating fluids. Over the years I have tried to understand SPH and have had many failed attempts at writing programs to do it (the basic formulas seem relatively simple, but getting the code to run stable without explosions and crashes is far from simple). Then I found this blog post by Tom Madams that had sample source code. With that I was finally able to get SPH working. It can still be fiddly to find a nice set of parameters to make a nice looking movie, but Tom’s code seems to be a great start. Thanks Tom!!

Multiphase SPH is now available in Visions Of Chaos.

A future release will include 3D support.


Cyclic Cellular Automata

Cyclic Cellular Automata were first developed by David Griffeath at the University of Wisconson.

The rules are relatively simple;

1. Take a 2D grid of cells.
2. Select a maximum number of states each cell can have.
3. Select a threshold value.
4. Fill the cells with random state values between 0 and (maximum states-1).
5. At each step of the simulation every cell follows these rules;
a) Count how many neighbouring cells (Moore or Von Neumann neighborhoods) surrond the cell with a value of the current cell’s state + 1
b) If the count is greater or equal to the threshold value then the cell state is incremented by 1
6. Repeat this process as long as you want to.

By following those steps you can get emergent behaviour of spirals and other patterns. Here are a few examples (click the title to watch it in HD format on YouTube);

The different rules (every 10 seconds) in the above video are;
313 (David Griffeath)=1/3/3/M
Amoeba (Jason Rampe)=3/10/2/N
Black vs White (Jason Rampe)=5/23/2/N
Black vs White 2 (Jason Rampe)=2/5/2/N
Boiling (Jason Rampe)=2/2/6/N
Bootstrap (David Griffeath)=2/11/3/M
CCA (David Griffeath)=1/1/14/N
Cubism (Jason Rampe)=2/5/3/N
Cyclic Spirals (David Griffeath)=3/5/8/M
Diamond Spirals (Jason Rampe)=1/1/15/N
Fossil Debris (David Griffeath)=2/9/4/M
Fuzz (Jason Rampe)=4/4/7/N
Lava Lamp (Jason Rampe)=3/15/3/M
Lava Lamp 2 (Jason Rampe)=2/10/3/M
Maps (Mirek Wojtowicz)=2/3/5/N
Perfect Spirals (David Griffeath)=1/3/4/M
Stripes (Mirek Wojtowicz)=3/4/5/N
Turbulent Phase (David Griffeath)=2/5/8/M
The 2/5/8/M refers to Range/Threshold/States/Neighborhood.

The same principle works in 3D too. You just need to expand the neighborhood checks to cover 3D space.

2D and 3D CCA are now included in the latest version of Visions Of Chaos.


Fractal Planets

After reading this page from Paul Bourke I had a go at creating fractal planets by one of the methods he mentions;

1. Take a sphere of points (best to use a geodesic sphere so the points are evenly spread over the surface of the sphere).

2. Cut the sphere in half with a plane that goes through the origin. See the section on Great Circles here.

Great Circle

3. All points on one side of the plane are moved outwards and all points on the other are moved in.

4. Repeat this process a few hundred times and you get a fractal planet.

5 steps
fractal planet

50 steps
fractal planet

100 steps
fractal planet

250 steps
fractal planet

500 steps
fractal planet

And here is a movie of the creation process.

Fractal planets are now included in the latest version of Visions Of Chaos.


Karl Sims

If you are a nerd then you most likely have heard of Karl Sims. If you haven’t heard of him give his page a browse as there is some good stuff there.

I have admired and respected him since his work in Genetic Images back in 1993 that inspired all three of my attempts at Genetic Art so far. I still have a few more ideas on new Genetic Art methods to experiment with and share when I get some spare time.

I noticed his latest work as I was browsing Reaction Diffusion videos on YouTube. Yes, if you know what to look for there are videos on YouTube better than this one that was featured on their homepage and has millions of hits so far. I must be getting old(er)… “What is wrong with kids these days”!?

Check these two RD samples Karl put up on YouTube.

The most impressive aspect of those is the shading that gives them the 3D look. (Aussies can confirm the almost exact reflectance of the second example to Vegemite). Remember that the output of these Reaction Diffusion equations is strictly 2D. The bulging 3D look is based on calculating the slope between neighbouring pixels. Or at least that is how I do it in Visions Of Chaos, but Karl’s versions seem so much more 3Dish than mine. See his images here that are awesome.

As always he inspires me (and I am sure many others) to do better.


GLSL support added to Visions Of Chaos

What is GLSL?

The OpenGL Shading Language (or GLSL) allows you to write programs that run on the GPU rather than the CPU. GPUs these days can have thousands of “cores” so code running on the GPU can be magnitudes faster than running on the CPU. Fractal images are ideal for GLSL because in most fractals each pixel can be calculated independantly of the others so it is ideal for running in parallel.

For example the following pic is a raytraced example of five touching reflective spheres. The CPU version of this code took minutes to render. The GPU shader code takes 65 milliseconds on a not so super Nvidia card.

GLSL Wada Basins

GLSL in Visions Of Chaos

After having been on my to do list for years, I have finally gotten around to adding GLSL support into Visions Of Chaos.


The main delay in releasing this new version was converting all the Mandelbulb mode related functions into the GLSL language. Not too difficult, but very tedious. The speed increase for the Mandelbulb mode is amazing.

The output quality is mostly identical to the non-GLSL software mode rendering, so all your existing sample Mandelbulb files will usually continue to load and display as normal. GLSL supports single precision floating point numbers so deep zooms into the bulb will be less defined, but for the majority of renders you won’t notice a difference.

For example, here is a relatively deep zoom into a Mandelbulb using the CPU double precision


and here is the same with single point GPU/GLSL single precision


Single precision GLSL has the approximate floating point limit/resolution of 0.000001 which Visions Of Chaos now clamps the epsilon value to if it ever gets beyond it and you are using the GLSL calculations. No doubt NVidia and ATI will get the double precision working in future models, but for the time being if you want to do deep zooms into Mandelbulbs and related fractals you will hit the precision wall.


I will be converting more of the slower modes over to GLSL in the future. Mandelbulbs had to be first as that was the most complex and hence slowest mode in Visions Of Chaos.


These are some speed increase results after testing the new Mandelbulb shader code on some different PCs (ranked from worse to best);

NVidia Geforce 9500 GT – 7 to 17 times faster.

NVidia Geforce 8500 GT – 15 to 25 times faster.

NVidia Geforce 8800 GT – 102 to 154 times faster.

NVidia Geforce GTX 570 – 140 to 230 times faster.

Make sure you have the latest drivers for your video card. Updating to the latest version can help improve perfomance.


I also included a bunch of sample shaders from the GLSL Sandbox to show off what these rather simple shaders can do on a decent (or even not so decent) graphics card.


On a side note I have the above image printed out and stuck on the wall at work in my office as it is one of my more favourite and iconic Mandelbulb images. It freaked this one guy out. “Doesn’t that give you the creeps that picture?!”. I tried to explain what it actually was but all he could relate it to was Alien. “Well it is actually based on a relatively simple mathematical formula that makes all those complex self similar patterns”. His eyes glazed over before I dared mention complex numbers and their three dimensional triplex variants. “Nah man, too bizarre for me!”.