A Portable Graphics Libraryfor Introductory CS

Eric Roberts and Keith SchwarzDepartment of Computer Science

Stanford University

ITiCSE 2103Canterbury, UK

2 July 2013

Breakout!Nifty Assignments 2006

Overview

Motivation: In our experience, using graphics in introductory assignments increases student enthusiasm and therefore improves learning outcomes.

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.

Old Strategy for Portability

New Strategy for Portability

interprocess pipe

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

The Quickdraw Modeltcsh 1> emacs DoNotEnter.c

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)---------------------

The Quickdraw Modeltcsh 1> emacs DoNotEnter.ctcsh 2> gcc –o DoNotEnter DoNotEnter.ctcsh 3> DoNotEntercolor 255 0 0 255

tcsh 4>

fillcircle 400 300 120color 255 255 255 255fillrect 300 280 200 40 DoNotEnter | java –jar quickdraw.jar

The Quickdraw Modeltcsh 1> emacs DoNotEnter.ctcsh 2> gcc –o DoNotEnter DoNotEnter.ctcsh 3> DoNotEntercolor 255 0 0 255

tcsh 4>

fillcircle 400 300 120color 255 255 255 255fillrect 300 280 200 40 DoNotEnter | java –jar quickdraw.jar

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.

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.

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.

Using the Portable Graphics Librarytcsh 1> emacs DoNotEnter.cpp

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++)-------------------

Using the Portable Graphics Libraryint 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++)-------------------

Using the Portable Graphics Librarytcsh 1> emacs DoNotEnter.cpptcsh 2> make allg++ -c –IStanfordCPPLib DoNotEnter.cpp

tcsh 3>g++ -o DoNotEnter DoNotEnter.o -lStanfordCPPLib DoNotEnter

Using the Portable Graphics Librarytcsh 1> emacs DoNotEnter.cpptcsh 2> make allg++ -c –IStanfordCPPLib DoNotEnter.cpp

tcsh 3>g++ -o DoNotEnter DoNotEnter.o -lStanfordCPPLib DoNotEnter

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.

Using Events

Live Demo

See Gaetano Kanizsa, “Subjective Contours,” Scientific American, April 1976

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.

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.

AdvantagesSimplified 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.

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

The End