Rolling Ball Cardioid

let startTime = 0.0;

let lastPoint;

let pg;

​

function setup() {

    createCanvas(600,600);

    background(245);

    reset();

}

​

function reset(){

  startTime = millis();

  pg = createGraphics(width, height);

}

​

/*

  We are going to roll one ball around another of equal size. 

    The point on the perimeter of the outer ball traces out a curve called a cardioid.

*/

function draw() {

    let r0 = 100;

    let r1 = 100;

    //number of complete revolutions outer ball must complete as it rolls around inner ( if not slipping)

    let n = (r0+r1)/r1

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

    background(245);

    //This is the inner ball

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

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

​

    //This is the outer ball rolling around the inner ball

    let  orbit = createVector(cos(t),sin(t)).mult(r0+r1) ; 

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

    ellipse(p1.x, p1.y,2.0*r1,2.0*r1);

​

    //Find a point on the perimeter of the rolling ball

    let  orbit2 = createVector(cos(n*t),sin(n*t)).mult(-r1) ; 

    let p2 = p5.Vector.add(p1,orbit2);

    //Draw a line to show the rolling of the ball

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

​

    if (!(lastPoint == undefined)){

        pg.strokeWeight(3)

        //Trace out the cardioid

        pg.line(lastPoint.x,lastPoint.y,p2.x,p2.y);

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

    }

    lastPoint = p2;

​

    if (t > TWO_PI) {

        reset();

    }

}