Sketch Garden
One hundred recorded attempts to draw the same flower in a drawing puzzle game.
For CMU’s latest puzzle hunt, I wrote a drawing puzzle game called Stroke of Genius (pictured above,playable here) with my friend Tom Wildenhain. Players are presented with a simple drawing tool and asked to draw three images (tracing guidelines are provided). The catch is that every colored “paint” has a different unexpected behavior. For example, pink strokes follow your cursor when you finish drawing, green strokes self-destruct as you add other strokes to the canvas, and yellow strokes are duplicated rotated 180 degrees about their start point. This idea of an antagonistic drawing tool was inspired by Ben Fry’s fugpaint, but as far as I know such a tool has never before been turned into a game.
During the puzzle hunt over 500 participants played Stroke of Genius, and I recorded their keystrokes. I took 100 attempts at the first level (which gives users 3 strokes to draw a particular flower) and organized them in a grid based on what approach they took, with the more successful attempts closer to the center. This format of displaying many drawings in a grid was inspired in part by Aaron Koblin’s Sheep Market.
It’s interesting to compare the different attempts at the puzzle, especially when you’ve solved it yourself, because in many cases the player’s thought process is clear through their strokes. You can see when people stop and realized they’ve made a fatal error, or become frustrated and angrily scribble over everything. The attempts are quite different, but they’re still definitely drawing the same flower. I find the final result pretty mesmerizing and easy to watch for a long time. However, there’s still a lot of interesting data that I haven’t used yet, and analyses I haven’t performed.
Sketch Garden is accessible live here.
Though they aren’t part of the main project, you may also be interested in viewing 100 attempts to solve the other levels of Stroke of Genius. These are not sorted and only minimally filtered: fish level attempts and boat level attempts.
In case you’re interested, my reference correct solution to the flower puzzle is below. One can also complete the level by drawing green first (with a much longer tail at the beginning) and then drawing pink, making sure to stop in the center. Note that since the stroke layering matters, green must be drawn before yellow.
Making Of
I was originally working on a different project for this course, and treating Stroke of Genius purely as a personal project for the puzzle hunt. I spoke to Golan a few days before the hunt and expressed that I was unsatisfied with my current project. He advised me to turn Stroke of Genius into my final project, adding some code to the tool that would log participants’ strokes so I could play their drawings back later. I loved this idea, and quickly implemented it. Over 1,400 people participated in the hunt, so I ended up with over 18,000 attempts across all levels of the game.
I was originally going to do this project about the final level, the Boat, because it was the most difficult. But when I started looking through the data, I found that the boat recordings were not as informative as the flower recordings. The puzzle was so hard that most attempts were given up on early, and when an attempt failed, it was hard to tell what the participant was trying to do. The flower level, by contrast, is the simplest puzzle-wise. The antagonistic tool is just enough to be annoying. There are a few common mistakes that people make, and they are all pretty apparent to an outside observer. This gave the flower recordings the understandability I wanted, so I decided to use them for the project instead.
However, I couldn’t use all of the thousands of flower attempts I had recorded, so I filtered out several undesirable properties: drawing very little before giving up, drawing more than the allowed three strokes (because a solution could look correct but be invisibly incorrect), using the undo button (convenient for the game, but makes the recording less clear), using entirely the wrong paints (I didn’t want to introduce other colors, like blue or purple, to the grid), etc. From the remaining attempts, I randomly chose the 100 I would use in the grid. I chose a 10×10 grid because I wanted to have many densely-packed flowers, but would have to make them smaller than I wanted to fit into an 11×11.
Once I knew which attempts I was using, I needed to order them. I initially wanted to use tSNE to sort them, but had trouble getting that to work and also wasn’t sure it would use the criteria I had in mind. So I manually (and somewhat coarsely) organized them according to what I perceived to be their general approaches. For example, in the upper left, you have the people who started with pink and gave up quickly after. In the center right, you have people who drew green and then pink (a valid approach), but ended up having their leaf erased by their other strokes. The best submissions are in the center (or slightly left and top of center, since we had SO many green attempts).
I’m really pleased with the final result; from a distance the whole thing is aesthetically pleasing, but up close each flower has its own story to tell. I like the one in the second row and seventh column, because you can really see their “damnit” moment when their green stroke starts to self-destruct. Meanwhile in the eighth row and third column, their green starts to self-destruct and they just keep going. They get all the way done with pink before sadly wandering their cursor around the screen.
I have so much data from this project that so far went unused, and I hope to do something else interesting with it when I have a bit more time. Perhaps a heat map of people’s mouse locations? Or combine it with the game itself so once you complete a level, it shows you “People who solved it like you.” With enough filters and manual selection, I also might be able to get a presentable grid out of the fish or boat data.