Master Thesis Direct Manipulation of Turtle Graphics Matthias Graf September 30, 2014 Supervisors: Dr. Veit Köppen & Prof. Dr. Gunter Saake Otto-von-Guericke University Magdeburg Prof. Dr. Marian Dörk University of Applied Sciences Potsdam Abstract This thesis is centred around the question of how dynamic pictures can be created and manipulated directly, analogous to drawing images, in an attempt to overcome traditional abstract textual program representations and interfaces (coding). To explore new ideas, Vogo1 is presented, an experimental, spatially-oriented, direct manipulation, live programming environment for Logo Turtle Graphics. It allows complex abstract shapes to be created entirely on a canvas. The interplay of several interface design principles is demonstrated to encourage exploration, curiosity and serendipitous discoveries. By reaching out to new programmers, this thesis seeks to question established programming paradigms and expand the view of what programming is. 1http://mgrf.de/vogo/ 2 Contents 1 Introduction5 1.1 Research Question.................................6 1.2 Turtle Graphics..................................6 1.3 Direct Manipulation................................8 1.4 Goal......................................... 10 1.5 Challenges..................................... 12 1.6 Outline....................................... 14 2 Related Research 15 2.1 Sketchpad..................................... 15 2.2 Constructivism................................... 16 2.3 Logo........................................ 19 2.4 Scratch & Snap................................... 22 2.5 Recursive Drawing................................ 23 2.6 Drawing Dynamic Visualisations........................ 25 2.7 Summary...................................... 28 3 Vogo 29 3.1 Interface Overview................................ 30 3.2 Design Principles................................. 31 3.3 Proxies....................................... 32 3.4 Move........................................ 33 3.5 Rotate........................................ 34 3.6 Loop........................................ 36 3.7 Branch....................................... 37 3.8 Selection & Editing................................ 40 3.9 Expressions & Dragging............................. 43 3.10 Subpictures..................................... 45 3.11 Call......................................... 46 3.12 Recursion...................................... 47 3.13 Scope........................................ 49 3.14 Parametrisation.................................. 50 3.15 Flow........................................ 50 3.16 Export....................................... 52 3.17 Compiler Design.................................. 53 3.18 Summary...................................... 55 3 4 Discussion 56 4.1 Comparison with JSLogo............................. 56 4.2 Exploration..................................... 61 4.3 Programming or Drawing?............................ 63 4.4 Environment Analysis............................... 63 4.5 Limitations..................................... 65 4.6 Open Questions.................................. 66 5 Conclusion 68 Bibliography 70 4 1 Introduction Bret Victor inspired this thesis project. His guiding principle is that creators need an immediate connection to what they are creating (Victor, 2012b). For example, drawing on paper is a very direct creative process. Each stroke is visible immediately and adds to a continuously forming picture. The pen or brush becomes an extension of the artists body to express intent. This allows for a tight feedback loop to establish between the formation of ideas and their externalisation, each driving the other, which is crucial for the creative process, according to constructionist theories of learning (Papert and Harel, 1991) (see section 2.2). The emergence of the computer paved the way for new forms of creation, many of which are yet to be invented, since computing is still in its infancy (Kay, 2007)(Sussman, 2011). In contrast to drawing, which creates static pictures, and animation, which creates static moving pictures, dynamic pictures can behave, be sensitive to context, change based on data, or respond to user input (Victor, 2011a). Victor points out that dynamic pictures are native art in the medium of the computer, because it provides the fundamental ability to simulate, not available in any other medium (Victor, 2013c). An example are computer games, perhaps the most sophisticated dynamic pictures today. But dynamic pictures do not have to be interactive. Data-driven graphics, like histograms or treemaps, are not necessarily interactive, yet dynamic, because these information graphics change depending on input data. Explorable explanations are another important category of dynamic pictures (Victor, 2011c). A simple example is Jason Davies’ succinct illustration of how parametric Bézier curves are constructed (Davies, 2012). Although information graphics and visual explanations are scientically recognised to facilitate understanding (Card et al., 1999), the tools for their creation are hard to use and learn. Some widely used today include D31, Processing2,R3 and VTK4. All involve the manipulation of abstract textual representations - coding, a highly indirect form of creation, requiring a great deal of technical sophistication. An author has to maintain an intricate mental mapping between text and picture. How can this process be simplied? How can dynamic pictures be created by manipulating the picture itself, instead of text? Those questions motivate this thesis, but are to broad too pose as research questions. 1Data-driven documents (Bostock et al., 2011)- http://d3js.org/ 2http://processing.org/ 3The R Project for Statistical Computing - http://www.r-project.org/ 4The Visualization Toolkit - http://www.vtk.org/ 5 To make programming approachable by children, Seymour Papert et al. developed the programming language Logo (Papert, 1980). It creates Turtle Graphics, a form of dynamic picture, that is based around the idea of moving a pen on a canvas, creating a line path based on procedures. Logo’s design principles, like its inherently visual and body-syntonic nature, allow children to relate to programming and make learning a motivating, fun and insightful experience that can grow powerful ideas. Papert’s insights are the second key motivation for this thesis project. 1.1 Research estion Taking the insights carried by Logo as a starting point, the central research question is: How can Turtle Graphics be created through direct manipulation? An alternative formulation is: How can abstract procedural paths be created and manipulated directly, without the "detour" through textual representations of program structure, but rather be "drawn", that is, be visualised and constructed in a spatial context? Those questions itself raise many questions, most signicantly: • What are Turtle Graphics and abstract procedural paths? • What are the insights of Logo and what makes it a good starting point? • What is direct manipulation and why is it important? • What is meant by "detour", "drawing" and "spatial context"? • How can a desirable solution be characterised? • What challenges does the question pose? The following sections are devoted to explaining and answering them. 1.2 Turtle Graphics In Logo a Turtle Graphic is specied by a procedural program that instructs a turtle to draw a path, hence the name. The turtle can also be thought of as a pen, but a turtle is a more anthropomorphic metaphor. The pen has a position and heading on a two-dimensional plane. The most important instructions are move forward or backward and rotate right or left. To draw an equilateral triangle with a side length of 100, the pen would have to do: 1 forward 100 2 right 120 3 forward 100 4 right 120 5 forward 100 6 Each instruction changes the pen’s state. The three forward commands draw the equilateral sides of length 100, a dimensionless unit. The right rotate the pen by a given number of degrees, 180°-60° for the outside angles. Each move of the pen appends a line segment to the path. Note that due to the missing third rotate, then pen is not returned to its original heading. The program can contain iterations and parameterised functions, which allows for the specication of a whole class of paths. This is why Turtle Graphics, in their most basic form, are abstract procedural paths. A simple example is any convex regular polygon (an equiangular, equilateral polygon), written in Logo as: 1 to regularPolygon :numberOfEdges 2 repeat :numberOfEdges [ 3 right 360/: numberOfEdges 4 forward 300/: numberOfEdges 5] 6 end 3 4 5 6 18 This function can be called with any number of edges to produce an image. If the number of edges is set to three, the above mentioned equilateral triangle is drawn. The regular polygon is thus a possible abstraction for a equilateral triangle. The higher the number of edges, the more it approximates a circle. A regular polygon is a dynamic image because it changes based on input, the number of edges. It can be thought of as a parameterised image. Logo’s syntax and semantics are comparatively easy to understand. For example, instead of the common for-loop, the simpler repeat x-times is available. State is minimised due to its functional style and the state that does remain is trivially visible as the pens position and heading. Furthermore, most commands have a visible eect or pendant in the image. This means that the output (image) still contains much information about the execution ow of