This essay presents a prototype programming environment based on reading and understanding programs, without any baggage from plain text languages.
This environment borrows from the medium of comics to unify creating and understanding programs, and was inspired in large part by Scott McCloud’s Understanding Comics.
The language works like a simplified version of Logo.** Logo was chosen because it has well understood semantics and has a history of educational usage, not because it’s a perfect programming environment. However, it is extensively documented in Seymour Papert’s must-read book Mindstorms. In Logo programs, you control a small graphical drawing character called the turtle by issuing it commands, like
forward 50 to move forward or
left 90 to turn 90 degrees. You can also “teach” the turtle new words, which act like functions in other languages, and you can give those function parameters, too. Logo code might look like:
to square :size repeat 4 [forward :size left 90] end
In text-based programming languages you can’t see what code does just by looking at it. If you want to know what it outputs, you have to run it, but even then, all you see is the final output. You don’t get to see what happened step by step, and usually you must play computer, imagine in your head what the computer does at each line of code.
Instead of Logo-like lines of plain text code, this environment uses a comic of panels showing each command, where each panel shows the output of the program up until now. To see what the program does at each instruction, you read it left to right, like a comic.
Each panel shows the output, but it also displays the instruction in a human-readable sentence. The sentence tells what the panel does, by how much, and in what direction. Instead of using robotic sounding code, the sentence is as natural sounding as possible (e.g., things are properly pluralized and articles aren’t omitted).
The sentence can be read and fully understood at a glance, but it can also be interacted with, letting the reader change values in the program by dragging on any underlined text. When a panel is interacted with, all panels in the program update immediately so the reader always sees the current program.
The instruction sentence also describes how a panel may be repeated:
When a panel is repeated, the reader can skim through the iterations by panning the mouse cursor left-to-right** A technique popularized by Apple’s iPhoto, progressively playing through the panel to the end, while the sentence provides additional context.
A group of comic panels is called a comic strip. If individual panels are like lines of code in a text-based language, then a strip is like a function. Unlike a function, however, a strip can have a human readable name.
Panels are added to a strip by dragging and dropping them from the Toolbox:
The toolbox shows all panels and strips available to the programmer, with a small (but live updating) icon and a sentence representing each strip in the comic. When a strip is dragged from the Toolbox, a transparent “ghost panel” appears at the end of every strip, which shows what the strip would look like if that panel were included.
A strip can be used as a panel in another strip, which is akin to calling a function in a text-based language. And yes, you can recursively add a strip to itself.** Recursion cuts off at an arbitrary depth.
Finally, strips can have input, which is like a function parameter in text-based languages. Inputs have human-readable names, displayed with a sentence:
An input can then be selected for use in one or more of the strip’s panels:
Inputs are also shown with an example value for use within the strip. In plain text languages, function parameters are always abstract within the function—the parameter is an unknown and the programmer must imagine what value will be filled in at run time. In this environment, inputs have example values so the rest of the strip can work with a concrete value, instead. The actual input value may be different when the strip is used, but the example offers a good starting point.
When a strip with an input is used elsewhere, its example is used as a default value. This default can also be changed.
Towards New Programming Environments
While the environment shown above is incomplete and based on an old programming paradigm, I believe it shows great promise. It presents an alternative to both brittle plain text and blocks-based environments where the programmer is forced to play computer to have any glimpse as to what the computer is doing.** See also Bret Victor’s Learnable Programming and Substroke, and Matthias Graf’s Vogo.
It may not be perfect, but it’s a good first step.