Fade in and fade out a sketch, or fade between sketches

[GoToLoop]

@grege2

, I have not used Instance Mode yet, other than running a demo or two ages ago,

You won’t need to convert your Global Mode sketches to Instance 1s if you create a separate <iframe> for each of them instead:

Ichthyarchy: The Domain of Fishes

For completeness’ sake we can also have multiple global mode sketches as long as they live in separate <iframe>: https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe Using a more p5js style, we can call p5.Element::mousePressed() method over the p5.Renderer object returned by createCanvas(), and then apply noLoop() or loop() to the sketch inside its callback: Global Mode Version: var paused; function setup() { createCanvas(800, 600).mousePressed(togglePause); frameRate(2);…

Multiple instances of the same p5js sketch?

B/c it’s a global mode sketch, you can have at most 1 per page. As a workaround, you can place other global mode instances of it inside their own <iframe> tag: Developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe Or simply convert it to instance mode, so you can have multiples of it on the same page context: GitHub.com/processing/p5.js/wiki/Global-and-instance-mode Here’s an example of 4 instances of the same sketch running on the same page: Matter-js-Bouncing-Colorful-Balls.Glitch…

Switch Between Multiple p5.js Sketches in Single Webpage

Assuming you have a variable iframe which points to the HTMLIFrameElement of the running sketch you wanna pause, you can call: iframe.contentWindow.noLoop(); Alternatively, the window property of each HTMLIFrameElement is stored in the frames[] pseudo-array: Let’s say you wanna pause the sketch running at the 3rd created HTMLIFrameElement, you simply call: frames[2].noLoop();