Support for Top-Level Global Mode

[quinton-ashley]

trafficstars

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
• [x] 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.

This would be especially useful in the context of improving usability of p5 in an ESM (issue #7670), because it'd make it easy to define functions like draw but also not have to prefix everything with the instance variable.

let p = new p5();

createCanvas(200, 200);

p.draw = () => {
 rect(mouseX, mouseY, 100, 100);
};

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

https://github.com/q5js/q5.js/wiki/Top%E2%80%90Level-Global-Mode