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.

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);
};

[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.

[quinton-ashley]

Thank you @LalitNarayanYadav for the support!

@ksen0 It's been a while since you requested comments on this and it seems that no one is against it. Could you give the green light on this and I'll explore how it could be implemented in p5 v2?

Also just to clarify, this isn't related to better documenting existing features, this is a request for new feature that doesn't currently exist in p5 v2 in any form.

[quinton-ashley]

@ksen0 @davepagurek Let me know what the next steps should be so we can get the ball rolling on this.

[quinton-ashley]

@ksen0 @davepagurek I'm ready to implement this.

[ksen0]

Hi @quinton-ashley , although there have been no arguments against it, there has also not been an in-depth discussion. Like any additive feature, it would expand maintenance scope, so it cannot be added without in-depth consideration. Like any feature proposal, more detail would be needed for expected behavior. Although since the spring (when this was created) we have received various input from the community on p5.js 2.0, as well as shared the status board / open for discussion issues, there have been other higher-priority topics for making p5.js 2.0 better support learners and educators. Because there has not been more concrete community deliberation on this feature, the issue still does not have the level of detail needed for a feature (rather than documentation, as you said) request.

By more detail I mean, for example, consider:

let p = new p5();

createCanvas(200, 200);

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

background(0, 255, 0);
rect(20, 20, 50, 50);

With top-level global mode, the above is something that a learner might quite plausibly write, based on my teaching experience. I don't think that the expected order of execution here would easier for a beginner to understand, compared to the setup and draw pattern. Additionally, providing more options to beginners can also create more confusion, especially if the options may be different from what learners will encounter later in JavaScript more generally, or different from most of the existing example materials. This is just an example to illustrate was I see as unresolved about how this issue impacts inclusion/access (in this case, specifically the particular case of beginner friendliness). I hope this clarifies the status of the issue - in my opinion, it can stay open for comment in case there are additional perspectives that help move it along, but I don't think it is ready for work.

[quinton-ashley]

@ksen0 I could write a p5 v1 sketch with draw first, then setup, then preload, then variable declaration at the end, and say it wouldn't make sense to beginners.

function draw() {
  background('red');
  rect(mouseX, mouseY, 100, 100);
}

function setup() {
  createCanvas(200, 200);
}

function preload() {
  logo = loadImage('/q5js_logo.avif');
}

let logo;

So doing something the wrong (less human readable) way is bad? Beginners can make mistakes? Of course that's true. Sorry but I don't understand the point you're trying to make.

based on my teaching experience.

With respect, you're not a teacher (correct me if I'm wrong). What experience are you referring to?

I have eight years of tutoring and teaching experience with middle school and high school students. Your counter-example is not practical. What is your hypothetical student trying to do? Could you give a more real-world scenario?

Anyways, it'd be an easy mistake to correct. p5 could even throw a friendly error if a student tried to do stuff on the top-level after declaring draw.

To clarify, as you requested, Top-Level Global mode would remove two key barriers for entry:

• beginners could write simple sketches without needing to declare any functions (no setup, no draw)
• beginners could declare and define variables, that store resulting values from p5 functions, on a single line (ex. loadImage)

Function syntax is something day one beginners are often told to overlook.

Needing to declare variables on a separate line is also something students consistently struggle with, even after using p5.js for a whole year. It's not a good user experience.

These observations are based on my experience with real students, not hypothetical examples.

Currently, large p5.js projects start with a lot of lines that declare variables, followed by a setup function with a lot of lines defining those variables. Requiring a setup function forces users to do a lot of extra typing or copy/pasting in this regard.

I don't think further debate on the value this feature could provide is necessary, since it has broad precedents in other programming languages and Processing itself. Does this request not align with the goals of the pr0s grants to increase interop between Processing and p5? You didn't address that point.

This issue has already been open for discussion for 8 months and no one else responded. Please don't delay this feature's implementation further and let's focus on the technical aspects of implementing it.