Storybook: The Princess & The Dragon


Maria Yala & Nick Alexander

Storybook: The Princess and the Dragon

Storybook is a collaborative storytelling game built using p5, in which each player assists in generating a random page of a storybook. Storybook asks players to tell the tale of a Princess and her dragon. Players require a mobile phone and internet access to create a story page. Each phone will generate one page of the story in this multi-player game. To create a page, each player picks one image from a random set of four images and a caption from a random set of four. Story pages can then be arranged in multiple ways to create different tales about the Princess and her dragon. How the players arrange their pages influences the way the story is read.

Link: (Optimized for mobile at this time)

Git repository:


Brainstorming & ideation document

Our first discussion was one of scope and simplicity. The most interesting projects presented to us as examples were ones that used phones as mechanisms to facilitate a face-to-face personal interaction, rather than the core experience. We brainstormed and explored several ideas, and Storybook was the idea that we both felt was the most fun, versatile, and achievable.

First wireframe of the project

We sketched out a rough wireframe of the screen-by-screen user flow. Even at this early point we were considering experience design, and included a “blank” screen as a sort of pause in the flow. Once all the players were ready, we thought, the screen could be tapped to reveal the final page chosen and thus preserve the surprise.

We were also discussing how to best generate random images, display them in a quadrant, and store them for retrieval at the end. We discussed whether having multiple canvases on the screen would be helpful in this. This wireframe captures our decision to go with a single large canvas – the black square represents the single canvas, drawing all the artwork.


First working version of the screen progression

This is the first complete prototype of the user progression. We generated multiple screens by creating a “screenState” variable and writing if-statements that drew screens based on the current number assigned to screenState. Every choice the user made increased the variable by one. So, if the screenState was 0, the user is seeing the first screen. If the screenState was 1, the user was seeing the second screen, and so on.


2jl4p8 2jl62n

Story images and caption generation and randomization

Once a player clicks on start to begins the game, they are presented with a random set of 4 images to choose from and a random set of four captions. To draw these images and captions we first had to determine how to draw the images to the screen. We decided to split the canvas into four quadrants. Using (x,y) coordinates and an array of 12 images, we generated 4 random integers based on the length of the array and used these integers as the indices to randomly choose an image. The images were then drawn at the (x,y) coordinates i.e. (0, 0), (width/2, 0), (0, height/2) and (width/2, height/2). Once we determined that the randomization was working correctly and that the test images were showing up in the correct quadrants. We moved the images again to center them inside the quadrants.  

At this point we merged the CaptureTo save the image and caption clicked, we created global boolean i.e q1Clicked, q2Clicked, q3Clicked, q4Clicked, which we set to true whenever a click was registered in a particular quadrant. Using if statements and our storyStage variable which indicated which stage of the game the player was in, we were able to determine which image and caption to save as each of the images and captions was placed in a particular quadrant. Once the storyStage advanced, the global variables were then reset to false. & Randomization script with the Screen Progression script to create storybook.js. This choice ultimately led to some problems, as we had duplicated work. We had different methods of tracking clicks, and the overlap of the two click tracking methods caused an issue with iPhone that we only uncovered within the last days of the project. The Screen Progression script used the mouseClicked function, which isn’t compatible with iPhone. We solved this problem by changing the mouseClicked function to mouseReleased, which is compatible and using “return false;” to override any browser presets.

Once we determined that the new storybook.js script was working correctly we tested the game on our own mobile phones. Below are screenshots from the test.





Princess character study

Both to save time and to evoke a cartoon children’s book aesthetic we made the decision to hand draw our artwork. The Princess needed to be expressive, with enough character of her own to make her feel unique, while being able to fit in with any caption. She is inspired by Allie Brosh’s Hyperbole and a Half, whose sassy and expressive cartoon heroine is a simple messy design, and the ultra-flexible (and ultra-disposable) stickmen of (not safe for work!) Cyanide and Happiness.


Dragon character study

