Help me understand how to find x1,x2,y1,y2 in g.setGradientFill

Mighty23

My goal is to customize the Osciloscope using a gradient fill but I can't find the values of x1/x2 and y1/y2 as requested in the "ApiCollection" tab:

Currently my scope has both a main "line" (darker) and persistence lines just for style.

const var dp = Synth.getDisplayBufferSource("HardcodedMasterFX1");
const var rb = dp.getDisplayBuffer(0);
const var BUFFER_LENGTH = 512;
const var properties = {
    "BufferLength": BUFFER_LENGTH,
    "NumChannels": 1
};
rb.setRingBufferProperties(properties);
const var P1 = Content.getComponent("P1");

// Number of persistence buffers 
const var NUM_PERSISTENCE_BUFFERS = 6; 
const var persistenceBuffers = [];
for (var i = 0; i < NUM_PERSISTENCE_BUFFERS; i++) {
    persistenceBuffers.push(rb.createPath(P1.getLocalBounds(0), [0, BUFFER_LENGTH, -8.0, 8.0], 0.0));
}

// Timer Callback
var currentBufferIndex = 0;
P1.setTimerCallback(function() {
    // Fixed amplitude (?)
    var amplitude = -8.0;
    var newPath = rb.createPath(this.getLocalBounds(0), [0, BUFFER_LENGTH, amplitude, -amplitude], 0.0);
    persistenceBuffers[currentBufferIndex] = newPath;
    currentBufferIndex = (currentBufferIndex + 1) % NUM_PERSISTENCE_BUFFERS;
    this.repaint();
});

// Paint Routine
P1.setPaintRoutine(function(g) {
    var area = this.getLocalBounds(0);

    // Fill background
    g.fillAll(Colours.black);

    // Draw persistence buffers
  for (var i = 0; i < NUM_PERSISTENCE_BUFFERS; i++) {
        var index = (currentBufferIndex + NUM_PERSISTENCE_BUFFERS - i - 1) % NUM_PERSISTENCE_BUFFERS;

        g.setOpacity(0.8 - (i * 0.12)); // Fading opacity for trails

        // colours for each layer
         g.setColour(0xFF00FFFF);
         g.drawPath(persistenceBuffers[index], area, 3 + i * 0.5); 
    }

    // Draw recent buffer with a strong center glow
    var recentBuffer = persistenceBuffers[(currentBufferIndex - 1 + NUM_PERSISTENCE_BUFFERS) % NUM_PERSISTENCE_BUFFERS];
    if (recentBuffer) {
        // Layered strokes
        g.setColour(0xFF00CCFF); 
        g.setOpacity(0.7);
        g.drawPath(recentBuffer, area, 7); 
        g.setOpacity(0.9);
        g.drawPath(recentBuffer, area, 5); 
        g.setOpacity(1.0);
        g.drawPath(recentBuffer, area, 3); 
    }
});

Since I already have the value of "area", should I use this to find x1/x2 and y1/y2?

