Question

I have a slider that needs to adjust 3 variables.
The slider min val is 0, max is 100.

What is the math behind adjusting the variables accordingly as the slider is moved?

See images…

Any help appreciated!!

Answer 1

I don’t know about canvases but if you ask about just only the math that is easy:

If the sliders value is X:

A = 25 + max(50 – X, 0) / 2

B = 50 – abs(50 – X) / 2

C = 25 + max(X – 50, 0) /2

In javascript there is Math.max() and Math.abs() so a method for calculating this is:

function calculate(slidervalue) {
    var res = [];
    res['a'] = 25 + Math.max(50 - slidervalue, 0) / 2;
    res['b'] = 50 - Math.abs(50 - slidervalue) / 2;
    res['c'] = 25 + Math.max(slidervalue - 50, 0) /2;
    return res;
}

Of course you could make an object for the result or do whatever you want with it, it’s just sample code.