# 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:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [June 8, 2026, 7:29am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/1 "2026-06-08T07:29:08Z")

</div>

Hi all,

I’m looking for a technique in p5.js, either p5 1.x.x or p5 2.x.x, to “fade in” a moving sketch from a black screen to normal display. The converse would “fade out” the sketch, and what I’m really after is fading between sketches, in some sort of rotating demonstration of different sketches.

I’ve searched various phrases like “fade” and “fade out” here but nothing looked relevant.

I’m wondering if there is a global canvas control like myCanvas.globalBrightness or globalAlpha which would provide a fade as required. I guess that would impose an extra computational overhead on every primitive, while active, but if we have some “head room” per frame it could be ok.

I’m guessing there’s no access from p5 to the physical “brightness” level of a display, which would provide a cost-free method. Unless an HTML canvas has a simple brightness parameter. Just rambling here to show I’ve thought a (tiny) bit about this.

Appreciate any responses ! Many thanks.

Greg.

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [June 8, 2026, 10:56am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/2 "2026-06-08T10:56:10Z")

</div>

Hi @grege2,

That’s a fun challenge!

If you’re planning to show multiple sketches on the same page, you may want to look into p5.js instance mode. It helps keep each sketch separate and avoids conflicts between them:

> **[Global and instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

For fading between sketches, one simple approach is to place each sketch in its own HTML element and animate the element’s opacity with CSS.

You could also experiment with `noLoop` to stop the sketch when it is not visible.

Raphaël

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [June 8, 2026, 9:58pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/3 "2026-06-08T21:58:41Z")

</div>

Thanks, I have not used Instance Mode yet, other than running a demo or two ages ago, will look at it. Also didn’t know that an HTML element can have it’s own opacity, but I was hoping for a global control of that kind. I’m ok with noLoop(), I use that a lot.

Great name by the way !

Cheers, Greg E

---

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

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [June 9, 2026, 12:32am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/5 "2026-06-09T00:32:43Z")

</div>

Thanks @GoToLoop I will check all that.

---

<div class="post-metadata">

**Author:** ![AlviaHong](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@AlviaHong](https://discourse.processing.org/u/AlviaHong)\
**Post date:** [June 9, 2026, 9:16am UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/6 "2026-06-09T09:16:21Z")

</div>

Another simple approach is to draw each sketch to its own PGraphics buffer and then blend them using tint() with an alpha value that changes over time. That makes smooth crossfades pretty easy and keeps the transition logic separate from the sketch code itself.

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [June 9, 2026, 11:09pm UTC](https://discourse.processing.org/t/fade-in-and-fade-out-a-sketch-or-fade-between-sketches/48770/7 "2026-06-09T23:09:31Z")

</div>

Thanks @AlviaHong that looks a tidy way, will check it out.