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

[ksen0]

Added this to a draft issue related to global mode documentation: p5.js 2.x 🌱🌳 (view) - draft because I am not yet sure what the scope of that issue should be. However, I recognize that this is not primarily a clarification/documentation issue; I think what would be most helpful is for other users (especially educators or people who recently learned p5.js) to weigh in. From other conversations, it seems to be that documenting of what's currently possible is higher priority than considering adding top-level global behavior, but this is also open for discussion.

[LalitNarayanYadav]

I strongly support adding top-level global mode to p5.js!

It would greatly improve usability for beginners, align p5.js more closely with Processing, and simplify writing ESM-compatible sketches.

Being able to call createCanvas() and draw shapes without needing a setup() function or manually managing instance variables would make learning and prototyping much easier, especially for educators and newcomers.