//SRISHTY BHAVSAR
//15-104 SECTION C
//PROJECT 7

var nPoints = 500;

function setup() {
    createCanvas(400, 400);

}


function draw() {
    createCanvas(480, 480);
    background(0);
    // draw the curve

    fill(154,205,40,70); // yellow green color
    ranunculoid(10,20);
    hypotro();
    noFill();
    ranunculoid(30,50);
    ranunculoid(40,60);


}

//--------------------------------------------------
function hypotro() {
    // Hypotrochoid
    // https://mathworld.wolfram.com/Hypotrochoid.html
    
    push();
    noFill();
    stroke('magenta');
    strokeWeight(1);
    translate(width/2 , height/2);
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 60, 160); //radius of still circle
    var b = map(y, 0, height, 1, 8); // radius b of rolling circle inside still circle
    var h = constrain(a/2, 100, 100); //
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map( i, 0, nPoints, 0, TWO_PI); // tangent?
        //PARAMETRIC EQUATIONS
        x = (a - b) * cos(t) + (h * cos(((a-b)/b)*t)); 
        y = (a - b) * sin(t) - (h * sin(((a-b)/b)*t));
        vertex(x,y); // connected to center vertex

    }
    endShape();
    pop();
}

//--------------------------------------------------

function ranunculoid(xsize,ysize) {
    // https://mathworld.wolfram.com/Ranunculoid.html
    push();
    stroke('green');
    strokeWeight(1);
    translate(width/2 , height/2);  
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(mouseX, 0, width, xsize, ysize); 
    beginShape();
    for (var i = 0; i < nPoints/10; i++) {
        var t = map(i, 0, nPoints/10, 0, TWO_PI);

        x = a * (( 6 * cos(t)) - cos(6*t))
        y = a * (( 6 * sin(t)) - sin(6*t))
        vertex(x, y);
    }
    endShape();
    pop();
}

// Ilia Urgen
// Section B
// iurgen@andrew.cmu.edu
// Project-07

function setup() {
  createCanvas(480, 480);
}
 
function draw() {

    color_1 = color (189,17,89);
    color_2 = color (253,163,26);

    // ombre 
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }

    noFill();
    stroke (0);
    strokeWeight (0.25);

    // canvas border lines
    line (1,1,1,width - 1);
    line (1,1,width - 1,1);
    line (1,width - 1,width - 1,width - 1);
    line (width - 1,1,width - 1,width - 1);
  
    // smallest possible x-value of drawing
    var x = min (mouseX, width);
  
    // link the curve scale to mouseX
    var a0 = map (x, 0, width, 0, 50);
    var b0 = map (mouseX, 0, width, 0, 100);

    var a1 = map (x, 0, width, 0, 200);
    var b1 = map (mouseX, 0, width, 0, 300);

    var a2 = map (x, 0, width, 0, 400);
    var b2 = map (mouseX, 0, width, 0, 800);

    var a3 = map (x, 0, width, 0, 900);
    var b3 = map (mouseX, 0, width, 0, 1800);

    var a4 = map (x, 0, width, 0, 1900);
    var b4 = map (mouseX, 0, width, 0, 3800);

    var a5 = map (x, 0, width, 0, 3900);
    var b5 = map (mouseX, 0, width, 0, 7800);

    var a6 = map (x, 0, width, 0, 7900);
    var b6 = map (mouseX, 0, width, 0, 15800);

    var a7 = map (x, 0, width, 0, 15900);
    var b7 = map (mouseX, 0, width, 0, 31800);
  
    // link the curve rotation to mouseY
    var degree = map (mouseY, 0, height, 0, 360);
  
    push();
    translate (width/2, height/2);
  
    for (var j = 0; j < degree; j += 3600 / degree) {
        
        rotate (720 / degree);
        beginShape();
        curveVertex (0, 0);
        
        // draw the complete curves 
        for (var i = -10; i < 10; i += 0.3) {
            var x0 = a0 * cos (i);
            var y0 = b0 * sin (i);
            curveVertex (x0, y0);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x1 = a1 * cos (i);
            var y1 = b1 * sin (i);
            curveVertex (x1, y1);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x2 = a2 * cos (i);
            var y2 = b2 * sin (i);
            curveVertex (x2, y2);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x3 = a3 * cos (i);
            var y3 = b3 * sin (i);
            curveVertex (x3, y3);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x4 = a4 * cos (i);
            var y4 = b4 * sin (i);
            curveVertex (x4, y4);
        } 

        for (var i = -10; i < 10; i += 0.3) {
            var x5 = a5 * cos (i);
            var y5 = b5 * sin (i);
            curveVertex (x5, y5);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x6 = a6 * cos (i);
            var y6 = b6 * sin (i);
            curveVertex (x6, y6);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x7 = a7 * cos (i);
            var y7 = b7 * sin (i);
            curveVertex (x7, y7);
        }
        
        curveVertex (0, 0);
        endShape();

    }

    pop();
    
    // consistent background lines
    line (0, 0, width, height);
    line (0, width, height, 0);

    line (width/2, 0, width/2, height);
    line (0, height/2, width, height/2)

}