Description
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 createCanvas(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 createCanvas(400, 400);
let r = random(100);
p5.draw = function () {
background(r);
};