Welcome to Paper Playground: Your Interactive Design Space

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 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 development stack used by PhET Interactive Simulations as a robust 2D scene creator and manager. The project focuses on enabling quick prototyping of web projects based in JavaScript. In creating Paper Playground, we are developing with a particular emphasis on easy addition of multimodal display such as audio features (like sounds and sonifications), speech description (both TTS engines and screen reader descriptions), 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.

Getting Started & Installation

See the Paper Playground website for all the details on how to get started at https://phetsims.github.io/paper-land/.

Community

🌍 Join the Community 🌍{ .md-button .md-button--primary }

Overview of Paper Playground Components

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

• Program Creation Systems: Design and iterate on your programs with ease using abstracted program components in Creator.
• 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, with outputs displayed in real-time.
• Collaboration: Shared databases allow for 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. Interactive Display: Shows the results of your programs, which can be interacted with virtually or projected.
3. Creator: A low-code interface where you design your programs, step by step.

Getting Started with Your Design

Check out the Getting Started section in the Navigation bar! We recommend reading the Hardware Recommendations first. In general, you will:

1. Set Up Your Workspace: Open your interfaces. The Interactive Display can be set up on a separate monitor or projector, showing dot-encoded papers.
2. Calibrate the Camera: Attach a webcam and adjust it according to your lighting conditions to ensure your dot-encoded papers are detected accurately.
3. Design with Creator: Build your programs component by component, aligning with your creative vision. Each program gets a unique identity and sequence of dots for easy detection and interaction.

Bringing Paper Programs to Life. After designing, print your paper programs. These can be detected by the Camera once in view, executing the associated code. Interact with your creations on the Interactive Display, manipulating papers to trigger events that dynamically update program components and outputs.

Dynamic and Collaborative Design. Paper Playground supports an iterative design process. Make real-time updates in the Creator interface, see changes immediately on the Interactive Display, and collaborate with co-designers to refine your projects. This cycle encourages continuous creativity and improvement.

Enhancements for Inclusivity and Interaction. Leveraging the open-source SceneryStack libraries, Paper Playground supports multimodal features like sound, pan and zoom, and alternative input. This makes your projects more accessible and interactive, enhancing the creative experience.

Flexible and Creative Setup Options. Your paper programs can be any size, cut, folded, or decorated, allowing for diverse and flexible setup configurations. Whether you’re working with a desktop setup or projecting onto a wall, Paper Playground adapts to your creative environment.

Paper Playground invites you to explore the boundaries of interactive design and collaboration. Whether you’re crafting educational tools, art installations, or experimental projects, this platform offers a unique space for your creativity to flourish. Start designing, collaborating, and seeing your ideas come alive in an interactive, dynamic environment.

License

This software is covered under the MIT License.