how to mask desaturation over color, fade in

[ulrik]

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

[Tania Ghosh]

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

[ulrik]

@Tania-Ghosh paint routines, paint routines and a lot more of paint routines, and of course a lot of hours studying :)

[ulrik]

@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

[d.healey]

What's it for?

[Tania Ghosh]

@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.

[ulrik]

@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

[d.healey]

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.

[ulrik]

@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.

[ulrik]

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

[Christoph Hart]

Please don't tell me you're trying to make Photoshop in HISE :)

[ulrik]

@Christoph-Hart I am...... trying to..... make.....P....in Hise......

[Christoph Hart]

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;
    }
}


Panel1.setPaintRoutine(function(g)
{
    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, Colours.black, 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;
        
        g.setGradientFill(gradientData);
        g.fillRect(area);
    }
});

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

[ulrik]

@Christoph-Hart great information from a great guy :)
Thank you!

[Christoph Hart]

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!

[ulrik]

@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

[A Former User]

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

[MikeB]

@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 :-)

[ulrik]

@MikeB @UrsBollhalder thank you :)
I will keep you updated

[ulrik]

@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 :)

Drawing with Hise