По простому, фрактал – это самоподобная на разных масштабах картинка. Что это значит? Ну, например, представьте экран телевизора, который показывает два экрана телевизора, каждый из которых тоже показывает два экрана, а те в свою очередь… В природе фрактальное поведение встречается часто: это и деревья, где ветка с отростками напоминает уменьшенную копию всего дерева с ветками, и кровеносные системы живых существ, и береговые линии материков. Кстати, с такой банальной задачи как точное измерение длины береговой линии островов и началось исследование фракталов и связанное с ними понятие дробной размерности. Как оказалось, длина береговой линии при все более точном измерении не стремится к определенному значению, а наоборот – постоянно растет. Степень быстроты такого роста с увеличением точности как раз и определяет число, называемое размерностью. Для разных фракталов (и соответственно – береговых линий) это число разное. Кстати, термин “фрактал” ввел Бенуа Мандельброт, который и написал пионерскую статью “Какова длина береговой линии Великобритании?”. А недавно обнаружилось, что поверхности нормальных и раковых клеток — фракталы разной размерности (читать).
Итак, как же все таки рисовать красивые фракталы. Метод состоит в том, что пусть у нас есть плоскость. Берем на ней точку с координатами (X,Y) и начинаем исследовать эту точку, чтобы узнать каким цветом ее раскрашивать. В чем состоит это исследование точки. Применим к ней некое преобразование, так чтобы из координат данной точки получить новые координаты другой точки. Например:
X1 = 2*X*Y + C (1)
Y1 = X*X – Y*Y + D (2)
где (X1, Y1) – координаты новой точки, C,D – некоторые константы. Мы совершили одну итерацию и проверяем: находится ли новая точка (X1, Y1) за пределами заранее определенной области или нет? Если эта заранее определенная область – круг с центром в точке (0,0), и радиусом R, то вышеуказанная проверка состоит в рассмотрении неравенства
X1*X1 + Y1*Y1 > R*R (3)
Если это неравенство выполняется, то все, начальная точка исследована, если нет, то делаем опять указанные выше преобразования (1) и (2), но уже с новыми координатами (X1, Y1)
X2 = 2*X1*Y1 + C
Y2 = X1*X1 – Y1*Y1 + D
И так делаем до тех пор, пока новая точка Xn,Yn удовлетворит условию (3) или число итераций превысит заранее определенное количество (например, 255). Итак, каждая начальная точка (X,Y) дает нам в результате такого исследования одно число N, которое равно числу итераций. Это число и нужно сопоставлять цвету данной начальной точки. Затем эту всю процедуру нужно проделать с каждой из точек плоскости. Вот собственно и все.
Нарисовать фрактал можно с помощью JavaScript и нового элемента html5 “canvas”. Вот пример (если Вы видите картинку, то она отрисована по описанному мной алгоритму Вашим браузером, а не загружена с этого сайта).
Вот код JavaScript, который и рисует фрактал. Сразу замечу, что я в этом всем разбирался вчера вечером и я не программирую на JS.
<script type='text/javascript'>
// переводим человеческие координаты в дурацкое представление canvas
function px(x,y)
{
// 275,275 - центр
var x1, y1, pp;
x1 = x + 275;
y1 = 275 - y;
pp = (y1*550 + x1)*4;
return pp;
}
function plotp(x,y,r,g,b) // рисуем точку в нормальных координатах
{
pix[px(x,y)] = r;
pix[px(x,y)+1] = g;
pix[px(x,y)+2] = b;
pix[px(x,y)+3] = 127;
}
// - наша главная функция, которая и определяет как выглядит фрактал
function fract(x,y,cx, cy, r)
{
var r1, n, x1, y1;
r1=x*x+y+y;
n=0; // счетчик числа итераций
x1=x;
y1=y;
while (r1<r) { x1 = x1*x1 - y1*y1 + cx; // те самые преобразования y1 = 2*x1*y1 + cy; r1 = x1*x1+y1*y1; n = n + 1; if (n>250) {return n;}
}
return n;
}
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = 550, h = 550,
x = 0, y = 0;
imgd = context.getImageData(0, 0, w, h);
var pix = imgd.data;
var sx, sy; // это смещение, если хотим увидеть фрактал вдали от точки (0,0)
sx=800;
sy=-600;
m=1000; // а это масштаб
for (var x2=-250; x2<=250; x2++)
{
for (var y2=-250; y2<=250; y2++) { plotp(x2,y2,0, fract((x2+sx)/m,(y2+sy)/m, 0.51, 0.1, 400),0); } } context.putImageData(imgd, x, y); </script>
Ну и само собой, вместе с использованием этого кода JavaScript нужно в самом html, в том месте, где мы хотим вывести картинку, написать:
<canvas id="myCanvas" width="550" height="550">
Альтернативное содержимое, которое будет показано, если браузер не поддерживает Canvas.
</canvas>
Пару слов по поводу параметров в выложенном выше JS коде:
sx=800;
sy=-600;
m=1000;
0.51, 0.1, 400 - в вызове функции fract()
Почему именно эти числа? Методом "тыка" подобрал такие, чтобы картинка была красивая. Поделиться: twitter facebook