haewanp – Project 07 – Composition with Curves

Composition with Curves

var x;
var y;
var r;
var nPoints = 300;

function setup() {
    createCanvas(480, 480);
    strokeJoin(ROUND);
    smooth();
    stroke(255, 200, 200, [255]);
}

function draw() {
    background(240);
    noFill();
    
    push();
    translate(width / 2, height / 2);
    roseCurve();
    astroidCurve();
    pop();

}

function roseCurve() {
    strokeWeight(2);
    
    beginShape();
    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
        
    }

    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(-x, y);
        
    }

    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, -y);
        
    }

    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseY, 0, height, 40, height/2); //change its size depending on y coordinate of mouse
        var n = map(mouseY, 0, height, 0, 4); //change its shape depending on y coordinate of mouse
        r = a * sin(n*t);
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(-x, -y);
        
    }
    endShape(CLOSE);

}


function astroidCurve() {
    noFill();

    beginShape();
    for (i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var a = map(mouseX, 0, width/2, 20, nPoints/2); //change its size depending on x coordinate of mouse
        x = a*pow(cos(t),3);
        y = a*pow(sin(t),3);
        
        vertex(x, y);
        ellipse(x, y, 100, 100); //create ellipse along the curve line
    }
    endShape();
}

Before starting to code my program, I explored various curve equation in Mathworld curve site. I think this site is a very useful reference. Also, it was interesting to see all the different curve shapes. At the beginning, I had no idea how to apply polar form. But, I finally realized (x = r cos(θ) and y = r sin(θ)). I chose ‘Rose Curve’ and ‘Astroid Curve’ for my project. Personally, I really like rose curve because of the way it changes shape. I played with a combo of two different curves. You can see some of the nice examples below.