Gradient config

[tipsy]

@abalazsik, I'm looking at the gradient config. We also don't support more than 2 color stops, but it would be simple enough to add any number, this could potentially replace "gradientLength".

[tipsy]

I made a change to how the angle works now, so that you specify degrees (0-360). You can no longer specify length.

[tipsy]

This still feels a bit limited. We could create

gradientFunc(context), which would let a user set a gradient for the context (and save us from complicated math in the library).

[tipsy]

bubbly({
  bubbles: 30,
  compose: 'lighter',
  shadowBlur: 1,
  shadowColor: '#fff',
  gradientFunc: (ctx) => {
    const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, ctx.canvas.height);
    gradient.addColorStop(0, "#2AE");
    gradient.addColorStop(1, "#17B");
    return gradient;
  },
  radiusFunc: () => 4 + Math.random() * window.innerWidth / 25,
  fillFunc: () => `hsla(0, 0%, 100%, ${Math.random() * 0.1})`,
  angleFunc: () => Math.random() * Math.PI * 2,
  velocityFunc: () => 0.1 + Math.random() * 0.5,
  animate: true,
});

[tipsy]

[tipsy]

Actually, we can set the "fillStyle" rather than "a gradient". This will let us do this:

Screen.Recording.2023-04-04.at.06.22.14.mov