Графическое представление скорости на холсте

Question

У меня есть следующий код:

https://jsfiddle.net/8o3sn9mh/21/

var 
    canvas = document.getElementById('c'), 
    ctx = canvas.getContext('2d'); 
    width = window.innerWidth; 
    height = window.innerHeight; 
    canvas.width = width; 
    canvas.height = height; 
    thrust = height * 0.000001; 
    maxVelocity = height * 0.00067; 
    velocity = height * 0.00019; 

    velocityInterval = setInterval(function(){ 
       velocity+= thrust; 
       if(velocity > maxVelocity) velocity = maxVelocity; 
       ctx.fillRect(1, height/2, width * (velocity/maxVelocity), height/30); 
    }, 1); 

объяснение: у меня есть холст, который адаптирует к окну пользователя. Я пытаюсь представить прогресс скорости на холсте со следующими начальными параметрами: скорость, максимальная скорость (ограничение скорости) и тяга, которая ускоряет скорость каждые миллисекунды.

Бар начинает ускоряться с определенной скоростью (0,00019), и когда вы достигаете полной скорости, ширина полосы - это ширина ширины холста. он работает нормально, но поскольку вы можете видеть, что график начинается с некоторой точки x, которая не равна 0x, потому что я решил, что начальная скорость будет довольно быстрой. Как я могу запустить панель в 0x и по-прежнему быть точным со скоростью движения?

вот как это должно выглядеть (конечно, логика я говорил здесь не включен):

https://jsfiddle.net/8o3sn9mh/33/

Answer 1

Вы можете повторно отобразить значение в диапазоне от 0 до макс. Javascript не имеет встроенной функции построения для этого.

Но вы можете взять один из p5 library, например, который является:

Math.map = function (value, istart, istop, ostart, ostop) { 
    return ostart + (ostop - ostart) * ((value - istart)/(istop - istart)); 
} 

Или следовать this discussion на SO.

Эта функция повторно отображает значение в новый диапазон.

Так что в вашем случае, если вы хотите определить

var mapStart = width* ((height * 0.00019)/maxVelocity); 

и карту (ширину, скорость) вычисления в диапазоне от 0 до макс. ширина

var mappedValue = Math.map((width * (velocity/maxVelocity)), mapStart, width, 0, width); 
ctx.fillRect(1, height/2, mappedValue, height/30); 

The fiddle.