Question

How can I find the formula that would, based on a percentage value, give me left and width values based on the following 0% and 100% values?

For 0,00 percentage, left and with values would be:

• Width: 658
• Left: 11

For 100,00 percentage, left and width values would be:

• Width: 0 (or 1)
• Left: 670

I have a gradient image, on which I apply a color to give the percentage value a visual representation.
The gradient image starts at 11 pixels (Left: 11 for 0,00%) and has a width of 659 (Left: 670 for 100,00% = 659 + 11)

The left and width values needs to be calculate dynamically based on the percentage so that the color overlays the gradient.

If the percentage is 0%, the color would overlay the whole gradient (left: 11, width: 659)

------------------------------
|____________________________|
0                            100

If the percentage is 100%, the color would not overlay the gradient at all (left: 670 which is 659 + 11, width: 1 or 0)

                              -
|____________________________|
0                            100

Answer 1

The formula you’re looking for can be expressed as f(x) = ax+b. f(x) is the width you want to get, x is the percentage, and a & b are (currently unknown) constants.

If you have the value of f(x) for two points (0 and 100 for instance), you can derive the formula like so:

f(0) = valueAtZero = a*0 + b
b = valueAtZero
f(100) = valueAtOneHundred = a*100 + b
valueAtOneHundred - b = a*100
a = (valueAtOneHundred - b) / 100

Now that you have a and b, you can solve for any percentage x you want. The process above translates into pseudocode as:

function getValueAtXPercent(x, valueAtZero, valueAtOneHundred):
    b = valueAtZero
    a = (valueAtOneHundred - b) / 100
    return a*x + b

now you can call getValueAtXPercent(50, 658, 1) and it will return your width value for 50%.

Here is a concrete implementation, in python:

def f(x, valueAtZero, valueAtOneHundred):
    b = valueAtZero
    a = (valueAtOneHundred - b) / 100.0
    return a*x + b

def showStats(percent):
    left = f(percent, 11, 670)
    width = f(percent, 658, 0)
    output = "At {0}%, left={1} and width={2}".format(percent, left, width)
    print output

showStats(0)
showStats(50)
showStats(100)

output:

At 0%, left=11.0 and width=658.0
At 50%, left=340.5 and width=329.0
At 100%, left=670.0 and width=0.0