Папоротник
Переходим к классике основ изучения компьютерной графики! Давайте посмотрим, как нарисовать фрактальный лист папоротника с помощью 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.