Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Точки на координатной плоскости JS: Абстракция с помощью данных

Одна из самых удобных тем для тренировки навыков моделирования — геометрия. В отличие от других разделов математики, она визуально представима и интуитивно понятна для всех. Для начала вспомним базовые понятия, с которыми будем иметь дело.

Координатная плоскость (декартова) — плоскость, на которой задана система координат. Координаты задаются на двух пересекающихся под прямым углом прямых (числовых осях) x и y.

                     6 | y
                     5 |
                     4 |
                     3 |     . (2, 3)
                     2 |
                     1 |
                       |
----------------------------------------------------
                       |  1  2  3  4  5  6         x
                       |
                       |
                       |
                       |
                       |
                       |

Самый простой примитив, который можно расположить на плоскости — точка. Её положение определяется двумя координатами, и в математике она записывается так: (2, 3), где первое число — координата по оси x, а второе — по оси y. В коде её можно представить как массив, состоящий из двух элементов.

const point = [2, 3];

Этого уже достаточно для выполнения полезных геометрических действий. Например, для поиска симметричной точки относительно оси x, достаточно инвертировать (поменять знак на противоположный) второе число.

                     6 | y
                     5 |
                     4 |
                     3 |     . (2, 3)
                     2 |
                     1 |
                       |
----------------------------------------------------
                       |  1  2  3  4  5  6         x
                    -1 |
                    -2 |
                    -3 |     . (2, -3)
                    -4 |
                    -5 |
                    -6 |
const point = [2, 3];

const [x, y] = point;
// x = 2, y = 3

const symmetricalPoint = [x, -y];
// x = 2, y = -3

Иногда бывает нужно найти точку, находящуюся между двумя другими точками ровно посередине (ещё говорят, что нужно найти середину отрезка). Такая точка вычисляется через поиск среднего арифметического каждой из координат. То есть координата x "срединной" точки равна (x1 + x2) / 2, а координата y(y1 + y2) / 2.

const getMiddlePoint = (p1, p2) => {
  const x = (p1[0] + p2[0]) / 2;
  const y = (p1[1] + p2[1]) / 2;

  return [x, y];
};

const point1 = [2, 3];
const point2 = [-4, 0];

console.log(getMiddlePoint(point1, point2)); // => [-1, 1.5]

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

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

const point1 = [3, 4];
const point2 = [-8, 10];
const segment = [point1, point2];

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 21 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 21 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»