БлогNot. Как поставить точки на координатной плоскости онлайн :)

Как поставить точки на координатной плоскости онлайн :)

Странно, не нашёл такого сервиса в cети, везде сплошные графопостроители - задаёшь формулу, видишь график.

Меж тем, в жизни обычно никаких функций y(x) не задано, а есть только координаты точек, по которым затем численными методами строятся кривые и выводятся уравнения зависимостей.

Как часто бывает, быстрее написать самому. Основная часть скрипта позволяет следующее:

  • Кликом по канве ставим точки, видим их координаты в списке текстового поля под канвой.
  • При клике в текстовом поле всё выделяется, чтобы было удобно нажать Ctrl+C для копирования и последующей вставки в текстовый файл. Затем мы можем дальше обрабатывать данные в Excel или Mathcad. С этой же целью значения x и y разделены просто пробелом и автоматически сортируются при добавлении новой точки.
  • Можно исправить существующее значение или добавить новую точку просто вводом в текстовое поле с последующим нажатием кнопки "Перерисовать".
  • Назначение кнопки "Очистить" очевидно.

На этом полезный для меня функционал закончился, но я решил добавить ещё пару действий для баловства (разумеется, на них и ушло основное время разработки).

  • Безье - построить по точкам сплайноподобную кривую Безье.
  • Лагранж - понятно, полином Лагранжа. Более мощная версия оного есть вот тут в блоге. Функция даже выводит под кнопками уравнение в форме Лагранжа. Следует учитывать, что на большом количестве точек и при "скачущих" по вертикальной оси точках Лагранжев подход уже не годится, кривую начинает сильно штормить.

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

Поскольку сортировка делается только при добавлении точки, можно построить и более хитрые кривые Безье, например, вписав идущую не по порядку пару значений x y в последнюю строку текстового поля и нажав "Перерисовать", а затем "Безье". Покажем этот момент на скрине.

Фрагмент экрана при работе приложения, размер изображения уменьшен
Фрагмент экрана при работе приложения, размер изображения уменьшен

 Открыть скрипт "Отображение точек на плоскости" в текущем окне/вкладке (4 Кб)

12.06.2024, 04:09 [236 просмотров]


теги: графика javascript программирование числа сервис

К этой статье пока нет комментариев, Ваш будет первым