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
Overview
Motivation:
In our experience, using graphics in introductory
assignments increases student enthusiasm and
therefore improves learning outcomes.
Breakout!
Nifty Assignments 2006
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 Model
tcsh 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 Model
tcsh 1>
emacs DoNotEnter.c
tcsh 2>
gcc –o DoNotEnter DoNotEnter.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
The Quickdraw Model
tcsh 1>
emacs DoNotEnter.c
tcsh 2>
gcc –o DoNotEnter DoNotEnter.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
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 Library
tcsh 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 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++)-------------------
Using the Portable Graphics Library
tcsh 1>
emacs DoNotEnter.cpp
tcsh 2>
make all
g++ -c –IStanfordCPPLib DoNotEnter.cpp
g++ -o DoNotEnter DoNotEnter.o -lStanfordCPPLib
tcsh 3>
DoNotEnter
Using the Portable Graphics Library
tcsh 1>
emacs DoNotEnter.cpp
tcsh 2>
make all
g++ -c –IStanfordCPPLib DoNotEnter.cpp
g++ -o DoNotEnter DoNotEnter.o -lStanfordCPPLib
tcsh 3>
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
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.
Advantages
1. 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.
2. 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.
3. 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.
4. Substantial possibilities for extensions. The strategy of
combining a thin client with an interprocess pipe has many
applications beyond graphics.
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