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

p5.js
1

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.

2

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:

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