home page and walkthrough updates, media updates

docs/index.md

@@ -5,28 +5,50 @@
 [![Youtube Channel](https://img.shields.io/badge/youtube-channel-red?logo=youtube&logoColor=red)](https://www.youtube.com/@PaperPlaygroundCommunity/)
 [![License](https://img.shields.io/github/license/phetsims/paper-land?color=blue)](https://github.com/phetsims/paper-land/blob/main/LICENSE)
 
+<figure markdown>
+  ![Paper Playground interface](assets/card-full-interface.png)
+</figure>
+
 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.
+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.
 
 [Get Started](./setup/install.md){ .md-button .md-button--primary }
+---
+
+Paper Playground is based on the [Paper Programs](https://paperprograms.org) open-source project and has been extended to incorporate [SceneryStack](https://scenerystack.org/), the web development stack used by [PhET Interactive Simulations](https://phet.colorado.edu) as a robust 2D scene renderer and support for multimodal features.
 
-Paper Playground is based on the [Paper Programs](https://paperprograms.org) open-source project and has been extended to incorporate [SceneryStack](https://github.com/scenerystack), the development stack used by [PhET Interactive Simulations](https://phet.colorado.edu) as a robust 2D scene renderer and support for multimodal features. 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](./projects/codesign.md).
+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](./projects/codesign.md).
+
+## Paper Playground Now Supports Micro:bit and Other Microcontrollers
+
+<figure markdown>
+  ![Paper Playground laundry machine using microcontroller and paper programs](assets/paperlandsudsoriginal.gif)
+</figure>
+
+Check out the [Microcontroller Integration](./projects/microcontroller.md) 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.
 
 [🌍 Join the Community 🌍](community.md){ .md-button .md-button--primary }
+---
+
+---
 
-### Overview of Paper Playground Components
+## 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*.
+- **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.
 
 <figure markdown>
-  ![(Left) Minimal configuration using Creator editor, detected wallet-sized papers, and displaying code output to an up-turned monitor. (Right) Same programs as above using letter-sized programs and visuals displayed using a mini-projector.](assets/configs-efh-horizontal.png)
-  <figcaption>Flexible configurations for detecting paper programs and interacting with your code!</figcaption>
+  ![(Left) Minimal configuration using Creator editor, detected wallet-sized papers, and displaying code output to an up-turned monitor. (Right) Same programs as above using letter-sized programs and visuals displayed using a mini-projector.](assets/configs-card.png)
+  <figcaption>Flexible configurations! A. Second monitor and B. Projector configurations. Primary display at (a) and (f). Webcam positioned at (b) and (e). Second monitor at (c). Projector mounted at (d). A projection surface (a curtain in this case) at (g).</figcaption>
 </figure>
 
 You’ll interact with Paper Playground through three main interfaces:
@@ -35,9 +57,12 @@ You’ll interact with Paper Playground through three main interfaces:
 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.
 
+---
+
 ### Setup and Interface Tutorial
 
 [Get Started](./setup/install.md){ .md-button .md-button--primary }
+---
 
 <figure markdown>
   ![Paper Playground setup detecting paper programs that create a submarine and control vertical position](assets/lunar-lander-craft.gif)

docs/media-gallery.md

@@ -29,3 +29,11 @@
 ## Pictures
 
 ![Submarine controlled by paper movement](assets/lunar-lander-craft.gif)
+
+![alt text](assets/solar-system-display-camera.png)
+
+![alt text](assets/scale_paper.jpg)
+
+![alt text](assets/program-cards-with-gems.jpg)
+
+![alt text](assets/monitor-setup-tcc.jpg)

docs/projects/codesign.md

@@ -21,6 +21,8 @@ A goal of Paper Playground is to explore the capabilities of a tool that can hel
 
 We know that collaboration in the real world is best supported when users can make use of the space around them and use their bodies to gesture and enact their ideas. Codesign practices often make use of paper or craft lo-fi prototyping at the initial stages of an idea. But, as previously emphasized, **sound and speech design should begin as early as possible!** So, why not make it easy to augment lo-fi prototypes with those auditory (and more!) features that are afforded easily by virtual interfaces?
 
+![Lo-fi prototyping of card games using Paper Playground program papers.](../assets/program-cards-with-gems.jpg)
+
 ## Follow our research
 
 Follow our research by checking out our [Open Science Framework repository](https://osf.io/6ad5g/)

docs/projects/craft.md

@@ -1,7 +1,11 @@
 # Mixing Paper Crafting with Paper Playground
 
+![Using sliding papers to show and hide a hot air balloon image](../assets/slidingprogs.gif)
+
 Paper Playground provides a novel way to integrate craft with STEM exploration. The paper programs can be incorporated into paper sculpture — or other craft-based objects — enabling students to personalize their learning experiences. In addition to building paper controllers (such as the RGB sliders pictured above), students might also create an entire scene or narrative around STEM concepts. This type of tangible interface links the playful affordances of paper with computational elements.
 
+[CU Craft Tech Paper Playground page](https://cucraftlab.org/paper-playground/){ .md-button .md-button--primary }
+
 ![RGB sliders using markers on one paper program](../assets/rgb-sliders.png)
 
 Learn more at the [CU Craft Tech Paper Playground page](https://cucraftlab.org/paper-playground/).

docs/projects/microcontroller.md

@@ -1,5 +1,9 @@
 # Microcontroller Integration with Paper Playground over Bluetooth
 
+<figure markdown>
+  ![alt text](../assets/led.gif)
+</figure>
+
 ## Paper meets circuits
 
 You can now communicate with microcontrollers over bluetooth! This expands the already near infinite capabilities of Paper Playground to enhance the tangible possibilities.
@@ -19,10 +23,24 @@ You will find demo projects using the micro:bit installed by default in Paper Pl
 
 ## Walkthroughs
 
-1. For a complete walkthrough using the micro:bit microcontroller, see the published [Instructable](<https://www.instructables.com/Microbit-and-Paper-Playground-Integration-for-Enha/>) or [Hackster.io project](https://www.hackster.io/brfi7385/micro-bit-and-paper-playground-tangible-virtual-interfaces-184685).
+For a complete walkthrough using the micro:bit microcontroller, check out this [Instructable](https://www.instructables.com/Microbit-and-Paper-Playground-Integration-for-Enha/) or this [Hackster.io project](https://www.hackster.io/brfi7385/micro-bit-and-paper-playground-tangible-virtual-interfaces-184685).
+
+  [Simple Micro:bit Instructable](<https://www.instructables.com/Microbit-and-Paper-Playground-Integration-for-Enha/>){ .md-button .md-button--secondary }
+
+  [Hackster.io project](https://www.hackster.io/brfi7385/micro-bit-and-paper-playground-tangible-virtual-interfaces-184685){ .md-button .md-button--secondary }
+
+This [Instructable](https://www.instructables.com/Random-Servo-Position-With-Microbit-and-Paper-Play/) will show you how to create a random spinner dial using a 180-servo, micro:bit, and a Paper Playground program. [This particular example does not require a webcam and printer].
+
+  [Micro:bit Servo Instructable](https://www.instructables.com/Random-Servo-Position-With-Microbit-and-Paper-Play/){ .md-button .md-button--secondary }
+
+Create a musical instrument using a micro:bit and Paper Playground. This [Instructable](https://www.instructables.com/Microbit-Note-Sequencer-With-Paper-Playground/) will show you how to create a note sequencer using a micro:bit and Paper Playground.
+
+  [Micro:bit Note Sequencer Instructable](https://www.instructables.com/Microbit-Note-Sequencer-With-Paper-Playground/){ .md-button .md-button--secondary }
 
-2. This [Instructable](https://www.instructables.com/Random-Servo-Position-With-Microbit-and-Paper-Play/) will show you how to create a random spinner dial using a 180-servo, micro:bit, and a Paper Playground program. Paper Playground is an open-source system that enables you to design tangible, multimodal experiences using your computer's web browser, a webcam, and printed pieces of paper. [This particular example does not require a webcam and printer].
+<figure markdown>
+  ![alt text](../assets/servo.gif)
+</figure>
 
 ## Implementation Notes and Tips
 
-- If you're using a BBC micro:bit, then make sure to look at its [Bluetooth Specifications](https://lancaster-university.github.io/microbit-docs/resources/bluetooth/bluetooth_profile.html) to understand the structure of the data you are trying to send from or to Paper Playground.
+- If you're using a BBC micro:bit, then make sure to look at its [Bluetooth Specifications](https://lancaster-university.github.io/microbit-docs/resources/bluetooth/bluetooth_profile.html) to understand the structure of the data you are trying to send from or to Paper Playground.

docs/setup/creator.md

@@ -1,10 +1,10 @@
 # Creator Tutorial
 
-!!! warning "In Development"
+## What is *Creator*?
 
-      The *Creator* interface is in development! The current feature set is evolving and documentation may be out of date. Follow the development in [GitHub](https://github.com/phetsims/paper-land) or our [community channels](../community.md)!
+!!! warning inline end "In Development"
 
-## What is *Creator*?
+      The *Creator* interface is in development! The current feature set is evolving and documentation may be out of date. Follow the development in [GitHub](https://github.com/phetsims/paper-land) or our [community channels](../community.md)!
 
 *Creator* is where you will add code to your paper programs before printing and playing with them in the *Camera*! The primary vision of Creator is to bring the relationships between the components of your project to the forefront, with significantly less code than using pure JavaScript. The goal is to let you focus on the most important pieces and how they connect to your chosen interactions and outputs (sounds, speech, images, etc). Making programs in Creator is organized around the Model-View-Controller (MVC) software design pattern.
 
@@ -775,3 +775,5 @@ Some templates are already included in Paper Playground. However, if you'd like
 ## More Walkthroughs
 
 [Show me more walkthroughs](../use/walkthroughs/walkthroughs.md){ .md-button .md-button--primary }
+
+Find more demos and walkthroughs at <https://www.youtube.com/@PaperPlaygroundCommunity>

docs/setup/device-setup.md

@@ -139,6 +139,24 @@ Look under the Detection header in the sidebar of Camera.html and adjust the con
 - **Min Dot Separation (pixels):** The minimum numbers of pixels the algorithm expects to see dots. Lower values will help to detect smaller dots or farther away programs, at the cost of detecting more image features that may not be paper dots.
 - **Scale Factor:** Recommended to keep at 1. Higher values lower the effective resolution of your camera feed. If you need higher performance and dot detection is not a problem/you are using a very high resolution camera, this will speed up the algorithm significantly to get more performance.
 
+
+## Quick Start - Running Example Programs
+
+1. **Calibrate the Camera**: As described above. Go to [http://localhost:3000/camera](http://localhost:3000/camera.html) to monitor the camera view, ensuring it detects objects accurately. Calibrate and align the camera for color detection and marker detection.
+
+2. **Navigate to Creator**: Go to [http://localhost:3000/creator](http://localhost:3000/creator.html) to start working with example programs.
+
+3. **Suggested Start**: Select the example “cat-fetch” and click “Send to Playground” to launch it in the main interface.
+
+4. **Open Interactive Display & Canvas** To execute your code setup, open the Interactive Display ([http://localhost:3000/display.html](http://localhost:3000/display.html)) and Canvas ([http://localhost:3000/projector.html](http://localhost:3000/projector.html)).
+
+5. **Separate the Camera and Display windows**: Move the Camera interface and the Display interface to your secondary display (e.g., a projector or a second monitor). This will allow you to see the camera view and the program output side-by-side. You can hide Canvas.
+
+6. **Print and Place your Papers OR Preview Programs**: 
+   1. Print the papers for the "Cat," "Ball," and "Items" programs. Clicking the Printer icon will download an image for you which you can then print or copy by hand on a sheet of paper. Place the papers in the camera view and play around!
+   2. Alternatively, use the Preview Papers feature to simulate the papers. Use the 'eye' icon besides each program to execute the paper programs that script the "Cat," "Ball," and "Items". Move them around! Go back to Creator to make edits and repeat the process!
+
+
 ## Canvas Projector Setup
 
 If you're using the legacy *Canvas* (projector.html) page to send visual elements to the web canvas, rather than the *Interactive Display* (display.html), you'll follow these instructions instead: