Конструкции, которые понадобятся на занятии

Справочник не изучается отдельно. Возвращайтесь к нему, когда в тексте или в заготовке встречается незнакомая запись.

function distance(a, b) {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.sqrt(dx * dx + dy * dy);
}

function side(a, b, p) {
  return (b.x - a.x) * (p.y - a.y) - (b.y - a.y) * (p.x - a.x);
}

function segmentsCross(p1, p2, a, b) {
  const d1 = side(a, b, p1);
  const d2 = side(a, b, p2);
  const d3 = side(p1, p2, a);
  const d4 = side(p1, p2, b);
  return d1 * d2 < 0 && d3 * d4 < 0;
}

Фрагменты перетаскиваются мышью в пропуски. Можно также выбрать фрагмент щелчком, а затем щёлкнуть по пропуску. Повторный щелчок по заполненному пропуску возвращает фрагмент на место.

function crossedSide(p, tri) {
  const next = { x: p.x + , y: p.y +  };
  const sides = triangleSides(tri);
  for (let s = 0; s < sides.length; s++) {
    if (segmentsCross(p, next, sides[s][0], sides[s][1])) {
      return ;
    }
  }
  return ;
}

Завершите работу прошлого занятия

Это время отведено на задания занятия 5, которые остались невыполненными. Если всё уже сделано, переходите к факультативному заданию на следующем экране.

Метод траектории для многоугольника

Функция triangleSides из занятия 5 перечисляла три стороны вручную. Для многоугольника с любым числом вершин так поступить нельзя: заранее неизвестно, сколько сторон нужно записать. Поэтому вершины хранятся в массиве, а стороны строятся в цикле.

const polygon = [
  { x: 300, y: 40 },
  { x: 440, y: 120 },
  { x: 400, y: 270 },
  { x: 220, y: 280 },
  { x: 170, y: 130 }
];

Кадр и частота обновления экрана

Изображение на мониторе не меняется непрерывно. Монитор несколько десятков раз в секунду заново выводит изображение целиком. Каждое такое изображение называется кадром. Число кадров в секунду называется частотой обновления экрана и измеряется в герцах (Гц).

Цикл кадров на requestAnimationFrame

Функция requestAnimationFrame(f) просит браузер вызвать функцию f один раз — непосредственно перед выводом следующего кадра. Чтобы анимация продолжалась, функция f в конце сама запрашивает следующий кадр. Так получается цикл кадров: на каждый кадр экрана приходится ровно один шаг анимации.

function update() {
  particles.forEach(moveParticle);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(drawParticle);
}

