Создавайте красивые узоры с помощью простой математики

В один скучный уик-энд, пытаясь убить время, мой друг порекомендовал мне видео на YouTube, которое вдохновило меня написать код для создания шаблонов, как показано ниже.

Это называется модульным умножением на круге (таблица умножения). Здесь я расскажу, как это сделать самостоятельно.

Чтобы сделать эти узоры, сначала круг делится на n равные части. Они пронумерованы от 0 до n — 1.

Затем каждая часть соединяется со своим k th кратным. Показанный выше узор сделан с k = 7. Это означает, что 1 соединяется с 7, 2 с 14, 3 с 21 и так далее. Выполнение этого для вышеуказанной настройки дает следующий образец.

Проделав описанную выше процедуру для большого количества деталей, получатся красивые узоры.

Я сделал выше с помощью HTML5 Canvas.

Сначала давайте инициализируем холст и нарисуем основной круг.

Круги нарисованы методом .arc().

var canvas =  document.querySelector('canvas');                                               canvas.width = window.innerWidth;                       canvas.height = window.innerHeight;  
                                             
//c stands for context                       
var c = canvas.getContext('2d');                                              
// Master Circle
// a and b corresponds to center of the circle                       
var a = 400, b = 300, radius = 200;                       c.beginPath();                       
c.arc(a, b, radius, 0, Math.PI * 2, false);                       c.stroke();

Первой контрольной точкой кода будет разделение круга на n частей и получение их координат для дальнейшего использования.

var arc_len = 2 * Math.PI * radius / n;                       
var dtheta = arc_len / radius;                       
var x = a - radius;                       
var y = b;
var n = 300;                       
var theta = 0;                                               
var coorArray = [];                       
for (let i = 0; i < n; i++) {                                                   
  coorArray.push([x,y]);                                                   
  theta += dtheta;                           
  x = a - (radius * Math.cos(theta));                           
  y = b - (radius * Math.sin(theta));                               }

И заключительная часть, чтобы соединить точки с их индексом, умноженным на k. .moveTo() и .lineTo() используются для указания начальной и конечной точек. И, наконец, .stroke() способ его нарисовать.

var endp;                       
var times = 8;                       
var r = Math.random() * 255;                       
var g = Math.random() * 255;                       
var b = Math.random() * 255;                       
c.strokeStyle = 'rgba('+r+','+g+','+b+',1)';                                               for (let i = 0; i < coorArray.length; i++) {                             
  c.beginPath();                             
  c.moveTo(...coorArray[i]);                           
  endp = times * i >= n ? (times * i) % n : times * i;                                                        
  c.lineTo(...coorArray[endp]);                             
  c.stroke();                          
}

Также добавлены случайные цвета для визуальной привлекательности;).

Взгляните на мою версию здесь.

Вы можете узнать больше о HTML Canvas здесь.

Надеюсь, вам понравилось! Спасибо!