Another New Old Project: Cellular Automata

[CLICK HERE to see the 2d Cellular Automata project in the Labs]

Being over twenty years into my career, and having a little downtime, coupled with the back-to-school energy of September, I have been having the time of my life revisiting old visual and math experiments from the early 2000s. This is one of my favorite – a tool/toy for visualizing 2D cellular automata as described by Stephen Wolfram in his book A New Kind of Science.

I first created this tool in Macromedia Flash back in January of 2003. This was about the time that Actionscript became a useable development language, and it was close enough to Javascript syntax that it was easy to pick up. This was fortunate, as my career for the next seven years depended entirely on my Actionscript programming skills. Then I took a sharp left turn into Drupal, about which the less said, the better.

The patterns are created by iterating through an array of ones and zeroes, and choosing the pattern of the next line by applying simple rules to the cells of the previous iteration. As with the earlier Javascript projects, you can save interesting patterns as a .png by right-clicking on the canvas.

I put this together in my spare moments on You can see the pen with fully-editable code here.

Another New Old Project: Langton’s Ant

Click here to see Langton’s Ant in the Labs.

I probably could have posted this project before the 3D version, but the 3D version was already done in Javascript, and besides: 3D is just cool!

The above screenshot is taken at just over 10,000 iterations into the animation. Langton’s Ant will, if undisturbed, create a “highway” which will proceed off into infinity unless the world it is crawling wraps at the edges, as this one does.

If you have seen one Langton’s Ant animation you have probably seen them all, though in this one I added a heat map which shows the number of times the Ant has visited each cell. It will take a while to begin to see different colors, and everything will look blue for quite some time. The above screenshot of the heat map was taken at approximately 100,000 iterations.

As with all of my experiments, all of the code is contained in a single page for easy download and modification. I did not use any external libraries and I commented the Javascript for ease of reading and interpretation. Enjoy!

A Blast From the Past: Langton’s Ant in 3D

Langton's Ants in 3D

This is an update to a post from March 2, 2012.

From 2002 to around 2012 I devoted most of my creative energy to programming. I created well over a hundred visual toys and simple games, and kept the momentum going until a series of life events sucked the mental and emotional energy from me. When I got my life back I turned my creative energies to writing fiction and poetry, and my decade-plus of experiments in mathematics, geometry, cellular automata and game design fell by the wayside.  Most of those experiments were in Flash and though I still have the source code rebuilding them in Javascript would be an extremely time-consuming project.

But some of those experiments were in Javascript, particularly after I saw the writing on the wall for Flash and Actiosncript. This is one of those experiments – a 3D version of the Langton’s Ant cellular automation, created using hand-rolled Javascript, with an assist from the Three.js 3D rendering library.

Click here to access the Langton’s Ants in 3D experiment. Once there, you can right-click on the animation and select “save image as…” to take a screenshot of the Ant trail.

The original post from March 2, 2012, with code breakdown and explanation is here.

Here are a couple more screenshots from later iterations of the algorithm:

Langton's Ants in 3D

Langton's Ants in 3D

Perlin Ants In Color

Perlin ants in color

Click here to launch the ants.

Click the left button to reset the terrain which the ants follow.
Click the right button to show and hide the terrain.

1800 ants in a full-color version of yesterday’s experiment. Instead of looking for dark/light pixels, the ants look at the different color channels of the pixel they land on – red, green and blue. Then the ants follow the same pattern as yesterday – dark pixels turn left, light pixels turn right – based on the intensity of the target color.

Yup. I like how this one turned out, too.

Perlin Ants

Perlin Ants with visible terrain

Click here to launch the ants.

Click the left square to generate a new terrain map.
Click the right square to show and hide the terrain map.

This is kind of a mash-up between bits and pieces of some previous experiments – the terrain from the tile-based game, and the ants from the Langton’s Ants experiments.

Basically, what is happening here is this: A thousand “ants” are created and placed in random locations on the screen, facing in random directions. Each turn, each ant moves forward one pixel. If the color of the new pixel is lighter than the previous pixel, it turns a bit widdershins. If the new pixel is darker, it turns a bit clockwise.

The ants end up tracing something like contour lines, and seem to be “attracted” to sections where the color of the terrain varies significantly over a small area.

I threw in a bit of a blur to make things more interesting visually.


Langton’s Ant 3D, Version 2

Langton's Ant in 3D

Another Langton’s Ant 3D experiment. Click here to run the experiment.

I finally got the ruleset sorted out, and now I have a simple 3d version of Langton’s Ant up and running. This is how it works:

Remember the behavior of Langton’s Ant:
1. If the ant is on an empty cell, color it in and move according to the next rule in the set.
2. If the ant is on a filled cell, empty the cell and move according to the previous rule in the set.
3. Do not talk about fight club.

The space in which the Ant is moving is a 50x50x50 (125,000) grid of cells.

There are eight rules which the ant follows, which – if none of the cells are colored in yet – the ant will follow in sequence:

1. Z–
2. X++
3. Y++
4. X–
5. Z++
6. X++
7. Y–
8. X–

In non-computerese, when the applet first runs, the ant will travel in, right, down, left, out, right, up, left, and in doing so fill in eight cells which make up a 2x2x2 cube.



With the next step the ant begins to encounter filled cells, which mean it takes a step back in the ruleset, and perhaps another, and eventually start to travel to new cells.

It is important, in order for the ant to make the desired patterns, that the sequence of movements in the ruleset visit each cell in a cube of cells exactly once, with the next iteration through the ruleset returning the ant to the original cell. Also, no diagonal movement; only cell face to cell face. I am not sure if this can be accomplished with more than a 2x2x2 cube.

In this demo the cells are colored in according to the “depth”, or the Z value of the cell-s position. Cells farther in the “back” are blue, and cells closer to the “front” are red. All layers (Z) are faded back except for the layer in which the Ant is currently moving. This is why there appears to be a “screen” of cells which moves back and forth and changes colors constantly.

Also in this demo, the pattern created appears to trend to the lower right corner of the screen because each of the layers, back to front, has been offset one cell to the right and one cell down, to provide a sort of isometric view of the pattern.

More experiments along these lines to come, after my brain cools down a bit.

Langton’s Ant 3D, Version 1

Langton's Ant in 3D space

Click here to see the ant in new amazing 3D action.

My first attempt at moving Langton’s Ant into a 3D grid. The 3D part was easy – just add some Z movement to the existing X and Y pattern.

This is what you are looking at: there are 100 cells in the X (left and right) and Y (up and down) plane, and 25 in the Z (toward and away from the viewer) plane. There is one bitmap for each Z level, making for 25 stacked bitmaps. The bitmap in which the ant is currently moving is set at 100% opacity, with the surrounding bitmaps becoming increasingly opaque until they are almost transparent. When the experiment seems to flicker, it is because the ant is rapidly switching between Z levels. Those long horizontal “roads” the ant makes are probably more like tubes when viewed in 3D space.

Making the ant move in an interesting pattern is a little more difficult. In 2D (X,Y) space, from each point the ant can either turn left or right, and move forward one space, depending on the state of the cell to which the ant moves. That means, using initial conditions, the ant will move in a perfect square: up 1, left 1, down 1, right 1, and end up back at the original square. In order for me to make that work in 3D space, the ant must visit each of eight cells, forming a cube, and return to the original cell without doubling back on itself. The current experiment does not do that, thus the long horizontal runs.

Right now there are 18 rules for the ant’s movements. Each of these rules is iterated through, based on the color of the cell on which the ant lands. Landing on an “off” cell causes the ant to move according to the next rule. Landing on an “on” cell causes the ant to move according to the previous rule. If I implement multiple “on” colors, then I can cut the movement rules down to 6, but I will need to have each rule account for the color of the cell in which the ant currently resides.

Look for more iterations on this problem in days to come.

Langton’s Ant – Hex pattern

Langton's Ant - 6

Click here to see it running.

Mostly similar to the previous Langton’s Ant experiment, this one uses a hexagon-ish algorithm instead of a quad. Because I am using square pixels to draw the results, it isn’t precisely a hexagon, but it is close enough to get the point across. Actually, the “ant” view is quite a bit more interesting than the heatmap view.

Click the Flash movie to toggle between the views.

Langton’s Ant with Heat Map

Langton's Ant Heat Map

Click here to see it in action.

This is an update to the previous Langton’s Ant experiment. For this one I have added a heat map which shows the frequency with which the “ant” visits each cell in this grid. The more visits to a cell, the “hotter” the color. Click the application to toggle between the ant view and the heat map view.

I am really enjoying playing around with this thing. I have “hex” and “oct” variations (the above is a “quad”) waiting in the wings, and am exploring what it will take to make a 3d version, which hopefully I will have done this weekend.

Langton’s Ant, Reboot

Langton's Ant

Click here to run the ants.

Another Cellular Automaton experiment. The rules for this one work as follows:
0. Place an ant on a grid.
1. check the color of the square the ant is on.
2a. If the square is red, turn it black and turn to the left.
2b. If the square is black, turn it red and turn to the right.
3. Move forward one square and repeat.

No interaction here; it will do the same thing every time you visit.

If you are patient, some interesting things begin to happen around iteration 10,000.