Software Performing Art Gallery

The aim of this web site is to show artworks created by students in the algorithmic art course at Universite de Montreal.

Add artworks (p5.js)

The gallery supports p5.js sketches written in instance mode:

var sketch = function (p) {
  // code
};

All p5.js functions must be called as methods of the instance (for example, p.createCanvas() and p.background()).

In setup, initialize the canvas like this:

let container = document.getElementById("artwork-container");
width = container.offsetWidth;
height = container.offsetHeight;
const canvas = p.createCanvas(width, height);
canvas.parent("artwork-container");

Add a p5.js artwork to art/artworks.json using this format:

{
  "name": "artwork name",
  "ref": "artwork reference",
  "artist": "artist name",
  "year": "year of creation",
  "type": "Genuary / Algorithm Based / Data Based",
  "repo": "link to the github repo",
  "data": "link to the dataset (only if type == Data Based)",
  "src": "file path to the p5 sketch"
}

Add artworks (Rust via WebAssembly)

Rust artworks can run directly in the browser using WebAssembly (Wasm). The gallery now supports a Rust Wasm runtime alongside p5.js.

1. Prerequisites

You need a local Rust toolchain and wasm-pack:

rustup --version
cargo --version
wasm-pack --version

If wasm-pack is missing, install it:

cargo install wasm-pack

2. Create a Rust artwork crate

Create a new library crate under art/rust/<your-artwork-name>.

A working template is already provided here:

• art/rust/template/Cargo.toml
• art/rust/template/src/lib.rs

You can copy the template folder and rename it.

3. Use this Rust interface

The gallery expects a Wasm-exported function named render:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn render(width: u32, height: u32, time_seconds: f32) -> Vec<u8> {
    // Return an RGBA buffer of length width * height * 4
    vec![0; (width * height * 4) as usize]
}

Important requirements:

• The function must be exported with #[wasm_bindgen].
• It must return a flat RGBA buffer.
• The buffer length must be exactly width * height * 4.

4. Build to WebAssembly

From the crate folder (for example, art/rust/my_artwork):

wasm-pack build --target web --out-dir pkg

This should produce:

• art/rust/my_artwork/pkg/my_artwork.js
• art/rust/my_artwork/pkg/my_artwork_bg.wasm

5. Register the Rust artwork in artworks.json

Add a Rust artwork entry to art/artworks.json:

{
  "name": "Rust Waves",
  "ref": "rust_waves",
  "artist": "Your Name",
  "year": "2026",
  "type": "Algorithm Based",
  "repo": "https://github.com/your/repo",
  "src": "../art/rust/rust_waves/pkg/rust_waves.js",
  "codeSrc": "../art/rust/rust_waves/src/lib.rs",
  "runtime": "rust-wasm",
  "module": "../art/rust/rust_waves/pkg/rust_waves.js",
  "wasm": "../art/rust/rust_waves/pkg/rust_waves_bg.wasm",
  "exportName": "render"
}

Field notes:

• runtime: "rust-wasm" switches the loader to the Rust Wasm runtime.
• module must point to the JS wrapper generated by wasm-pack.
• wasm must point to the .wasm file generated by wasm-pack.
• codeSrc controls what is shown when the user clicks the Code button.
• src is kept for compatibility and should match module.
• exportName is optional. If omitted, the loader uses render.

6. Serve over HTTP

Wasm modules will not load correctly from file:// URLs. Use a local server.

Add sound artwork

If the artwork requires a button to be run due to the presence of sound, it must be added to the cartel in the same way as the artwork Glass (art/js/2025/algo/glass-bw.js).

To add the button to the cartel, add this line in the artwork:

startButton.parent("cartel");

Add a paper to bibliography

Add a paper to pages/biblio/biblio.json using this format:

{
  "name": "name of paper",
  "year": "year of publication",
  "authors": "authors names",
  "link": "link to the paper"
}

Add a moment to art history

Add a moment to pages/art-history/art-history.json using this format:

{
  "date": "date",
  "srcColor": "path to the colored image",
  "srcBW": "path to the black & white image",
  "page": "./moment.html?id=name-of-the-page",
  "text": "text to show on the page"
}