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

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

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

Теория

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

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

var i = 0;
do {
	z = f(z);
	i++;
} while ((i < N) && (|z| <= D));
return i;

Здесь 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.