A Short Tutorial: How to Use Linear and Parabola Functions for Programming Colour Changes

This tutorial uses the colour scheme of MakeASprite's progress bar as an example and assumes the reader is familiar with the way colours are determined with RBG values.
This program can be downloaded here:
http://jbusers.com/phpBB/viewtopic.php?t=187

This is what the progress bar looks like:

For this progress bar I wanted red to be at its maximum (255) when progress is 0% ready, and decrease gradually until it reaches zero when progress is 50% ready; green to start from zero when 50% is done and increase until it reaches pure green (255) at the end of the bar.
As for the blue colour, I wanted it to start increasing when progress is 25% done, reach 250 (I didn't use 255 because I did the calculations manually and I hoped using round numbers would make the job a bit easier) when 50% is done and then decrease until its value becomes zero when progress is 75%.

All in all, I needed 3 functions to calculate the colour values based on progress. This is what the 3 graphs would look like:

In this case colour values for red and green are expressed by linear functions, and blue by a parabolic function.

We can now use the Linear and Parabolic Function Finder to calculate the exact formulas.
Since a linear function is determined using two points, it is enough to enter two points for red and green value.

To find the formula for red we enter these two points:

And when Find Function is pressed, the following formula is displayed:

x stands for progress and y stands for red colour value. It means that red value for progress 20% for example is -5.1*20+255 which equals to 153.

To find the formula for green value, we enter these points: 50 0 / 100 255; and for blue value these three points (because parabola is determined by 3 points): 25 0 / 50 250 / 75 0.
The corresponding formulas are: y = 5.1*x and y = -0.4*x2 + 40*x – 750

By substituting y with a colour variable and x with progress we can type in this code:

However, since colour values can only be positive integers we need modify this code a little so that it wouldn't crash the program:

You may also add an upper limit (if colour > 255 then colour = 255) but it is not needed in this example because none of the colour values will ever exceed 255 in the range from 0 to 100.

As we now have the formulas to calculate red, blue and green values, all we need to do is put this code in a loop that performs a task whose progress can be measured, put in a line that calculates progress percentage before the colour setting, and add code that does the actual drawing in #main.graphicbox using the backcolor we just determined with these three formulas.
(To see how it is done in MakeASprite, download the program and take a look at the code.)