Gradually change color according to variable?

After looking around and not finding anything i thought i’d ask here, is there any way to slowly change the color of text according to a variable? For example, a variable at 0 would be white and at 100 it would be pink, with everything in between a gradual color transition between the two.

i know how to do it in a static way, so that at variable 49 it would be white, then at 50 it would be fully pink, but i don’t know how to do it gradually.

For Sugarcube 2.21.0 btw

Hi there!

I did something similar in a game prototype I made, so here’s a little test example:

<<= "<div style='color: rgb(255,"+ $variable + ",255'> TEST </div>">>

<<link 'Make text pink' 'Passage1'>>
	<<set $variable to 0>>
<</link>>

<<link 'Make text light pink' 'Passage1'>>
	<<set $variable to 180>>
<</link>>

<<link 'Make text white' 'Passage1'>>
	<<set $variable to 255>>
<</link>>

You basically place your text inside a div like the one above and with careful use of quotes(’) and double quotes (") you can use sugarcube variables inside html declarations, like the color style in this example. Using the rgb property of css you can gradually change the color of the div by changing one of the 3 values inside the parenthesis and in this case changing the middle number between 0 to 255 will give you diferent shades of pink.

If you want to use a variable that goes between 0 to 100 you would have to create a little formula that converts the value from 0 - 100 to 0 - 255.

For example, in your case white needs to be 255 in the rgb style, but your variable would be 0, so you have to create an inverse formula, that converts the value from 0 -100 to 255 - 0.

Changing my example to use this formula would look something like this:

<<set _tempVariable to (255 - $variable * 2.55) >>
<<= "<div style='color: rgb(255,"+ _tempVariable + ",255'> TEST </div>">>

_tempVariable
<<link 'Make text pink' 'Passage1'>>
	<<set $variable to 100>>
<</link>>

<<link 'Make text light pink' 'Passage1'>>
	<<set $variable to 20>>
<</link>>

<<link 'Make text white' 'Passage1'>>
	<<set $variable to 0>>
<</link>>

Hope this helps! Let me know if you have any doubts.

2 Likes

Thanks a lot, I’d been looking for a way to do this for a while now. Works perfectly.

You don’t need to use the Stupid Print Trick. The eval attribute directive exists for this purpose.

For example:

<div @style="'color: rgb(255,' + $variable + ',255);'"> TEST </div>

And:

<div @style="'color: rgb(255,' + _tempVariable + ',255);'"> TEST </div>
1 Like

oooh, that is much better, I totally forgot about it!

1 Like