From Code to Cutout

Paula Bontá talks about coding in the same way I talk about physical materials like wood or wire. I walked away from most of our conversations during her artist residency with variations of “code has texture!” scrawled in my notebook. But the gap between the screen and the world outside of it can feel gigantic, and it’s not always easy to bridge that distance. Finding meaningful ways to tinker physically and digitally continues to be a major area of interest for us at the Tinkering Studio (Deanna wrote up a great summary of some of our computational tinkering investigations). So we were excited about the idea of making code feel more physical to guests on the museum floor.

Workflow

We invited visitors to code a design using TurtleArt, a block-based programming language made by the Playful Invention Company (Paula Bontá and Brian Silverman). TurtleArt allows users to create images and geometric patterns by constructing a program with blocks of code.

Thanks to Paula’s expertise and enthusiasm, we developed a workflow to move quickly from coded to tactile. I’ve documented our setup for this initial run below; please reach out with ideas for future directions, feedback or questions!

1. Download TurtleArt. We used the TurtleArt application on an iPad, which is available as a paid app via the iTunes store. You can also contact the TurtleArt team for a free desktop version. 
2. Configure TurtleArt settings. To save images of your creations, make sure that TurtleArt is set up to always save images to your device's camera roll. Go to Settings > TurtleArt and turn on “Always Save to Camera Roll” to ensure this is the case:
   
   
3. Get started with TurtleArt. To avoid the blank page problem, Paula developed a series of code cards with starting points so that visitors had an initial program to familiarize themselves with, build upon, and often change entirely. Our entire starting point set is available for download. 
    
   

   
    

   The turtles on the upper lefthand side of the screen indicate the difficulty level of the project, on a 1-3 turtle scale (1 indicating easier programs to construct). 
4. Create an image. After (or sometimes during!) the process of replicating the starting point code, visitors manipulated variables, added and changed blocks, and tested new programs. They continued troubleshooting and experimenting until landing on a graphic that they were ready to make physical. TurtleArt allowed for quick tests and iterations: changing a single block or variable could dramatically change the outcome. Some visitors spent time trying to understand exactly how the program was constructed; others seemed more open to serendipity.

   
5. Save the image in the TurtleArt application (the button is labeled with a checkmark icon) to add it to the iPad's camera roll.
6. Send the image. We used AirDrop to share the image with a designated computer attached to the vinyl cutter. Silhouette Studio allowed us to quickly trace their image in a format recognized by the vinyl cutter. We let visitors choose between different colors of cardstock and acetate because they’re quick to cut.
7. Cut your creation! 

Future Directions

In this version of the activity, visitors coded an image in TurtleArt, cut it out using the vinyl cutter, and walked away with their creations. The vinyl cutter basically functioned as a printer to quickly make their code into something tangible. But how could we take the back-and-forth between physical and digital a step further? What might prompt visitors to cut their initial creation, explore it in the physical world, and then go back to code another version? We're interested in pushing this back-and-forth between the digital and the physical in future iterations of this activity by exploring setups that would allow for visitors to code something, cut it, then quickly iterate and cut another; cut multiples and combine them into new creations; or even use TurtleArt as a starting point and modify the vector file before cutting.