How to seamlessly transition from creating something in the physical world to bringing it to life with code continues to be of interest to our team. This post outlines the framework for both our Maker Faire setup and the Programmable Projection Play that we've been doing on the museum floor: visitors draw, upload, and use Scratch to code sprites and then add them to a collaborative project, like the space-themed environment featured here.
1. Draw it!
To start, create something in the physical world that will be added to your Scratch environment. Most of our soon-to-be-coded creations so far have been drawings, but we've also uploaded paper cutouts and even scanned in physical objects (check out the pair of scissors that Ryoko uploaded in the example above). A strong black outline that completely delineates your creation will make the scanning process easier, as we'll see in the next step. As a note: the drawings below were cut out so that we could hang them up to showcase visitor artwork, but scanning before cutting out drawings tends to produce better quality images.
Scan it!
Once you've created your masterpiece, it's time to scan it and remove the white paper backdrop. We're hoping to find ways of moving even more quickly from character making to character coding: this is one workflow that we've found to be effective, but it's specific to iPads and is still definitely under development.
When we run this activity on the floor, we distribute Scanning Station cards, like the one pictured on the left, at a designated scanning workspace. To start scanning, download the free Scannable application on an iPad. The app will display a blue rectangle overlay on your piece of paper once it identifies a document, and then will automatically scan the image. It does some brightening and color correcting, so a traditional photo may be more appropriate for lower contrast drawings. Once the scan is complete, tap on it and press the SAVE button. Select "Camera Roll" so that the image is added to the device's photos.
Next, download the Background Eraser app. Tap on the mountain icon to select your recently saved image for editing. Choose Erase and select the Target Area tool. This tool will let you tap a single spot on the area you'd like to delete -- in this case, the background of your image -- without having to manually erase all around your drawing.
Once you're satisfied with the background removal, save your image by selecting the share icon (pictured on the left). Select MAX PNG. Hit Save and then Save to Photo Album. Note that you may be required to watch an advertisement if you're using the free version of the app before exporting the file.
Go to Photos on your device and select your newly processed image. If you're working on a Mac, use AirDrop to send it to your computer. If you're working on a PC, you can email the file to yourself or upload it to Google Drive. You're ready to code!
Quick Aside: Flipbook Style Animation
Some visitors expressed interest in creating animations in addition to coding movements for their sprites. You can use this same workflow to develop a flipbook style animation.
.png)
First, draw your image.
This, for example, is a colored pencil and Sharpie drawing of a windup toy. I knew that I wanted the jaw to move up and down as the chattering teeth made their way majestically across the unvierse.
Second, cut out the moving components of your image.
This might mean cutting out arms, legs, or other moving elements of your drawing. In this case, I cut out the upper and lower jaws so that they could move separately. Place the components flat against a white backdrop.
Third, open Scannable and prop the iPad a set distance above your drawing.
The app will automatically scan, so you can move components of your drawing without touching the iPad and scan each frame. Here, I used a box to keep the iPad level and suspended. You'll need to erase the backgrounds from each image, and be careful not to crop because that will impact alignment. Upload each image as a costume for your sprite in Scratch.
Code it!
Use Scratch to bring your creation to life! We've been trying out a series of different cards with sample code to help visitors who are new to Scratch get started. Each includes a simple movement, like wiggling or moving back and forth. We also make sure to upload a project background on each of the workstations that matches the main screen so that participants can code their creation in context.
Once your workstation is set up, use the Upload a Sprite option in the Choose Sprite area to add your image(s) to the workspace.
Creating a collaborative project that features all different sprites created by visitors also takes some logistical gymnastics: to start, you have to be signed in to the same Scratch account on each of the coding workstations and the master computer hooked up to the projector. We've been using the Backpack tool to drag and drop sprites into and out of projects on the workstations to the master computer:
Alternatively, Deanna recently spun up a Microworld that allows for a curated set of blocks but requires a different workflow for sprite sharing: you can (1) download sprites, (2) upload them to a Google Drive folder, and then (3) download them to the master computer before (4) uploading them into the project that's being projected.
Open Questions
The setup continues to evolve in conversation with projects by the Scratch team and TeamLab, and we're interested in how to make the setup more tinkerable, interactive, collaborative, and physical. In particular, we're mulling over the following open questions:
How can we encourage more of a back-and-forth between the digital and the physical? How can we better support visitors in adding their sprite to the project, watching it in context on the big screen, and then going back to further iterate?
What kinds of Scratch project backgrounds best invite interaction, iteration, and creative coding?
How might we meaningfully introduce Micro:bit or video sensing?
How can we incorporate lightplay and environmental elements into a projection play setup?
This work was supported by a grant from Science Sandbox, an initiative of the Simons Foundation