🚧 Major update underway: we're migrating to Vite + modular architecture. Follow progress in the vite branch.

🧪 What is p5Catalyst?

p5Catalyst is a GUI framework that wraps your p5.js sketches into polished, interactive web apps—ready for real-time control, asset exporting and daily use. Whether you're building generative art, data visualizations, or dynamic brand systems, p5Catalyst gives your sketches the structure and tooling they need to go beyond the sketchpad—into production, publication, or public play.

Initiated by creative agency Multitude, p5Catalyst grew out of real-world branding needs, and is now shared as a creative coding tool for everyone.

🛠️ Features

• Lives in the browser: no install required, shareable and hackable by default.
• Built-in GUI system: add sliders, dropdowns, toggles, and color pickers with minimal setup.
• Flexible and modular: built in vanilla JavaScript, extend it however you like.
• Export support: save outputs as PNG, SVG, or video (MP4, WEBM) via ffmpeg.wasm.
• Dark mode and theming: UI respects system theme and is easy to style.
• File I/O: save/load user settings, support for localStorage.
• Change history: use CTRL+Z and CTRL+SHIFT+Z to undo and redo changes.
• Internationalization: plug in translations for global-ready tools.
• Sketch integration: integrate a finished p5 sketch easily.

👀 Demo

See it in action!

🔁 Why open-source?

At Multitude, we believe branding should be fluid, flexible, and future-proof. Instead of static design systems, we embrace generative branding, where design systems evolve and adapt in real-time.

We originally started building p5Catalyst to give our clients control over the generative brand systems we designed. Now we're sharing it to help other creative coders do the same, and more!

Let's build the future of generative design!

📥 Installation & setup

To run p5Catalyst locally, follow these steps.

1. Clone the repository

sh git clone https://github.com/multitude-amsterdam/p5Catalyst.git YOUR_NEW_APP

or alternatively, download the code as a ZIP file by clicking the "<> Code" button at the top-right of this page. ↗️

2. Start a local development server

The /app directory holds the runnable website. You need to start a local web server (a "dev server") in this folder to use p5 and the other libraries. Opening the index.html file will not work on its own. Here are some options to do this in a command prompt window:

First, open a command prompt and navigate to the /app directory.

sh cd /Users/You/Your Github Folder/YOUR_NEW_APP/app

If you have Python installed:

sh python3 -m http.server 8000

If you have Node.js installed:

sh npx http-server -p 8000

If you PHP installed:

sh php -S localhost:8000

The app will be up and running at http://localhost:8000.

More on running local web servers by Mozilla.

3. Paste your p5 sketch in generator.js

The Generator class in generator.js is designed to correspond with the setup() and draw() functions in p5. You can copy/paste your sketches in there. You won't need to use createCanvas(), as there is a canvas object available already. There is also some structure in place to help you get started with using shaders as well.

```javascript class Generator { static name = 'Project Name'; ...

setup() {
    // your sketch's setup() here
    ...
}

draw() {
    // your sketch's draw() here
    ...
}

...

} ```

4. Create GUI elements in create-gui.js

There is a custom set of GUI controller classes that can be used, including sliders, text boxes, buttons, colour selectors, dropdowns and a toggle. You can add custom callback functions to handle the data from these DOM elements.

javascript ... gui.addController(new ColourBoxes( gui, 'colourBoxesBirdCol', 'Bird flock colour', generator.birdPalette, 0, (controller, value) => { generator.birdCol = value; } ), doAddToRandomizerAs=true); gui.addController(new XYSlider( gui, 'xySliderBirdTarget', 'Bird flock target', 0, width, width / 2, 1, 0, height, height / 2, 1, (controller, value) => { generator.imagePosition.set(value.x, value.y); } ), doAddToRandomizerAs=true); ...

Note: adding the doAddToRandomizerAs argument will add a die button (🎲) to the controller. It indicates whether the controller will be randomized when the Randomize button is clicked. Adding it as false will also add it to the controller, but it will load as the 'off' state. See how this works in the demo. This is practical for users to take control of the randomization of the sketch.

5. Customize the styling in style.css

Most of the styling variables can be found under :root, like colours, sizes and font settings.

css :root { ... --gui-base-col: #7685F7; --gui-hover-col: #BFFB50; ... }

[!TIP] For more insight into the relationship between script files, visit the documentation of the code architecture.

6. Plop it on a server!

That's it! You can now host the application 😶‍🌫️ and send it to your client or users for testing. Just copy the contents of the /app folder into the root of your server environment using FTP or otherwise.

📄 Documentation

You can find more information on the specifics of the codebase in the online documentation.

🌍 Sharing your work

We kindly ask: if you make something cool with p5Catalyst, please share it! Whether it's a wild new web app, an adaptation for a client, or just a fun remix, we'd love to see it 👀!

• Create a new thread in the Show and tell section of the Discussions
• Share screenshots or videos of your creations
• Mention us if you publish your forked project online

Keep in mind the Community Code of Conduct for this project.

🤝 Contributing

We encourage you to make modifications, improvements, or entirely new generators, it's easier than you think! For more information on contributing, continue reading here.

For security concerns, please review the security policy.

❤️‍🔥 Credits

Developed using p5.js, p5.js-svg, toxiclibs.js, and ffmpeg.wasm.

🧾 License

This project is licensed under the MIT License: free to use and modify.

📢 Stay Updated

Follow the development and join the discussion:

• GitHub Discussions: join the conversation
• Multitude's Instagram: @multitudecreativeagency
• Creative Coding Amsterdam: join a Meetup and ask Aidan about this project in person 🤔🤔 or find the Discord server here 👋