Drawing gradient along a path? Thermometer style gradient?

[Chazrox]

What is the proper way to draw an arc for a knob but apply a thermometer style gradient to it?

I want the typical behavior, Colour1 on the lower value of the knob and as the arc progresses it reveals Colour2.

I know someone knows what im talking about because Claude doesnt get it and it keeps giving me weird results.

See here how it tries to divide the arc up into tiny pieces lmaooo
I can definitely see all the little sections. smh.

It looks fine, but Im not happy with the hacky work around. I suspect it'll give me more problems.
If someone can help please.

Thank you!

    // -- arcBasic --
    var arcBasicW = 0.45 * 2;
    var arcBasicCols = [0xff005EC2, 0xff085BBC, 0xff1058B5, 0xff1955AF, 0xff2152A9, 0xff294FA3, 0xff314C9C, 0xff3A4996, 0xff424690, 0xff4A438A, 0xff524083, 0xff5A3D7D, 0xff633A77, 0xff6B3771, 0xff73346A, 0xff7B3164, 0xff842D5E, 0xff8C2A58, 0xff942751, 0xff9C244B, 0xffA52145, 0xffAD1E3F, 0xffB51B38, 0xffBD1832, 0xffC5152C, 0xffCE1226, 0xffD60F1F, 0xffDE0C19, 0xffE60913, 0xffEF060D, 0xffF70306, 0xffFF0000];
    var arcBasicA0 = -startOffset;
    var arcBasicA1 = endOffset;
    var arcBasicSpan = arcBasicA1 - arcBasicA0;
    for (i = 0; i < 32; i++)
    {
        var ts = i / 32.0;
        var te = (i + 1) / 32.0;
        var sa = arcBasicA0 + arcBasicSpan * ts;
        var ea = arcBasicA0 + arcBasicSpan * te;
        var gT = (sa + startOffset) / totalSweep;
        var ci = Math.floor(gT * 32);
        if (ci < 0) ci = 0;
        if (ci >= 32) ci = 31;
        var Kseg = Content.createPath();
        Kseg.addArc([(1.0-arcBasicW)/2, (1.0-arcBasicW)/2, arcBasicW, arcBasicW], sa, ea);
        var arSeg = Kseg.getBounds(stableSize); arSeg[0]+=ox; arSeg[1]+=oy + stableSize * 0;
        g.setColour(arcBasicCols[ci]);
        var segCap = (i == 0 || i == 31) ? "rounded" : "butt";
        g.drawPath(Kseg, arSeg, {Thickness: stableSize * 0.04, EndCapStyle: segCap, JointStyle: "curved"});
    }

Looks good still but when turning the knob I can see little imperfections which im guessing is from all the cuts in the path.

[David Healey]

@Chazrox I think a radial gradient would work. There should be a video about gradients on my YouTube channel I think, or maybe Patreon

Edit: actually a linear gradient might be better

[Chazrox]

@David-Healey I can do gradients on regular panels and flat components. Im having problems always when dealing with Arcs. Me math no good. lol

[Chazrox]

@David-Healey

This works and looks how I expected it should.

    // -- ARC BASIC (gradient) --
    var basW = 0.45 * 2;
    var basR = stableSize * 0.45;
    var Kbas = Content.createPath();
    Kbas.addArc([(1.0-basW)/2, (1.0-basW)/2, basW, basW], -startOffset, endOffset);
    var arBas = Kbas.getBounds(stableSize); arBas[0]+=ox; arBas[1]+=oy + stableSize * 0;
    var gx1 = cx + basR * Math.sin(-startOffset);
    var gy1 = cy - basR * Math.cos(-startOffset) + stableSize * 0;
    var gx2 = cx + basR * Math.sin(startOffset);
    var gy2 = cy - basR * Math.cos(startOffset) + stableSize * 0;
    g.setGradientFill([0xff00D176, gx1, gy1, 0xffFA0085, gx2, gy2, false]);
    g.drawPath(Kbas, arBas, {Thickness: stableSize * 0.05, EndCapStyle: "rounded", JointStyle: "curved"});