Project 7: Curves

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

var nPoints = 100;
function setup() {
    createCanvas(410, 400);
}

function draw() {
    background(171, 230, 255);
    for(var i=30; i<=400;i+=100){
        for(var j=30; j<=400;j+=60){
            push();
            translate(i,j);
            daisy();
            pop();
        }
    }
    for(var k=80; k<=400;k+=100){
        for(var l=0; l<=600;l+=60){
            push();
            translate(k,l);
            daisy();
            pop();
        }
    }
}

function daisy() {
//drawing a daisy
    var x;
    var y;
// making a ranunculoid or a 10-cusp epicycloid  
    var petal = 10;
    if (mouseY >= height/3 & mouseY < height*(2/3)){
        petal = 5;
    }
    var a = 20;
    var b = a / petal;
    var h = b;
// making a fried egg
    if (mouseY < height/3) {
        h = 0;
    }
    var ph = mouseX / 50.0;
    var ph = mouseX / 50.0;
    fill(255);
    stroke(100);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) /b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) /b);
        vertex(x, y);
    }
    endShape(CLOSE);
// middle part
    fill(255, 253, 158);
    circle(0, 0, a);
}

For this project, I decided to create an interactive pattern using ranunculoid and 10-cusps epicycloid curves. The pattern changes from a pattern of fried eggs, when mouseY is in the first third of the canvas, to a pattern of 5-petals daisies, when mouseY is in the second third of the canvas, and to a pattern of 10-petals daisies, when mouseY is in the last third of the canvas. The pattern also spins when mouseX changes.

Leave a Reply