junkpile

00 · Tauri v1 p5.js Single Window

A focused foundation for running a p5.js WebGL shader and its HTML controls inside one Tauri v1 WebView.

This folder intentionally retains its original repository name:

p5-tauri-single-template

The visible example number is 00 so it aligns with the complete Junkpile Tauri v1 Essentials sequence.

What this example teaches

• Hosting a p5.js sketch inside Tauri v1
• Attaching a p5 canvas to a specific HTML layout region
• Running a GLSL ES 1.00 fragment shader through createShader()
• Sending HTML slider values directly into a shared JavaScript object
• Uploading that state as shader uniforms every frame
• Resizing a WebGL canvas with its containing panel
• Calling one small Rust command from JavaScript to control the native window

Signal flow

HTML range / checkbox
        ↓
     params{}
        ↓
   p5 draw loop
        ↓
 shader.setUniform()
        ↓
 GLSL fragment shader
        ↓
 WebGL canvas in the same WebView

There is no WebSocket or inter-window message relay. Controls and rendering share one page and one JavaScript thread.

Run

npm install
npm run dev

npm run dev copies the pinned p5.js build from node_modules into src/vendor/ before Tauri launches. The application therefore does not depend on a CDN at runtime.

Production build

npm run build

On macOS, the generated bundles are placed under:

src-tauri/target/release/bundle/

Unsigned builds may trigger Gatekeeper on another Mac. Distribution outside local development generally requires Apple signing and notarization.

Controls

Section	Parameter	Purpose
Color	Hue shift	Rotates the shader palette
Color	Saturation	Moves from monochrome to vivid color
Color	Brightness	Multiplies final output brightness
Motion	Zoom	Scales shader coordinates
Motion	Speed	Advances the animation clock
Motion	Distortion	Strengthens domain warping
Pattern	Complexity	Changes the fBm octave count
Pattern	Symmetry	Changes rotational folding
Pattern	Glow	Brightens the center of the field
Switches	Invert	Inverts the final color
Switches	Pulse	Enables rhythmic brightness modulation
Switches	Rotate	Rotates the complete coordinate field

Keyboard shortcuts:

Key	Action
Space	Pause or resume animation
R	Restore defaults and reset time
F	Toggle native-window fullscreen

Project structure

p5-tauri-single-template/
├── README.md
├── MODERNIZATION-NOTES.md
├── package.json
├── scripts/
│   └── sync-p5.mjs
├── src/
│   ├── index.html
│   ├── sketch.js
│   ├── styles.css
│   └── vendor/
│       └── p5.min.js        generated after npm install
└── src-tauri/
    ├── Cargo.toml
    ├── tauri.conf.json
    └── src/main.rs

Add a new shader parameter

1. Add a range input and matching <output> in src/index.html.
2. Add its default to DEFAULT_PARAMS in src/sketch.js.
3. Add its ID to SLIDER_IDS.
4. Declare a matching uniform in FRAG_SHADER.
5. Upload the value in draw() with shaderProgram.setUniform().
6. Use the uniform in the shader.

This explicit path is intentionally visible. Later examples introduce multiple windows, IPC, media inputs, feedback buffers, recording, routing, and automation.

GLSL ES 1.00 note

WebGL 1 requires fixed compile-time loop bounds. The fbm() function loops to a fixed maximum of eight iterations and exits early using the float u_complexity uniform. This is a common WebGL 1 pattern.

Known limitations

• This example is deliberately single-window.
• It uses p5.js WebGL rather than native wgpu.
• pixelDensity(1) prioritizes predictable performance over retina-resolution rendering.
• Shader compile diagnostics are basic here; the dedicated shader playground examples provide a full mini terminal.

This site is open source. Improve this page.