If I know that a ratio of two input variables "a/b" has a range of [1;2] And if I want my output value of "y" to have a range of [ymin;ymax] of my choice, based on the range of "a/b":
Is there a formula that can bind those two ranges so that I can always find the value of y, whatever the value of "a/b" (knowing it will always be between 1 and 2)?
Practically:
I have a grid that I can zoom. The number of zoom steps can't be predicted but I know that the ending scale divided by the starting scale will always be between 1 and 2. And according to that predictable range, I would like to proportionally output an opacity value to my gridlines going from a min value to a max value of my choice.
So let say, I would like my opacity values to range from 0.12 to 0.38 (it's just an example) according to the zoom level:
The formula will make sure that if the scale ratio is 1 then the opacity will be 0.12 and if the scale ratio is 2, then the opacity will be 0.38. And all opacity values In between would remain "proportional" (an increase of scale of 50% = an increase of opacity of 50%, etc..). And that should work for any output range of my choice.
So I wonder if looking for a formula to achieve this is reasonable or if it's harder to compute than it seems.
Something like this
let opacity[from desired min to max] = (endScale/startScale)[from 1 to 2] * something + opacityMin;
But that's linear and would probably not fit my needs...
I tried to plot some points on paper in order to figure that out but the curve isn't linear and I don't know how to find its algebraic formula, if only there is one.
Here is what I ploted with the 0.12 to 0.38 example, considering the same progression within the input range and the output range:
Input Output percentage multiplier
--------------------------------------------
1 0.12 0% (* 0.12)
1.25 0.185 25% (* 0.148)
1.5 0.25 50% (* 0.166..)
1.75 0.315 75% (* 0.18)
2 0.38 100% (* 0.19)
If I predict the output I need using some input values between 1 and 2, the coefficients are not matching of course. So I don't know how to bind those two ranges. .
Any hep would be appreciated. At least to get some guidance.
I didn't find any other way, it was kind of weird.
const range = (props) => {
const { rangeInput, rangeOutPut, input } = props
if(rangeInput.length && rangeOutPut.length && input){
const BindingMinInput = rangeInput[0]
const BindingMaxInput = rangeInput[1]
const BindingMin = rangeOutPut[0]
const BindingMax = rangeOutPut[1]
const outPutMax = (function(){
if(rangeInput.includes(input)){
return input
}
const test = BindingMaxInput - input
return BindingMax * test
}())
return outPutMax
} else {
throw new Error('Props is undefined, or badly formatted props')
}
}
range({
rangeInput:[ 1, 2 ],
rangeOutPut:[ 0.12, 0.38 ],
input:2
})
I'm not sure if there is an existing good algorithm for that, but from your description of the problem I can recommend doing something like that:
const zoomMin = 1;
const zoomMax = 2;
const opacityMin = 0.12;
const opacityMax = 0.38;
function getOpacityLevel(zoomLevel) {
const zoomRange = (zoomMax - zoomMin);
const opacityRange = (opacityMax - opacityMin);
const zoomLevelPercent = (zoomLevel - zoomMin) / zoomRange;
const opacityLevel = (opacityRange * zoomLevelPercent) + opacityMin;
return opacityLevel;
}
console.log(getOpacityLevel(1.0));
console.log(getOpacityLevel(1.25));
console.log(getOpacityLevel(1.5));
console.log(getOpacityLevel(1.75));
console.log(getOpacityLevel(2.0));if you want to do it randomly.
var float = Math.random().toFixed(2)
console.log(1 + parseFloat(float))