0

I know the HTML canvas can achieve some pretty nice effects when using different composition modes, but I can't figure out how to achieve an effect similar to GIMP's Supernova:

screenshot

I'm not sure whether there's an "established" way of coding this kind of effect or whether it's a highly custom GIMP filter that would be very difficult to reproduce on the canvas. Ideally, the function would be able to plug in variables similar to the ones shown in GIMP's options dialog.

Jez
  • 27,951
  • 32
  • 136
  • 233
  • It's a mix of some basic rendering patterns, can be implemented in any number of ways using the HTMLCanvasElement. You could try creating a custom SVG filter (or find one online), though this may taint the canvas (depending on primitives used). Or a simple WebGL frag shader will give you nice real-time hi res results without tainting the canvas. Or use 2D canvas and JS to calculate colors (not real time for high res). Or 2D canvas and a pile of tricks compositing pre rendered offscreen canvases should give a real-time 2D canvas solution. – Blindman67 Feb 03 '23 at 19:56
  • this might be done in many ways from [ray casting](https://stackoverflow.com/a/34708022/2521214) or [combining semitransparent textures](https://stackoverflow.com/a/75039067/2521214) to something similar to motion blur filter ... with some creativity you can also do this with particle system [similar to last image in here](https://stackoverflow.com/a/30265253/2521214) ... I would go for the first link creating random polygonal mask where you place the light source and render image (like the red star in one of the images) ... games usually use few semitransparent texture patterns rotating... – Spektre Feb 06 '23 at 09:13

0 Answers0