Project 07: Curves

This is my floral composition based on mathematical curves and reacts to the mouse’s location on the canvas.

sketch
/*
    Joan Lee
    Section D

    This program draws an interactive floral composition with mathematical curves.
*/

var nPoints = 400;

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


function draw() {
    background(28,92,76);    //dark green
    
    //drawing flower curve
    push();
    translate(width/2, height/2);
    drawCardioidCurve();
    pop();

    //drawing leaves curve
    push();
    translate(width/2, height/2);
    drawHypotrochoidCurve();
    pop();

}

//--------------------------------------------------
function drawCardioidCurve() {
    //cardioid curve
    push();
    translate(x, y);
    rotate(radians(90));
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 0, 40);
    var b = a/2;
   
    //mouse movement interaction
    if (mouseY > height/2) {    //color change
        fill(244,52,4);     //bright red
    } else {
        fill(252,156,132);  //pink
    }

    //cardioid curve parametric equations
    beginShape();
    noStroke();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

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

//--------------------------------------------------
function drawHypotrochoidCurve() {
    //hypotrochoid curve
    noFill();
    strokeWeight(1);

    //mouse movement interaction

    if (mouseX < width/2) {      //color change
        stroke(4,220,156);  // bright green
    } else {
        stroke(204,236,228);    //pale green
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //hypotrochoid curve parametric equations
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a - b) * cos(t) + h * cos(t * ((a - b) / b));
        y = (a - b) * sin(t) - h * sin(t * ((a - b) / b));
        vertex(x, y);
    }
    endShape(CLOSE);
    
}

Leave a Reply