Support for Top-Level Global Mode

Increasing access

Parity with an existing feature in Processing. Also improves ease of use in ESM sketches especially.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

Ideally p5 could support top-level global mode. createCanvas would be available globally and could be used to start p5 in top level global mode and create a canvas.

createCanvas(200, 200);
rect(20, 20, 50, 50);

There's a precedent for this in Processing. The Processing editor supports running sketches like this without a setup or draw method.

size(200, 200);
rect(20, 20, 50, 50);

There's also a broader precedent in the many programming languages that used to require some kind of main method, that now can run top-level code.

EDIT:

This would be especially useful in the context of p5 in an ESM (issue #7670) with top-level await, so there'd be no need for an async setup function.

await Canvas(400, 400);

let logo = await loadImage('logo.avif');

p5.draw = function () {
  background(logo);
};

It's also just nice in general to be able to declare and define variables on the file level.

await Canvas(400, 400);

let r = random(100);

p5.draw = function () {
  background(r);
};

Start by tracing how createCanvas, setup, and draw currently define p5's execution model, then review the ESM and top-level-await context referenced in issue #7670. Done should allow the shown sketches to run without setup or draw while preserving the existing global-mode behavior.