Среда программирования:
HTML + Javascript + jquery.js + d3.js
Статья по теме:
Задача - нарисовать фрактал "Папоротник Барнсли".
1.Создаем файл fern.html (fern - папоротник), к которому подключаем файл fern.js, содержащий основную часть программы. Также подключаем библиотеки jquery.js и d3.js, содержащие весь необходимый инструментарий.
<!DOCTYPE html> <head> <meta charset="utf-8"> <style> body { color: #333; background-color: black; } h1{ color: #4BFF5F; text-align: center; text-shadow: 0px 0px 20px white; } </style> </head> <body> <h1> Папоротник Барнсли (150000 итераций)</h1> <div id="svg-container"></div> /*Подключение библиотек, исполняемого файла*/ <script src="lib/d3.js"></script> <script src="lib/jquery.js"></script> <script src="js/ferns.js"></script> <script> /* Вызов во время загрузки страницы, чтобы соответствовать размеру окна */ VIZ.onResize(); /* И вызываем еще раз, при измнение размера окна браузера*/ $(window).on("resize", function() { VIZ.onResize(); }); /* Отрисовка фрактала*/ for (var i = 0; i < 150000; i++) { VIZ.addPoint(1); } </script> </body> </html>
2. Файл fern.js:
a). Объявляем прототип VIZ, ширину и высоту, координаты стартовой точки, цвет. Выбираем элемент для отображения SVG-графики.
b). function getCoords(x, y) - Выбираем случайную точку.
c). function random(min, max) - Определяем функцию для получения СВ
d). function renderPoint(data, flag) - Определяем каким образом будут отображаться "точки" фрактала
e). VIZ.addPoint = function () - Получаем координаты из getCoords и изменяем на них соотв. координаты текущей базовой точки. Ставим точку.
f). VIZ.onResize = function () - Обеспечиваем корректное отображение при масшатбировании окна браузера
Код программы:
(function (){ /*Инициализация функций, ширины и высоты, стартовой точки, цвета, выбор элемента для отображения графики SVG*/ var VIZ = {}; var width = 4, height = 4; var basePoint = {x: 0, y: 0}; var color = '#50E52A'; var svg = d3.select("#svg-container") .append("svg") .attr("id", "thesvg") .attr("width", width) .attr("height", height) .attr("viewBox", "0 0 " + width + " " + height) .append("g"); VIZ.times = 10000; VIZ.count = 0; /*Выбираем случайную точку. р - коэффициент вероятности. (1,2,3,4) - см. статью "Папоротник Барнсли */ function getCoords(x, y) { var p = random(1,1000); return p <= 701 ? {x: 0.81 * x + 0.07 * y + 0.12, y: -0.04 * x + 0.84 * y + 0.195}: // 70.1% (2) p <= 851 ? {x: 0.18 * x - 0.25 * y + 0.12, y: 0.27 * x + 0.23 * y + 0.02 }: // 15.0% (3) p <= 980 ? {x: 0.19 * x + 0.275 * y + 0.16, y: 0.238 * x - 0.14 * y + 0.12 }: // 12.9% (4) {x: 0.0235 * x + 0.087 * y + 0.11, y: 0.045 * x + 0.1666 * y}; // 2.0% (1) } /*Функция для получения случайного значения*/ function random(min, max) { return min + Math.floor(Math.random() * (max - min + 1)); } /*Будем отображать точки при помощи круга радиусом .002. Определяем его цвет, прозрачность, координаты*/ function renderPoint(data, flag) { svg.append("circle") .attr("class", "fractalPoint") .style("fill", color) .style("opacity", .4) .attr("cx", data.x) .attr("cy", data.y) .attr("r", .002) } /* Получаем координаты из getCoords и изменяем на них соотв. координаты текущей базовой точки. Ставим точку */ VIZ.addPoint = function () { var xy = getCoords(basePoint.x, basePoint.y); basePoint = xy; renderPoint({x: xy.x + width / 5, y: xy.y + height / 10}, 0); } /*Функция контроля размера окна браузера. Наш фрактал будет корректно отображаться в любом окне*/ VIZ.onResize = function () { var aspect = height / width, chart = $("#thesvg"); var targetWidth = chart.parent().width(); chart.attr("width", targetWidth); chart.attr("height", targetWidth / aspect); } window.VIZ = VIZ; }())
| Прикрепленный файл | Размер |
|---|---|
| Пример построения папоротника Барнсли | 135.88 кб |