Математика 2D и 3D для графики
Графический код — геометрия в числах: сдвиг, скорость, угол, расстояние. Ниже — приёмы, которые встречаются в большинстве canvas-проектов. Теория — работа с геометрией.
Векторы
2D-вектор — пара чисел v = (x, y). В коде — { x, y } или [x, y].
| Операция | Формула | В игре |
|---|---|---|
| Сложение | a + b | смещение позиции |
| Вычитание | b − a | направление от A к B |
| Масштаб | k · v | ускорение |
| Длина | ‖v‖ = √(x² + y²) | Math.hypot(x, y) |
| Нормализация | v / ‖v‖ | единичное направление |
Движение:
position.x += velocity.x * dt;
position.y += velocity.y * dt;
dt — delta time.
Код ITЗагрузка примера кода…
Скалярное произведение (dot)
a · b = ax·bx + ay·by
Геометрический смысл: ‖a‖ ‖b‖ cos θ, где θ — угол между векторами.
| Результат dot | Значение |
|---|---|
| > 0 | острый угол, векторы в одну сторону |
| = 0 | перпендикулярны |
| < 0 | тупой угол |
Применения:
- преследование — нормализовать
(player - enemy)и умножить на скорость - обзор врага —
dot(forward, toPlayer) > cos(45°) - освещение в 3D — яркость ∝ N · L
Векторное произведение
В 3D a × b даёт нормаль к плоскости треугольника.
В 2D используют скаляр ax*by - ay*bx — знак показывает, слева или справа точка относительно направления.
Тригонометрия и поворот (2D)
Поворот точки (x, y) на угол θ в радианах:
x' = x·cos θ − y·sin θ
y' = x·sin θ + y·cos θ
Градусы в радианы: theta = deg * Math.PI / 180.
Поворот вокруг центра (cx, cy):
x -= cx; y -= cy- формулы выше
x += cx; y += cy
В Canvas удобнее API:
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(angle);
ctx.drawImage(sprite, -w/2, -h/2);
ctx.restore();
save и restore — стек трансформаций. Без них следующие объекты сдвинутся вместе с текущим.
Матрицы
Аффинное преобразование 2D — матрица 3×3, в 3D — 4×4.
| Операция | Буква в 3D |
|---|---|
| Сдвиг | T (translation) |
| Поворот | R (rotation) |
| Масштаб | S (scale) |
Порядок умножения важен: M = T * R * S — сначала локальный масштаб, затем поворот, затем перенос в мир.
Цепочка MVP в 3D:
- Model — объект в мире
- View — камера
- Projection — перспектива или ортографика
Вершинный шейдер умножает вершину на MVP. Подробнее — глава 11.
Интерполяция
Lerp (linear interpolation):
function lerp(a, b, t) {
return a + (b - a) * t; // t от 0 до 1
}
pos = lerp(pos, target, 0.1) — мягкое следование за целью.
Easing — нелинейный t для UI-анимаций.
В 3D вращения хранят как кватернионы и интерполируют slerp — плавный поворот через 180°.
Коллизии
| Тип | Условие |
|---|---|
| AABB | пересечение по осям x и y |
| Круг–круг | hypot(dx,dy) < r1 + r2 |
| Точка в круге | hypot(px-cx, py-cy) < r |
| Точка в AABB | left <= px <= right и т.д. |
Для полигонов — SAT, GJK. В простых 2D-играх хватает кругов и прямоугольников.
Камера в 2D
ctx.save();
ctx.translate(-camera.x, -camera.y);
// draw world...
ctx.restore();
// HUD без translate — экранные координаты
Мышь в мировые координаты: worldX = mouseX + camera.x.
Минимальный набор для старта
position += velocity * dthypot, нормализация, dotsin/cosилиctx.rotate- круг–круг и AABB
- камера = обратный
translate
Остальное — при переходе к WebGL и Unity.