1. 6
    Cyclic cellular automaton ☶ show graphics javascript carefully.understood.systems
    0x2ba22e11 avatar authored by 0x2ba22e11 1 year ago | cached | no comments

This is a 2D cellular automaton with an update rule that makes it cycle. It’s seeded with random noise. Try turning the number of states up to 20 or more, making it really big and ticking the “Go fast?” box.

This is written using WebGL with the CCA update step calculated in a fragment shader. There are a pair of textures (at least as large as the canvas) that are alternated between, reading from one and writing to the other each frame, then swapping them.

The concept of a CCA is documented on Wikipedia. As far as I can remember, I was first introduced to the idea by someone on nightstar.net about ten-ish years ago. :)

This should work on most desktop GPUs. I wrote it on an Intel HD4600 GPU and got at least one person to try it with a GeForce and a Radeon card. It seems to work okay on my Android phone, too. :)

It’s working for me in Firefox and Chrome. It probably won’t work in MS Edge yet because they still haven’t marked their webgl implementation as being production-ready, as far as I know. I’d be slightly interested to hear if it works in other browsers like Safari and friends.

Currently open questions:

  • there doesn’t seem to be any way to render to a LUMINANCE texture in WebGL? It feels wasteful to render to and read from an entire 4-byte-per-pixel RGBA texture for the feedback loop!
  • there doesn’t seem to be any way to get integers out of a texture in WebGL 1.0 instead of vec4s which are vectors of 4 floating point numbers in, I think, the range [0, 1).
  • there seems to also be no GL_TEXTURE_RECTANGLE in WebGL, which would’ve made indexing easier instead of having to calculate dsdt and stuff.

Currently known imperfections:

  • I’d like to, at some point, work out why I have to multiply by states + 1.0 instead of by states in the quantize() function. I’m almost certain I’ve got that maths wrong.
  • I think there a couple more lurking numerical bugs which I kinda papered over.
  • global variables and aargh. I didn’t bother implementing recovery for WebGL context loss. If that happens to you, refresh the page. :)
  • the colours chosen for the output could probably do with being either more garish or less garish, I’m not sure which.

  1.