Mathematical Graphics - Please Help

[Rafkin]

I am wanting to work on a web page that does a couple things for me. I want to use javascript, rather than php, so as to avoid bugging the server over and over for something that could be calculated locally. However, if you think this might be easier done, or better done via php, then I can go that route.

First, the setup. I do a lot of artwork via Microsoft Paint, and while it’s not as capable as some of the more powerful paint programs, it is amazing what I can do with it. For instance, I can do gradients, and transparencies in Paint, by breaking out the trusty calculator and doing some math.

What I’d like to do, is make a page that would do that math for me. (Actually, I would like to make a small program that would do that math for me, however, I am not experienced enough with windows API to do so.)

First, and easiest, is gradients. The method I use is simple. I take the two colors, and break them up into their Red, Green, and Blue values. Say, for instance, I take these two colors:

255 064 128 (sort of an off pink)
000 255 255 (cyan)

I figgure how many steps i want to use to change from one to the other. In this case, I'll say 10.

Now, in the Red column, I see there is a difference of 255. I devide that by 10, and get 25.5 or rounded to 26.
So I take 255, and subtract 26 per step, untill I reach 0 (actually -5).

In the Green column, I see a difference of 191, devide by 10 and get 19.1 or rounded to 19.
So I start at 64 and add 19 at a time untill I reach 254.

Then in the Blue colum, there is a difference of 127. That devides into 12.7, or rounded to 13.
I start at 128, and add 13 per step, untill I reach 255 (actually 258)

So the colors I use, in order are

255 064 128
229 083 141
203 102 154
177 121 167

and so on, till I reach

000 254 255

What I'd like to do is have a page, where I fill in starting RGB values, Ending RGB Values, and number of steps, and have it feed me the intermediate RGB Values, and perhaps create a small table with background colors set to display the resulting gradiant. This of course, would require another routine to convert decimal to hexadecimal, for creating the table.

Second is Transparencies. Again I use a backcolor and forecolor, and a percentage of how transparent the forecolor is to be. The higher the percent, the more backcolor shows through.

255 064 128 (backcolor)
000 255 255 (forecolor)

For this, I'll have the forecolor be 75% transparent.

In the Red column, since the backcolor is lighter than the forecolor, we multiply the difference by 0.75 and get 191.25 or 191.
We add the smaller of the two original values, wich is 0, and keep 191.

In the Green column, the forecolor is lighter than the backcolor. Since we want closest to the backcolor, we do the opposite as the Red column. The difference is 191, multiplied by 0.25 and get 47.75 or 48.
We add the smaller of the two original values, wich is 64, and get 112.

In the Blue column, the forecolor is again lighter than the backcolor. The difference is 127, multiplied by 0.25, and get 31.75 or 32.
We add the smaller of the two original values, 128, and get 160.

The final color to use is
191 112 160

What I'd like to do is be able to feed a form, the back color, the fore color, and the percentage, and have it calculate the color to use, as well as draw two boxes that are overlapping a bit. One box would show the backcolor, the second the forecolor and the overlap would show the result.

The use of a slider bar for the percent would be nice, but is not required.

If anyone wants to check my math, please feel free. If there is an easier way to do this, please post. If any of you can help me figgure out the routines, and how to do this, I would greatly appreciate any help.