-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
revision and creator first content complete
- Loading branch information
1 parent
5abbae8
commit 72acfa6
Showing
84 changed files
with
414 additions
and
263 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,70 +1,40 @@ | ||
# Paper Playground | ||
# Paper Playground Docs branch | ||
|
||
[![Documentation](https://img.shields.io/badge/documentation-website-yellow?logo=markdown&logoColor=yellow)](https://phetsims.github.io/paper-land/) | ||
[![Matrix Server](https://img.shields.io/badge/matrix-chat-green?logo=matrix&logoColor=green)](https://matrix.to/#/#interactive-paper-programming:matrix.org) | ||
[![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)](./LICENSE) | ||
This is a branch of Paper Playground dedicated to the MkDocs documentation website. | ||
|
||
![logo](docs/assets/hand-with-dots.png) | ||
## MkDocs | ||
|
||
## Interactive Play Meets Multimodal Web Experience | ||
Our documentation uses Mkdocs and is statically deployed with a pre-configured plugin (mkdocs-gh-deploy) for Mkdocs to GitHub Pages. | ||
|
||
Paper Playground is an open-source project for collaboratively creating multimodal web experiences by means of mapping JavaScript* code to real pieces of paper and manipulating the code in your **physical space**. | ||
The built website is created on the `gh-pages` branch. | ||
|
||
(*written directly or using a no/low-code component-style interface!) | ||
mkdocs.yml is a required file and sets up the navigation tree and theme for the website. | ||
|
||
**We aim to support a community interested in bringing physical interaction as a means to collaboratively solve problems in codesigning virtual technology**. | ||
## MkDocs Theme | ||
This build makes heavy use of the MkDocs theme, [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/setup/). Use the Setup and Reference pages to add customized content. | ||
|
||
Paper Playground is based on the [Paper Programs](https://paperprograms.org) open-source project and has been extended to incorporate the library stack used by [PhET Interactive Simulations](https://www.github.com/phetsims/community) as a convenient 2D scene creator and manager. The project focuses on enabling quick prototyping of web projects, with a particular emphasis on easy addition of audio features (like sounds and sonifications), speech description (both TTS engines and screen reader-like descriptions), and other non-visual features that are often difficult to design and develop alongside visual elements in these projects. | ||
## How to Make Changes | ||
|
||
The ideas behind Paper Playground are simple, but the possibilities are infinite. | ||
**Commiting to the docs branch will kick off GitHub Pages to run a deploy Action, automatically build, and push to the gh-pages branch. (see [workflow](./.github/workflows/page-deploy.yml))** | ||
|
||
1. Create programs, as many as you would like, to represent your project. | ||
2. Map data variables, parameters, and functions to paper position, size, shape, rotation, proximity, and use optional marker positions for more functionality. | ||
3. Print out the dot-covered papers that belong to those programs. | ||
4. Put those *paper programs* in front of a webcam. | ||
5. Watch and interact with the output of that code in your browser. | ||
6. Move programs around and trigger the mappings between your papers position in space and your code! | ||
7. Change your program code, make new papers, and keep the creativity going! | ||
### GitHub Website | ||
|
||
![Paper Playground setup detecting paper programs that create a moon lander and control vertical thrust](/docs/assets/full-interface.png) | ||
Make changes directly through GitHub with direct edits or pull requests. | ||
|
||
## Installation | ||
(See [Contributing Guidelines](./docs/CONTRIBUTING.md)) | ||
|
||
See the [Paper Playground Docs website](https://phetsims.github.io/paper-land/setup/install/) for the most up to date installation instructions. | ||
### Local Machine | ||
To edit (and optionally deploy) to the documentation website from a local machine (same steps GitHub Actions does): | ||
- Install Python (3.11 last supported at deploy) | ||
- Install module requirements using `pip install`. Install using the requirements.txt file in this directory. | ||
- Bare minimum as of 2/21/2024: | ||
- `pip install mkdocs-material=="9.5" mkdocs-minify-extension` | ||
- run `mkdocs serve` to locally host the directory and preview changes in real-time in your browser. | ||
- Commit and push changes to `docs` branch | ||
- `git add .` | ||
- `git commit -m "your commit message"` | ||
- `git push origin docs` | ||
- If deploying from your local machine: run `mkdocs gh-deploy` and it will automatically build and push to the gh-pages branch and kick off GitHub Pages to run a deploy Action. | ||
|
||
![Paper Playground setup detecting paper programs that create a moon lander and control vertical position](/www/web-assets/lunar-lander-craft.gif) | ||
|
||
## What is coming? | ||
|
||
Our team is focused on a few large initiatives for integrating other projects into Paper Playground and for making it more friendly for non-technical, non-JavaScript users and designers. | ||
|
||
⭐ If these projects interest you, please [join our community](https://phetsims.github.io/paper-land/community/) and take part in the development and discussion! | ||
|
||
1. :unlock: Creator Interface: Abstracting the JavaScript code through means of a no/low-code component style interface that assembles the data components of your programs and highlights the relationships between your programs (e.g., At a quick glance, what information is needed and passed between programs?). **Check out our progress by opening the Creator page in the tool!** | ||
2. :robot: AI Support: Using LLMs to support a user answer the question: "How do I turn my idea for a multimodal interactive into data variables, functions, and entire programs?". **We are working toward this goal by adding an optional AI assistant inside the Creator page to help generate custom JavaScript code for more complex functions!** | ||
3. :outbox_tray: Easier API integration for paper programs to control or output to other browser displays (besides our [scenery](https://github.com/phetsims/scenery)-focused Board and the legacy canvas-focused Projector), as well as new inputs such as microcontroller integration via Bluetooth and WebSockets. See our [example with the Weavly educational coding project](https://youtu.be/eZo0asFXJz4?si=xiexw7O04gPZW_Sc)! | ||
|
||
However, there are **many other areas** that the project can be expanded (see Community below for Contributing guidelines and suggestions)! | ||
|
||
## :earth_asia::earth_americas::earth_africa: [Join our Community!](https://phetsims.github.io/paper-land/community/) :earth_asia::earth_americas::earth_africa: | ||
|
||
## :clipboard: Roadmap | ||
|
||
### Docs | ||
:books: Updated setup and tutorial! | ||
|
||
### Tool | ||
:page_with_curl: More examples in the hosted database highlighting the power of multimodal design! | ||
|
||
:computer: A UI for creating basic Papers without deep JavaScript knowledge! | ||
|
||
:robot: Investigating use of LLMs to help users go from ideas to your suite of paper programs! | ||
|
||
## License | ||
|
||
This software is licensed under the MIT license. For more information, see the [LICENSE](https://github.com/phetsims/paper-land/blob/main/LICENSE) file. | ||
|
||
## Acknowledgments | ||
|
||
This tool was adapted from [Paper Programs](https://paperprograms.org/) by JP Posma, which was inspired by the work at [Dynamicland](https://dynamicland.org). |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.