While thinking and reading about flocking algorithms and cellular automata, I had the idea of mixing the two algorithms together. I came up with a cellular automaton which generates colorful tapestries which seem to endlessly evolve while avoiding any repetitive behavior. Click here or on the screenshot below to watch the automaton. It begins with randomly colored cells; be sure to wait a little while for it to settle into an evolving color display. Then read my comments below for a description of what is going on.
Download
the complete code can be downloaded here: Cellular01.zip
About the code
A typical cellular automaton consists of a grid of cells which continually change their state based upon the current states of their surrounding neighbors. A “state” may refer to a color, which may simply be black or white, as in Conway’s Game of Life. Here I allow the current RGB color of a cell to be affected by the status of the neighboring cells.
This idea (which may not be original) comes from a confusing insertion of the ideas of a flocking algorithm into a cellular automaton. The well-known boids algorithm models a flock of birds, and is described by three principles:
- separation: steer to avoid crowding local flockmates.
- alignment: steer towards the average heading of local flockmates.
- cohesion: steer to move toward the average position of local flockmates.
Since colors can be described with three parameters — red, green, and blue — changing colors can be thought of as motion in a 3D space. The “flying direction” of a bird corresponds to the (3D) rate of change of color. The cellular automaton I created is based upon the flocking algorithm, but by purposely confusing the idea of “local flockmate” to mean “neighboring cell” rather than all other entities with nearby colors.
So the automaton here is described with the following principles:
- separation: if a cell’s color is too close to that of one of its neighbors, move away from that color.
- alignment: adjust the rate of change of a cell’s color towards the average rate of change of its neighbors.
- cohesion: move the color of a cell towards the average color of its neighbors.
The total rate of change of a cell is based on summing the rates of change described by these three effects. Note that the separation and cohesion effects work against each other, but they are computed in slightly different ways (The separation vector is normalized to a constant magnitude; I’ll let you examine the code for the details). What makes this cellular automaton a little different from something like Conway’s Game of Life is that it considers not only the states of neighboring cells, but also the rate of change of the states of neighboring cells.
The end result has each cell wanting to be of a color similar to its neighbors, but not too close, while also trying to change color in the same direction as its neighbors. (I’ll leave you to create your own social metaphor.)
One note about neighbors: in a rectangular grid such as this one, each cell in the interior has eight neighbors (upper-left, upper, upper-right, etc.) but I chose to simplify the algorithm by only considering the four neighbors above, below, left and right. I also played around with the eight-neighbor setup, but the results will have to wait for another posting another day. Also note that some cells on the edge have fewer than four neighbors (I didn’t implement wrapping).
One more note: attempting to optimize this code for greater speed, I avoided the use of arrays. So the cells are contained in a linked list, and each cell keeps track of its neighbors with a linked list. (For an excellent introduction to linked lists, see this tutorial by Michael Baczynski).
I hope you enjoy the effect. I find it kind of pleasant to watch, especially while standing back from the monitor a few feet. Maybe it could be modified to become an evolving backdrop for a webpage? Have fun experimenting with the code. The effect is pretty sensitive; you’ll find that small changes in the code can have big effects on the emergent behavior.
This is brilliant! What a beautiful effect. I just discovered your site by accident
a few minutes ago, and I’m completely intrigued. Thanks so much for sharing
the source code; I’m sure I’ll learn a lot by studying what you’ve done.
Great work!
Bill
August 21, 2012 @ 6:46 pm
|Thanks, Bill! Glad you enjoyed this.
August 29, 2012 @ 5:29 am
|An interesting contrasting effect to the gently
shifting colors can be had by replacing briefly
at random intervals the code in the section,
“bounce colors off of color cube boundaries” :
if (cell.bufferR < 0) {
cell.bufferR = 0;
cell.bufferRVel *= -1;
}
else if (cell.bufferR > 255) {
cell.bufferR = 255;
cell.bufferRVel *= -1;
}
with one of two options, either :
if (cell.bufferR < 0) {
cell.bufferR += 255;
cell.bufferRVel += 255;
}
else if (cell.bufferR > 255) {
cell.bufferR -= 255;
cell.bufferRVel -= 255;
}
or
if (cell.bufferR < 0) {
cell.bufferR = -cell.bufferR;
cell.bufferRVel += 255;
}
else if (cell.bufferR > 255) {
cell.bufferR = 511 – cell.bufferR;
cell.bufferRVel -= 255;
}
for all three rgb values.
Bill
September 13, 2012 @ 9:30 am
|I’m eager to try this out when I get a moment…glad you’re having fun with the code! Thanks for your note.
Dan
September 13, 2012 @ 10:00 am
|This is so very cool. Cellular automata always amaze me.
In WebGL / GLSL with a slight gaussian blur that would be just perfect !
November 20, 2012 @ 1:46 am
|Glad you like it! As for WebGL…still haven’t started playing with that yet. Guess I should get started?
November 20, 2012 @ 2:10 am
|(Correction)
hey this is awesome!!, can you giveme advice in how to optimize a regular 2 states cellular automata with a 500×500 grid using javascript(html5,canvas)? my actual code is to slow, am using a 2dimensional array with the info of each cells(a cell object) in each of its indexes and aparently is to slow and I want it to look as smooth as yours
cheers
Your comment is awaiting moderation
January 4, 2013 @ 2:24 am
|I’m on my mobile device right now so it is hard to check the code…I forget how I did it. But generally speaking, using linked lists is a lot faster than arrays. You might look into that. I’ll have to check my code sometime to recall how I did this.
January 4, 2013 @ 2:28 am
|Ah yes…I wrote in the post that I was using linked lists. Check out the link referenced in the post for a good introduction to linked lists.
January 4, 2013 @ 2:31 am
|Hiya Dan was wondering if you could help me Im after a version of your cellular automation but with a smoother effect. Exactly the same as yours but with no visible square pixellation. Is this something that can be achieved? Apperciate your help- Many thanks Tom
February 25, 2013 @ 1:12 pm
|Hmm…well, this is pixelated because of how it is computed as a cellular automaton. In theory you could make the cells as small as a pixel, but this will definitely be way too heavy on the CPU! Instead, I wonder if there is a way to compute the colors in these blocks, and then find a way to smoothly map them, such as by using a blur. But that will be heavy on the CPU also. I think another method would have to be found.
March 1, 2013 @ 3:06 am
|I wrote something like this many years ago, but I don’t recall in what language. I’ve had some interesting success blending this with Conway’s Game of Life, in an evolving universe.
April 18, 2014 @ 7:56 am
|I stole the code… And modified it to work full screen… Even cooler!
July 11, 2014 @ 7:34 pm
|Glad you’re having fun with it!
July 16, 2014 @ 2:09 pm
|really really cool
September 26, 2015 @ 7:42 am
|Thanks!
January 10, 2016 @ 3:24 pm
|Hi Dan, amazing work, well done.
I planned to do something similar with colors fading one to another in CAD parametric plugin grasshopper, with the cellular automata (Rabbit), but than when while working on it and searching for resources I found your beautiful work here.
May I kindly ask you for your help?
I would like to save/record the output of the animation of the matrix 24×24 pixels in to the textual document with RGB 24bit values for each pixel in the matrix, frame by frame.
Stored data would be used later or straight forward (from raspberry Pi) as library for adressable WS2412b LED’s display lighting I’m working on for an design exhibition.
I would mention your help on this project for sure. If interested, contact me please. I can offer you some kind of revenge for your help. 🙂 Jakub
August 29, 2016 @ 4:44 pm
|Hi Jakub!
I’m sorry I didn’t respond to this until now! I haven’t been very good with blog upkeep lately.
I’m very glad you like the automaton and hope you got some useful ideas from it. I’m afraid I don’t know the answers to your questions, but since you posted this so long ago maybe you’ve already answered them yourself. I’d love to see what you do with LEDs and automata. Sounds like a great project. If you want to share ideas, feel free to email!
October 4, 2016 @ 4:26 am
|Hey there, I’m using this effect as part of the background on my new personal site at https://webrender.github.io/ – I’ve included a link to this page in the source. I chose to adjust the initial colors to be very close to black, so that the effect appears to spawn out of darkness. Thanks for the awesome code!
November 17, 2017 @ 5:43 pm
|Thank you for this inspiring work!
I’ve taken your algorithm and re-implemented it with web assembly so it can run at a higher resolution. Please check it out on Github:
http://github.com/cimi/color-automata
Cheers!
Alex
January 8, 2018 @ 3:28 pm
|WOAH!!! That’s amazing! I guess I need to learn how to do that.
March 19, 2018 @ 10:56 pm
|Made a modified version of it where you can draw on the grid with colors.
https://www.physicsforums.com/threads/wavegrid-non-equilibrium-emergence-sandbox.937691/
January 22, 2018 @ 2:57 pm
|Very beautiful, I love all your example! I’m just a little sad the code is kinda inaccessible in those to-be-downloaded zip files
Anyway, all the best from Cusco, Perú
Can
May 11, 2022 @ 7:24 am
|Very sorry to remove. May add again some day.
March 13, 2023 @ 1:57 am
|