Hopscotch is an iOS app for iPads designed as a coding environment that can facilitate learning through tinkering by young ones. It takes a great deal of inspiration from Scratch. I’ve begun to explore its capabilities and limitations. The first series of “code drawings” – drawings made with code as medium – were explored with minimalism, simplicity, and tight constraints in mind. I was, and am, in conversation with the constraints within Hopscotch. I can and do exercise judgement about which states to conserve, and about what blocks of code to use. Sometimes the constraints are frustrating. Sometimes they result in a disciplined practice. Sometimes, letting the tightly constrained system run it’s course results in surprising moments of beauty, as seen by this human’s eyes. These moments I’ve tried to preserve by the funny, clumsy, two-fisted, screen capture gesture on my iPad. I literally squeeze the appropriate acupressure points at the right time to get the device to remember, else the image is gone.

So, nuts and bolts. Hopscotch is a connect-the-blocks visual programming environment. It is favoring ease of learning over comprehensive feature-set. It has no conditional blocks, choosing – instead – to embed conditional states in a kind of meta-block, areas where blocks are gathered, triggered by conditions within a drop-down menu. The Code Drawings conserved so far make use of only three of these meta-blocks per sprite; one for setup or initialization, one for looping, and one for handling what happens when the sprite touches an edge of the canvas. I don’t know what the developers call these areas that I am calling meta-blocks, so your nomenclature may vary.

Hopscotch does not (yet?) allow me to draw my own sprites. It does allow me to create a text sprite, however. I’ve chosen to use this capability to use the typographic “bullet point” character as my sprite. This character renders as a simple black circle with a visual center-point near the actual center-point of the sprite. By contrast the “period” character, since it hugs the typographic baseline, is in the wrong place to look like it’s the pen-point that draws the line.

Initialization sets the size of the bullet-point to 50%; the x and y coordinates to some random location within the canvas; and, the beginning direction of travel to some random angle within a range of my choosing. It also sets the color and the width of the line to draw. These instructions are executed when “play” is pressed. Oh, and I defined some variables for distance and angle, in case I wanted to make global changes later in the experiments. These also receive their initial states/values here.

The loop uses three or four blocks. The first is the instruction to “draw” to leave a trail. This one nests a Repeat X Times loop. I tried 100, 1000, and 10,000 times in the experiments. With the spirally drawings I chose 1024. Nested inside this Repeat block is a Move X Pixels block, and – in the case of the spirals – a Rotate X Degrees block. The Move X block was populated by either a constant, or the distance variable. The Rotate block was populated by different, highly constrained, random ranges in each sprite. The loop is triggered by tapping the surface of the iPad once “play” is pressed.

Hopscotch does not allow sprites to travel off the edges of the canvas. They behave as if they are clamped by a maximum value, and continue to travel in the direction that has not yet reached a max. The sprites will inevitably drive themselves into a corner and stay there if not given an instruction to do otherwise on the condition that they collide with an edge. Hopscotch provides two collision detection conditions for its meta-blocks, one for an edge, and one for another sprite (which I will explore in later drawings). In some of the early drawings I used a Rotate block with a large random value range here. In the later drawings I simplified to a constant value. I really just wanted to get the sprite back into the canvas and contribute to the evolution of the drawing. Some of the visual quirkiness of the drawings happens here. Hopscotch does not have an “if on edge bounce” option, which would simulate bounce-angle physics. At first I thought this would be frustrating. Instead this constraint made me use a solution that is not so easily figured out by our brains, which is an opportunity to create situations of visual interest.

Letting this small system run for hundreds of thousands of loop cycles has given predictably unpredictable visual results. This is similar in logic to Conway’s Game of Life. Having the loop not be allowed to go on infinitely, another constraint within Hopscotch, has forced me to look at the drawing at regular intervals as it evolves. That pause has given me the opportunity to appreciate that moments of beauty were beginning to happen, and to save them. I was able to witness emergent interestingness coming out of the mists of the tedious. This is kinda special.

So, that’s it. My lab report for my Code Drawing explorations to date with Hopscotch. I may try to make prints to see how they turn out. The resolution of the screen captures on my Retina iPad are at twice the reported native resolution of Hopscotch, so they might turn out nicely.

Thanks for tuning in.