Writing a sketch · 2 of 7

A p5 sketch

One sketch.js in global mode. p5 itself is supplied.

sketch.js, the shape this page describes · moved by a pulse here; in Sialk, by the room

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.