Квадратичные фракталы на Javascript
Один из простых типов фракталов основан на соотношениях вида
X2 = А1*Х2+А2*X+A3*Y2+A4*Y+A5*X*Y+A6
Y2 = B1*Х2+B2*X+B3*Y2+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 [2115 просмотров]