Skip to content
Colourful cellular automaton implemented with WebAssembly.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

See the demo


This project was inspired by A Colorful Cellular Automaton in HTML5 Canvas. The original JavaScript implementation and the idea behind the algorithm were sourced from that blog post.

The project is also designed to be a proof of concept for efficiency gains when using WebAssembly (hence the alternate 'C++' implementation, see below).

The web assembly implementation allows for a higher resolution and higher frame rate (up to 10x) compared to the original JavaScript implementation. Disclaimer: I did not try to optimise the JS implementation, did not do any profiling etc.

Loading the demo page in your browser will yield a colourful tapestry. This is a form of generative art:

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.


I've extracted a minimal project setup based on create-react-app and emsdk module objects to make building this sort of stuff simpler:


I haven't written C since University, I've never written C++. Please forgive the atrocities. Code is reasonably efficient?!


You can’t perform that action at this time.