Как нарисовать каплевидный контур и фигуру Лиссажу на Javascript

Сначала не совсем фигуры Лиссажу, хотя подход похожий.

В отличие от шариков, мы не применяем встроенные в язык кривые Безье, а отрисовываем контур по точкам, соединяя их отрезками.

В основе построения контура лежит модель

x = r * (a + Sin(c * t) ^ n)
y = r * Cos(t) * (b + Sin(t) ^ m)

где ^ - возведение в степень, r - радиус, t - угол, a,c,n,b,m - коэффициенты.

Задаём радиус, коэффициенты, настройки отрисовки на канве и вызываем функцию, так что скрипт совсем простенький.

В отличие от полярных цветов, мы не обязательно делаем один цикл от 0 до 2*pi, а можем передать настройкой количество циклов n*pi.

Вот скриншот с несколькими фигурами на одном полотне и код для него, который можно выполнить из любого файла .html.

капли

<div align="center">
  <canvas id="dropCanvas" width="600" height="600" style="margin:0px; border :1px dotted;">
  </canvas>
</div> 

<script type="text/javascript">

function drawDrop (r,a,c,n,b,m,startXcoeff=0.5,startYcoeff=0.5,col='#008000',per=2,cli=true) {
 /*
  радиус капли r
  коэффициенты модели
   x = r * (a + Sin(c * t) ^ n)
   y = r * Cos(t) * (b + Sin(t) ^ m)
  коэффициенты смещения по осям startXcoeff, startXcoeff, ]0;1[, 0.5 - середина канвы
  цвет линий col
  период per (2*pi, 4*pi и т.д.)
  очищать ли канву cli
 */
 var canvas = document.getElementById('dropCanvas');	
 var ctx = canvas.getContext('2d');
 var w = canvas.width, h = canvas.height;
 if (cli) { ctx.fillStyle = '#FFFFFF'; ctx.fillRect (0 , 0 , w, h);  }
 ctx.strokeStyle = col; ctx.lineWidth = 3.5;
 var pi2 = (per+0.1*per)*Math.PI,x0,y0,x,y,started=false;
 for (var t=0; t<=pi2; t+=0.01*pi2) {
  x = Math.round(r * (a + Math.pow(Math.sin(c*t),n))+w*startXcoeff);
  y = Math.round(r * Math.cos(t) * (b + Math.pow(Math.sin(t),m))+h*startYcoeff); 
  if (started) {
   ctx.beginPath(); ctx.moveTo(x0,y0); ctx.lineTo(x,y); ctx.stroke(); x0 = x; y0 = y;
  }
  else started=true;
 }
}

window.addEventListener('load', function () {
 drawDrop (100,1,1,1,1,1,0.1,0.25);
 drawDrop (100,1,1,3,1,1,0.6,0.25,'red',2,false);
 drawDrop (100,1,0.5,5,1,1,0.1,0.75,'blue',4,false); 
 drawDrop (100,1,1.5,1,1,1,0.6,0.75,'magenta',4,false); 
}, false);
</script>
<noscript><p>Для работы приложения нужен включенный Javascript</p></noscript>

Классическую фигуру Лиссажу нарисуем ещё более простым кодом. Аргументы обозначены как в Вики, оттуда же взята фигура для образца. Вот скрипт непосредственно в работе (нужен включённый Javascript) и исходник:

<div align="center">
  <canvas id="lissajousCanvas" width="200" height="200" style="margin:0px; border :1px dotted;">
  </canvas>
</div> 

<script type="text/javascript">

function draw (radius,a,b,d,A,B) {
 var canvas = document.getElementById('lissajousCanvas');	
 var ctx = canvas.getContext('2d');
 var w = canvas.width, h = canvas.height;
 ctx.beginPath();
 ctx.strokeStyle = 'rgb(255, 0, 0)';
 var n = 500; //шагов
 ctx.moveTo(w/2, h/2);
 for(var t=0; t<=2*Math.PI; t+=Math.PI/n){
   var x = radius * A * Math.sin(a * t + d);
   var y = radius * B * Math.sin(b * t);
   ctx.lineTo(w/2 + x, h/2 - y);
 }
 ctx.stroke();
}

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

16.03.2019, 14:53 [1810 просмотров]