A Portable Graphics Library for Introductory CS

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

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

3. Overview Motivation: The problem: The solution: In our experience, using graphics in introductory assignments increases student enthusiasm and therefore improves learning outcomes. 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. 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 quickdraw.jar interprocess pipe

7. The Quickdraw Model tcsh 1> emacsDoNotEnter.c

8. The Quickdraw Model #include <stdio.h> 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> emacsDoNotEnter.c tcsh 2> gcc –oDoNotEnterDoNotEnter.c tcsh 3> DoNotEnter color 255 0 0 255 fillcircle 400 300 120 color 255 255 255 255 fillrect 300 280 200 40 tcsh 4> DoNotEnter | java –jar quickdraw.jar

10. The Quickdraw Model tcsh 1> emacsDoNotEnter.c tcsh 2> gcc –oDoNotEnterDoNotEnter.c tcsh 3> DoNotEnter color 255 0 0 255 fillcircle 400 300 120 color 255 255 255 255 fillrect 300 280 200 40 tcsh 4> 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 quickdraw.jar interprocess pipe • Our system combines the Quickdraw idea with the Java Task Force graphics model presented at SIGCSE 2006 in Houston.

12. 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: 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. • 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> emacsDoNotEnter.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.cppBot L9 (C++)-------------------

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

18. Using the Portable Graphics Library tcsh 1> emacsDoNotEnter.cpp tcsh 2> make all g++ -c –IStanfordCPPLibDoNotEnter.cpp g++ -oDoNotEnterDoNotEnter.o -lStanfordCPPLib tcsh 3> 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 GaetanoKanizsa, “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 Each of these takes ~5000 lines of code interprocess pipe • 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 1. 2. 3. 4. 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. Streamlinedmigrationtonewlanguages and platforms. Good assignments take a long time to develop. Having a common model for a variety of source languages reduces the burden considerably. 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. Substantial possibilities for extensions. The strategy of combining a thin client with an interprocess pipe has many applications beyond graphics.

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