Сайт Fun with Fractals — небольшой проект, наглядно демонстрирующий возможности HTML5 на примере фракталов:
- элемент HTML5 <canvas> для рисования (<canvas>, HTMLCanvasElement);
- фоновые потоки выполнения JavaScript для ускорения процесса рисования и избавления от «подвисания» браузера;
- WebGL для рисования с помощью графического ускорителя вместо JavaScript (значительно быстрее).
В результате получаются достаточно красивые картинки:






Теория
Математический аппарат, используемый для рисования — множества Жюлиа. Пусть задана функция комплексного аргумента f
. Определим для комплексного числа z
величину P(z, f)
, которая характеризует скорость «убегания» точки z
при преобразовании z := f(z)
. Формально, эту величину можно считать как число итераций преобразования, при достижении которого модуль точки становится больше заданного числа:
где
D
— фиксированное граничное расстояние. На практике P(z, f)
можно считать с помощью следующего псевдокода:
1 2 3 4 5 6 |
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.