HiseSnippet 2187.3oc0Y08aaibDmT1LWst6J5UjqWenOrvnEf9hiNQ+QbRcChskkRLp+P0xI2ADDXrhbozBSwkX2U1V8P.tG6eV2i8w9+Qeo+GzN6tjhj1RJtpI45o.HKN6ryL6u4icFl1blOQHXbK6pmMJgXY+YNcFEK62nOlFacv9V1+RmivBIgiLj1aTBVHHAV11K7bEA6kVzR+4e8r8vQ3XeRNIKqWwn9jCoCnxbps24OSihZgCHmQGTf6M14.eVbCVDaHXOK3T2JA6eAtG4XrhsJNVu.K5aY+0NOYyM8vAgaE5st2S5FD5SVeq5OZisVCu4iCC2pt2FqGrU3FfQdulATIi2QhkDgk8h6wBF0oO6pXiBdEUP6FQTO3Y0AzrgbKVTf5HpnZ0nOMJncFPIrrrcZmCaKXfs66bDMfNldN78qzKfx2QQ.ztRYyagRlmWQyqdAyaBljcASZQiI8ENc74zDY9JJ64ScNHF7lgXvOUzTL7ZUoxRNMX.GwxZCvWPZwgGFuC2GUu9pH3qU1tZ0u4aPMdYmyN4Hzg61BUEbcBI5RLGEjfdJRGEUqGQtOUjDgGs2vvPBuC3ZAwr7Kv7.eFfwlXqVem2xfHyEAuKHhfjase25kXauW1pUySO+vlG+7ydAriM8Vq3xIbVBgKoDAr12WEAeV1HmCIw8j8W9OVVBqZX43gC.+WbLIR.b3U8saWk2slfHOkF2yr+1ikratRJYZs8.clgjvwnAaPBKFdvc415CqB+.M0ExrXgHPDBJ.EP5CpqVEhhP5wu7nya27zNGz4rlG2n44FytCnhGsMBDzQ.VxgXHjjioQnH8wqHRjK98Rk9SQu9MaWMjwQtJNn.g5aC+4OMMkAK9fGrRJNdaAVKYnnuK.T9bBXIswx9ts8TG8CY93n8XCiCDf+aUzqgXnx3N5gOtFPD95MqhpWq9J.97VMBopP.kdvQQcgZAUUVp+PNGvQiZOHNfbs1zqBJC7Q5Mjwua3vXeIkE6lY2fHaQulDfvCRhnxgADj6yVQujR14Tep1l1d7JwjqTGIfd4inrOUbGOjiENbdG+6zC71SAUe8sOsuArgTqwrqIBHtSf5CPdqf9CS0+pEl97vIIP8KoqxMjFp1VQ.cJanjFSRwZMsTR4PcuLrVCn.RAVyjQIPxi8IQQHkGqGWsnlbuZg.0cihbMWIHp0MB3nvt1miuZhYNWQAOkfNXXD3lBP833.JfEv9l238ryCclv6zRSeHnmG9N.+wpomBZOAt5iJG4Vu1igc5RQeMDl3sFjXngK37D2CwLLoOT5DeQtT.t7AXC.C0pDreeDTEkvGyfQOFn0s90sZUudK3SZjXJGA.BqCymPjoFJfvWkKdUz5vw2XkaZrwNC6JiHfqH.7EzXUJifnk8aK6.4De.HS8cFWGFIjvEO8PpU.h8hXWMNjxvuwJ.OwDrrI4b.3e5NnY3XdiAOngH2hJtXbAbPNTAsPjlxrufHpNcLtQCEFill2dqB3eA3unpyP7slgXdxcWLaNUw3MttzcPLqmIl2ZJYnpPHwbS8X20paBJ3jPNQzGotqJqfAhEeLSRNAJRW86qtDT3GcykBCm3ZpqW4rnHPASZYipmwFci02+tJDVEMjLlQnCpxsk4L81xJ10nu419BLxhOHlB3IIdZ8RZk1h.7qWdv9XIV0KWJs7lL.Z6StD5j1zY2RN6SDWHYIZdS6q.50UpW8yy56CCcvXQgt6Vzosm004MZ+62YTwGzoniI7iWsSeBsW+7F1+gvcrtc6kPisr.UA1xc6plIHcA.qK0hopMxXADYUblg2as.eWMwuvoMU52ex1XkIXifG4CgMlN3vm6zDRi7k4F3hNs9tOLSITT8ekQ8epy2hujnaVWq7uT+Lbkw.zyIwpdJYbuYLz2+3tNzWxcdnuS7kfIbFGGKRXBhWQI2gLfdFDtKJQ8F6XsItiRT2mHGFWVzFRYbsy5quvOpfhV.T3ULfMiXA4c+cfbsRBCdtj9Nhlk98C+y+xe+YMiwfCqCAN4AmH7AfQgyE0R6gQBx2pRL8lL40JRVMNE3C8KEztvrF80aNG88denF8cw6VP8rMueFTlpzj5KkYicnv7.jlwWRhfZ9Za7WCE4CwCijYTKmFdDKlkzmESK4zOkH4zd8Hkhkl3AZWoDZltXL7ojHUKZEuY3PnwdLWMb4bhEd+W+VKln+525XLW83fn+W7aeTCyl4UMKbmtp48t89Sv0N1UJneGi9ql1jBnSkx+cNbx.1kD8fhntpKfHv7KCRnQkdMUUNd3fRuPHU2Y11p57l2ek8eyIuQuD0brbxYr1.+tB0L2jSgCypntQL+K5P+qja2cXhwV2Swgqe56AZdZh7dumxRrLSX26HLjaCWi3.Xf48nk8VpTXPEUujlmqqd1b2Wbf9g+M7IcQuw.FrnW1hEZC8Xh7JF+Bc5Y5usr+DkS5yb1WjjQBlKmcUCsGxDZaNTpgwTO7IN0qA+yvVaVznrZU1KX1Tlwu6.XfeY1I3EXwYvbrJOcmgBnu4fSh6.Lqav.BIsOVWK5dsv9.zNRMMhJMS04MDGS307GGOWxZyCgTXr48IWhAkbyZBw.dfYNP2VcEGXWp0MPhw.LuYbl9ta3aUQ6R1zuwAGiiFIH0JwyjriaHl2kknfuHx0YyJbirgaRwR0RKL+qQgMgH0.nPgdyJwAMpvAiPRxJSjMvwLVQW0V8zHkv0H8AhWoV0GGY8JUVfx+MWyyLgJqeoy3WVLJ8+IhzhF2241uF4RUvFG9VxUeyFi9+6Dy6bGMPKl+74lwuxAZ6cMj95QzO82O9wvQ9wPGCv9b149lKlTop+BME3bGqK0rjyQpmQdVWZRSyA1APq5m66WVT2ZiqMuab84ciaLuaby4ciOZd23Vy6Fe76dipIo1cnjMvjm.ST1tooJtsYXRcJi0+AOEuUE

