Project-07: Composition with Curves

/*
Sandy Youssef; 
section D; 
syoussef@andrew.cmu.edu;
Project-07;
*/

function setup() {
    createCanvas(480, 480);
    frameRate(6);
    
}

function draw() {
    // Epicloid Curve
    //https://mathworld.wolfram.com/Epicycloid.html
    background(255);
    drawEpicloid1();
    drawEpicloid2();
    drawEpicloid3(); 
    drawEpicloid4();
    drawEpicloid5();
    drawEpicloid6();
    drawEpicloid7();
    drawEpicloid8();


}

function drawEpicloid1() {
//curve located at the top right that moves according to mouse Y 
push();
    translate( width/2-100, height/2-100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle that moves around bigger circle to create points
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseY/50
    fill(255, 0, 0, 50); // transparent pink
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}

function drawEpicloid2() {
// same curve as drawEpicloid1 but moves in opposite direction
push();
    translate( width/2-100, height/2-100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseY/50
    fill(200, 210, 0,50); //transparent yellow
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
        vertex(x,y);
    
    }
    endShape(CLOSE);
    pop();

}

function drawEpicloid3() {
// curve located at top right that moves according to mouse X
push();
    translate( width/2+100, height/2-100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseX/50
    fill(200, 210, 0,50); // transparent yellow
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}

function drawEpicloid4() {
// same curve as drawEpicloid3 but moves in opposite direction according to mouse X
push();
    translate( width/2+100, height/2-100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseX/50
    fill(200, 0, 0,100); // brighter pink
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}

function drawEpicloid5() {
// curve located in bottom right corner that moves according to mouse Y
push();
    translate( width/2+100, height/2+100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseY/50
    fill(200, 210, 0,50); // transparent yellow
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}

function drawEpicloid6() {
// same curve as drawEpicloid5 but moves in opposite direction according to mouse Y
push();
    translate( width/2+100, height/2+100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseY/50
    fill(0, 210, 0,50); // transparent green
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();
}

function drawEpicloid7() {
// curve located in bottom left corner that moves according to mouse X
push();
    translate( width/2-100, height/2+100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseX/50
    fill(0, 250, 0,130); // brighter transparent green
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(theta) - b * cos (theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (theta) - b * sin (theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();

}

function drawEpicloid8() {
// same curve as drawEpicloid7 but moves in opposite direction according to mouse X
push();
    translate( width/2-100, height/2+100);
    var x; 
    var y; 

    var a = 20;; // radius of smaller circle 
    var b = a * 3;  // radius
    var theta = 30;
    var move = mouseX/50
    fill(200, 210, 0,50); //transparent yellow
    beginShape();
    for (var i = 0; i < 100; i ++) {
        var theta = map ( i , 0, 100, 0, TWO_PI);
        x = (a + b) * cos(-theta) - b * cos (-theta * (a + b) /b * move);  // mathematical formula for the curve
        y = (a + b) * sin (-theta) - b * sin (-theta * (a + b) /b * move);
        vertex(x,y);
    }
    endShape(CLOSE);
    pop();
}