Configurazioni con segmenti rotanti

Facendo ruotare un punto (c2) attorno a un altro punto (c1) che ruota attorno al centro del canvas (c0) è possibile ottenere curve più complesse. Disegnando la successione di linee fra il secondo e il terzo punto si possono generare configurazioni meno scontate.

Cliccare sul canvas per avviare le rotazioni.

    let raggio1 = 90;
let raggio2 = 100;
let passoRad1 = 0.031;  // velocità rotazione raggio1
let passoRad2 = 0.083;  // velocità rotazione raggio2

let c0x = 200;
let c0y = 200;

function setup() {
    createCanvas( 400, 400 );
    background( 255 );
    stroke( 0, 30 );
}

function draw() {

    let rad1 = frameCount*passoRad1;
    let c1x = c0x + cos(rad1)*raggio1;
    let c1y = c0y + sin(rad1)*raggio1;

    let rad2 = frameCount*passoRad2;
    let c2x = c1x + cos(rad2)*raggio2;
    let c2y = c1y + sin(rad2)*raggio2;

    line( c1x,c1y, c2x,c2y);  // disegna solo 2° raggio
}
  

  let /*1*/c0x/**/ = 200;
let /*1*/c0y/**/ = 200;

1° centro di rotazione, coincidente con il centro di un canvas di 400x400 pixel.

  let /*2*/c1x/**/ = /*1*/c0x/**/ + cos(rad1)*raggio1;
let /*2*/c1y/**/ = /*1*/c0y/**/ + sin(rad1)*raggio1;

2° centro di rotazione (e inizio del segmento da disegnare) ricavato attorno al centro di rotazione principale.

  let /*3*/c2x/**/ = /*2*/c1x/**/ + cos(rad2)*raggio2;
let /*3*/c2y/**/ = /*2*/c1y/**/ + sin(rad2)*raggio2;

3° centro di rotazione (e fine del segmento da disegnare) ricavato attorno al 2° centro di rotazione.

Provare a modificare i primi 4 parametri dello sketch tenendo presente che, per non far uscire i segmenti dal canvas, la somma di raggio1 e raggio2 non deve superare 200 (la metà delle dimensioni del canvas).

Le circonferenze dei raggi oltre il primo vengono chiamate epicicli e attraverso particolari trasformazioni matematiche (trasformata discreta di Fourier) è possibile fargli disegnare qualsiasi cosa: Approximating and drawing closed curves with epicycles.