Папоротник

Переходим к классике основ изучения компьютерной графики! Давайте посмотрим, как нарисовать фрактальный лист папоротника с помощью Canvas.

Для описания папоротника нам понадобится матрица афинных преобразований, каждое из которых будет применяться с некоторой вероятностью

<html>

<body>

<canvas id="myCanvas" width="200" height="200" />

<script type='text/javascript'>

var ctx = document.getElementById("myCanvas").getContext("2d");

// Афинные преобразования для каждой из вероятностей

var barnsleyMatrix = [[ 0, 0, 0, 0.16, 0, 0],

[ 0.85, 0.04,-0.04, 0.85, 0, 1.60],

[ 0.20,-0.26, 0.23, 0.22, 0, 1.60],

[-0.15, 0.28, 0.26, 0.24, 0, 0.44]];

// Суммы вероятностей (0.01, 0.85, 0.07, 0.07)

var probability = [0.01, 0.86, 0.93, 1.0];

// Контекст для работы

var ctx = document.getElementById("myCanvas").getContext("2d");

// Ширина и высота холста

var width = ctx.canvas.width;

var height = ctx.canvas.height;

// Пиксели для изображения

var pixels = ctx.createImageData(width, height);

var iterations = 50000;

var p, n;

var x = 0.0;

var y = 0.0;

var xn, yn, xp, yp, j;

// Итерационный процесс

for (var i = 0; i <iterations; i++) {

p = Math.random();

n = 0; while (p > probability[n]) n++;

// Новые координаты

xn = barnsleyMatrix[n][0] * x + barnsleyMatrix[n][1] * y + barnsleyMatrix[n][4];

yn = barnsleyMatrix[n][2] * x + barnsleyMatrix[n][3] * y + barnsleyMatrix[n][5];

x = xn;

y = yn;

// Переводим в экранные координаты

xp = width/2 + Math.floor( x * 20);

yp = height - Math.floor(y * 20);

// Находим место в одномерном массиве пикселей

j = (yp * width + xp) * 4;

// Устанавливаем значения для компонент RGBA

pixels.data[j + 0] = 0;

pixels.data[j + 1] = 180;

pixels.data[j + 2] = 0;

pixels.data[j + 3] = 255;

}

// Записываем итоговый массив пикселей

ctx.putImageData(pixels, 0, 0);

</script>

</body>

</html>

В этом примере надо обратить внимание на два момента:

Доступ к пикселя осуществляется не в прямом виде, а через выгружаемый и записываемый массив пикселей (окно), причем операции чтения и записи разнесены в разные функции и во времени. Опять-таки, API побуждает разработчиков сначала произвести необходимые изменения в пикселях и уже после этого массово внести изменения вместо того, чтобы отдельно читать и записывать каждый из пикселей.
Массив, с которым идет работа, одномерный (хотя у объекта типа ImageData и определены ширина и высота), причем в нем последовательно хранятся не просто пиксели, а значения по каждому из каналов для каждого из пикселей. Другими словами, на каждый пиксель приходится четыре элемента массива (RGBA) со значениями от 0 до 255.

Кстати, как я уже писал в начале, Canvas может легко сочетаться с обычными изображениями и даже видео, в частности, это означает, что на Canvas можно проектировать картинку или текущий кадр видео-потока. В сочетании с доступом к отдельным пикселям, это позволяет делать анализ изображений непосредственно на клиенте с помощью JavaScript.