Ancestors

Written by CFDS on 2024-12-13 at 10:51

Anyone got ideas on how to fade out a canvas - slowly?

The simple method is to – instead of clearing the canvas between draw calls, filling it with a transparent black rectangle. But with very low opacity settings, this leaves dark gray color areas instead of eventually fading to black.

It just looks ugly, so I tried another strategy here:

https://codepen.io/thykka/full/emOdrBB

(continued 🧵...)

[#]canvas #canvasapi #generativeart #creativecoding

=> More informations about this toot | More toots from CFDS@vis.social

Toot

Written by CFDS on 2024-12-13 at 10:54

This strategy copies the canvas into a buffer after the draw call, and draws the buffer into the canvas at the beginning of the draw call. The buffer is drawn with 99% alpha, which results in a smooth fade out.. But only in Firefox!

Chrome and Safari still exhibit the ugly gray trails..

I thought of modifying the canvas' imageData to achieve a smooth fade, but my fps is tanking just thinking about it 😅

=> More informations about this toot | More toots from CFDS@vis.social

Descendants

Written by kandid on 2024-12-13 at 19:08

@CFDS I had a similar issue. The fade out of a shape should have slowly faded to complete black. But a gray remnant of the original shape always remained visible. The only way to eliminate it was to change the framebuffer from 8 bit integers to 4 byte float per channel.

However, this meant that I switched from JavaFX (probably 8 bit color depth per channel) to lwjgl (GL_RGBA32F ... GL_FLOAT).

https://gitlab.com/metagrowing/jean/-/blob/main/src/jean/render/lwjgl/Binding.java?ref_type=heads#L204

Warning: I am not sure if WebGL supports this.

=> More informations about this toot | More toots from kandid@chaos.social