Квадратичные фракталы на Javascript

Один из простых типов фракталов основан на соотношениях вида

X2 = А1*Х²+А2*X+A3*Y²+A4*Y+A5*X*Y+A6

Y2 = B1*Х²+B2*X+B3*Y²+B4*Y+B5*X*Y+B6

то есть, координаты новой точки зависят от координат предыдущей через квадратный многочлен, связывающий обе координаты, это проще, чем Мандельбротщина или Жюлиа в общем виде, а картинки можно получить не хуже.

Примерно вот так это может выглядеть, а может, наверно, и красивее, я не утверждаю, что показанный в листинге подбор коэффициентов сколько-нибудь оптимален. Картинка сменяется раз в три секунды, подождите, если первая оказалась не слишком удачной :) Сам полный листинг скрипта с комментариями к основным настройкам приводится ниже.

Уберу этот красивый код по кат, чтобы не тормозил ленту на медленных компах, нажмите "Далее" и дождитесь загрузки страницы :)

<div align="center" id="balloonDiv">
  <canvas id="fracCanvas" width="600" height="600" style="background-color: black;">
  </canvas>
</div> 

<script type="text/javascript">

function drawSquareFractal () {
 var canvas = document.getElementById('fracCanvas');	
 var ctx = canvas.getContext('2d');
 var h = Math.min (canvas.width,canvas.height); //размер канвы
 ctx.clearRect (0, 0, canvas.width, canvas.height);
 var k = 300; //количество итераций
 var ss = 1; //шаг отрисовки  в пикселах
 var scal = 50; //коэффициент масштаба
 var a = [ 0, 0, 0, 0, 0, 0];
 var b = [ 0, 0, 0, 0, 0, 0];

 function draw () {
  var diap = 4; //диапазон разброса случайных коэффициентов многочлена
  for (var i = 0 ; i < 6; i++) { 
   a[i] = Math.random() * diap - (diap/2); 
   b[i] = Math.random() * diap - (diap/2);
  }
  for (var xx = 0 ; xx < h; xx++) { 
   for (var yy = 0 ; yy < h; yy++) { 
    var x = (xx - Math.floor(h/2)) / scal;
    var y = (yy - Math.floor(h/2)) / scal;
    for (var j = 0; j < k; j++) {
     var x1 = a[0] * Math.pow(x,2) + a[1] * x + a[2] *Math.pow(y,2) + a[3] * y + a[4] * x * y + a[5];
     var y1 = b[0] * Math.pow(x,2) + b[1] * x + b[2] *Math.pow(y,2) + b[3] * y + b[4] * x * y + b[5];
     if (Math.abs(x1 + y1) > 20) break;
     x = x1; y = y1;
    }
    var sc = 19; //чем больше sc, тем уже основные полосы
    var red = Math.abs(Math.floor(x1*sc))%255;
    var blue = Math.abs(Math.floor(y1*sc))%255;
     //красный, синий зависят от координат
    var green = (j*100)%255; //зеленый зависит от номера шага
    ctx.fillStyle = color(red,green,blue);
    ctx.fillRect (xx , yy , ss, ss);
   }
  }
 }

 function color (r,g,b) {
  return '#' + (r<16?'0':'') + r.toString(16) + (g<16?'0':'') + 
   g.toString(16) + (b<16?'0':'') + b.toString(16);
 }

 draw();
}

window.addEventListener('load', function () {
 drawSquareFractal ();
 window.setInterval('drawSquareFractal()',3000);
}, false);
</script>
<noscript><p>Для работы приложения нужен включенный Javascript</p></noscript>

А вот фракталы по рецепту от Барри Мартина (Barry Martin), взятому отсюда, навскидку так и не сбалансировались, оставляю работающую "недоделку" в качестве прикреплённого файла. Картинка также меняется каждые 3 секунды, внизу выводятся коэффициенты.

 Фракталы по рецепту Барри Мартина, не сбалансировано, открыть файл HTML (2 Кб)

16.12.2018, 11:05 [2006 просмотров]