8120601 математический аттрактор в 80 строк кода :)

Математические аттракторы, пожалуй, ещё красивее, чем просто генерируемые двойным циклом математические картинки... При этом для их программирования и вовсе нужен один-единственный цикл! (см. функцию draw)

Соотношения для вычисления координат следующей точки в зависимости от предыдущей использованы другие, чем в этой старой программе про "салфетки", но вышло, мне кажется, не хуже, вот несколько первых попавшихся картинок, для экономии места наложенных на одно и то же полотно:

математические аттракторы

Ниже показано приложение в работе (откроется после полной загрузки страницы, нужен включённый в браузере Javascript), инструкция и исходник.

Для копирования коэффициентов a,b,c просто кликните по строчке под картинкой, где написано "a=..." и нажмите комбинацию клавиш Ctrl+C (Копировать в буфер обмена).

Потом в нужном месте, например, в комментарии к статье, нажмите Ctrl+V и выразите своё восхищение красивым аттрактором.

Я не стал делать автообновление полотна, как у квадратичного фрактала, лучше просто кликните по картинке левой кнопкой мыши и через некоторое время она перерисуется со случайными коэффициентами. Также можно выбрать свои коэффициенты из списков, картинка обновляется после каждого нового выбора в списке. Насколько это будет быстро, зависит от быстродействия Вашего компьютера, но в норме долго ждать не придётся :)

А для сохранения картинки современные браузеры прекрасно позволяют нажать на канве правую кнопку мыши и кликнуть пункт меню "Сохранить картинку как..." или "Сохранить изображение как..." (зависит от браузера).

Ну а число из заголовка - это просто 201 в третьей степени, так как в каждом из трёх списков можно выбрать по 201 значению.

Проверил пока только в текущем Firefox и IE11, работает. Исходник приведён на момент написания, его можно вставить в файл формата .html в нужной кодировке.

<div align="center">
 <canvas id="attrCanvas" width="600" height="600" onclick="drawFractal(1)"></canvas>
 <div align="center" id="abcDiv" onclick="selectAbcDiv()"></div>
 <div align="center" id="selectDiv"></div>
</div> 

<script type="text/javascript">
function selectAbcDiv() { //Выделить abcDiv по клику
 var div = document.getElementById('abcDiv');
 var range = document.createRange();
 range.selectNodeContents(div);
 var sel = window.getSelection();
 sel.removeAllRanges();
 sel.addRange(range);
}

function drawFractal (rnd) {
 var canvas = document.getElementById('attrCanvas');	
 var ctx = canvas.getContext('2d');
 var w = canvas.width, h = canvas.height;
 ctx.fillStyle = color(255,255,255);
 ctx.fillRect (0 , 0 , w, h); 

 function draw (a,b,c) {
  var depth = 500000, scale = 0.2, x = w/4, y = h/4;
  for (var v = 0 ; v < depth; v++) { 
   var x2 = x / Math.abs(x);
   var x1 = y - x2 * (Math.abs(Math.sin(x) * Math.cos(b) + c - x * Math.sin(a + b + c)))
   var y1 = a - x;
   ctx.fillStyle = color(Math.floor(v/12000),Math.floor(v/7000),Math.floor(v/12000));
   ctx.fillRect (Math.floor(x*scale+w/2), Math.floor(y*scale+h/2), 1, 1);
   x = x1; y = y1;
  }
 }

 function color (r,g,b) {
  return '#' + (r<16?'0':'') + r.toString(16) + (g<16?'0':'') + 
   g.toString(16) + (b<16?'0':'') + b.toString(16);
 }
 function rand () {
  var diap = 100; //диапазон разброса случайных коэффициентов [-diap;diap]
  return Math.floor(Math.random()*2*diap-diap);
 }

 document.getElementById('abcDiv').innerHTML = '';
 var a,b,c;
 if (rnd==1) {
  a = rand(); b = rand(); c = rand();
  document.getElementById("sel_A").value = ''+a;
  document.getElementById("sel_B").value = ''+b;
  document.getElementById("sel_C").value = ''+c;
 }
 else {
  var sel_A = document.getElementById("sel_A");
  a = parseInt(sel_A.value); 
  var sel_B = document.getElementById("sel_B");
  b = parseInt(sel_B.value); 
  var sel_C = document.getElementById("sel_C");
  c = parseInt(sel_C.value); 
 }
 draw(a,b,c);
 document.getElementById('abcDiv').innerHTML = 'a='+a+',b='+b+',c='+c;
}

window.addEventListener('load', function () {
 var s = '';
 var letr = new Array ('A','B','C');
 var selt = new Array (-98,-40,-19);
 for (var i=0; i<3; i++) {
  s += "\n"+letr[i]+'=<select size="1" id="sel_'+letr[i]+'" onchange="drawFractal(0)">';
  for (var n=-100; n<=100; n++) {
   s += "\n" + '<option value="'+n+'"'+(n==selt[i]?' selected':'')+'>'+n;
  }
  s += "\n"+'</select> ';
 }
 document.getElementById('selectDiv').innerHTML = s;
 drawFractal (0);
}, false);
</script>
<noscript><p>Для работы приложения нужен включенный Javascript</p></noscript>

13.03.2019, 15:03 [1697 просмотров]