БлогNot. Рисуем самый простой фрактал на Javascript

Помощь дата->рейтинг Поиск Почта RSS канал Статистика nickolay.info Домой

Рисуем самый простой фрактал на Javascript

Традиционно он будет выглядеть как дерево. Вот одна из возможных картинок (чтобы она сгенерировалась, нужен включённый Javascript и поддержка тега <canvas> в браузере):

Извините, ваш браузер не поддерживает тег canvas

Код приложения настолько прост, что особых комментариев не требует, но они всё же сделаны в тексте. Поменяйте параметры - и получите другое дерево... Ещё лучше сделать ввод параметров через форму HTML. Полный исходник:

<div align="center">
 <canvas id="canvas" width="800" height="550" style="background-color: #FFFFFF">
  Извините, ваш браузер не поддерживает тег canvas
 </canvas>
</div>
 
<script type="text/javascript">
 var elem = document.getElementById('canvas');
 var ctx = elem.getContext('2d');
 var deg2rad = Math.PI / 180.0; //градусы в радианы
 var depth = 11; //глубина рекурсии
 ctx.lineWidth = 3; //толщина линий
 ctx.strokeStyle='#330000'; //стиль рисования (цвет)
 var step = 8.; //коэффициент масштабирования
 var startAngle = -90; //начальный угол; -90 = прямо вверх
 var slopeAngle = 25; //угол разворота ветвей; 0 = прямо вверх, дерево выродится в прямую
 
function drawLine (x1, y1, x2, y2) { //рисование линии на канве
 ctx.moveTo(x1, y1); ctx.lineTo(x2, y2);
}
 
function drawTree(x1, y1, angle, depth) { //рекурсивное рисование дерева
 if (depth) {
  var x2 = x1 + (Math.cos(angle * deg2rad) * depth * step);
  var y2 = y1 + (Math.sin(angle * deg2rad) * depth * step);
  drawLine(x1, y1, x2, y2);
  drawTree(x2, y2, angle-slopeAngle, depth - 1);
  drawTree(x2, y2, angle+slopeAngle, depth - 1);
 }
}

//Как рисоовать на канве: 
ctx.beginPath(); //начать
drawTree(400, 549, startAngle, depth); //метод отрисовки
ctx.closePath(); //закончить
ctx.stroke(); //отобразить
</script>
<noscript><p>Извините, для работы приложения нужен включённый Javascript</p></noscript>

теги: javascript графика

комментарии (0)

18.04.2016, 13:16; рейтинг: 3369

  свежие записипоиск по блогукомментироватьстатистика

Наверх Яндекс.Метрика
© PerS
вход