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

**URL:** <https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770>\
**Category:** Coding Questions\
**Created:** [June 8, 2026, 7:29am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770 "2026-06-08T07:29:08Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 8, 2026, 10:28pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/4 "2026-06-08T22:28:26Z")

</div>

> [@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>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) for each of them instead:

> [@Ichthyarchy: The Domain of Fishes](https://discourse.processing.org/t/ichthyarchy-the-domain-of-fishes/38913/4):
>
> 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](https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/iframe) Using a more p5js style, we can call [p5.Element](https://p5js.org/reference/#/p5.Element)::[mousePressed()](https://p5js.org/reference/#/p5.Element/mousePressed) method over the [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object returned by [createCanvas()](https://p5js.org/reference/#/p5/createCanvas), and then apply [noLoop()](https://p5js.org/reference/#/p5/noLoop) or [loop()](https://p5js.org/reference/#/p5/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?](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765/2):
>
> 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](http://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](http://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…](http://Matter-js-Bouncing-Colorful-Balls.Glitch.me/all.html)

> [@Switch Between Multiple p5.js Sketches in Single Webpage](https://discourse.processing.org/t/switch-between-multiple-p5-js-sketches-in-single-webpage/9981/4):
>
> 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();

---

_[View the full topic](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770)._