How do you properly do a hue shift animation?

ID:2951844
 
Nov 10, 4:55 am
I tried doing a hue shift animation for a rainbow, but I can't seem to find the right color matrix values in order for it to work. I'm trying to to animate a rainbow, but most combinations I try to use end up having an undesirable effect. Example of what I have so far:

    var/static/list/base_color_matrix = list(
        1,0,0,0,
        0,1,0,0,
        0,0,1,0,
        0,0,0,1,
        0,0,0,0
    )

    var/static/list/inverted_color_matrix = list(
        0,1,1,0,
        1,0,1,0,
        1,1,0,0,
        0,0,0,1,
        0,0,0,0
    )

    //Base color.
    color = base_color_matrix

    animate(
        src,
        color = base_color_matrix,
        loop = -1,
        time = 2 SECONDS
    )

    animate(
        color = inverted_color_matrix,
        time = 2 SECONDS,
    )


So how do you properly do a hue shift animation? Any help is appreciated.
Nov 10, 6:54 am
It appears that the repo that I was working on had a proc already for this.

//Moves all colors angle degrees around the color wheel while maintaining intensity of the color and not affecting greys
//0 is identity, 120 moves reds to greens, 240 moves reds to blues
/proc/color_matrix_rotate_hue(angle)
    var/sin = sin(angle)
    var/cos = cos(angle)
    var/cos_inv_third = 0.333*(1-cos)
    var/sqrt3_sin = sqrt(3)*sin
    return list(
round(cos+cos_inv_third, 0.001), round(cos_inv_third+sqrt3_sin, 0.001), round(cos_inv_third-sqrt3_sin, 0.001), 0,
round(cos_inv_third-sqrt3_sin, 0.001), round(cos+cos_inv_third, 0.001), round(cos_inv_third+sqrt3_sin, 0.001), 0,
round(cos_inv_third+sqrt3_sin, 0.001), round(cos_inv_third-sqrt3_sin, 0.001), round(cos+cos_inv_third, 0.001), 0,
0,0,0,1,
0,0,0,0)


https://github.com/tgstation/tgstation/blob/ 48beb20406128321efdfa87d531d09ffdce8fcaf/code/__HELPERS/ matrices.dm#L114



Credit to the Space Station 13 /tg/station repo.
Nov 10, 2:30 pm
When you're doing an animation like this, remember to use more than two steps. Consider if it was a transformational matrix; going from a regular transform to a mirror would cause it to tween through the origin instead of spinning like you probably want. Well the same applies to a color matrix, except instead of spinning the whole icon, you're spinning the hue. So break your rotation into at least 3 steps.

Nice to see that helper I wrote will actually help someone. I was worried it would sit there totally unused and forgotten.
Nov 10, 5:01 pm
In response to MisterPerson
MisterPerson wrote:
When you're doing an animation like this, remember to use more than two steps. Consider if it was a transformational matrix; going from a regular transform to a mirror would cause it to tween through the origin instead of spinning like you probably want. Well the same applies to a color matrix, except instead of spinning the whole icon, you're spinning the hue. So break your rotation into at least 3 steps.

Nice to see that helper I wrote will actually help someone. I was worried it would sit there totally unused and forgotten.

Yes I realized that when testing it out for the first time. It is kind of like drawing a circle, but you can't really do a perfect circle but instead a polygon that fits into a circle.

Login to reply.