Math Pattern

let startTime = 0.0;

let drawTime = 0.0;

let pg;

​

function setup() {

    createCanvas(600,600);

    background(245);

    reset();

}

​

function reset(){

  startTime = millis();

    drawTime = 0.0;

  pg = createGraphics(width, height);

}

​

/*

  Cardioid.

*/

function draw() {

    let r0 = 100;

    let r1 = 100;

  let t = ( millis() - startTime )*0.001;

    let dt = t - drawTime;

    background(245);

    //This is the inner ball

    let center = createVector(0.5*width, 0.5*height); 

    fill(255);

    ellipse(center.x, center.y,2*r0,2*r0);

    let  orbit = createVector(cos(2.0*t),sin(2.0*t)).mult(r0) ; 

    let origin =   p5.Vector.add(center,  createVector(cos(3.0*t),sin(3.0*t)).mult(r0)) ; 

​

    let p1 = p5.Vector.add(center,orbit);

    let r = p5.Vector.sub(p1,origin).mag();

    noFill();

    ellipse(p1.x, p1.y,2*r,2*r);

  line(origin.x,origin.y,p1.x,p1.y);

    ellipse(p1.x, p1.y,5,5);

  ellipse(origin.x, origin.y,5,5);

    if(dt > TWO_PI/200) {

        pg.noFill();

        pg.strokeWeight(1);

        pg.stroke(0,50);

        pg.ellipse(p1.x, p1.y,2*r,2*r);

        drawTime = t;

    }

    image(pg,0,0,width,height);

​

}