Ещё о математических картинках на канве Javascript

Здесь уже немало подобного, пусть будет ещё немного. Это своего рода мини-шаблон для генерации математических картинок, только не рандомных, а построенных по неким соотношениям, меняйте код функции draw и получайте свои неповторимые шедевры.

Я приведу код с функцией draw, получившей вот такой фрактал:

фрактал 1

И далее листинг, разметка HTML без обрамления, кодировка - любая:

<div align="center">
  <canvas id="fracCanvas" width="600" height="600">
  </canvas>
</div> 

<script type="text/javascript">

function drawFractal () {
 var canvas = document.getElementById('fracCanvas');	
 var ctx = canvas.getContext('2d');
 var w = canvas.width, h = canvas.height; //размеры канвы
 var r=255, g=255, b=255;
 ctx.fillStyle = color(r,g,b);
 ctx.fillRect (0 , 0 , w, h); 
 var step = 1; //шаг отрисовки  в пикселах

 function draw () {
  var scale = 0.055; //чем меньше, тем крупней фигурки
  for (var x = 0 ; x < w; x++) { 
   for (var y = 0 ; y < h; y++) { 
    var s1 = Math.sin(x * scale);
    var c1 = Math.cos(x * scale);
    var s2 = Math.sin(y * scale);
    var c2 = Math.cos(y * scale);
    var a1 = Math.sin(s1) * (s2 - c1);
    var a2 = Math.cos(c2) * (c1 - s2);
    var b1 = Math.abs(a2 - a1);
    //меняем коэффициенты 300.,250.,350. для смены палитры:
    r = Math.floor(b1 * 300.) % 255; 
    g = Math.floor(b1 * 250.) % 255; 
    b = Math.floor(b1 * 350.) % 255;
    ctx.fillStyle = color(r,g,b);
    ctx.fillRect (x , y , step, step);
   }
  }
 }

 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 () {
 drawFractal ();
}, false);
</script>
<noscript><p>Для работы приложения нужен включенный Javascript</p></noscript>

Вот другой фрактал и версия функции для него:

фрактал 2

 function draw () {
  var scale = 0.075; //чем меньше, тем крупней фигурки
  for (var x = 0 ; x < w; x++) { 
   for (var y = 0 ; y < h; y++) { 
    var xx = (x - w / 2.) * scale; 
    var yy = (y - h / 2.) * scale;
    //Экспериментируйте с коэффициентами, чтобы получать новые картины:
    var c1 = 5.0 * (Math.cos(8) * Math.atan(100 * yy / (xx + 15)));
    var c2 = 0.5 * (Math.cos(8) * Math.atan(100 * yy / (xx - 15)));
    var s1 = Math.sin(Math.sqrt(Math.pow(xx + 15, 2) + Math.pow(yy + 15, 2)));
    var s2 = Math.sin(Math.sqrt(Math.pow(xx - 15, 2) + Math.pow(yy - 15, 2)));
    var aa = c1 * c2 * s1 * s2;
    var bb = Math.abs (aa);
    if (bb > 0.01) {
     //меняем коэффициенты для смены палитры:
     r = Math.floor(bb * 3000.) % 255;
     g = Math.floor(bb * 1000.) % 255;
     b = Math.floor(bb * 2000.) % 255;
    }
    ctx.fillStyle = color(r,g,b);
    ctx.fillRect (x , y , step, step);
   }
  }
 }

Ну и пусть будет третий до кучи, картинка и функция draw:

фрактал 3

 function draw () {
  var scale = 0.23; //чем меньше, тем крупней фигурки
  for (var x = 0 ; x < w; x++) { 
   for (var y = 0 ; y < h; y++) { 
    var xx = x * scale; 
    var yy = y * scale;
    //Экспериментируйте с коэффициентами, чтобы получать новые картины:
    var rr = Math.sqrt( Math.pow(1.0 * xx - 42, 2) + Math.pow(1.5 * yy - 69, 2) );
    var aa = Math.atan( (xx - 42) / (yy - 69));
    //меняем коэффициенты для смены палитры:
    r = Math.floor( 255 * Math.pow( Math.sin((aa + rr / 10)*1.0),2) );
    g = Math.floor( 255 * Math.pow( Math.sin((aa - rr / 20)*3.0),2) );
    b = Math.floor( 255 * Math.pow( Math.cos((aa + rr / 30)*2.0),2) );
    ctx.fillStyle = color(r,g,b);
    ctx.fillRect (x , y , step, step);
   }
  }
 }

Это три разных подхода к вычислению цвета очередной точки, но везде применены просто двойной цикл по точкам канвы и волшебные синус с косинусом, как и почти во всех математических "красотах".

Присылайте свои :)

математический фрактал 4

Не правда ли, картинка кажется не квадратной, будто уголки "подогнуты"? Вот функция draw для этой картинки:

 function draw () {
  var phi = 2*Math.PI/w+0.005; //чем больше прибавим, тем мельче узоры!
  var rad = 1200; //чем больше, тем меньше сеточка
  for (var x = 0 ; x < w; x++) { 
   for (var y = 0 ; y < h; y++) { 
    var xx = rad * (Math.sin(phi * x * y / rad) - 0.618 * Math.sin(2.5 * phi * y));
    var yy = rad * (Math.sin(phi * x * y / rad) - 0.618 * Math.sin(2.5 * phi * x));
    r = Math.floor(Math.abs(yy)) % 255;
    g = Math.floor(Math.abs(yy + xx)) % 255;
    b = Math.floor(Math.abs(xx)) % 255;
    ctx.fillStyle = color(r,g,b);
    ctx.fillRect (x , y , step, step);
   }
  }
 }

И даже из обычной формулы вида f(x,y)=x2+y2+C можно кое-что получить, вот ещё картинка и функция draw для неё:

математический фрактал 5

 function draw () {
 var scale = 0.0001;
  for (var x = 0 ; x < w; x++) { 
   for (var y = 0 ; y < h; y++) { 
    var xx = Math.abs(x-w/2);
    var yy = Math.abs(y-h/2);
    var k = scale* (yy*yy + xx*xx + 100000);
    r = Math.floor(Math.abs(3000*k*k)) % 255;
    g = Math.floor(Math.abs(1500*k*k)) % 255;
    b = Math.floor(Math.abs(1000*k*k)) % 255;
    ctx.fillStyle = color(r,g,b);
    ctx.fillRect (x , y , step, step);
   }
  }
 }

Упростим код предыдущей функции, убрав из неё вообще все "настроечные" коэффициенты - и получим идею Числа, которое есть Круг :)

Число как круг, уже не фрактал

 function draw () {
  for (var x = 0 ; x < w; x++) { 
   for (var y = 0 ; y < h; y++) { 
    var xx = Math.abs(x - w/2);
    var yy = Math.abs(y - h/2);
    var k = Math.sqrt(xx*xx + yy*yy);
    r = Math.floor(k) % 255;
    g = Math.floor(k) % 255;
    b = Math.floor(k) % 255;
    ctx.fillStyle = color(r,g,b);
    ctx.fillRect (x , y , step, step);
   }
  }
 }

Ну а уж если смешать хромосомы расстояния xx и yy (изменился только оператор var k = Math.sqrt(xx*yy);), то и получится квадрож**ие или крестож**ие, в котором мы живём...

квадрож**ие

11.03.2019, 20:48 [1944 просмотра]