ustk

@Mighty23 If I understand well you want a gradient for the inner vs outer part of the trace... Bad news, a gradient won't help you because the coordinates are seen in a rectangle area, meaning it is the whole curve that will be affected... don't know if I'm clear here... in other words, it's not following the shape you are drawing.

A shader is what you want for that kind of thing. But I did a trick in the past with a paint routine. Just make the colour with an alpha of let say 0.2, then draw the path with different thickness on top of each other. The downside is that you are drawing 5 times the same thing which is not very CPU friendly especially if the panel is large...

ustk

@Mighty23

HiseSnippet 867.3ocsU81SSCDF+twpwUEil3GfFeUmRf1wX.AIBL.cQAVbHhuxbzdc8Bs2UauJtX3qrwuA5y0aiVjIZVz8l0m+d+tmmeOOW+TgGMKSjhvlGOJghv22XvHtLraHgwQ81EgefwAjLIM0RqZmQIjrLpOBim6kJE3F0QE+99K1gDQ3dzRUHzIBlG8MrXlrTa+sdMKJZehO8XVbEuauUOOAuqHRjC3YNCGTBw6bxP5gDka0LPuhjEhvO0vYkNT5pKG36SVdY+Nc5r9Zq2dcWRfSaxYtcVucq1q1ZsUCP36rmOSJRGHIRZFjzcD9iFDJtfqOfSXYryhnJAWz.3j0pQcCYQ98mTbxPHb89kkp4zkpGab.ymck9xR1CKLXUFQ0hFt1sAI2pPx41gDtBjpqgziLF3kxRjkVT34dF83PGLf.8lpPQ6Kp12vFcEfGb4hwjyo6mBBWEg8ZNNKX0wwo4FllP+ISZ8YRpUeBmF4Zso0jHGRkcEwIBNHX+Ds4mnhQ+4hYTYen.IeqHWx3T6fbtmjI31CaZ9UyFpbx3dPBasgVBHcIYJYGPgYigpLnIG15+xV7BlLb6njPxUZHeJmrfk6hNKUDdylEwFHRsrYaB4eC1yKL7zhuelRUSyFv4C42OkbwaTPCtuxPVl5J8dluLztYohWQYCCk1MWp0z0wTm3klW1biIWPKA+PgjdD2t3hZdoo0uZJHXp1Tk1TQTDMcplUSOo2Vf1773ynoK.Mrnb5UNBrkqSAM98TvpSEd5NcEGE7dbl7nD5X4aRRQioGvWuq2tDIQwaGqC7KglJYJHf2k9YXSglE2vXWZ14RQRgui4Tvrrrv57S33JdEhAL46Zn4XnuTtL4CaMppvEp9HbSwmVCgBK5WJoEvp8Q2XLBFfE94QD40mpU66Fa.pyWaTRMtvyXxQU2G9OaT+uEhOxnOS5ENcLVaJXD5F+Ov33EjyarWP.0SVBv5F6e5+msgH8dkgGPjoLfGXbXd7.XkfGENcNvNT7bbMEiTK6njUUfATtegvOfeiM5pjwiM5NwHJl3kJ9nmd5RsB9tEZ.LwKdhpA7VIHa4hJl3pVmigWD9nm20S0MBr0rF3xyZfsm0.WYVCryrF3pyZfq8mCT8f814RQrdrAgNn+dEqqv383DfAVvVQ+DPufyXv

Help me understand how to find x1,x2,y1,y2 in g.setGradientFill

26

1.7k

11.8k

102.7k