...

среда, 14 августа 2013 г.

JSXGraph — введение



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




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

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

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




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

Первой интерактивной геометрической средой была программа 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 в примерах».

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html


на
Ярлыки: ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)