The Dragon needed to be simple in order to match the Princess and also be easy to draw consistently multiple times. Having him be more snake than lizard was an early choice that never wavered. He is inspired by the dragon from the classic Paper Bag Princess by Munsch and Martchenko, and Adventure Time’s postmodern takes on fantasy creatures.


Final character designs

The Princess and the Dragon were chosen for their versatility. The trope of the dragon-stealing princess is common in myth and children’s stories, and the assumptions players have about it inform their preconceptions of the experience and the choices they make. Both characters are expressive but simple enough that any player choice of caption can be reflected in the matched artwork.


Layout for hand-drawing artwork and early pencils


Inking rough pencils

The 20-Screen moment:


Project Context

The project was inspired largely by illustrated children’s stories and collaborative storytelling games, as well as the common story elements of dragons and princesses.


The Paper Bag Princess

Familiarity with children’s stories (in particular we thought of The Paper Bag Princess by Robert Munsch and Michael Martchenko when creating The Princess and the Dragon) will likely help Storybook players find meaning in it. The clarity and earnest nature of stories directed at young children provides a framework for players familiar with them to accept the necessary simplicity of the semi-randomly generated pages that Storybook players create, and will perhaps have primed them to look for depth and meaning in Storybook’s brief sentences and simple pictures.

We also considered contemporary collaborative storytelling games. Many games exist in which players each make a choice from options they control (such as Joking Hazard, Cards Against Humanity, and Dungeons & Dragons) and combine their choices to make a narrative from scratch. This is a proven format – consider that the format of Cards Against Humanity has inspired an entire genre of social card game – and it was not a large leap to apply it to the Storybook project.


Joking Hazard/Cyanide and Happiness

Storybook also draws influence, both visual and practical, from sequential art – webcomics in particular. Visually it is inspired by the clear, attractive, and comedic styles of Hyperbole and a Half  and Cyanide and Happiness. (The game Joking Hazard is the brainchild and spinoff of Cyanide and Happiness, so the connection is strong).  These are both successful webcomics with wildly different tones, whose artwork styles are simple but expressive stick-people. Scott McCloud, comics theorist, explains that the more detailed a cartoon character the less a reader will see themselves in it. (Consider the ubiquity of the smiley-face or emoji, and ask why they rarely have much detail.) Storybook follows suit and uses simple figures with large, simple features so players will see themselves in and imprint upon the characters, and thus read meaning in a story where none exists. Furthermore, as Storybook is meant to be played on a flat surface and with images arranged sequentially, it could be considered a sort of collaborative electronic comic strip – a webcomic that doesn’t exist on the web.


McCloud on simple cartoon faces

Where Storybook is unique from its inspirations is that it asks players to collaborate on a single narrative without stated beginning or end, and invites players to consider what arrangement does to a story. It is not in itself a game with a goal. There is not beginning, end, or stated size for the story, nor is there a necessary number of players (though one player with one phone might not enjoy it all that much). Additionally, it is not explicitly necessary that the story be read sequentially left-to-right, as English-language printed material usually is. The nature of the medium that Storybook exists within means that players can arrange and read their stories however they wish. Storybook allows players to explore what happens to a story when it is arranged in unconventional ways. What if you played Storybook like a crossword? What if you read it top to bottom? What if you built a grid and looked for the stories that appeared inside? Storybook’s versatility and simplicity allow players to explore the nature of storytelling and discover meaning beyond the designers’ intentions.


“Hyperbole and a Half.” Brosh, Allie. Hyperbole and a Half,

“Cyanide & Happiness (” DenBleyker, McElfatrick, and Wilson. Cyanide & Happiness,

McCloud, Scott. Understanding Comics. Harper Perennial, 1994.

Munsch, Robert N., and Michael Martchenko. The Paper Bag Princess. Annick Press, 2018.

“Cards Against Humanity.” Temkin et. al.  Cards Against Humanity,

Ward, Pendleton. Adventure Time, Cartoon Network, 5 Apr. 2010.