Paper Playground: Web Interactivity in the Real World¶

Paper Playground is an open-source project for collaboratively creating multimodal web experiences by means of mapping code to real pieces of paper and manipulating the code in your physical space. Everything runs on your machine and you can collaborate locally or using a hosting service to collaborate over projects with others in your shared space.

While Paper Playground can support many uses, our aim is to support a community interested in bringing physical interaction as a means to collaboratively solve problems in codesigning technology.

Paper Playground is based on the Paper Programs open-source project and has been extended to incorporate SceneryStack, the web development stack used by PhET Interactive Simulations as a robust 2D scene renderer and support for multimodal features.

Paper Playground is intended to enable quick prototyping of web projects based in JavaScript through physical, spatial movement of real pieces of paper. We are developing with a particular emphasis on simplifying adding multimodal display such as audio features (like sounds and sonifications), spoken description (via Text-To-Speech), and other non-visual features that are often difficult to design and develop alongside visual elements in complex web projects. Learn more on the Multimodal Codesign page.

Paper Playground Now Supports Micro:bit and Other Microcontrollers¶

Check out the Microcontroller Integration page to learn more about how you can communicate with microcontrollers over Bluetooth, expanding the already near infinite capabilities of Paper Playground to enhance the tangible possibilities. You can create a hybrid tangible interface using paper-based events (paper movement, paper size, markers, paper overlap, etc) from Paper Playground, while triggering actuators connected to your microcontroller. Or, vice versa... take in sensor signals from your microcontroller, pipe a message to Paper Playground, and trigger animations, sounds, speech, and anything else you can do on the web using Paper Playground!

Paper Playground is open to contribution of all forms, from code to documentation to design. We welcome you to join our community and help us build a tool that supports a wide range of users in creating interactive web experiences.

Overview of Paper Playground Components¶

Paper Playground is built around a few key components that work together seamlessly:

• Program Creation: Design and iterate on your programs with ease using abstracted program components in Creator with no or minimal JavaScript.
• Computer Vision: Our tool detects your dot-encoded paper programs using a webcam, merging the digital and physical realms.
• Execution and Display: See your code come to life on screen while you manipulate it with your hands, with outputs displayed in real-time.
• Collaboration: Shared databases enable synchronous and asynchronous collaboration, whether you’re working locally or online.

You’ll interact with Paper Playground through three main interfaces:

1. Camera: Detects your paper programs using an attached camera device.
2. Creator: A low-code interface where you design your programs, step by step.
3. Interactive Display: Shows the results of your programs, which can be interacted with virtually or projected.

License¶

This software is covered under the MIT License.