Project 7 – Composition with Curves

it’s an avocadooooooooo… thaaaaanksss…

sketch
var nPoints = 100;

function setup() {
    createCanvas(300, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(10);
}

function draw() {
    background(198, 179, 220);
    //Avocado
    push();
    translate(width * 0.6, height * 0.5);
    rotate(radians(30));
    cranoidCurve();
    pop();
    //Avocado face
    face();
    //Avocado pit
    moon();
    //Stars move with mouse
    push();
    translate(mouseX - 200, 30);
    star();
    pop();
    push();
    translate(100, mouseY + 80);
    scale(0.5);
    star();
    pop();
}

function cranoidCurve() {
    var x;
    var y;
    var r;
    var a = 40;
    var b = 60;
    var c = 70;
    var p = constrain((mouseX / width), 0, 1);
    var q = constrain((mouseY / height), 0, 1);
    stroke(77, 135, 2);
    strokeWeight(10);
    fill(195, 238, 139);
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r = a * sin(t) +
            b * sqrt(1 - p * sq(cos(t))) +
            c * sqrt(1 - q * sq(cos(t)));
        x = r * cos(t);
        y = r * sin(t);
        vertex(x, y);
    }
    endShape(CLOSE);
}

function face() {
    noFill();
    stroke(0);
    strokeWeight(2);
    arc(200, 190, 5, 5, radians(210), radians(30));
    arc(220, 200, 5, 5, radians(210), radians(30));
    arc(205, 210, 10, 10, radians(50), radians(190));
}

function moon() {
    //Moon/Avocado pit gets bigger as x increases with mouse
    var x = max(min(100 + mouseX, width), 10);
    var sizeX = x * 3 / 10;
    var r = 300 - mouseX;
    var g = 300 - mouseX;
    var b = 30;
    noStroke();
    fill(r, g, b);
    circle(mouseX - 100, mouseY - 30, sizeX);
}

function star() {
    fill(240, 255, 135);
    frameRate(10);
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    beginShape();
    //Squiggly star
    for (var i = 0; i < nPoints; i++) {
        vertex (x[i] + random(-3, 3), y[i] + random(-3, 3));
    }
    endShape(CLOSE);
}

While exploring different types of curves, I was inspired by the cranioid curve, which strongly resembles an avocado shape when interacted with.

Leave a Reply