По простому, фрактал – это самоподобная на разных масштабах картинка. Что это значит? Ну, например, представьте экран телевизора, который показывает два экрана телевизора, каждый из которых тоже показывает два экрана, а те в свою очередь… В природе фрактальное поведение встречается часто: это и деревья, где ветка с отростками напоминает уменьшенную копию всего дерева с ветками, и кровеносные системы живых существ, и береговые линии материков. Кстати, с такой банальной задачи как точное измерение длины береговой линии островов и началось исследование фракталов и связанное с ними понятие дробной размерности. Как оказалось, длина береговой линии при все более точном измерении не стремится к определенному значению, а наоборот – постоянно растет. Степень быстроты такого роста с увеличением точности как раз и определяет число, называемое размерностью. Для разных фракталов (и соответственно – береговых линий) это число разное. Кстати, термин “фрактал” ввел Бенуа Мандельброт, который и написал пионерскую статью “Какова длина береговой линии Великобритании?”. А недавно обнаружилось, что поверхности нормальных и раковых клеток — фракталы разной размерности (читать).
Итак, как же все таки рисовать красивые фракталы. Метод состоит в том, что пусть у нас есть плоскость. Берем на ней точку с координатами (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
}
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()
Почему именно эти числа? Методом "тыка" подобрал такие, чтобы картинка была красивая.
Если Вы деловой человек, то Вас, возможно интересует качественное изготовление презентаций для различных докладов. Если Вы хотите убедить клиентов и партнеров, то работу над презентацией можно поручить специалистам из рекламного агентства. Кстати, фракталы можно использовать как красивое оформление в презентации.