This is a personal blog, please observe Think Hour for ad hoc quasi-diary writings and Big Ideas for my ratified longform items. I will see you there.


Time Index Horizontal Vertical // aemkei

Amiga Ball

The man “Martin Kleppe” has created a creative coding environment. It has minimalist directive that it adheres to by possessing a square grid of just 256 dots, each accessible via direct index or by the row and column they belong to. The algorithmically-dictated positive or negative value, ceiled at magnitude 1, tell the dot what its “colour” is. The “colour” is more like size - the dots can only be red or white but will vary in size, therefore at zero a dot doesn’t exist or is blank - which allows the script typist to effect blank space or dithering-like optical effect. These variables with t-time are all you have to work with, and to top it all off there’s a 32 character soft limit, or philosophical mandate, to the script you ought to produce. I think I see Martin referring to it as “creative code golfing” because the idea is to try and get the code as low as possible, like trying to get down to par or better for lower score in golf.

Rotating Rod

Given the above, the scripts that are written to make things happen seem to often come out very mechanically mathematically pure, though Javascript hackery and logic can cleverly augment this. Either way, as is the case with any type/scale of creative endeavour, excellency in product and motivation/interest in production is easily boosted by imposing a box of freedom-culling limitation-faces to break out (or stay inside) of. Anyway, now that I’ve talked about it as if I at all know what I am talking about, I must refresh my mind with examples - there are plenty. Thanks to the (soft) character limit to the code, creations can be easily shared via custom URL of modest length. I think you can also squirt out an animated GIF.


The bouncy ball is one I have open. I have this open because I think it might be useful to refer to for an idea of my own which I will explore shortly. This is pretty nice, though if you pay attention for a few cycles you will note that there isn’t any variation in the ball’s long term path. Jacking a webcam into something or messing with webcam feed as a creative code avenue is as worn as anything at this point, nevertheless, someone, cruising past the soft limit but not for lack of minimizing, has gotten a webcam to output a quantized style feed onto the grid - Martin himself seems to be doing some “golfing” with the creator here, eventually they whittled the bytes down to 253 from an original 415. There’s some playing with 3D effects and parallax, for example this checkered floor by “mzarcus”, gloppy meta-balls can exist in excess of byte limit, there is a timer that makes use of .charCodeAt method and even replication of game of life.

So I spent some hours of time with this TIXY app. After enjoying modifying the templates and trying out various methods of javascript’s math object, which you can usefully call on in the app without prepending “Math” every time, I tried variously to construct some things and stumbled upon/discovered others (namely a variety of digital pottery). My own experimenting will now be discussed from this point.


My first endeavour was to try and replicated the classic DVD idle screen, where a logo bounces at the edges and changes colour. It would not be possible for even the most talented algorithm maker to fit this into 32 bytes (characters), so there is some immediate freedom to experiment and just get the job done instead of worrying about that. The end result is very imperfect, namely failing to change colour on vertical bounces, with jumpy static movement owing to what appears to be an inability to continuously translate the lettering, produced from binary, via the time function. I think this might be improved quite easily by subtracting the lettering from an encapsulating rectangle and having that move around instead.


Next we have something more simple. The pot discovered fittingly using hypot, which seems to usually be useful in this case for doing circle equation, and decorated by negative values (creating red dots) at specific location by using the contextually extravagant ternary operator. This is probably my favourite thing, and there are other, arguably superior, discoveries to make by getting into decimal values of the numbers which are however more difficult to decorate with reds within the byte limit.


The most impressive creations are in my opinion the ones that appear 3D, which can be effected via clever manipulation of the scale of the dots (make them smaller to make them appear distant) to create a horizon being tended toward or appearance of “layers or parallax. Trying to do this with poor mathematical skills took a while, with lots of random experimenting to get things looking correct. My end result down this avenue is kind of lame, I wanted to create a visualization of a road being travelled a long in first person, but you might struggle to see it if you weren’t aware. This could hopefully be improved by introducing “turns” in the road by some kind of exponential toward the designated horizon, that varies left to right occasionally. The improvement that seems to, while inevitably blasting past the bytes limit, provide some “movement” beyond some ambulating side to side is the red/white bars sliding down the y-axis, and while I managed to get this working in many characters, it would be better for the bars to expand the closer to y=16 they go.


I also tried creating a depthy sphere, a ball. Is it looking shadow-making? I will show the “Amiga” style version, which destroys the 32 byte limit - I have to keep up appearances in spite of this, people will think I’m good at computers if they see that one. These are roughly all I have of a “finished” nature, but it is a very addicting small app. You could also mess with colours, even just the background on CSS can give a dramatic new style. It’s very good, and I have a large list of equations to possibly build on now in a text file on my desktop of the computer that I use. I’ve wasted a lot of time with this now. I made a violent rabbit.