Support for Top-Level Global Mode

[quinton-ashley]

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.

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