Математика в Internet

Статьи

РЕДАКТОР МАТЕМАТИЧЕСКИХ ТЕКСТОВ
РИСУНКИ и ГРАФИКИ
Автор: Анатолий Вовк

       В предыдущей заметке мы познакомили вас с редактором математических формул для работы в Internet. В настоящей заметке речь пойдет о возможности представления на сайтах несложной графической информации, часто встречаемой на страницах математических изданий. Итак, представляем вашему вниманию новый вьювер для просмотра математических формул, схематических рисунков и графиков элементарных функций на страницах Internet (MathTextView.ocx© Copyright VVV 2002).

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

<OBJECT classid=
    "clsid:729818C7-259B-4FF5-930B-35B6A3B45DAF" >
<param NAME="TextWIDTH" VALUE="370" >
<param NAME="DATA" VALUE="" >
</OBJECT >

Значение 370 параметра TextWIDTH соответствует ширине графы таблицы, в которой представлен текст математического содержания на этом сайте. Такую процедуру необходимо выполнять только один раз в начале вашего материала, если есть необходимость установки ширины текста. Если у вас не будет рисунков, графиков и нумерации формул или вы будете использовать другой режим выдачи рисунков и графиков на экран (пример будет представлен ниже), то такую операцию можно не выполнять. Обратим ваше внимание на то, что значение параметра DATA необходимо задавать в точности пустым значением.
       Теперь представим вам первый рисунок

       Приведем фрагмент кода, с помощью которого интерпретируется рис.1

$Рис. 1 Пирамида
&& P: A[-1,2] B[6,2] C[3,-1] D[2,4] D1[2,1.75]
&& L: [A,C] 1/2[A,B] 2[B,C] [A,D] [B,D] [C,D]
      1/2[D,D1]
