how to mask desaturation over color, fade in

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

Dan Korneff

@ulrik sick!

orange

@ulrik Great!

This shows that Hise is not only an audio plugin development framework, it can be used for lot's of things :)

A Former User

@ulrik Insane.

Now someone make Super HISE Bros quick!

MikeB

@ulrik wow - absolutely fantastic

You must have worked on that for a minute or two? :-)
Awesome

A Former User

@ulrik Man this is something else really! That must have taken you a fair bit of work as well... Crazy good... I love it. Also... what's the background music? It's not Jarrett, it's probably not Bobo Stenson or Iiro Rantala... who is it?

ulrik

@UrsBollhalder thank you!
Yes I've spend a lot hours figuring out how to accomplish what I had in mind :)
the music is me

ulrik

@iamlamprey

A Former User

@ulrik said in how to mask desaturation over color, fade in:

@UrsBollhalder thank you!
Yes I've spend a lot hours figuring out how to accomplish what I had in mind :)
the music is me

A fellow jazz pianist then! Love it!

how to mask desaturation over color, fade in

48

1.7k

11.7k

101.9k