One folder, one sketch.js that declares setup() or draw().
my-sketch/
sketch.js
That is global mode, the shape the p5 web editor produces, and the shape nearly
every p5 sketch on the internet is in. Sialk Stage supplies p5 itself, so your
folder needs no library, no index.html, and no network connection.
The smallest one that works
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0);
circle(width / 2, height / 2, 100 + sialk.audio.level * 400);
}
Drag the folder on. That is the whole process.
Making it react
Everything is on window.sialk - the audio contract:
function draw() {
background(0, 0, 0, 40);
const r = 100 + sialk.audio.bass * 300;
stroke(255, 200, 120);
noFill();
circle(width / 2, height / 2, r);
// The spectrum, as 64 bars
const bins = sialk.audio.spectrum;
for (let i = 0; i < bins.length; i++) {
const h = bins[i] * height * 0.66;
rect((i / bins.length) * width, height - h, width / bins.length - 2, h);
}
}
Guard for the contract if you also want the sketch to run in a plain browser:
const audio = window.sialk?.audio ?? { level: 0, bass: 0, spectrum: new Float32Array(64) };
More than one file
A project the p5 editor exports has an index.html that loads each of its
scripts. Sialk Stage reads that page for one thing, which of the folder's own files
it loads and in what order, and loads them the same way. p5 itself is always
the copy Sialk Stage supplies, so a libraries/p5.min.js in the folder is left
alone; an addon beside it, such as p5.sound.min.js, is yours and loads as
asked. Images in assets/ load by the same relative paths as in the editor.
Canvas size
createCanvas(windowWidth, windowHeight) is the right call - Sialk Stage sizes the
surface and your sketch fills it.
A canvas smaller than the layer is transformed to fit rather than resized,
so your sketch keeps its own coordinate system and its own idea of width and
height. Nothing you drew moves relative to anything else you drew.
Transparency
If you never call background(), the layer is transparent and whatever is
beneath it shows through. That is often what you want in a stack. If you want it
opaque, call background(0). See layers.
Cost
p5 does not care about resolution. The work is per-vertex and per-JavaScript statement, so four times the pixels are close to free, a 60,000-point cloud runs the same at 4K as at 720p.
What it cares about is count. A quarter of a million points is slow at every resolution. If your sketch is struggling, the number to reduce is the number of things, not the size of the frame.
That is the exact opposite of GLSL, and knowing which one you are writing is most of the answer to "will this run".
3D
createCanvas(w, h, WEBGL) works, and behaves as p5 does everywhere else.