Iteracy: An attempt to read, write and build code in Zajal

As part of the development of the notion of 'iteracy' I have attempted to rewrite and therefore create a code version of a previous text post on Blogger using the new language Zajal created by Ramsey Nasser (which apparently lets you code like a poet :-). I chose Zajal mainly because it is simple to install, has a really nice iterative structure (which follows from the focus on iteracy) and also it has excellent graphics capacities. This is nice for teaching as it allows students to get instant feedback on their work, but also to produce visually interesting and sophisticated programmes once they have learned the basics. This makes Zajal very good for live coding and real-time visuals.

The aim of the code listed below is to allow the code to be read fairly easily, but also for it to have the dual function of (1) highlighting the practice of reading code as an approach in the humanities and social sciences, but also (2) to run as code which can then be edited, deconstructed, hacked and remediated to understand what the code does and how it works.

Zajal is great because it operates like an interpretative language, and therefore avoiding the code-build-run process that can be off-putting to beginners. This means that when the file is edited and saved, Zajal automatically picks up the changes and displays them in its window giving immediate feedback on the code. This encourages creativity and experimentation, but also makes coding fun and exploratory. Lastly, the language is built on Ruby which seems to make hackers and programmers who know about such things super happy :-)

Code Basics

The code below essentially runs in two main loops (provided by Zajal) the draw loop and the mouse_down loop. The draw loop is called every time the display window is refreshed and the mouse_down event is called, not unsurprisingly only when the user presses the mouse button. The draw loop then keeps the screen updated, painting the background image made up of circles, but also printing the text and the current 'answer' to the question. The mouse_pressed event merely iterates through each of the answers by matching the subtitle with the description arrays defined at the very beginning of the code.

Useful links: 

The running code recorded and uploaded to Youtube (music overdubbed in Youtube)

The 'Iteracy' Code in Zajal 

Also the raw file is available here

Mark Marino iterated the code and a here is link to the pretty code on GitHub. He writes:
So here's my re-iteration of your code argument in which I've mangled things a bit by chopping your definitions up and then randomizing the assemblage of the definition. Additionally, I set it up so the definition expands as it goes to re-inforce this notion of iteration (not that iteration necessitates expansion -- and idea your circles and loops re-inforce perhaps better) (Marino 2012, private forum).

Naturally I felt I had to re-iterate Mark's iteration, now called 'Iterated'. Most noticeably I've improved the typefaces by using proper truetype fonts (Impact and Georgia) and played around with their position and look. This makes it a lot more readable - especially when uploaded to youtube. I've also placed some nice text in the bottom of the screen.

CODE SYNOPSIS: This is the beginning of starting to develop a depth model in the code. In the first iteration the screen and the code where pretty identical in functioning (i.e. the code printed the text as is, with minimal formatting and hence was relatively easy to follow). However, in this latest version we are now controlling the screenic representation of the underlying text - in effect we are now "painting" onto the screen. This means that there is now two versions of the text: (1) in the source code, and (2) on the screen. We could use Aarseth's notion of texton (source code text) and scripton (screenic text) to help us clarify this distinction. This is the beginning of developing a model-viewer notion of the code (see Model/view/controller (MVC) ) where we build an underlying data model, and then use the viewer to paint the image on the screen (the controller is the mouse_pressed loop). Of course, I am simplifying here, and the code remains rudimentary, but I think this would be the natural direction of travel. Gist code here

This code was written as a contribution to the Critical Code Studies Workgroup 2012 organised by Mark C. Marino.