function frame() {
  update();
  draw();
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Разделение шага на две функции даёт три преимущества. Каждая функция решает одну задачу, поэтому программу легче читать и искать в ней ошибки. Во время паузы можно рисовать модель, не изменяя её. Наконец, во второй части занятия время кадра понадобится только функции update.

Тренировка: цикл кадров

function frame() {
  update();
  draw();
  requestAnimationFrame();
}

Практикум: переход на requestAnimationFrame

Заготовка устроена так же, как программы прошлых занятий: шаг анимации выполняет функция tick, которую вызывает setInterval. В этой функции изменение положения и рисование перемешаны. Переделайте программу в цикл кадров с отдельными функциями update и draw.

setTimeout(() => console.log("Кадров за секунду:", frameCount), 1000);

Итоги первого урока

Время кадра и скорость в пикселях в секунду

В программах прошлых занятий скорость задана в пикселях за шаг: за каждый шаг шарик смещается на vx пикселей. Пока шаги вызывал setInterval, их число в секунду не зависело от монитора: при интервале 30 мс это примерно 33 шага. В цикле на requestAnimationFrame шаг выполняется в каждом кадре, а число кадров в секунду зависит от экрана: 60 на экране 60 Гц, 120 на экране 120 Гц. Значит, на втором экране тот же шарик движется вдвое быстрее. Чтобы скорость не зависела от экрана, её задают в пикселях в секунду, а смещение за кадр вычисляют по времени, прошедшему с предыдущего кадра.

let lastTime = performance.now();

function frame(timestamp) {
  let dt = (timestamp - lastTime) / 1000;
  lastTime = timestamp;
  dt = Math.min(dt, 0.1);
  update(dt);
  draw();
  requestAnimationFrame(frame);
}

function update(dt) {
  particles.forEach(p => {
    p.x += p.vx * dt; // vx — пикселей в секунду
    p.y += p.vy * dt;
  });
}

Пауза и продолжение

let paused = false;

canvas.addEventListener("click", () => {
  paused = !paused;
});

function frame(timestamp) {
  let dt = (timestamp - lastTime) / 1000;
  lastTime = timestamp;
  dt = Math.min(dt, 0.1);
  if (!paused) {
    update(dt);
  }
  draw();
  requestAnimationFrame(frame);
}

Три способа запуска анимации

Тренировка: время кадра

function frame(timestamp) {
  let dt = (timestamp - ) / ;
  lastTime = ;
  update(dt);
  draw();
  requestAnimationFrame(frame);
}

function moveParticle(p, dt) {
  p.x += p.vx * ;
}

Практикум: время кадра и пауза

Заготовка — результат практикума первой части. Скорости частиц пока заданы в пикселях за кадр. Переведите программу на скорости в пикселях в секунду и добавьте паузу по щелчку.

Ускорение, затухание и шлейф

До сих пор скорость объектов менялась только при отражении. В реальном мире скорость изменяется постепенно: падающий предмет разгоняется, катящийся шар замедляется. Учёт времени кадра позволяет описать такие изменения так, что они не будут зависеть от частоты экрана.

function moveParticle(p, dt) {
  p.vy += G * dt;                // ускорение
  p.vx *= 1 - FRICTION * dt;     // затухание
  p.vy *= 1 - FRICTION * dt;
  p.x += p.vx * dt;
  p.y += p.vy * dt;
  if (p.y > canvas.height - p.r) {
    p.y = canvas.height - p.r;
    p.vy = -Math.abs(p.vy) * BOUNCE; // отскок
  }
}

function draw() {
  // шлейф: полупрозрачная заливка
  // вместо ctx.clearRect
  ctx.fillStyle = "rgba(248, 250, 249, 0.25)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  particles.forEach(drawParticle);
}

Практикум: ускорение, затухание и шлейф

В заготовке уже есть цикл кадров с учётом dt и отскок от пола с потерей скорости. Щелчок по рисунку подбрасывает шарики. Добавьте три эффекта. После выполнения заданий измените значения констант G, FRICTION и BOUNCE и пронаблюдайте, как меняется движение.

Переведите проект на цикл кадров

Замените в своём проекте setInterval циклом на requestAnimationFrame с учётом dt и добавьте один эффект из третьей части: ускорение, затухание или шлейф.

Управление объектом с клавиатуры

При нажатии клавиши браузер создаёт событие keydown, при отпускании — событие keyup. Обработчики этих событий регистрируются для всего документа: document.addEventListener. Какая клавиша нажата, показывает свойство event.key.

const mover = { x: 300, y: 160, r: 16, speed: 240 };
const keys = {};

document.addEventListener("keydown", event => {
  keys[event.key] = true;
});

document.addEventListener("keyup", event => {
  keys[event.key] = false;
});

function update(dt) {
  if (keys.ArrowLeft) {
    mover.x -= mover.speed * dt;
  }
  if (keys.ArrowRight) {
    mover.x += mover.speed * dt;
  }
}

Практикум: движение управляемого объекта стрелками

Щёлкните по рисунку, чтобы нажатия клавиш попадали в программу. Проверка заданий имитирует нажатия сама, поэтому для неё щелчок не нужен.

Проверьте результат занятия