Play IT

Модель, update и render

Интерактивное демо «Модель, update и render» — раздел Энциклопедия · Разработка графики (4.18).

code-devencyclopediagraphics

Модель → update → render

Один шар на canvas: переключите слой и смотрите, что меняется

Модель (RAM) — кадр #0
{
  "x": 160,
  "y": 100,
  "vx": 110,
  "vy": 75,
  "radius": 14,
  "color": "#ef4444"
}
Код слоя «Цикл»
let last = 0;
function frame(t) {
  const dt = Math.min((t - last) / 1000, 0.05);
  last = t;
  update(ball, dt, W, H);
  render(ctx, ball);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);