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

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

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

function isColliding(a, b) {
  return distance(a, b) <= a.r + b.r;
}

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

for (let i = 0; i < particles.length; i++) {
  for (let j = i + 1; j < particles.length; j++) {
    // проверка пары (i, j)
  }
}

function distance(a, b) {
  const dx = ;
  const dy = ;
  return Math.sqrt();
}

Почему треугольник сложнее круга

Круг полностью задаётся центром и радиусом. Поэтому для двух кругов достаточно сравнить расстояние между центрами с суммой радиусов. Треугольник задаётся тремя вершинами, а его граница состоит из трёх отрезков. Расстояние от шарика до такой границы зависит от того, к какой стороне или вершине шарик расположен ближе.

const triangle = {
  a: { x: 330, y: 45 },
  b: { x: 450, y: 270 },
  c: { x: 210, y: 235 }
};

triangle.b.y   // 270

Охватывающая окружность

Приближённый метод заменяет сложную фигуру простой. Треугольник помещают внутрь окружности и проверяют столкновение шарика с этой окружностью. Условие столкновения двух кругов уже известно.

function boundingCircle(tri) {
  const cx = (tri.a.x + tri.b.x + tri.c.x) / 3;
  const cy = (tri.a.y + tri.b.y + tri.c.y) / 3;
  const center = { x: cx, y: cy };
  const r = Math.max(
    distance(center, tri.a),
    distance(center, tri.b),
    distance(center, tri.c)
  );
  return { x: cx, y: cy, r: r };
}

function hitCircle(p, tri) {
  const c = boundingCircle(tri);
  return distance(p, c) <= p.r + c.r;
}

Тренировка: охватывающая окружность

const cx = (tri.a.x + tri.b.x + tri.c.x) / ;
const r = Math.(
  distance(center, tri.a),
  distance(center, tri.b),
  distance(center, tri.c)
);
return distance(p, c)  p.r + c.r;

Практикум: охватывающая окружность

Дополните заготовку. После каждого запуска эмулятор проверяет поведение программы и отмечает выполненные задания. Вершины треугольника можно перетаскивать мышью прямо на рисунке.

Контрольные точки на сторонах

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

function pointOnSegment(a, b, t) {
  return {
    x: a.x + (b.x - a.x) * t,
    y: a.y + (b.y - a.y) * t
  };
}

function triangleSides(tri) {
  return [[tri.a, tri.b], [tri.b, tri.c], [tri.c, tri.a]];
}

function sidePoints(a, b, n) {
  const points = [];
  for (let k = 0; k <= n; k++) {
    points.push(pointOnSegment(a, b, k / n));
  }
  return points;
}

function hitPoints(p, tri, n) {
  const sides = triangleSides(tri);
  for (let s = 0; s < sides.length; s++) {
    const points = sidePoints(sides[s][0], sides[s][1], n);
    for (let k = 0; k < points.length; k++) {
      if (distance(p, points[k]) <= p.r) {
        return true;
      }
    }
  }
  return false;
}

Тренировка: контрольные точки на сторонах

for (let k = 0; k  n; k++) {
  points.push(pointOnSegment(a, b, ));
}

Практикум: контрольные точки на сторонах

Дополните заготовку. Когда все задания будут выполнены, измените значение POINTS_N на 2 и запустите программу снова. Объясните, почему некоторые частицы проходят сквозь стороны.

Добавьте треугольное препятствие в свой проект

Эмулятор нужен для изучения метода. Основной проект по-прежнему хранится в файлах на компьютере. Перенесите в него метод охватывающей окружности.

Итоги первой части

По какую сторону от прямой лежит точка

Прямая, проходящая через точки A и B, делит плоскость на две части. Чтобы определить, в какой из них лежит точка P, вычисляют значение выражения:

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

Пересекает ли траектория сторону треугольника

За один шаг центр шарика перемещается из точки P1 = (x, y) в точку P2 = (x + vx, y + vy). Отрезок P1P2 называется траекторией шага. Если траектория пересекла сторону AB, шарик столкнулся с этой стороной, даже если ни в одном проверенном положении он стороны не касался.

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 + p.vx, y: p.y + p.vy };
  const sides = triangleSides(tri);
  for (let s = 0; s < sides.length; s++) {
    if (segmentsCross(p, next, sides[s][0], sides[s][1])) {
      return s;
    }
  }
  return -1;
}

function reflect(p, a, b) {
  const len = distance(a, b);
  const nx = -(b.y - a.y) / len; // единичный вектор,
  const ny = (b.x - a.x) / len;  // перпендикулярный стороне
  const dot = p.vx * nx + p.vy * ny;
  p.vx = p.vx - 2 * dot * nx;
  p.vy = p.vy - 2 * dot * ny;
}

Тренировка: пересечение траектории со сторонами треугольника

return d1 * d2   d3 * d4 ;

Практикум: пересечение траектории со сторонами треугольника

Первая частица заготовки движется очень быстро. Пока функции не дописаны, она пролетает сквозь треугольник. После выполнения заданий она должна отражаться от сторон, а пересечённая сторона — подсвечиваться.

Проверка средствами Canvas

Контекст рисования Canvas умеет сам определять, лежит ли точка внутри фигуры. Фигуру описывают объектом Path2D — контуром, а проверку выполняет метод isPointInPath. Математику выполняет браузер, поэтому метод подходит для фигур любой формы: звезды, многоугольника, фигуры с дугами.

function trianglePath(tri) {
  const path = new Path2D();
  path.moveTo(tri.a.x, tri.a.y);
  path.lineTo(tri.b.x, tri.b.y);
  path.lineTo(tri.c.x, tri.c.y);
  path.closePath();
  return path;
}

function hitPath(p, tri) {
  const path = trianglePath(tri);
  const points = [
    { x: p.x, y: p.y },
    { x: p.x + p.r, y: p.y },
    { x: p.x - p.r, y: p.y },
    { x: p.x, y: p.y + p.r },
    { x: p.x, y: p.y - p.r }
  ];
  for (let k = 0; k < points.length; k++) {
    if (ctx.isPointInPath(path, points[k].x, points[k].y)) {
      return true;
    }
  }
  return false;
}

Практикум: проверка средствами Canvas

Сравнение методов

Перенесите в проект более точный метод

Выберите метод контрольных точек или метод траектории и замените им проверку окружностью в своём проекте. Метод траектории сложнее, но позволяет отражать объекты от сторон.

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