&& A: [D,C,A] 2[D,B,C] 

       Таким образом, мы сначала должны написать обязательное ключевое слово $Рис. Далее можно писать произвольную информацию для обозначения названия рисунка. Название рисунка (желательно небольшое) размещается внизу под рисунком с учетом размещения рисунка по горизонтали. В следующей строке, обязательно начинающейся с комбинации &&, сначала указывается координаты вершин (и даже отдельных точек), которые имеются на нашем рисунке. С этой целью обязательно надо указать ключевое слово P:, после чего указываются обозначения и координаты (x,y) вершин. Что используется в качестве размерности? Первое что приходит в голову — сравнение со школьной тетрадкой в клетку. Можно считать, что это сантиметры. Но такой ответ тоже будет не совсем верный, поскольку при этом играет роль различная разрешимость экрана и т.п. Но ведь мы изображаем схематические рисунки и поэтому нас интересуют только относительные размеры. Основную цель, которая при этом ставится — максимально упростить нотацию. В конце концов, если потребуется очень точный рисунок, его можно представить в каком-либо из имеющихся графических форматов и в таком виде поместить на сайт. Отметим, что редактор располагает и собственными средствами вызова такого рода рисунков, но это для сайтов неактуально по сравнению, скажем, с электронными учебниками на CD-ROM.
       Но снова вернемся к рис. 1. Мы выполнили самую сложную часть работы (действительно без листа в клеточку трудно с первого раза на глаз записать координаты необходим х точек, хотя их можно в любой момент откорректировать. (В дальнейшем нам придется вести разговор о процедуре WYSIWYG для создания схематических рисунков.) Далее процесс создания схематического рисунка пойдет намного проще. Напишем вторую строку для нотации отрезков из нашего рисунка. Ясно, что эта строка снова начинается с комбинации && как символа неразрывности информации о рис. 1 (попутно заметим, что нельзя до окончания описания рисунка вводить пустые строки). Почему нам нужна комбинация &&? Это связано с тем, что редактор позволяет интерпретировать несколько рисунков одновременно. При этом между рисунками может быть другой математический текст (например, формулы). Единственное ограничение — рисунок не может обтекаться математическим текстом. В противном случае наш наш редактор снова превратиться в сложную конструкцию сродни редактору Word. Что представляет собой выражение [A,C]? Это отрезок AC толщиною в 1 пиксел. Если впереди скобок стоит цифра 2. это значит, что толщина линии 2 пиксела. Еще есть толщина 3 пиксела. Выражение 1/2[A,B] означает, что отрезок AB представлен штрихпунктиром. Заметим, что между изображениями отдельных отрезков может быть произвольное число пробелов. Это же относится и к остальным элементам нотации. Перейдем к изображению углов. Для этого ключевым является выражение A:. Выражение [D,C,A] указывает на угол между отрезками DC и AC, считываемый против движения часовой стрелки. При этом угол обозначается одной дужкой. Если вы попадете в ситуацию, что, сделав ошибку в нотации, видите: дужка прорисовывается с обратной стороны вопреки вашим ожиданиям, смело меняйте местами буквы D и A. Цифра 2 в выражении 2[D,B,C] указывает на то, что угол будет изображен двумя дужками. Есть еще возможность нарисовать угол тремя дужками. Рассмотрим внимательно Рис. 1. Не нравится нам то, что буква D наезжает на линию DB. Ничего страшного, можно подкорректировать положение буквы D относительно вершины, которую она обозначает. Напишем, например, так: D*+[2,4]. В результате координата х положения буквы совпадет с координатой x вершины, а координата y сместится относительно координаты y вершины несколько вверх. По умолчанию выражение D[2,4] эквивалентно выражению D+-[2,4]. Заметим, что цифра (только одна) при букве D превратилась в индекс. И еще! Чтобы не забыть. Система координат xOy соответствует обычному системе координат, к которой мы привыкли еще в школе (то-есть, ось Oy направлена вверх).После корректировки рис. 1 приобретет следующий вид (одновременно мы демонстрируем, что происходит, если изменить координаты, например, вершины A):

       Код будет следующим:

$Рис.1' Пирамида
&& P: A*-[0.5,2]  B[6,2] C[3,0] D*+[2,4]   D1+*[2,1.75]
&& L: [A,C] 1/2[A,B] 2[B,C] [A,D] [B,D] [C,D]
      1/2[D,D1]
&& A:[D,C,A] 2[D,B,C]

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

       Код будет следующим:

$Рис.3 Сложение векторов
&&   P: A[0,0]  B(2.5,0) C(2.5,1.5) D(5,1.5)  
&&   L: [A,B> [A,C>  2[A,D> [B,D] [C,D]

       Таким образом, чтобы вершина не изображалась жирной точкой, надо в изображении вершины вместо квадратных скобок употребить круглые. Для того, чтобы на соответствующем конце отрезка была нарисована стрелка, надо воспользоваться значком > или <. Очевидно, что запись <B,A] эквивалентна записи [A,B>. Цифра перед обозначением вектора указывает на толщину линии.Если мы не хотим отмечать буквами вершины, то к их односимвольному обозначению (это может быть и цифра или, например, знак минус, что удобно для дополнительной разметки системы координат) добавим знак подчеркивания. Круглые скобки, как уже известно, не позволяют вершины рисовать жирными точками. В противном случае и здесь надо воспользоваться квадратными скобками.

       На этом в пределах демоверсии можно и закончить рассмотрение рисунков. Нет, еще, пожалуй, рассмотрим фигуры, в которых присутствуют кривые

       Код рис. 4 представлен ниже

$Рис.4 Кривые
&& P: A--[1,0.5] B[3,0.5] C++[3,3] O-+[2,1.75] N_(0.5,4) M_(4,0)   
&& L: [A,B] [B,C] [A,C]
&& C: circle_3p(A,B,C) circle_cp(C,B)
      circle_cr(C,2) 

       Обратите внимание: координаты невидимых точек N_(0,8), M_(8,1) (путем добавления символа подчеркивания и заключения координат точек в круглые скобки) использованы для расчета габаритов рисунка. Мы сознательно отказались от автоматического расчета габаритов по всем точкам сложных фигур, поскольку это может привести к дополнительному замедлению при выводе рисунков. Кроме того, как вы заметили, пользуясь этим приемом, в некоторых случаях можно урезать область видимости рисунка.

       Этот раздел нашей заметки также проще начать с примера.

Приведем фрагмент кода, с помощью которого мы видим рис. 5.

$Рис.5 Графики 
&& FK:1  $$y=sin(п/2+x)+cos(x)$$ [-1,2] 2[3.5,4]
&& FK:3  $$y=x$$ 1/2[0,4]
&& FK:2  $$y=sin(п/2+x)+cos(x)$$ 3[1,1] 3[1.5,1.5]
         2[2,3]
&& FK:4  $$y=x^(1/2)$$ [0,4]

Первая строка ничем новым не отличается. Все те же символы &&. Однако появилось ключевое слово FK: c индексом от 1 до 10 (вся эта конструкция не терпит пробелов). FK: означает, между прочим, что мы хотим вам представить графики функций в декартовой системе координат. Число после двоеточия будет обозначать номер цвета изображения графика (да заодно в будущем послужит номером графика — а всего, как вы уже заметили, одновременно на рисунке можно представить графики 10 функций). Порядок подачи кода графика не имеет значения. Далее идет знакомый вам по предыдущей заметке код формулы. Еще далее задаются интервалы для отображения разных фрагментов графика функции, представленной в данной строке. Вот пока-что и все. Сделаем лишь одно общее замечание. Надо строго придерживаться одного несложного правила выдачи кода для интерпретации рисунков. Порядок написания строк для элементов рисунка следующий: название рисунка, точки, линии, углы, кривые. При этом описание линий, углов или кривых может быть пропущено. Для описание однотипных элементов используется только одна строка. Все это жертва в пользу большего быстродействия. Надеемся, что для вас это условие не будет ограничительным. Хотя написание текста с пробелами не являются ограничением, однако надо помнить, что меньшее количество пробелов в строке ведет к большему быстродействию
       Теперь рассмотрим другой пример:

Приведем фрагмент кода, с помощью которого мы видим рис. 6.

$Рис. 6 Графики 
&& FK:1 $$y=e^x+2$$ [0,3] 
&& FK:2 $$x=e^y+2$$ [0,3] cl_1
&& FK:3 $$y=x$$ 1/2[0,3]    

Здесь, во-первых, демонстрируется возможность рисования наряду с графиком функции y=f(x) графика функции x=f(y). Во вторых, мы захотели сохранить расцветку графика второй функции одинаковой с расцветкой графика первой функции. При этом мы пользуемся ключевым словом cl_, после которого указываем номер цвета из нашей маленькой палитры цветов. Снова хотим подчеркнуть — наши графики имеют схематический характер. В приведенном примере вы видите, что переменная e без никаких дополнительных объяснений превратилась в константу (основание натурального логарифма). То же самое можно сделать и в отношении числа π, как это видно из предыдущего рисунка. Но за такую свободу в действиях чем-то надо платить. Поэтому желательно вышеупомянутые константы употреблять (при выводе графиков) только по назначению. В качестве аргументов и значений (одномерной) функции, представляемой на графике, могут быть только переменные x, y. Кроме того отметим, что важное для тригонометрии оперирование константой π в обозначении интервалов осталось за пределами демоверсии.
       Продемонстрируем, как и обещали, еще один режим вывода рисунков и графиков на экран. Этот режим аналогичен режиму вывода формул, где функции размещения формул переданы полностью браузеру. Для этого режима вместо ключевого слова $Рис. используется ключевое слово _$Рис. Например, для следующего рисунка

фрагмент кода будет следующим

_$Рис.Кораблик
&& P: 1_(0,1) 2_(1,-1) 3_(5.5,-1) 4_(6,0.5)
      5_(1,1.2) 6_(3.5,6.5) 7_(5.5,1) 8_(3.5,0.7)
      M(0.9,0.8) T(1.3,0.8) V(1.7,0.8)
&& L: [1_,2_] [2_,3_] [3_,4_] [1_,4_]
      [5_,7_] [5_,6_] [6_,7_] 3[6_,8_]
&& A: 3[2_,1_,4_]

       Редактор математических текстов, предлагаемый вашему вниманию, претерпел за свое пока-что короткое время существования некоторое развитие, как мы надеемся, в сторону усовершенствования. Поэтому мы решили пойти на некоторые изменения в нотации, памятуя что лучше этот шаг сделать как можно раньше. Продемонстрируем, в чем суть этих изменений на примере. Запишем знаменитую формулу Эйлера

Приведем HTML-код для интерпретации формулы

<center><OBJECT classid=
     "clsid:729818C7-259B-4FF5-930B-35B6A3B45DAF">
<param NAME="DATA" 
VALUE="$$з(z)==Sum(1/n^z,n>=1)\spacR=
        Pro(1/(1-p^(-z)),p-простое)$$">
</OBJECT></center>

       Что же появилось нового? Во-первых, не надо писать двойные фигурные скобки для выделения математического текста. Во-вторых, отныне параметр режима просмотра MODE=0, следовательно, его значение не надо указывать вообще. И наконец, последнее замечание. Отныне значение ширины графического объекта задается только в случае, когда это значение не будет изменяться с помощью ActiveX. Назначение ширины извне в HTML-коде фиксирует это значение независимо от действий ActiveX. Что касается высоты, то ее вообще не надо указывать в HTML-коде. Все эти новшества были направлены на упрощение HTML-кода. Обратите внимание на то, что в самих формулах появились теги разметки. Мы говорили в предыдущей заметке о том, что размещение элементов формулы производится автоматически. Но иногда необходимо вмешаться в этот процесс. Для этого и существуют теги типа \spacR (один пробел справа). И наконец, пользуясь случаем, мы пошли на радикальные изменения. Теперь в нотации функции Int() на первом месте будет подинтегральное выражение. Подобные изменения каснулись также функций Sum(), Pro(), sqrt(), log(). Нам пришлось в ущерб более прозрачной нотации пойти на этот шаг, учитывая специфику нашего письма (слева направо) и работы WYSIWYG. Надеемся, что такого рода изменения в нотации будут реже.

        Мы предлагаем скачать демоверсию здесь. Предлагаемая бесплатно демоверсия по своим возможностям может вполне удовлетворить ваши аппетиты при организации нормального общения на математические темы. Поместив в системную директорию своего компьютера и зарегистрировав ActiveX (для чего надо нажать Пуск, потом Выполнить..., потом набрать текст "regsvr32 C:\WINDOWS\SYSTEM\MathTextView.ocx"), вместо заставок на данной странице вы должны получить рисунки, графики и формулы. Если у вас возникнут вопросы, замечания и предложения, пишите .
       Желаем удачи.

       В заключение хочется поблагодарить webmaster'a сайта Mashiah'a Davidson'a за предоставленную возможность разместить данную информацию на его сайте а также всяческую помощь при подготовке статьи. Благодарю эксперта в области COM-технологий Наталию Елманову, чья дельная подсказка помогла автору ускорить выход в свет представленного вашему вниманию программного продукта. Также хочется поблагодарить завотделом НИИ Владимира Вышнякова за постоянный интерес к данному проекту.




HOME

webmaster
Copyright © Anatoliy Vovk