ECAL · Media & Interaction Design

PROCE55US

Prompt a PROCESSUS. Understand the code.

A creative-coding atelier: a notebook of steps where each cell pairs a natural-language prompt with the code a model writes for it — rendered live in a sandboxed preview.

Download for macOS Open in the browser View on GitHub →
The PROCE55US app: prompts and code cells on the left, live preview on the right

Made for teaching creative coding.

Students read a prompt, see the code it produces, tweak, regenerate — and watch the sketch evolve one step at a time.

Prompt-driven steps

Each cell is a written intention. The model generates the code; the preview runs it instantly. Edit the prompt, regenerate the code.

Editable code

The generated code isn't locked: students can read it, edit it directly in the cell, and rerun — or regenerate from the prompt.

Live preview

Cells replay in order inside a sandboxed page. No build step, no tooling — the result appears as soon as the code does.

Local-first AI

Works fully offline with LM Studio. Prefer the cloud? Switch to a free Google, Groq, Mistral or OpenRouter key in one click.

Four modes, one notebook.

Each PROCESSUS picks its environment. The preview, the instructions given to the model and the export adapt to it — with a ready-made example for each.

JavaScript default

Canvas 2D drawing, pixels and animation loops, in plain JavaScript.

p5.js

Processing's spirit for the web: setup(), draw(), shapes and interaction.

three.js

3D scenes in WebGL: meshes, lights, camera and orbit controls.

DOM

A whole web page: HTML elements, CSS and interactions — not just a canvas.

How it works.

From a plain-language idea to a standalone interactive sketch, in four steps.

1
✦ “Draw reactive particles…”

Describe

Describe what the next step should do in plain language: shapes, motion, camera, or interaction.

2
function draw() { … }

Generate

The model writes clear, commented code for the chosen mode, taking previous cells into account.

3
Live preview · 60 fps

Run & iterate

Cells replay in order in the live preview. Tweak the prompt or edit the code directly.

4
sketch.html ⇄ Drag & drop

Export & edit

Download the sketch as a standalone HTML file, and drag & drop it into the editor anytime to continue.

PROCE55US icon

Download PROCE55US.

Download the .dmg Open the web editor

macOS 12 or later · Apple Silicon & Intel · proce55us-universal.dmg

Install via Terminal
One-line install — downloads, installs & opens the app:
curl -fsSL https://proce55us.com/install | sh
Homebrew
brew install --cask gaelhugo/proce55us/proce55us
After dragging the .dmg to Applications — first launch:
xattr -cr /Applications/proce55us.app

see the repository.

Set it up in two minutes.

PROCE55US needs a language model. Pick local — private and free — or a cloud key.

Local — LM Studio

recommended
  1. Download LM Studio — free, for any Mac.
  2. In its 🔍 Search tab, pick a coding model — Qwen2.5-Coder-7B is a good start — and click Download.
  3. Open the Developer tab and press Start Server (port 1234). For the web editor, also turn on Enable CORS in its server settings — and allow “Local network” access in the browser's site settings if it asks.
  4. That's it — PROCE55US uses LM Studio by default.

Cloud — your API key

free tiers
  1. Get a free API key from Google AI Studio, Groq, Mistral or OpenRouter.
  2. In PROCE55US, click the ⚙ gear in the toolbar.
  3. Choose the provider, paste the key — done.