how to mask desaturation over color, fade in

  • I made a colour wheel and I've tried all kind of ways to make it so that the more I go to the left it will be more and more desaturated, I can't figure it out how do accomplish it.
    Any tip is greatly appreciated

    Skärmavbild 2021-04-18 kl. 22.34.22.png

  • @ulrik Wow.. Color wheel in HISE? How did you make?

  • @Tania-Ghosh paint routines, paint routines and a lot more of paint routines, and of course a lot of hours studying 🙂

  • @ulrik On the right side I used 6 panels painted with gradients and had a lookup table for all hex values, and used event.y for calculating the right values

  • What's it for?

  • @ulrik I am always ready to study.
    My question how did you use PR lookup table for all hex values?
    I only know PR for Drawing etc. Never used it for Color picking.
    Any doc or example will be helpful to study.

  • @d-healey It's for a "good looking" picker 🙂
    The main window (in picture above), is two panels, the upper part is painted with a gradient from white to red, and the lower part is painted from red to black.
    I want, from the right side (no desaturation) to the left side (completely desaturated).

    So what I really ask is, is it possible to place "desaturation mask" over the main window, to get what I want?

    Almost like the way it looks like inside Hise, but with the top displaying white, the left side displaying the grey scale, from white to black, and the right side will go from white to red to black
    Skärmavbild 2021-04-19 kl. 11.20.11.png

  • It's for a "good looking" picker

    Yeah but why do you want a colour picker in HISE?

    I made one a few years ago for fun, not as fancy as yours though.

    I think JUCE has a colour selector component that you might want to check out.

  • @d-healey said in how to mask desaturation over color, fade in:

    Yeah but why do you want a colour picker in HISE?

    Well, I guess I'm not supposed to do this in Hise but, starting by exploring the possibilities with paint routines, panels and an exploring lust to see what could be done with it, I just continued exploring and had a lot of fun doing it 🙂

    For me it's the best way of learning, to be curious and try

    Well I'm not finished but I've come, for me, a long way.

  • @d-healey I miss the direct access to the grey scale in my picker..

  • Please don't tell me you're trying to make Photoshop in HISE 🙂

  • @Christoph-Hart I am...... trying to..... Hise......😱

  • Well, then I will endorse the attempt of playing ScriptPanel programming in god mode. Here is a little help:

    /** This namespace contains a few helper functions. */
    namespace ColourOps
        /** Takes the colour and saturates / desaturates it (saturation = 1.0 means no change). */
        inline function withMultipliedSaturation(colour, saturation)
            // Commencing bit fiddling sequence
            local a = (colour & 0xFF000000);
            local r = (colour & 0x00FF0000) >> 16;
            local g = (colour & 0x0000FF00) >> 8;
            local b = (colour & 0x000000FF);
            // If you want to lower the saturation, you have
            // to fill up the colour values to the max colour
            local max = Math.max(r, Math.max(g, b));
            local rDiff = max - r;
            local gDiff = max - g;
            local bDiff = max - b;
            local invSat = 1.0 - saturation;
            r = parseInt(r + invSat * rDiff);
            g = parseInt(g + invSat * gDiff);
            b = parseInt(b + invSat * bDiff);
            // ending bit fiddling sequence...
            return a | (r << 16) | (g << 8) | b;
        var c = this.get("itemColour");
        // make it 2px wide so that it doesn't flicker with odd zoom ratios...
        var area = [0, 0, 6.0, this.getHeight()]; 
        // create the array before the loop to save a few CPU cycles
        var gradientData = [undefined, undefined, 0.0,, undefined, this.getHeight()];
        // we update the saturation every 4px, that's enough
        for(var x = 0; x < this.getWidth(); x += 4)
            gradientData[0] = ColourOps.withMultipliedSaturation(c, x / this.getWidth());
            gradientData[1] = x;
            gradientData[4] = x;
            area[0] = x;
    HiseSnippet 1489.3ocsWs0aaaCEVJMpnwaFXEX+.HxCqxotNxcoYEHMcY0ItKXKsF0occHnnfVhVhHRjZRTw1qKX+o1Or8zdM6bDksjujfh.TgfXwyM9wyMdTuDoKKMUlXXtwoShYFlesU+IBUPm.JWXb7gFlek0o7HVxorTkwKlDSSSYdFll24kn.lartQ9y+9iufFREtrRRFFuSxcY+JOhqJo16fegGF1k5wPyVRemCN1UJ5HCkY.XtikiQL08bpO6UTTr0rLLu6QdbkLouhpXoFlq+Bo2j9AxQBs7uimxGDxvEsM5CFRStqLzCQLR0nS.Ozq2zCcpAXkdktf6ncAeq0IbO9L5kthuImAoTip9Cy0tI30tJ7b97gmYE3stFd22puaBOVUxQGlNVnXICoPHnJrzxZr1eeOqNRPBgpUD8bV2DXwLMr20woI4INNM1qds50f.QphbAMgziJXgsI6SlpqOS0QFEKEvB6M0r2Tq01asE4z.dJQ.QrTH5wHfgTfyKkPICYiHArvXVBYXlvUwg8nEYqsqWqTbcz+0wo0q8IB7TuF9+b6BPNknBPShxPnBORJUkkfNax1DOV4JthXWrB1E.7sa4PhXT.GBIwMfJ7YMz6MZetHjKXyPEYDWEbRVnhGGxYd8mYHa8V2jTZ6FZK7I8O4fca3TDEwDtbgOY..kgbOuPbQJ6Ox.5rRgCktzPv2rOov1jui3LtaWm7GzqNujIKHoiiV1Fjm+bR6cWRd+kjWqQt7OcIwGrBwQEpBj4NoGOjLQlQFQEJhRBVYDDcwfToGpYtDAzKXyoIH8PnM.IKtZP8BZXFFlk4DiniKXrHPQN6SNgpBfb4w1PHY169MICZrZ.W3COjObHnMZiGQRV1mMGe+kcRywevMrSbwEPxSQ52ip3SVoNXrMlljxfhR6DxCmp9VZDW8H4WUT+ph5unnCpJ5fphNXQQmK9vDdWa9aqVsp.aFbpDPN7eQ.T+rmAogMv28w2eJ95f8xE9xZWhMIpWS2ynUJS0CZMndiLSAke1SK+r8ghphBJrCjKbBTPWEryi8lbEKR2kXyoXunIw1DrsFV6+33wPMrGjEh4QvgEn4IYohG.GlPt64PRJViSjddj+TJiH4gkzYmKbaoILrt7LnsH72tsf+MEE+Li6Gnra7g8HKf.WPIEKO4kljPmPFvFJSzDBkxXLyNEJEJZG1o2aItSbCYok6qeB0iC8VOjpx2+LgGaH3e7ZRp7pChGseHs0fP3hx4XuLRW.niXPkm2TrVoWI6BVxDxNwial65dPJjIHy7CzZBGFaDjX0mydvOOa1V8abOUfcCj3C2mryxMFqdvNy4C4WoTzsu002wsIXusWbSlqVnpYailc70wcmE4V9FFs0fZ078wz0WVXrtPiK6pVdN7zB6q8FlqxFM5TVPt+kkIrUKBxGtpCMLb.DEKqBlUDje1SXwXsB5e01ozBJZh1F1swqLlcKlT7Joh8ZvR09TsMpcYMxhrFNbk7va5SjggfEWEa8dcCJZKxhFvfdx4cymIHL9x7yGYc8yGUc7MW8fGUDTJNVvUuNlIttolLJlVAd6sGiQHbPpBZfbvLHJNBAyCYW.SnpGqZCqCYomqjw4xVLhCPVkys9zgtP2tAGFs5dV5Pfw3xgX+8ClTcwHLesj.+ff7BxpTJan8Xf7c+m2elCxXf+zIg23tWkX71bgmIJR03p+6J8.0KMfHLlpzKKjple1Ubf8BFP.atgDwAAEob0jpCz+EYf1OW3deqdbkavpw6Zq.uPH9KMdK97f5VGMbHTfWB10s599u7eKfg9pReXVmDNjzY8prn9P1fKCPh.REwhJy0vze8ZGbM5Y5CWmmu3J3ofYabsYAy1SYZDQcSjezUWJie.x8xo.XRj+cXaXcBtlz1Hu7FzyBtLxHB9tnO55hthGAXe0573agNe+sPmctE57jagN6dKz4GtE57zaTG7SR+oLkLRWl.D5cTdOOSyiDTHKKOiz3+AKf1UoA

  • @Christoph-Hart great information from a great guy 🙂
    Thank you!

  • Oh wow I didn‘t see it was a GIF. You‘re actually making AfterEffects in HISE. Thats even more badass!!!

    Now you need to implement rLottie export!

  • @Christoph-Hart said in how to mask desaturation over color, fade in:

    Now you need to implement rLottie export!

    Haha...absolutely, would it be possible? That would really be awesome 🤗

  • @ulrik Man this is completely out of this world! Awesome stuff! 😲

  • @ulrik I already thought that you can probably do things with HISE that don't have to do with music.
    But this is awesome - great work
    It would be nice if you keep us informed about the progress.
    In any case, you are now my master of PaintRoutines 🙂

  • @MikeB @UrsBollhalder thank you 🙂
    I will keep you updated

  • @UrsBollhalder @MikeB
    I promised to keep you updated so...
    this is my journey to the panels & paint routines promised land, well at least some of it 🙂

Log in to reply