JSXGraph — введение

Эта статья — о JSXGraph, написанной на JavaScript библиотеке для отображения геометрических чертежей в веб-браузере

Интерактивные геометрические среды

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

• Динамические геометрические чертежи — это по своей сути геометрические модели, которые содержат в себе не просто изображение, а весь алгоритм, на основе которого это изображение строится. В результате чертёж может изменяться при изменении положения его элементов, а связи между элементами остаются при этом неизменными. Поэтому ученик имеет дело фактически не с одной геометрической фигурой, а с целым классом фигур.
• Интерактивные геометрические чертежи — это чертежи, которые могут изменяться как учителем, так и учениками в процессе и после окончания построения. Это позволяет организовать взаимодействие между учеником и учителем через такой чертёж.

Существует большое количество так называемых интерактивных геометрических сред, которые позволяют создавать геометрические чертежи, являющиеся и интерактивными, и динамическими.

Первой интерактивной геометрической средой была программа Geometric Supposer, разработанная командой из Массачусетского технологического института под руководством Иуды Л. Шварца для компьютеров Apple II в начале восьмидесятых годов прошлого века. Развитие этой программы продолжается в Израиле для Windows, но сведений о ней очень мало.

Второй такой программой стала Cabri, разаработанная в 1986 году. Она до сих пор активно развивается и является одной из самых распространённых.

Третьей интерактивной геометрической средой стала The Geometer's Sketchpad, которую разработал Nick Jackiw в 1991 году. Тоже активно развивается и является самой популярной в США.

Обо всех геометрических средах рассказывать не буду — их много, многие из них мало распространены, да и не обо всех я знаю. Упомяну ещё о GeoGebra, GEONExT, Cinderella, TracenPoche. Почему именно эти, дальше станет понятно. Ну и по патриотическим соображениям упомяну ещё 1С: Математический конструктор. По своим характеристикам, кстати, она ничуть не хуже других. Правда, на мой взгляд, и не лучше. Того же класса.

Разработку Геогебры начал в 2001 году Markus Hohenwarter в Зальцбургском университете и сейчас продолжает Michael Borcherds в Университете Иоганна Кеплера в Линце.

