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.

// height=300
let raggio1;
let raggio2;  // 100
let passoRad1 = 0.0155; // 0.031;
let passoRad2 = 0.0415; // 0.083;

let c0x;
let c0y;

let font;
let looping = false;

function preload() {
    font = loadFont("../files/RobotoMono-Regular.ttf")
//    font = loadFont("../files/RobotoMono-Medium.ttf")
}

function setup() {
    createCanvas( windowWidth, 300 );
//    background( 255 );
//    stroke( 0, 30 );
    textAlign(CENTER);
//    textFont( "Roboto Mono", 20 );
    textFont( font, 16 );
//    textSize(20);
    textStyle(BOLD);
    fill(32);
    setupResizable();
    redraw();
    noLoop();
    cursor(HAND);
}
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    setupResizable();
}
function setupResizable() {
    c0x = width/2;
    c0y = height/2 + 8;
    raggio1 = raggio2 = min(width,height)/4.7;
}
function draw() {

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

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

    clear();

    strokeWeight(1);
    stroke(212);
    line( c0x,c0y, c1x,c1y);
    strokeWeight(2);
    stroke(0);
    line( c1x,c1y, c2x,c2y);

    noStroke();
    circle( c0x,c0y, 8);  
    circle( c1x,c1y, 8);  
    circle( c2x,c2y, 8);

//    strokeWeight(5);
//    stroke(255,255,192);
    text("c0", c0x, c0y-9);
//    stroke(212,255,255);
    text("c1", c1x, c1y-9);
//    stroke(255,222,255);
    text("c2", c2x, c2y-9);
}
function mouseReleased() {
    if(looping) {
        noLoop();
    } else {
        loop();
    }
    looping = !looping;
}

Cliccare sul canvas per avviare le rotazioni.

// height=400 lines=auto
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 c0x = 200;
let c0y = 200;

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

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

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

let c2x = c1x + cos(rad2)*raggio2;
let c2y = 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.

Approfondimenti: