sketchometry — динамическая геометрия в браузере

в 17:26, , рубрики: html, javascript, векторная графика, геометрия, динамическая геометрия

sketchometry — это интерактивная динамическая геометрия, веб приложение, разработанное на базе библиотеки JSXGraph. Эта статья является учебным пособием по её использованию.

Чтобы посмотреть, что это такое, идём на сайт sketchometry. Жмём большую круглую блямбу в правом верхнем углу с надписью «start sketchometry» — и перед нами чертёжная доска с панелью инструментов вверху. На разных устройствах выглядит по-разному, как именно, можно получить представление, поизменяв ширину окна.

Панель инструментов


На моём ноутбуке верхняя часть с панелью инструментов выглядит так:

image

Слева мы видим кнопки отмены и возврата действия.

Правее находятся кнопки, включающие или выключающие режимы перемещения и построения. Если кнопка выделена, то режим включен, если нет — выключен. По умолчанию оба режима включены.
Ну, раз режим построения включен, так давайте что-нибудь и построим.

Построения


Большинство построений в выполняются жестами мышкой или пальцем. Описание жестов есть здесь (краткое на английском и немецком) и здесь (на немецком).

Построение Жест Результат
Точка Жест точка Точка
Прямая Жест прямая Прямая
Окружность Жест окружность Окружность
Треугольник Жест треугольник Треугольник
Четырёх- угольник Жест четырёхугольник Четырёхугольник
Окружность по центру и точке Жест окружность по центру и точке Окружность по центру и точке
Луч Жест Луч Луч
Прямая через точку Жест Прямая через точку Прямая через точку
Окружность через точку Жест Окружность через точку Окружность через точку
Прямая через две точки Жест Прямая через две точки Прямая через две точки
Луч по двум точкам Жест Луч по двум точкам Луч по двум точкам
Отрезок ЖестОтрезок Отрезок
Окружность по центру и точке Жест Окружность по центру и точке Окружность по центру и точке
Средняя точка Жест Средняя точка Средняя точка
Отражённая точка Жест Отражённая точка Отражённая точка
«Свободный» перпендикуляр Жест Свободный перпендикуляр Свободный перпендикуляр
Перпендикуляр через точку на прямой image image
Перпендикуляр- ный отрезок через свобод- ную точку Жест Перпендикулярный отрезок через свободную точку Перпендикулярный отрезок через свободную точку
Перпендикуляр- ная прямая через свободную точку Жест Перпендикулярная прямая через свободную Перпендикулярная прямая через свободную
Параллельная прямая Жест Параллельная прямая Параллельная прямая
Параллельная прямая через заданную точку Жест Параллельная прямая через заданную точку Параллельная прямая через заданную точку
Отражение точки Жест Отражение точки Отражение точки
Биссектриса Жест Биссектриса Биссектриса
Угол Жест Угол Угол
Окружность по трём точкам Жест Окружность по трём точкам Окружность по трём точкам
Сектор по трём точкам Жест Сектор по трём точкам Сектор по трём точкам
Угол по трём точкам Жест Угол по трём точкам Угол по трём точкам
Многоугольник Жест Многоугольник Многоугольник
Касательная Жест Касательная Касательная

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

Двигаемся дальше вправо по главной панели инструментов. Следующая кнопка, «Ещё...», открывает дополнительную панель инструментов построения.

Дополнительная панель инструментов построения

С помощью инструментов этой панели можно построить:

  1. График функции.
    Вкладка символыЗдесь мы видим поле ввода функции и ниже несколько вкладок. Первая — вкладка ввода некоторых символов. Остальные символы вводятся с клавиатуры. Да и эти тоже могут быть введены с клавиатуры.
    Вторая вкладка — выбор предопределённой функции из списка.Вкладка выбора функции из списка
    Третья вкладка — выбор функции из списка уже построенных.Вкладка выбора функции из списка уже построенныхЧетвёртая вкладка — выбор ползунка из списка. Будет использовано его текущее значение.Вкладка выбора ползунка из спискаПятая вкладка — задание области определения функции.Вкладка задания области определенияШестая — вкладка рукописного ввода.Вкладка рукописного ввода
  2. Угол по трём точкам.
    Выбираем три точки (вершина при этом должна быть выбрана второй), получаем угол.
    Угол по трём точкам Готовый угол
  3. Сектор по трём точкам.
    Выбираем три точки (центр при этом должн быть выбран вторым), получаем сектор.
    Сектор по трём точкам Гльтовый сектор
  4. Правильный многоугольник.
    Выбрав этот инструмент, задаём число сторон и затем выделяем две точки, которые зададут одну из сторон.
    Построение многоугольника Готовый многоугольник
  5. Линейку.
    Это по сути отрезок с делениями, рядом с которым показана его длина.
    Для измерения, например, расстояния между точками надо, выбрав инструмент «Линейка», щёлкнуть по одной из точек, а потом второй конец линейки перетащить на вторую точку.
    Построение линейки Готовая линейка
  6. Ползунок.
    Ползунок
  7. Текст.
    Выглядит почти так же, как и инструмент построения графика функции. Разница только в том, что справа появилась кнопка «value», которая вставляет значение ползунка или функции при заданном аргументе.Инструмент текст

