Ancestors

Toot

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

Descendants

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

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

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

@CFDS

Left: Konqueror 22.12.13

Right: Firefox 128.5.0esr

Operating System: Debian GNU/Linux 12

KDE Plasma Version: 5.27.5

KDE Frameworks Version: 5.103.0

Qt Version: 5.15.8

Kernel Version: 6.1.0-28-amd64 (64-bit)

Graphics Platform: X11

Graphics Processor: NVIDIA GeForce RTX 2080 Ti/PCIe/SSE2

=> View attached media

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

Proxy Information
Original URL
gemini://mastogem.picasoft.net/thread/113645131844855673
Status Code
Success (20)
Meta
text/gemini
Capsule Response Time
276.826698 milliseconds
Gemini-to-HTML Time
0.974072 milliseconds

This content has been proxied by September (ba2dc).