Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Спасибо за реализацию, она действительно быстрая. Но не все линии отрисовывает в нужную сторону... Необходимо добавить проверку для случая X-линии if(y1 "<" y0) grad=-grad; и аналогично для Y-линии if(x1 "<" x0) grad=-grad; P.S. На...
Отличные уроки(учу GL по ним), только в renderScene нужно добавить очистку буфера цвета и буфера глубины. При изменении размеров треугольники размножаются)
как исправить это , сделал все по инструкции
Timer1 - выдает ошибку. Использовал IdleTimer1, работает! unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls, ExtCtrls, OpenGLContext, GL, GLU; type { TForm1 } TForm1 =...
в коде присутствуют ошибки! // Считываем координаты procedure TForm1.getCoords(Sender: TObject); var j1:longint; begin n:= StrToInt(Edit2.Text); //число точек s1:=Edit1.Text; s2:=''; i := 1; j:=1; k:=0...

Счетчики и рейтинг

Яндекс.Метрика Рейтинг@Mail.ru
http://gidroisol.ru/ профилированные мембраны плантер технониколь.
Скриншот к примеру
Среда программирования: 
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 кб