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

[grege2]

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.

[sableraph]

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

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

[grege2]

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

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

[grege2]

Thanks @GoToLoop I will check all that.

[AlviaHong]

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.

[grege2]

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