Red-Green Playground

A physics-based simulation playground for creating and visualizing stimuli with red and green sensors.

This site is not ready yet.

Build instructions

This site is not meant for development from others, but in case anybody wants a local build of the red-green playground, here are the instructions.

Before you begin, ensure you have the following installed:

• Python 3.11 or later
• uv (Python package manager) - install from astral.sh/uv
• Git
• Node.js v24.x (Active LTS) and npm (npm comes bundled with Node.js)
• FFmpeg (optional, for MP4 video conversion) - install from ffmpeg.org

1. Clone the Repository

git clone git@github.com:probcomp/red_green_playground.git
cd red_green_playground

2. Set Up Python Environment

uv sync

3. Install Node.js and npm

Install Node.js v24.x (Active LTS) from nodejs.org. npm comes bundled with Node.js.

Verify installation:

node --version  # Should be v24.x
npm --version

4. Set Up and Run the Frontend

1. Install dependencies:

npm install

2. Run the build

npm run build

The website should automatically open in your default browser at http://localhost:3000. If it doesn't, manually open your browser and navigate to that address.

5. Run the Backend

In a new terminal window (while keeping the frontend running):

1. Make sure you're in the project root directory.

2. Start the Flask server using uv:

uv run python red_green_playground.py

The backend will run on http://localhost:5001.

6. Asset Storage

Static assets (images, videos, plots) are stored on AWS S3, not in the repository. The application loads assets from:

• https://redgreenplayground.s3.us-east-2.amazonaws.com/site_static_assets/

The local assets/site_static_assets/ folder is excluded from Heroku deployments to reduce slug size. Only essential assets (favicon, robots.txt, logos) remain in the local assets/ folder.

📖 For detailed information about the asset structure, file naming conventions, and how to add new assets, see ASSETS_STRUCTURE.md.

7. Push to Heroku

When ready, push to Heroku (only for authenticated user --> Arijit)

Note: FFmpeg is automatically installed on Heroku via the heroku-buildpack-activestorage-preview buildpack, which provides a minimal FFmpeg binary. This enables MP4 video conversion functionality.

git push heroku main

To verify FFmpeg is available after deployment:

heroku run ffmpeg -version

Note: The assets/site_static_assets/ folder is automatically excluded from Heroku deployments via .slugignore to keep the slug size under 500MB.