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

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

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

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

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

Фрактал №4
ссылка на сайт
Фрактал №5
ссылка на сайт
Фрактал №6
ссылка на сайт

Теория

Математический аппарат, используемый для рисования — множества Жюлиа. Пусть задана функция комплексного аргумента f. Определим для комплексного числа z величину P(z, f), которая характеризует скорость «убегания» точки z при преобразовании z := f(z). Формально, эту величину можно считать как число итераций преобразования, при достижении которого модуль точки становится больше заданного числа:

определение Pгде D — фиксированное граничное расстояние. На практике P(z, f) можно считать с помощью следующего псевдокода:

Здесь N — ограничение на число итераций; оно необходимо, так как некоторые точки, которые составляют множество Жюлиа, не убегают от нуля при преобразовании z := f(z), а, наоборот, приближаются к нему.

Зная величину P(z, f) для некоторой прямоугольной области пространства комплексных чисел (или, точнее, для конечной сети чисел из этой области), можно нарисовать изображение. Для этого надо:

  • сопоставить каждому возможному значению функции P, то есть числам от 1 до N, цвет (функцию, которая это делает, назовем палитрой);
  • соответствующим образом покрасить пиксели изображения, которые отвечают элементам сети.

Имплементация

Серверная часть сайта написана на PHP / Yii Framework и не заслуживает особого внимания — ее задание состоит исключительно в информации о фракталах:

  • функция f;
  • прямоугольная область, соответствующая изображению;
  • граничное расстояние D;
  • максимальное количество итераций N;
  • используемая палитра.

Все рисование выполняется на стороне клиента при помощи JavaScript и, возможно, WebGL. Существует три техники рисования (фактически, вычисления функции P):

В основном потоке выполнения JavaScript. Очевидный недостаток такого подхода — «зависание» браузера на время рисования; фактически, единственный разумный способ его применения — для отладки.

При помощи фоновых потоков выполнения JavaScript. JavaScript Web Workers API поддерживается большинством браузеров. Этот способ позволяет проводить вычисления быстрее и без подвисаний. В некоторых случаях фоновые потоки позволяют получить более точное изображение, чем WebGL, поскольку в JavaScript используется более точная арифметика действительных чисел.

При помощи WebGL. Поскольку вычисление функции P для различных точек происходит независимо, рисование фракталов с помощью WebGL происходит очень быстро: в современных графических ускорителях используются сотни потоков выполнения, а при вычислении с помощью потоков JavaScript не имеет смысл использовать более 5–10 потоков. С другой стороны, WebGL не поддерживается в некоторых браузерах и операционных системах и иногда может приводить к эзотерическим артефактам рисования.

Соответственно, клиентский код включает три основные части:

  • синтаксический разбор функции f, заданной пользователем в более-менее естественной форме (вроде z^2 – 5.0*z + 1.0), чтобы ее можно было использовать для вычислений;
  • код, связанный с фоновыми потоками выполнения JavaScript.
  • код, связанный с WebGL.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *