//

Chaos Code

I recently watched a presentation in which the presenter had an environment that let him see changes in code immediately and visually whilst editing. The source code wasn't released, and figuring it would be a nice experiment, I've made a simple live code editor to see the consequences it would have on coding.

Looking for a visual example program, I came across a piece of code from a while back that generated a chaos fern. Here it is in realtime in javascript.

<iframe src = "http://peterbraden.github.com/sandbox.html#Ly8yIGNvbG9yIGZlcm4KCihmdW5jdGlvbigpewp2YXIgeCA9IE1hdGgucmFuZG9tKCkKICAgLCB5ID0gTWF0aC5yYW5kb20oKQoKc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKXsKICB2YXIgcmFuZCA9IE1hdGgucmFuZG9tKCkKICB2YXIgbmV3eCwgbmV3eQoKICBpZiAocmFuZCA8IDAuMDEpewogICAgbmV3eCA9IDAsIG5ld3kgPSAwLjE2ICogeQogIH0gZWxzZSBpZiAocmFuZCA8IDAuODYpIHsKICAgIG5ld3ggPSAoMC44NSAqIHgpICsgKDAuMDQgKiB5KQogICAgbmV3eSA9ICgtMC4wNCAqIHgpICsgKDAuODUgKiB5KSArIDEuNgogIH0gZWxzZSBpZiAocmFuZCA8IDAuOTMpewogICAgbmV3eCA9ICgwLjIgKiB4KSAtICgwLjI2ICogeSkKICAgIG5ld3kgPSAoMC4yMyAqIHgpICsgKDAuMjIgKiB5KSArIDEuNgogIH0gZWxzZSB7CiAgICBuZXd4ID0gKC0wLjE1ICogeCkgKyAoMC4yOCAqIHkpCiAgICBuZXd5ID0gKDAuMjYgKiB4KSArICgwLjI0ICogeSkgKyAwLjQ0CiAgfQogIHggPSBuZXd4CiAgeSA9IG5ld3kKICBjdHguZmlsbFN0eWxlID0iIzBmMCIKICBjdHguZmlsbFJlY3Qod2lkdGgvMiArIHgqd2lkdGgvMTAseSpoZWlnaHQvMTIsMSwxKTsKfSwgMSkKfSkoKTsKCihmdW5jdGlvbigpewp2YXIgeCA9IE1hdGgucmFuZG9tKCkKICAgLCB5ID0gTWF0aC5yYW5kb20oKQoKc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKXsKICB2YXIgcmFuZCA9IE1hdGgucmFuZG9tKCkKICB2YXIgbmV3eCwgbmV3eQoKICBpZiAocmFuZCA8IDAuMSl7CiAgICBuZXd4ID0gMCwgbmV3eSA9IDAuMTYgKiB5CiAgfSBlbHNlIGlmIChyYW5kIDwgMC44NikgewogICAgbmV3eCA9ICgwLjg1ICogeCkgKyAoMC4wNCAqIHkpCiAgICBuZXd5ID0gKC0wLjA0ICogeCkgKyAoMC44NSAqIHkpICsgMS42CiAgfSBlbHNlIGlmIChyYW5kIDwgMC45Myl7CiAgICBuZXd4ID0gKDAuMiAqIHgpIC0gKDAuMjYgKiB5KQogICAgbmV3eSA9ICgwLjIzICogeCkgKyAoMC4yMiAqIHkpICsgMS42CiAgfSBlbHNlIHsKICAgIG5ld3ggPSAoLTAuMTUgKiB4KSArICgwLjI4ICogeSkKICAgIG5ld3kgPSAoMC4yNiAqIHgpICsgKDAuMjQgKiB5KSArIDAuNAogIH0KICB4ID0gbmV3eAogIHkgPSBuZXd5CiAgY3R4LmZpbGxTdHlsZSA9IiNmMDAiCiAgY3R4LmZpbGxSZWN0KHdpZHRoLzIgKyB4KndpZHRoLzEwLHkqaGVpZ2h0LzEyLDEsMSk7Cn0sIDEpCn0pKCk=" width = "800" height = "500"

Note: You can edit these examples to play with the result

One of the things I noticed while porting it in a live editor is that the immediate feedback allows you to really play with the parameters. As you can see, I've actually set off two sequences, with slightly different parameters and different colors - this came as a direct consequence of me playing with the parameters and liking the results.

Playing with parameters that triggered subtle differences in code reminded me of the properties of strange attractors, and I thought that this would be another good example - here is the Gumowski-Mira attractor generating a creepy looking star.

<iframe src = "http://peterbraden.github.com/sandbox.html#dmFyIGYgPSBmdW5jdGlvbih4KXsKICAgIHJldHVybiBhICogeCArIDIuMCAqICgxLjAgLSBhKSAqIHggKiB4IC8gKDEuMCArIHggKiB4KQp9Cgp2YXIgaSA9IDAuNQosIGogPSAwLjg1OAosIGsgPSAwLjE3CiwgbCA9IDAuMwosIGN0ID0gMAosIHB4ID0gMAosIHB5ID0gMAoKdmFyIHhhID0gLTIwLjAKICAsIHhiID0gMjAuMAogICwgeWEgPSAtMjAuMAogICwgeWIgPSAyMC4wCgoKdmFyIGEgPSBpICogMS41IC0gMS4wCiAgLCBiID0gaiAqIDAuMSArIDAuOQogICwgeCA9IGsgKiAoeGIgLSB4YSkgKyB4YQogICwgeSA9IGwgKiAoeWIgLSB5YSkgKyB5YQoKCnNldEludGVydmFsKGZ1bmN0aW9uKCl7ICAKICAgIAogICAgdmFyIHhuZXcgPSBiICogeSArIGYoeCkKICAgIHkgPSAteCArIGYoeG5ldykKICAgIHggPSB4bmV3CiAgICB4aSA9ICh4IC0geGEpIC8gKHhiIC0geGEpICogd2lkdGgKICAgIHlpID0gKHkgLSB5YSkgLyAoeWIgLSB5YSkgKiB3aWR0aAoKICAgIGN0eC5iZWdpblBhdGgoKSAgCiAgICBjdHgubW92ZVRvKHB4LHB5KTsgCiAgICBjdHguc3Ryb2tlU3R5bGUgPSAiaHNsYSgiICsgY3QgJSAyNTYgKyIsIDUwJSwgNTAlLCAwLjEpIgogICAgY3R4LmxpbmVUbyh4aSx5aSkKICAgIGN0eC5zdHJva2UoKQogICAgY3R4LmNsb3NlUGF0aCgpCiAgICBweCA9IHhpCiAgICBweSA9IHlpCiAgICBjdCArPTAuMDEKfSwgMSk=" width = "800" height = "500"

Again - play with the code - particularly editing the values of i,j,k and l have big consequences in the outcome.

As I played with the result I realised that the immediate feedback loop makes this a great way to play with code, and that this would be a great way to teach coding.