Архив метки: JavaScript

SVGTreeViewer — плагин для SVGTree

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

  • создание и удаление вершин дерева при помощи более удобных средств, чем кнопки Insert и Delete (в мобильных устройствах этих кнопок попросту нет);
  • настройка внешнего вида дерева (например, формы вершин и ребер);
  • просмотр «исходного кода» дерева в Newick-формате и, возможно, его непосредственное редактирование (по аналогии с тем, как HTML-редакторы вроде TinyMCE предоставляют возможность редактировать исходный код HTML);
  • откат / повторение произведенных изменений (undo / redo).

Поскольку в неинтерактивных случаях использования базовой функциональности библиотеки SVGTree вполне достаточно, новую функциональность логично выделить в отдельный компонент — SVGTreeViewer, зависящий от базовой библиотеки. Компонент представляет собой JavaScript-файл и таблицу стилей, которые в сжатом виде занимают около 15 килобайт.

Базовые примеры использования компонента приведены на этой веб-странице, еще пара есть под катом.

Continue reading

SVGTree — HTML5-библиотека для рисования деревьев

При описании алгоритмов на деревьях у меня возникла небольшая проблема визуализации деревьев, записанных в Newick-формате. Для рисования деревьев можно использовать различные десктопные инструменты (например, в LaTeX для этой цели подходит замечательный пакет TikZ). Возникает вопрос, можно ли для рисования использовать веб-технологии; результатом моих недельных усилий в этом направлении стала небольшая JavaScript-библиотека SVGTree.

Как видно из названия, для рисования в SVGTree используется один из аспектов HTML5 — масштабируемая векторная графика (scalable vector graphics, SVG). SVG — язык разметки на основе XML, предназначенный для отображения векторной графики; SVG-изображения можно встраивать в обычные HTML-страницы и динамически изменять при помощи JavaScript. На нынешнее время SVG поддерживается в достаточной степени всеми основными веб-браузерами: Firefox, Chrome и даже Internet Explorer 11+. По сравнению с альтернативными методами, которые можно применить для отображения деревьев, у SVG есть несколько преимуществ:

  • Поскольку SVG — стандарт векторной графики, изображения легко масштабируются; SVG, в отличие от скалярной графики, отображаемой элементом HTML5 <canvas>, походит для огромных рисунков (порядка 10000×10000).
  • Внешний вид SVG можно менять при помощи таблиц стилей CSS, совершенно аналогичных таблицам для обычных HTML-страниц. Это позволяет разделить логику создания базовых элементов рисунка и их отображения.
  • К элементам SVG можно обратиться при помощи JavaScript DOM API почти так же, как к элементам HTML-страницы. При этом элементы SVG поддерживают базовые события (например, click), что упрощает реализацию интерактивности.

Библиотека доступна в виде Github-репозитория.

Несколько примеров использования библиотеки есть на этой странице, еще несколько приведено под катом.

Continue reading

Фракталы — использование Web Workers API

Общее описание сайта и математическая теория здесь.

После того, как определен способ вычисления функции f (за счет синтаксического разбора), остается вычислить «скорость убегания» P(z, f) для комплексных чисел z, соответствующих отдельным пикселям изображения. Наиболее простой способ вычислений — цикл по всем пикселям. Фатальный недостаток этого метода состоит в том, что подсчеты занимают существенное время (порядка нескольких секунд или десятков секунд), и во время выполнения цикла браузер перестает отвечать на внешние раздражители, что, разумеется, неприемлемо. К счастью, для этой проблемы есть решение — современные браузеры (Firefox, Chrome, IE 10+) поддерживают выполнение JavaScript-кода в фоновых потоках выполнения.

Continue reading

Фракталы — синтаксический разбор арифметических выражений

Общее описание сайта и математическая теория создания фрактальных изображений здесь.

Одна из основных задач, которые пришлось решить в ходе создания сайта «Fun with Fractals», заключается в следующем:

Задача. На основе понятного для человека описания функции комплексного переменного составить ее представление, позволяющее вычислять ее значения при помощи JavaScript или WebGL.

Continue reading

Фракталы — общее описание

Сайт Fun with Fractals — небольшой проект, наглядно демонстрирующий возможности HTML5 на примере фракталов:

  • элемент HTML5 <canvas> для рисования (<canvas>, HTMLCanvasElement);
  • фоновые потоки выполнения JavaScript для ускорения процесса рисования и избавления от «подвисания» браузера;
  • WebGL для рисования с помощью графического ускорителя вместо JavaScript (значительно быстрее).

В результате получаются достаточно красивые картинки:

Фрактал №1
ссылка на сайт
Фрактал №2
ссылка на сайт
Фрактал №3
ссылка на сайт

Continue reading