Javascript: Расчет средней скорости или скорости

Question

Я изучаю основную физику, и я пытаюсь применить эту концепцию в программировании: https://www.khanacademy.org/science/physics/one-dimensional-motion/displacement-velocity-time/v/calculating-average-velocity-or-speed

Вы можете увидеть формулу ровно 6:00.

Я хочу, чтобы мяч двигался ровно до 300 пикселей со средней скоростью. Поэтому я пытаюсь как-то применить информацию в видео практически. Поэтому, пока я изучаю все основы физики, я также применяю ее в программировании. Это моя первая попытка:

Jsfiddle: http://jsfiddle.net/1phfkb7s/3/

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var direction = 200; 
var displacement = 5; 
var time = 10; 


function render() { 
    ctx.clearRect(0, 0, 1000, 1000); 
    ctx.beginPath(); 
    ctx.arc(displacement - direction/time, 75, 30, 0, Math.PI * 2); 
    ctx.stroke(); 

    displacement += 1; 
    requestAnimationFrame(render); 
} 

render(); 

Это формула:

https://www.google.ch/search?q=velocity+formula&espv=2&rlz=1C1TEUA_enCH660CH660&biw=1366&bih=667&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjt2JXXkaLJAhVIWBQKHdXJCckQ_AUIBigB#imgrc=GsRnur1vRdqEyM%3A

Answer 1

displacement += 1; неправильно, потому что она просто перемещает шар один пиксель каждой итерации. Поскольку вы используете requestAnimationFrame, вам нужно добавить ощущение времени, чтобы рассчитать, где мяч должен находиться в любой точке.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var distance = 300; // you said 300 pixels, not 200 
 
var position = 5;  // renamed those as well for clarity 
 
var totalTime = 10; // 
 
var startTime = new Date(); // the time at which the code starts 
 

 
var out = document.getElementById('o'); 
 

 
function render() { 
 
    ctx.clearRect(0, 0, 1000, 1000); 
 
    ctx.beginPath(); 
 
    ctx.arc(position, 75, 30, 0, Math.PI * 2); // we only need the position 
 
    ctx.stroke(); 
 

 
    // here we calculate the next step based on:  
 
    var expired = (new Date() - startTime)/1000; // the expired time in seconds 
 
    position = expired * distance/totalTime;  // multiplied by the "step per second" 
 
    
 
    out.innerHTML = "Seconds: " + Math.floor(expired) + "<br>Position: " + Math.floor(position); 
 
    
 
    requestAnimationFrame(render); 
 
} 
 

 
render();

<canvas id='canvas' height='120' width='600'></canvas> 
 
<p id="o"></p>

---

displacement += 1 будет иметь смысл только если вы обновляете ваш холст один раз в секунду, используя setInterval или что-то:

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var distance = 300; // you said 300 pixels, not 200 
 
var position = 0;  // renamed those as well for clarity 
 
var totalTime = 10; // 
 

 
var out = document.getElementById('o'); 
 

 
function render() { 
 
    ctx.clearRect(0, 0, 1000, 1000); 
 
    ctx.beginPath(); 
 
    ctx.arc(position * (distance/totalTime), 75, 30, 0, Math.PI * 2); // we only need the position 
 
    ctx.stroke(); 
 

 
    position++; 
 
} 
 

 
setInterval(render, 1000);

<canvas id='canvas' height='120' width='600'></canvas> 
 
<p id="o"></p>