Статья по теме:
Демо JavaScript:
fractal
<!doctype html> <html lang = "en"> <head> <title> fractal </title> <meta charset = "utf-8"> <script src = "script.js" defer></script> </head> <body> <div id = "main"> <canvas id = "canvas" width = "500" height = "500"></canvas> <div id = "menu"> <span> length </span> <label> <input id = "length" type = "number" size = "3" min = "1" max = "5000" value = "10"> </label> <span> factor </span> <label> <input id = "factor" type = "number" size = "3" min = "1" max = "5000" value = "10"> </label> <span> power </span> <label> <input id = "power" type = "number" size = "3" min = "1" max = "5000" value = "2"> </label> <span> step</span> <label> <input id = "step" type = "number" size = "3" min = "1" max = "5000" value = "1"> </label> <button id = "start"> Select </button> </div> </div> </body> </html>
// Canvas let canvas = document.querySelector("#canvas"); let ctx = canvas.getContext("2d"); // Из 10-ой сс в 16-ую сс function decToHex(n) { return Number(n).toString(16); } // Таймер для анимации let timerId; // Параметр анимации let base; // Число, которое мы будем перебирать // Параметры программы let length; // Длина кривой Корню, на основе которой строиться фрактал let power; // Показатель степени, в которую мы возводим некоторое число base, которое мы будем перебирать let factor; // Множитель, на который мы умножаем величину pow(v, t) let step; // Это шаг изменения основания степени base // Координаты начальной точки для рисования let x1, y1; // Рисуем изобржение function draw() { if (base > 15000) { clearInterval(timerId); return; } // Вычисляем угол const angle = factor * Math.pow(base, power); // Координаты новой точки для рисования const x2 = (x1 + length * Math.cos(angle)); const y2 = (y1 + length * Math.sin(angle)); // По счетчику цикла определяем цвет рисования линии let r = decToHex(Math.abs((Math.floor(base / 4 + 1024))) % 255); let g = decToHex(Math.abs(Math.floor(255 - base / 3)) % 255); let b = decToHex(Math.abs(Math.floor(128 - base)) % 255); ctx.strokeStyle = "#" + r + g + b; ctx.lineWidth = 1.5; // Рисуем отрезок ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); // Текущую точку делаем предыдущей x1 = x2; y1 = y2; base += step; } // Функция с которой программа начинает работу function init() { // Очищаем таймер clearInterval(timerId); // Очищаем область для рисования ctx.fillStyle = "#000"; ctx.fillRect(0,0, canvas.width, canvas.height); // Считываем данные length = parseFloat(document.getElementById("length").value); factor = parseFloat(document.getElementById("factor").value); power = parseFloat(document.getElementById("power").value); step = parseFloat(document.getElementById("step").value); base = -15000; x1 = canvas.width / 2; y1 = canvas.height / 2; // Запускаем анимацию timerId = setInterval(draw, 1); } // При нажатии на кнопку select вызывается init() document.querySelector("#start").addEventListener("click", init);