yunzhous-project-07

sketch

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {
    background("lightcyan");
    curve1();
    curve2();
}

function curve1(){
    //astroid
    beginShape();
    stroke(178, 240, 241);
    noFill();
    translate(width/2, height/2);
    for (var i = 0; i < mouseX/2; i ++){ //mouseX controls number of curves
        LimMouseX = constrain(mouseX, 0, width);
        var a = map(LimMouseX, 0, width, 10, 80); //relate to mouseX
        var theta = map(i, 0, mouseX, 20, 360);
        var x = 2 * a * cos(theta) + a * cos(2 * theta);
        var y = 2 * a * sin(theta) - a * sin(2 * theta);
        vertex(x, y);
    endShape();
    rotate(mouseX); //rotate according to position of mouseX

    }
}
function curve2(){

    //Epicycloid Involute
    beginShape();
    stroke(178, 230, 241);
    noFill();
    for (var i = 0; i < mouseX; i ++){ //mouseX controls number of curves
        LimMouseX = constrain(mouseX, 0, width);
        var a = map(LimMouseX, 0, width, 0, 80); //relate to mouseX
        var theta = map(i, 0, mouseX/5, 20, 360);
        var b = map(mouseY, 0, height, 0, 50);
        var x2 = (a+b)*cos(theta) - b*cos(((a+b)/b)*theta);
        var y2 = (a+b)*sin(theta) - b*sin(((a+b)/b)*theta);
        vertex(x2, y2);
    endShape();
    }
}

For this project, I started with researching for curves. I found astroid and epicycloid involute to be interesting and not overly complicated. I wrote two for loops to create multiple curves, and the curves rotate to create repetition. The curves are centered at the canvas and as mouseX and mouseY moves, they generate different pattern