Packing and Cracking

Cue System for Browser-Based Performance


Participatory, civics-education performance


September, October 2020


UI Design
Front-End Development in HTML/CSS/Javascript
'Board Op'


Joseph Amodei
Rachel Gita Karp
Rory Kulz


What is Packing and Cracking?

"Do we choose our politicians, or do our politicians choose us?

Packing and Cracking is an interactive mapmaking event about gerrymandering: the pervasive practice of politicians choosing their voters rather than the other way around.

Through participatory drawing and map-drawing games, Packing and Cracking uses critical cartography, gerrymandering history, and interviews with politicians and reformers today to show how easy and disenfranchising gerrymandering can be and ask what, if anything, we should do about it."


A Browser-Based Game Page

For the online performances of Packing and Cracking, I helped develop a browser-based cue system and a collaborative drawing app.

We defined and triggered changes to a custom "game page" that audience members viewed alongside the performance in Zoom.

game4 screenshot2
Desktop screenshot of a rehearsal. On the left, the Zoom call with an drawing canvas screen-shared. On the right, our game page.

This custom software was used in Packing and Cracking's presentation through the Philadelphia Fringe Festival in September 2020, and through University of North Carolina-Chapel Hill’s Process Series in October 2020.


Watch the full-length documentation of Packing and Cracking at University of North Carolina-Chapel Hill’s Process Series, October 2020:

In the event, audiences participated in a series of interactive games, where they drew, responded to quizzes, explored maps, and watched interviews with local politicans and activists talking about gerrymandering.

game6 responses game10 flags


A Show About Maps

Audience members draw personal maps at the beginning of the performance:

game4 screenshot1 detail game4 screenshot2 detail

These personal maps help challenge the authority of the maps we see all around us.

A Custom Drawing Tool

For the October performance, I developed a drawing tool with to reduce the learning curve for drawing online:

custom drawing

I adapted the drawing tool for its three uses in the performance:


Game 3, in which audience members collaborate on a flag for their assigned team,

Game 8, in which audience members draw their own gerrymandering lines,

game8 detail
game9 detail

And Game 9, in which audience members draw what they think the heavily gerrymandered districts of their state look like.

Using our own platform allowed us to more easily gather audience members' drawings to share back out with them throughout the performance.

The drawings below come from Game 9, when facilitators and audience members draw on top of the heavily gerrymandered districts in their state.

district drawings


Maps APIs

Audience members explored maps through our use of the Google Maps API and Mapbox.

Above, audience members submitted locations of their choice that we geocoded and plotted on a map of North Carolina's congressional districts, highlighting the hidden ways these district lines split up the state.

We incorporated both the Google Maps API and Mapbox SDK into the performance.


Audience members submitted their locations for the above map in Game 5. On the back-end, we used the Google APIs to do the geocoding and plotting.

In Game 12, we used Mapbox to let audience members explore the current U.S. Congressional Districts.

game12 detail

On the back-end, we used the Google Civics API to get the Congressional District of any user-submitted address, and the name of the representative:


Theatrical Cue System

The custom webpage was controlled by a cue system that we developed in PHP and Javascript.

A "board-op" moved the performance through its pre-defined cues using a webpage side by side with the virtual performance:

game2 admin overview

Assigning audience members into groups increases their motivation to participate and to learn from the performance.

As such, we developed the admin page to allow us to assign them to different teams:

different teams

This system let us better curate our audience's attention and improve the performance's accessibility.