Як намалювати фрактал на javascript

Як намалювати фрактал

По простому, фрактал - це самоподібна на різних масштабах картинка. Що це означає? Ну, наприклад, уявіть екран телевізора, який показує два екрани телевізора, кожен з яких теж показує два екрани, а ті в свою чергу ... У природі фрактальное поведінка зустрічається часто: це і дерева, де гілка з відростками нагадує зменшену копію всього дерева з гілками , і кровоносні системи живих істот, і берегові лінії материків. До речі, з такою банальною завдання як точне вимірювання довжини берегової лінії островів і почалося дослідження фракталів і пов'язане з ними поняття дробової розмірності. Як виявилося, довжина берегової лінії при все більш точному вимірі не прагне до певного значення, а навпаки - стає дедалі більше. Ступінь швидкості такого зростання зі збільшенням точності як раз і визначає число, зване розмірністю. Для різних фракталів (і відповідно - берегових ліній) це число різне. До речі, термін «фрактал» ввів Бенуа Мандельброт, який і написав піонерську статтю «Яка довжина берегової лінії Великобританії?». А недавно виявилося, що поверхні нормальних і ракових клітин - фрактали різної розмірності (читати).

Отже, як же все таки малювати красиві фрактали. Метод полягає в тому, що нехай у нас є площину. Беремо на ній точку з координатами (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, яке дорівнює числу ітерацій. Це число і потрібно зіставляти кольору даної початкової точки. Потім цю всю процедуру потрібно проробити з кожної з точок площини. Ось власне і все.

x1 = x + 275;
y1 = 275 - y;
pp = (y1 * 550 + x1) * 4;

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 250)
>

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

Пару слів з приводу параметрів в викладеному вище JS коді:

sx = 800;
sy = -600;
m = 1000;
0.51, 0.1, 400 - у виклику функції fract ()

Чому саме ці числа? Методом "тику" підібрав такі, щоб картинка була красива.

Якщо вам сподобався матеріал, будь ласка, поділіться ним з друзями:

Немає схожих постів