1. A Portable Graphics Library for Introductory CS Eric Roberts and Keith Schwarz Department of Computer Science Stanford University ITiCSE 2103 Canterbury, UK 2 July 2013

2. Breakout! Nifty Assignments 2006 Overview Motivation:In our experience, using graphics in introductory assignments increases student enthusiasm and therefore improves learning outcomes.

3. Overview Motivation:In our experience, using graphics in introductory assignments increases student enthusiasm and therefore improves learning outcomes. The problem:The structure of graphical assignments depends significantly on the details of the graphics model. Changing the graphics model or moving to a new programming language requires a substantial redevelopment effort. The solution:Use interprocess communication to implement a common graphics library that can be shared among many different languages.

4. Old Strategy for Portability

5. New Strategy for Portability interprocess pipe

6. The Quickdraw Model At SIGCSE 2009 in Chattanooga, Ben Stephenson and Craig Taube-Schock from the University of Calgary presented a paper describing a system they call Quickdraw. In Quickdraw, students write programs that print out a text representation of the graphical scene they wish to display. That output is then fed into a Java application that generates the actual screen image. student code interprocess pipe quickdraw.jar

7. The Quickdraw Model tcsh 1> emacs DoNotEnter.c

8. The Quickdraw Model #include const int CIRCLE_SIZE = 240; const int BAR_WIDTH = 200; const int BAR_HEIGHT = 40; main() { printf("color 255 0 0 255\n"); printf("fillcircle %d %d %d\n", 400, 300, CIRCLE_SIZE / 2); printf("color 255 255 255 255\n"); printf("fillrect %d %d %d %d\n", 400 - BAR_WIDTH / 2, 300 - BAR_HEIGHT / 2, BAR_WIDTH, BAR_HEIGHT); } -uu-:---F1 DoNotEnter.c All L1 (C)---------------------

9. The Quickdraw Model tcsh 1> emacs DoNotEnter.c tcsh 2> gcc –o DoNotEnter DoNotEnter.c tcsh 3> DoNotEnter color 255 0 0 255 tcsh 4> fillcircle 400 300 120 color 255 255 255 255 fillrect 300 280 200 40 DoNotEnter | java –jar quickdraw.jar

10. The Quickdraw Model tcsh 1> emacs DoNotEnter.c tcsh 2> gcc –o DoNotEnter DoNotEnter.c tcsh 3> DoNotEnter color 255 0 0 255 tcsh 4> fillcircle 400 300 120 color 255 255 255 255 fillrect 300 280 200 40 DoNotEnter | java –jar quickdraw.jar

11. The Quickdraw Model At SIGCSE 2009 in Chattanooga, Ben Stephenson and Craig Taube-Schock from the University of Calgary presented a paper on a system they called Quickdraw. In Quickdraw, students write programs that print out a text representation of the graphical scene they wish to display. That output is then fed into a Java application that generates the actual screen image. student code interprocess pipe quickdraw.jar Our system combines the Quickdraw idea with the Java Task Force graphics model presented at SIGCSE 2006 in Houston.

12. The Portable Graphics Library Model Both the new Portable Graphics Library and the earlier Java Task Force library use a collage model in which you create an image by adding various objects to a canvas. The collage model is reminiscent of an old-style felt board. As an example, the following diagram illustrates the process of adding a red rectangle and a blue oval to a felt board: Note that newer objects can obscure those added earlier. This layering arrangement is called the stacking order.

13. The GObject Hierarchy The Portable Graphics Library also adopts the GObject model from the JTF library, which uses the following hierarchy: As in any object hierarchy, the concrete classes at the bottom of the diagram inherit the behavior of their superclasses.

14. Using the Portable Graphics Library tcsh 1> emacs DoNotEnter.cpp

15. Using the Portable Graphics Library #include "gobjects.h" #include "gwindow.h" using namespace std; const double CIRCLE_SIZE = 240; const double BAR_WIDTH = 200; const double BAR_HEIGHT = 40; int main() { GWindow gw(600, 400); double xc = gw.getWidth() / 2; double yc = gw.getHeight() / 2; GOval *circle = new GOval(xc - CIRCLE_SIZE / 2, yc - CIRCLE_SIZE / 2, CIRCLE_SIZE, CIRCLE_SIZE); circle->setFilled(true); circle->setColor("RED"); GRect *bar = new GRect(xc - BAR_WIDTH / 2, -uu-:---F1 DoNotEnter.cpp Top L1 (C++)-------------------

16. Using the Portable Graphics Library int main() { GWindow gw(600, 400); double xc = gw.getWidth() / 2; double yc = gw.getHeight() / 2; GOval *circle = new GOval(xc - CIRCLE_SIZE / 2, yc - CIRCLE_SIZE / 2, CIRCLE_SIZE, CIRCLE_SIZE); circle->setFilled(true); circle->setColor("RED"); GRect *bar = new GRect(xc - BAR_WIDTH / 2, yc - BAR_HEIGHT / 2, BAR_WIDTH, BAR_HEIGHT); bar->setFilled(true); bar->setColor("WHITE"); gw.add(circle); gw.add(bar); return 0; } -uu-:---F1 DoNotEnter.cpp Bot L9 (C++)-------------------

17. Using the Portable Graphics Library tcsh 1> emacs DoNotEnter.cpp tcsh 2> make all g++ -c –IStanfordCPPLib DoNotEnter.cpp tcsh 3> g++ -o DoNotEnter DoNotEnter.o -lStanfordCPPLib DoNotEnter

18. Using the Portable Graphics Library tcsh 1> emacs DoNotEnter.cpp tcsh 2> make all g++ -c –IStanfordCPPLib DoNotEnter.cpp tcsh 3> g++ -o DoNotEnter DoNotEnter.o -lStanfordCPPLib DoNotEnter

19. The Event Model The Portable Graphics Library uses an event model whose hierarchical structure is similar to the Java event model: In contrast to Java, events in the Portable Graphics Library are synchronous in the sense that events are reported only when the client calls waitForEvent. The primary implication of this design decision is that students must code their own event loops.

20. Using Events

21. Live Demo See Gaetano Kanizsa, “Subjective Contours,” Scientific American, April 1976

22. Minimizing Interactions In Breakout, how does the program detect collisions? Asking the Java process about collisions is too slow. The system must keep geometric information on both sides.

23. The Clients Are Not All That Thin interprocess pipe Each of these takes ~5000 lines of code Despite the size, the strategy is a huge win because it requires no rendering code and is not tied to a rapidly evolving API.

24. Advantages Simplified maintenance. The responsibility for ensuring that rendering works on all platforms is in the hands of the Java maintainers and no longer falls on the developers and adopters. 1. Streamlined migration to new languages and platforms. Good assignments take a long time to develop. Having a common model for a variety of source languages reduces the burden considerably. 2. Enhanced opportunities to analyze trace data. The text stream that passes between the client code and the back end process provides interesting information that can be analyzed using machine-learning techniques. 3. Substantial possibilities for extensions. The strategy of combining a thin client with an interprocess pipe has many applications beyond graphics. 4.

25. Current Status We have used the new library model for three quarters in this academic year and feel that it has been very successful. Over that time, we have come up with a variety of strategies to make the model even better, and we are currently working on several of those. We are also in the process of installing the code on GitHub. Before we release the library as an open-source project, we are interested in recruiting beta-testers. If you are interested, please send mail to eroberts@cs.stanford.edu

26. The End