/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://p5js.sketchpad.cc/sp/pad/view/ro.fufgM3YxkjK/rev.474
 * 
 * authors: 
 *   Kris Frajer
 *   

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



/*
This sketch builds on a prior work, "circleOnCircle_pathPlotting", created by Kris Frajer
http://p5js.sketchpad.cc/sp/pad/view/ro.Csnm5mLP7eIEFK/rev.294
*/

// https://forum.processing.org/two/discussion/26802/how-to-make-an-array-of-ellipses-travel-along-the-circumference-of-another-array-of-larger-ellipses#latest


var circles = [];
var pen;
var resultx1 = [];
var resulty1 = [];
var resultx2 = [];
var resulty2 = [];
var isPaused;


 
function setup() {
    createCanvas(640, 640);    
    isPaused=false;
    
    setInterval(resetArrays,6000);
 
    circles[0] = {
        c: createVector(0, 0),
        r: 150,
        t: 0.01
    };
 
    for (var i = 0; i < 1; i++) {
        circles.push(new Circle(circles[i].c, circles[i].r, circles[i].t));
    };
    pen = new Pen(circles[circles.length - 1].c, circles[circles.length - 1].r, circles[circles.length - 1].t);
}
 
function draw() {
    background(255);
    
    translate(width / 2, height / 2);

    stroke(0);
    noFill();
        push();
    ellipse(circles[0].c.x, circles[0].c.y, 2 * circles[0].r);
 
 
    for (var i = 1; i < circles.length; i++) {
        circles[i].update();
        circles[i].show();
    };

    pen.show();    
    pop();
    
    fill(0,0,250);
    for(var pp=0;pp<resultx1.length;pp++){            
        ellipse(resultx1[pp]+resultx2[pp], resulty1[pp]+resulty2[pp], 5);  //Shows trajectory one point driven by both circles      
    }
 
  stroke(255, 0, 0);
  noFill();
  beginShape();
  for (var j = 0; j < resultx1.length; j += 2) {
      vertex(resultx1[j], resulty1[j + 1]);  //Trajectory of second circle
  }
  endShape();
     
}
function mousePressed(){
    isPaused=!isPaused;
    
    if(isPaused) noLoop(); 
    else{ loop(); resetArrays();}
    
}

function resetArrays(){
    resultx1=[];
    resulty1=[];
    resultx2=[];
    resulty2=[];    
}
 
function Circle(c, r, t) {
    this.r = r / 3;
    this.c = createVector(r + this.r, c.y);
    this.t = -2 * t;
    
    
    this.update = function() {
        resultx1.push(this.c.x);
        resulty1.push(this.c.y);
        this.c.rotate(this.t);
    };
 
    this.show = function() {
        translate(c.x, c.y);
        stroke(0);
        noFill();
        ellipse(this.c.x, this.c.y, 2 * this.r);
    };
}
 
function Pen(c, r, t) {
    this.c = createVector(r, c.y);
    this.t = 4 * t;
 
    this.show = function() {
        noStroke();
        fill(255, 0, 0);
        this.update();
        translate(c.x, c.y);
        ellipse(this.c.x, this.c.y, 5);
    };

 
    this.update = function() {
      resultx2.push(this.c.x);
      resulty2.push(this.c.y);
      this.c.rotate(this.t);
    };
}