Панель инструментов — продолжение


Продолжим знакомство с основной панелью инструментов.
Следующий инструмент — Масштаб / Навигация.
Масшт/Нав
Команды масштабирования:

  1. Уменьшить.
  2. Вернуть исходный.
  3. Увеличить.

Команды навигации (движения по чертежу):

  1. Влево.
  2. Вверх.
  3. В середину.
  4. Вниз.
  5. Вправо.

Следующий — инструмент удаления объектов, корзина. Удаление происходит простым щелчком, без запроса подтверждения. Но зато отмена действия возможна даже после перезагрузки страницы.
Дальше — инстрмент «Глаз» (скрыть/показать объекты).
Следующий инструмент — инструмент измерения.
Измерить можно почти всё (кроме графика функции). Правда в случае измерения прямой линии и луча получим NaN.
Инструмент измерения
При измерении точки получаем её координаты. А в остальный случаях всё вполне ожидаемо — длины, площади, углы.
Если выделить несколько объектов (для точек это невозможно), получим сумму измеряемых величин.
И наконец последний собственно инструмент — свойства.

Окна настройки свойств объектов


Свойства доски Свойства точки Свойства точки, нижняя часть
Свойства доски Свойства точки Свойства точки, нижняя часть

Здесь, в общем-то всё понятно. Каждое окно представляет собой, по сути, меню выбора значения свойства. При выборе некоторых пунктов открываются дополнительные поля.
Например:

Ввод координат точки Размер точки Форма точки Цвет заливки точки (правый верхний угол — без заливки)
Ввод координат точки Размер точки Форма точки Цвет заливки точки

Анологичные дополнительные поля появляются и в других окнах.
Познакомимся и с другими диалогами.

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

Остальные окна целиком, пожалуй, приводить не имеет смысла. Их отличия — только в небольших деталях.

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

Галерея


Последняя (самая правая) кнопка в главной панели инструментов — выход в галерею. Галерея выглядит вот так:Галерея Мы видим, что у каждого чертежа в галерее своё окно, которые перелистываются щелчком мышки или жестом.
Каждое окно имеет панель инструментов и, кроме того, есть панель инструментов галереи.
Начнём с панели галереи.
Нажав «Новый» мы просто попадаем на чистую доску.
Нажав «Импорт» можно импортировать чертёж из облаков:
Импорт
В первых трёх случаях формы аутетификации открываются в отдельном окне. В четвёртом — на месте. Вот так они выглядят (для примера — Dropbox и WebDAV).
Дропбокс Вебдав
Следующая кнопка — настройки.
Настройки 1
Настройки 2
Кнопка «Помощь» — это просто ссылка на http://www.sketchometry.org/help/
Теперь перейдём к окошку чертежа.
Слева видим имя чертежа. Оно редактируемо на месте.
Справа первая кнопка — экспорт в облако. Она открывает почти такое же окно, как и кнопка «Импорт из облака». Отличие в последней строке:
Экспорт в облако
Эта строка позволяет сохранить чертёж на своём компьютере, задав при этом формат файла (формат файла можно задать и при сохранении в остальные облака). Что это за форматы:

  1. sketch — это формат, в котором сохраняет чертежи программа geonext, разработанная тем же Байротским университетом, что и sketchometry и библиотека JSXGraph, на которой sketchometry основана.
  2. Jessie Code — это файл, содержащий чертёж в виде текста на языке JessieCode. А JessieCode — это узкоспециализированный язык — надстройка над JSXGraph. С синтаксисом JessieCode можно познакомиться здесь, а потренироваться — здесь.
  3. HTML — страница, содержащая скрипт на JessieCode.

И последнее, что осталось сказать — о правых двух кнопках. Это клонирование и удаление чертежа.
Вот и всё.
Ну вот, это была, так сказать, сказка. А теперь…

Послесказие


  • О лицензии. Как такового текста лицензии там нигде нет. Только где-то сбоку написано, что

    sketchometry is free to use. It can be used for education purposes and privately for free. For commercial usage please get in contact with the address in the imprint.

  • Работа над sketchometry ещё далеко не закончена, поэтому там кроме фич есть и глюки. Наиболее серьёзный — это полное исчезновение чертежа при попытке выполнить некоторые действия. Я с таким встретился при изменении видимости ползунка и при попытке заставить многоугольник оставлять след (я, правда, не знаю, зачем это может понадобиться, но всё же).
  • Было бы желательно, конечно, показать реальные учебные задания, но их пока нет.

Вот такие три ложки дёгтя.

Автор: andyudol

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js