GEONExT разработал Alfred Wassermann в Байротском университете на основе программы GEONET (http://did.mat.uni-bayreuth.de/geonet/index.html), прототип которой был создан в 1997 году.

Программу Cinderella написали Ulrich Kortenkamp и Jürgen Richter-Gebert в 1998 году.

TracenPoche написали Jean-Philippe Vanroyen и Emmanuel Ostenne, в каком году, установить не удалось.

Большинство ИГС написаны на Яве или имеют написанный на Яве просмотрщик. Это позволяет работать с такими чертежами в любом современном браузере, что обеспечивает практически всеплатформенность. Однако аплеты имеют некоторые недостатки, не будем о них здесь говорить подробно, они хорошо известны. Это во-первых.
Во-вторых, у каждой такой программы свой формат файла чертежа. Это приводит к даже не к дублированию, а к многократному повторению одной и той же работы.
Поэтому разработки интерактивных геометрических сред продолжаются.

JSXGraph

JSXGraph — написанная на JavaScript библиотека для отображения геометрических чертежей в веб-браузере. Она предоставляет API, используемый в скриптах, импортирующих файлы геометрических чертежей на страницу. JSXGraph, как и GEONExT, разработана в Байротском университете. Собственно, JSXGraph как раз в первую очередь и предназначена для отображения чертежей, созданных в GEONExT. Поэтому этот фотмат практически полностью поддерживается. Кроме того, поддерживаются форматы GeoGebra, Cinderella, TracenPoche (поэтому я и упомянул эти программы в предыдущем разделе) и Intergeo. Intergeo – это общеевропейский проект, цель которого заключается в разработке универсального форамата файла геометрического чертежа. Таким образом получается, что эта библиотека проктически всеплатформенная во всех смыслах этого слова.

Тот же самый API может быть использован для построения чертежей с нуля или для изменения загруженных готовых чертежей, то есть для создания полноценной он лайн интерактивной геометрической среды.

Инициализация

Итак, что же нужно сделать, чтобы включить интерактивный геометрический чертеж в веб страницу? Нужны три действия:

1. Подключить файлы JSXGraph. Это файлы jsxgraph.css и jsxgraphcore.js. Делаем это как обычно:
   

   <link rel="stylesheet" type="text/css" href="domain/jsxgraph.css"/>
   <script type="text/javascript" src="domain/jsxgraphcore.js"></script>

   domain — это место расположения файлов JSXGraph. Это может быть локальная директория или jsxgraph.uni-bayreuth.de/distrib
2. Создать HTML элемент, содержащий чертёж:
   

   <div id="elementID"></div>,

   где elementID — идентификатор элемента, elementClass — класс элемента. Естественно, может быть задан стиль элемента любым известным способом.
3. Инициализировать “чертёжную доску”:
   

   var brd = JXG.JSXGraph.initBoard('elementClass',{attributes}),

   где elementClass – класс элемента, attributes – атрибуты “доски”, которые задают её свойства: размеры, сохранение пропорций, видимость осей, сетки, кнопок навигации и уведомления о правах.

Построение геометрических объектов

Существуют две основные команды:

1. Команда создания элемента
   

   var el = brd.create('type',[parents],{attributes});

   где type — тип объекта (точка, линия и так далее),
   [parents] — массив родительских элеметнтов (например, две точки для линии),
   attributes — атрибуты (их рассмотрим позже).
2. Команда задания свойств элемента
   

   el.setProperty({key1:value1,key2:value2,...});

   где keyN — имя энного свойства, valueN — значение энного свойства.

Точка

Простейшая команда создания точки выглядит так:

var el = brd.create('point',[x, y]);

Имя точки задаётся с помощью атрибута name (например, {name:'A'}).

Точки могут быть свободными (их можно двигать мышкой), фиксированными (их двигать мышкой невозможно) и зависимыми (их движение зависит от движения другого объекта, а мышкой их двигать тоже невозможно).

По умолчанию создаётся свободная точка:

var p0 = board.create('point',[-1, 1], {name:'A'});

Если атрибуту fixed присвоить значение true, то будет создана фиксированная точка:

var pl = board.create('point',[1, -1], {name:'B', fixed:true});

Если в качестве значения хотя бы одной из коордитнат точки задать функцию без параметров, возвращающую число, то будет создана зависимая точка:

var p2 = board.create('point',[function(){return p0.X()}, -2], {name:'С'});

Вот так это выглядит в JSFiddle: jsfiddle.net/AndreyDolgov/fbha4/embedded/result%2Chtml%2Cjs.
На чертеже точка A — свободная, точка B — фиксированная, точка C — зависимая от точки A.

Прямая, луч, отрезок

Прямая может быть задана двумя способами:

• Двумя точками
  

  board.create('line',[point1, point2])

  Точки могут быть заданы или именами объектов, или непосредственно координатами (в этом случае точка невидима).
• Уравенением ax+by+c=0 (обратите внимание на порядок коэффициентов в команде)
  

   board.create('line',[c, a, b]) 

Примеры:

var p1 = board.create('point',[0,0],{name:'A'});
var p2 = board.create('point',[3,2],{name:'B'});
var l1 = board.create('line',[p1,p2]);
var l2 = board.create('line',[p1,[1,5]]);

В JSFiddle: fiddle.jshell.net/AndreyDolgov/tybTW/show/light.

var l3 = board.create('line',[-1.0,-2.0,1.0]);

В JSFiddle: fiddle.jshell.net/AndreyDolgov/2A8Xa/show/light.

Луч и отрезок с точки зрения JSXGraph – это те же прямые, но с другими атрибутами straightFirst и straightLast. Если один из этих атрибутов равен false, то мы получим луч, если оба – отрезок.

Пример:

var p1 = board.create('point',[-2,-1],{name:'A'});
var p2 = board.create('point',[3,-2],{name:'B'});
var p3 = board.create('point',[-3,2],{name:'C'});
var l1 = board.create('line',[p1,p2],{straightFirst:false});
var l2 = board.create('line',[p1,p3],{straightLast:false});
var l3 = board.create('line',[p2,p3],{straightFirst:false,straightLast:false});

В JSFiddle: fiddle.jshell.net/AndreyDolgov/yKxku/show/light.

Окружность

Окружность может быть построена четырьмя способами:

1. По центру и точке на окружности.
   

   board.create('circle',[centerPoint,pointOnCircle]);

   Если аргументов два, то они интерпретинуются как центр и точка на окружнсти.
   Например:
   

   var center = board.create('point',[3,3],{name:'O'});
   var ptOnCir = board.create('point',[4,5],{name:'A'});
   var с = board.create('circle',[center,ptOnCir]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/A3JMq/show/light.
   Как всегда, точка может быть задана или именем переменной, или непосредственно координатами. Если точка задана непосредственно координатами, она не видна.
   Например:
   

   var theCircle = board.create('circle',[[3,3],[4,5]]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/9FgfW/show/light.
2. По центру и радиусу.
   

   board.create('circle',[centerPoint,radiusOfCircle]);

   Когда второй аргумент является числом, оно интерпретируется как радиус.
   Например:
   

   var center = board.create('point',[3,3]);var theCircle = board.create('circle',[center,1]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/VSRUx/show/light.
3. По центру и другой окружности с известным радиусом.
   

   board.create('circle',[centerPoint,circleWithDesiredRadius]);

   Если второй аргумент – это окружность, то ее радиус используется для построения новой окружности.
   Например:
   

   var circle1 = board.create('circle',[[0,1],[0,2]]);var circle2 = board.create('circle',[[0,3],circle1]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/aYezn/show/light.
4. По трём точкам.
   

   board.create('circle',[point1,point2,point3]);

   Если аргументов три, то они интерпретируются как три точки, через которые строится окружность.
   Например:
   

   var p1 = board.create('point',[2,1],{name:'p1',size:2});
   var p2 = board.create('point',[2,5],{name:'p2',size:2});
   var p3 = board.create('point',[4,3],{name:'p3',size:2});
   var c = board.create('circle',[p1,p2,p3]);

   В JSFiddle: fiddle.jshell.net/AndreyDolgov/vRW3z/show/light

Многоугольник

Многоугольник задают массивом вершин.

board.create('polygon',[ptVertex1,ptVertex2,...]);

При этом первым и последним элементом массива должна былть одна и та же вершина. Если этого не сделать, то первая вершина автоматически дублируются в качестве последней.
Пример:

p1 = board.create('point',[0,0],{name:''});
p2 = board.create('point',[1,3],{name:''});
p3 = board.create('point',[5,5],{name:''});
p4 = board.create('point',[4,2],{name:''});
board.create('polygon',[p1,p2,p3,p4]);

В JSFiddle: jsfiddle.net/AndreyDolgov/Fp3VM/show/light.

Коническое сечение

Может быть задано двумя способами:

1. Пятью точками
   

   board.create('conic',[point1,point2,point3,point4,point5]);

2. Шестью элементами матрицы
   

   board.create('conic',[a11,a22,a33,a21,a31,a32]);

Примеры:

p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[1,1],{name:'p2'});
board.create('line',[p1,p2],{strokeWidth:1, color:'yellow'});
p3 = board.create('point',[2,3],{name:'p3'});
p4 = board.create('point',[3,4],{name:'p4'});
p5 = board.create('point',[4,1],{name:'p5'});
board.create('conic',[p1,p2,p3,p4,p5], {strokeWidth:4,strokeColor:'green'});

Получим (JSFiddle): jsfiddle.net/AndreyDolgov/DdqvM/show/light

board.create('conic',[9,4,-11,0,-9,-8]);

Получим: jsfiddle.net/AndreyDolgov/4jTQY/show/light.

Кривая

Существуют три типа кривых:

1. Параметрические кривые.
   

   board.create('curve',[x,y,a,b]);

   где x и y — функции с одним параметром, возвращающие число, a и b задают интервал значений параметра.
2. Полярные кривые.
   

   board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]);

   где functionOfTheta — функция, аргумент которой — это угол и которая возвращает расстояние от полюса;
   [xOrigin,yOrigin] — координаты полюса;
   optBegValTheta и optEndValTheta задают интервал значений угла..
3. Графическое представление данных в виде ломаной линии.
   

   board.create('curve',[xArray,yArray]);

   где xArray и yArray — массив иксов и массив игреков..

Примеры:

board.create('curve', [function(t){return 3*Math.cos(t);}, function(t){ return 3*Math.sin(t);}, 0, Math.PI/2]);

Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/9mcAs/show/light.

board.create('curve', [function(theta){return theta/17;}, [-2,-1], -8*Math.PI, 8*Math.PI]);

Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/XKH6Q/show/light.

x = [-4,-3,-2,-1,0,1,2,3,5];
y = [-3,2,3,-1,0,2,1,4,0];
board.create('curve',[x,y]); 

Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/uKFFV/show/light.

График функции

board.create('functiongraph',[functionRule,a,b]);

где functionRule — функция одного аргумента, возвращающая число,
a и b задают интервал, на котором определена функция.
Пример:

board.create('functiongraph', [function(x){ return (x+1)%(x-1);},1,3]);

Вот так это будет выглядеть: jsfiddle.net/AndreyDolgov/gkfqj/show/light.

Текст

board.create('text',[x,y,stringText]);

где первые два аргумента задают положение левого нижнего угла области текста, stringText — строка или функция, возвращающая строку.
Пример:

board.create('text',[-5, 2, "<span style='color:yellow;background-color:blue; font-size:50px;'>Это<br>текст.</span>"]);

Получим: jsfiddle.net/AndreyDolgov/YpQkL/show/light.

---

Ну вот, мы познакомились с простыми элементами геометрических чертежей, создаваемых с помощью библиотеки JSXGraph. Я думаю, что для введения этого достаточно.
Дальше — серия «JSXGraph в примерах».