A dev group within the empire of my current employer likes to pose coding challenges from time to time. The most recent one was to produce a cellular automaton of some kind, akin to Conway's Game of Life. Initially, I wasn't personally that inspired by the challenge, but after thinking that I could incorperate procedural audioscape generation in some way, I was itching to make something cool. The app is designed around the notion that each microbe on the game board is of the kind fire, earth, metal, water, or wood - the Wuxing elements that appear in some ancient Chinese Philosophy. Each microbe, or "phagocyte" as I've termed them, can eat one other kind, but is, in turn, eaten by one other kind. For example, fire defeats metal, but is itself defeated by water. Each time a microbe is eaten, a musical note plays, creating a cadence. The substrate on which microbes move is based around a three-dimensional hexmap. I decided that this was preferable to the more conventional 2D grid, as with hexagons, unlike squares, the distance between one cell, and all those that immediately surround it, is always the same. This creates a more natural feeling of movement. (But it did, however increase the complexity of the math several times over). Predominant technologies featuring in this app are React for the UI, the HTML5 canvas for the stage, and for the audio effects, the Web Audio API, and the TinySynth voice library.
For clarity: Please understand that this is a dev-jam experiment made quickly for fun and not a refined commercial project. It does not feature:
- Legacy browser support
- Support for assistive technologies such as screen readers
- A mobile user-interface
- Search engine optimisation
- Performance optimisation
- Touch screen optimisation
- Session-based input state memoization
- etc etc...