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: 

• Zajal including the download for the language
• Sample programs from Zajal sketches
• Text editor: Smultron or Textmate
• Original text page: Iteracy

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


The 'Iteracy' Code in Zajal 


Also the raw file is available here

	# ----------------------------------------------
	# CRITICAL CODE STUDIES: WEEK 2 LITERACIES
	#
	# David M. Berry Feb 2012
	#
	# Based on the webpage: http://stunlaw.blogspot.com/2011/09/iteracy-reading-writing-and-running.html
	#
	# ITERACY.RB
	# Programmed in Zajal - http://zajal.cc/
	# Many thanks to Ramsey Nasser
	#
	# ----------------------------------------------
	# ----------------------------------------------
	# This bit defines and fills the arrays used below
	# ----------------------------------------------
	iteracy = ["1. Computational Thinking", "2. Algorithms", "3. Reading and Writing Code", "4. Learning programming languages", "5. Aesthetics of Code", "6. Data and Models"]
	idesc = ["Being able to devise and understand the way in which /ncomputational systems work to be able to read /nand write the code associated with them. For /nexample abstraction, pipelining, hashing, sorting, etc. ", "Understanding the specifically algorithmic nature /nof computational work, e.g. recessions, iteration, /ndiscretisation, etc.", "Practices in reading/writing code require new skills to /nenable the reader/programmer to make sense of and develop /ncode in terms of modularity, data, encapsulation, naming, /ncommentary, loops, recursion, etc.", "Understanding one or more concrete programming languages /nto enable the student to develop a comparative dimension /nto hone skills of iteracy, e.g. procedural, functional, /nobject-oriented, etc.","Developing skills related to appreciating the aesthetic /ndimension of code, here I am thinking of 'beautiful code' /nand 'elegance' as key concepts.","Understanding the significance and importance of data, /ninformation and knowledge and their relationships to /nmodels in computational thinking (abstract machines, etc.)."]
	# ----------------------------------------------
	# This bit initalises the global variables used
	# ----------------------------------------------
	x2, y2 = 250, 250
	current = ""
	description = " "
	counter = 0
	xx = 10
	yy = 150
	startcounter = 0
	setup do
	# ----------------------------------------------
	# This bit initialises all the variables used
	# ----------------------------------------------
	current = iteracy [counter]
	description = idesc [counter]
	counter = counter +1
	size 500
	title "ITERACY"
	background 0
	fill false
	alpha_blending true
	smoothing true
	circle_resolution 64
	end
	draw do #main loop
	# ----------------------------------------------
	# This bit asks the question
	# ----------------------------------------------
	color :green
	text " ------------ CODE LITERACY QUESTION --------------"
	text ""
	text " @MARKCMARINO: Who has a good alternative to 'literacy' "
	text " when it comes to programming or reading code? "
	text "" #add a space
	color :yellow
	text " @BERRYDM: 'ITERACY' based on the notion of iteration."
	text " Iteration deals with looping through a "
	text " collection (like an array) using loops."
	text "" #add a space
	text " --------- click mouse for more details -----------"
	# ----------------------------------------------
	# This bit answers the question from the array above
	# ----------------------------------------------
	color :white
	text current, xx, yy
	textarray = description.split("/n") #break the description into lines based on '/n'
	for startcounter in (0..textarray.count) # iteration (loop) to print paragraph description
	text textarray[startcounter], xx, yy+30+(startcounter*13)
	end
	# ----------------------------------------------
	# This bit draws the funky iterative background
	# ----------------------------------------------
	alpha = 0..200 #define variable alpha
	radius = 100..500 #define variable radius
	depth = 40 #define variable depth
	depth.times do |n|
	t = n/depth.to_f
	color 255, alpha * t #define colour and shades
	circle x2, y2 + sin(time * 0.001 + n * 0.25) * 30, radius * t**2 #draw circles
	end
	end
	mouse_down do |x, y, btn| #mouse press loop
	# ----------------------------------------------
	# This bit iterates through the answers from the array above
	# ----------------------------------------------
	current = iteracy [counter]
	description = idesc [counter]
	counter = counter +1
	if counter > iteracy.count-1
	counter = 0
	end
	xx = 10
	yy = yy + 50 # Increase the y coordinate
	if yy>400 # Test to see if yy too large if so...
	yy = 150 # Reset the y coordinate value
	end
	startcounter = 0 # reset the startcounter
	end

view raw iteracy.rb hosted with ❤ by GitHub

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.

---