Ellipse Masking // Mask makes shape dark.

[Chazrox]

Can someone please help me figure out why a mask is causing my shape to almost dissappear?

I can see if the mask was misaligned then it should cut into the shape but its just getting darker ?...

Test this please:
Scroll down on the function to the pgMaskPath part.

MyKnobLaf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    var range = obj.max - obj.min;
    var stableSize = a[2] * (1.0 - 2.0 * 0.15);
    var ox = a[0] + (a[2] - stableSize) / 2;
    var oy = a[1] + (a[2] - stableSize) / 2;
    var cx = ox + stableSize / 2;
    var cy = oy + stableSize / 2;
    var sw = stableSize / 200.0;
    var startOffset = 2.5;
    var totalSweep = 2.0 * startOffset;
    var endOffset = -startOffset + totalSweep * (obj.value - obj.min) / range;

    // ============ COLOUR CONTROL ============
    // -- Skirt --
    var cSkirtTop = 0xff4A4A50;
    var cSkirtBot = 0xff2A2A2E;
    var cSkirtOutline = 0x1aFFFFFF;
    // -- Pointer Grip --
    var cPointerGripFlat = 0xffFF0000;
    var cPointerGripOutline = 0x4dFFFFFF;

    // -- skirt --
    var skirtR = stableSize * 0.35;
    var skirtcx = cx + 0 * sw;
    var skirtcy = cy + 0 * sw;
    g.setGradientFill([cSkirtTop, skirtcx, skirtcy - skirtR + (2 * skirtR * (0.5 - 0.5)), cSkirtBot, skirtcx, skirtcy + skirtR + (2 * skirtR * (0.5 - 0.5)), false]);
    g.fillEllipse([skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2]);
    g.setColour(cSkirtOutline);
    g.drawEllipse([skirtcx - skirtR, skirtcy - skirtR, skirtR * 2, skirtR * 2], 1);

    // -- POINTER GRIP --
    var pgW = stableSize * 0.24;
    var pgH = stableSize * 0.98;
    var pgCR = stableSize * 0.06;
    var pgX = cx - pgW * 0.5;
    var pgY = cy - pgH * 0.5;
    var pgMaskR = stableSize * 0.34;
    g.beginLayer(false);
    g.rotate(endOffset, [cx, cy]);
    g.drawDropShadow([pgX, pgY, pgW, pgH], Colours.withAlpha(Colours.black, 1), 24);
    g.setColour(cPointerGripFlat);
    g.fillRoundedRectangle([pgX, pgY, pgW, pgH], pgCR);
    g.setColour(cPointerGripOutline);
    g.drawRoundedRectangle([pgX, pgY, pgW, pgH], pgCR, 3.6 * sw);
    g.addNoise({"alpha": 0.3, "monochromatic": false, "area": [pgX, pgY, pgW, pgH]});

    // This is the section messing it up. Uncommenting this section reveals the entire shape so I know its this.     
    var pgMaskPath = Content.createPath();
    pgMaskPath.addEllipse([0, 0, 1, 1]);
    g.applyMask(pgMaskPath, [cx - pgMaskR, cy - pgMaskR, pgMaskR * 2, pgMaskR * 2], false);
     // End of problem section...I think. ha.     

g.rotate(-endOffset, [cx, cy]);
    g.endLayer();


});

This is the goal:

What im getting:

Thanks ahead of time!

[Chazrox]

@ustk Help please

[David Healey]

@Chazrox Masks have a bug where they don't scale so I would avoid using them for now

[dannytaurus]

@Chazrox I gave your post to Claude, here's the response. Might be helpful, I don't know!

The issue is almost certainly the layer mode you opened before the mask, not the mask call itself.

g.applyMask() only works inside a layer (g.beginLayer(...)), and the boolean you pass to beginLayer is what makes or breaks this:

• g.beginLayer(false) draws your shape onto a fresh transparent layer. The mask then cuts that shape, and anything outside the ellipse becomes transparent. This is what you want.
• g.beginLayer(true) makes the layer draw on top of the parent backdrop. Now the mask multiplies the whole composite (your grip plus the background under it) down toward black. Where the ellipse does not cover, everything gets darkened instead of cut, so the grip goes dark and almost disappears. That matches your screenshots exactly.

Under the hood applyMask multiplies all four channels (R, G, B and alpha) by the mask coverage. On a transparent layer that gives a clean cut (masked pixels go fully transparent). On a draw-on-parent layer it just darkens.

So the fix is to wrap it like this:

g.beginLayer(false);   // fresh transparent layer, not drawOnParent

// ... draw your pointer grip here ...

  var pgMaskPath = Content.createPath();
  pgMaskPath.addEllipse([0, 0, 1, 1]);
  g.applyMask(pgMaskPath, [cx - pgMaskR, cy - pgMaskR, pgMaskR * 2, pgMaskR * 2], false);

  g.endLayer();

Two other things worth a quick check:

1. Make sure pgMaskR is in pixels in the same coordinate space as the grip. If it ends up as a small fraction, the ellipse is tiny and masks almost everything to zero, which also reads as "dark".
2. Your invert flag is false, so the mask keeps what is inside the ellipse. Flip it to true if you actually meant to keep the outside.

Try beginLayer(false) first - that is the usual culprit for the darkening.

[dannytaurus]

@Chazrox But also, as David said, I thought masks were still buggy so keep that in mind as well.

[ustk]

@Chazrox I second Dave on this, masks are wild beats that don't let you control them easily...
Zoom issues and more. I recently managed to fix the zoom issue but it was causing exported plugin to crash (at least i suspected this) and I haven't had the time yet to give it to an AI to chew...

Now your problem, try to begin the layer before any drawing and it'll work. I don't know why though, wild beasts I said... I used it freely in te middle of a paint routine before with no issues but it was another day in parad'Hise...

[Oli Ullmann]

@Chazrox
@ustk

And another one...

[ustk]

@Oli-Ullmann

[Chazrox]

@Oli-Ullmann Faaaah

[Chazrox]

@ustk I was having the scaling problem when I use obj.area as the mask area. Defining the area to the exact shape worked for me on other layers. The scaling problem wasnt happening with those layers so I thought it was fixed….then I tried to do this and met “the beast”.

tbh I’ll keep trying to find a way for a little bit.
If I come back with a black eye just dont say you told me so. haha

[Chazrox]

@dannytaurus I guess it is a little weird. Thanks for sacrificing your tokens for me! ha I owe you one.