processing
"Getting Started with Instance Mode" Tutorial
Topic
p5.js supports both "instance mode" and "global mode." This sketch shows the difference: https://editor.p5js.org/p5/sketches/Instance_Mode:_Instantiating
Please share your confusions!
If you've had a confusing experience with instance mode in the past, please share how that was even if you don't want to work on the tutorial!
The task: translate existing materials to be more beginner-friendly
Here is the p5.js wiki entry explaining these ideas: https://github.com/processing/p5.js/wiki/Global-and-instance-mode
If you've found these resources a little daunting in the past, please feel free to set up a more approachable tutorial to be featured on the p5js.org website. This means creating a getting-started-with-instance-mode.mdx in main/src/content/tutorials/en.
Although there is an upcoming release of p5.js 2.0, the first version of this tutorial can focus on 1.x; but it might need to be updated for the 2.0 version of the website.
(This task is inspired by the discussion in https://github.com/processing/p5.js/issues/7332 and https://github.com/processing/p5.js/issues/7670, so feel free to check those out too.)
How to create a tutorial
Here's an example tutorial about a different topic: https://github.com/processing/p5.js-website/blob/main/src/content/tutorials/en/getting-started-with-nodejs.mdx?plain=1
Hello @ksen0, I would like to work on this issue. I'll start making the doc on instance mode. Please let me know if there are any specific requirements that I need to consider.
Hi @soumikadevarakonda (and anyone else reading)! I closed the PR above because it was too high-level and did not use the existing resources or make them easier to understand. So I wanted to clarify a bit more what the task here is.
All interested contributors, please also read through the contributor guidelines, which include:
You should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation; that is because the proposed fix may not be accepted, need a different approach entirely, or the actual problem is somewhere else. Any pull requests filed before the issue has been approved for fixing will be closed until approval is given to the issue.
In this case, if you want to work on this topic, please post below what's your approach/plan for taking the existing detailed wiki page and making it more beginner-friendly as a tutorial. You can look at the other Tutorials on the site; note that they have code examples, diagrams, notes, and many linked references, so this definitely is not a quick project! But if you're familiar with p5.js and instance mode, it's a great first project to work on to get introduced to contribution.
Great plan for a tutorial! Another reference for whoever works on this: I created an example that gives a quick intro to this concept: Multiple Canvases
I was about to file a similar issue. A student exhibition ran into an issue with a hydra canvas disrupting p5.js interactivity and someone told us to try instance mode.
When google searching p5 instance mode the result was: https://p5js.org/reference/p5/p5/
Can the syntax example include what the passed in sketch would need to look like? (with p.setup => {} and p.background() etc.)
Or adding a link to the Multiple Canvases tutorial to the reference for better idea?
The old reference page includes a much more detailed explanation including a set of examples. Does anyone know why all that content was removed in the new site? I think it would be really helpful to bring much of it back.
It looks like the old inline documentation still exists here: https://github.com/processing/p5.js/blob/v1.9.4/src/core/structure.js#L959