Тор на Javascript

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

тор на javascript, скриншот

Обратите внимание на комментарии //1, //2 в исходнике, с кодом можно экспериментировать :)

Сохранить исходник можно в файле типа .html и затем выполнить этот код в браузере.

Этот рисунок при mult1 = mult2 = 0.75, вот это примерно и было нужно :)

<div align="center">
  <canvas id="torusCanvas" width="500" height="500" 
   style="background-color: black;">
  </canvas>
</div> 
<script type="text/javascript">
 function drawTorus (idc) {
  var c = document.getElementById(idc);
  var ctx = c.getContext('2d');
  var width = c.width, height = c.height;
  ctx.strokeStyle = '#FFFFFF';
  ctx.lineWidth = 1;
  
  function line (x1,y1,x2,y2) {
   ctx.beginPath(); ctx.moveTo (x1,y1); ctx.lineTo (x2,y2); ctx.stroke();
  }

  function distance (x1,y1,x2,y2) {
   return Math.floor 
    (Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)));
  }
 
  function setcolor (r, cx, cy, x, y) {
   var d = distance (cx, cy, x, y);
   var c = Math.floor (d * 255 / r); 
   ctx.strokeStyle = 'rgb(' + c + ',' + c + ',' + c + ')';
  }

  function draw (r,rr,mult1,mult2,cx,cy) {
   for (var fi = 0; fi <= 360; fi+=0.5) {
    var x1, y1;
    for (var a = 0; a <= 360; a+=0.5) {
     var hi = fi * Math.PI / 180.;
     var b = a * Math.PI / 180.;
     var r1 = r + rr * Math.cos (b);
     var w = r1 * Math.cos (mult1 * hi); //1 коэффциенты mult1, mult2 можно менять
     var q = r1 * Math.sin (mult2 * hi); //1 при вызове этой функции
     var z = rr * Math.sin (b) 
     // + rr * Math.cos(4*hi) //2 слагаемое для "закрутки" тора
     ;
     var x = Math.floor (cx + mult1 * (w - q * Math.cos (Math.PI/3)));
     var y = Math.floor (cy + mult2 * (z + q * Math.sin (Math.PI/3)));
     if (a > 0 && (x!=x1|| y!=y1)) line (x,y,x1,y1);
     x1 = x; y1 = y;
     setcolor (2*r,cx,cy,x,y);
    }
   }
  }
  
  var r = 150; //радиус большой
  var rr = 50; //радиус малый
  draw (r,rr,1,1,Math.floor(width/2),Math.floor(height/2));
 }

 window.onload = drawTorus ('torusCanvas');
</script>
<noscript><p>Для работы приложения нужен включенный Javascript</p></noscript>

04.12.2018, 14:53 [1590 просмотров]