Project 04 – Parametric Flower (try scrolling)

sketch

// Kevin Thies
// kthies@andrew.cmu.edu
// Section C
// Project 04 - String Art -
// not a web generator :'(
// just a parametric  flower

var lerps; // how many iterative lerp points on lines
var lerpStep = .1;
var sides = 6; // polygon of n sides

var x; // x coordinate of exterior axis
var y; // y coorinate of exterior axis
var lerpX; // lerp on x axis
var lerpY; // lerp on y axis

var radius; // shortcut for the radius of polygon

function setup() {

    // basic setup stuff
    angleMode (DEGREES);
    createCanvas (300,400);
    background (140);

    // defining variable that depend on p5js
    radius = width/2 - 20; // there's that shortcut
    lerps = 1 / lerpStep; // here's the amount of lerps on the lines

}

function draw() {

    // put origin in center of canvas
    translate (width/2, height/2);

    //have a for loop that rotates petals
    for (var i = 0; i < sides; i ++) {

        // have a for loop that draws one half of a petal
        for (var j = 0; j < lerps; j ++) {

            // law of sines calculation for the axis that makes up exterior lines
            var HYPOTENUSE = radius / sin(90);
            x = HYPOTENUSE * sin(90 - (360 / sides));
            y = HYPOTENUSE * sin(360 / sides);


            //get lerp values on new axis
            lerpX = lerp (x, radius, lerpStep * j);
            lerpY = 1 - lerp (y, 0, lerpStep * j);

            // connect the points on the lines
            line (radius - radius * lerpStep * j, 0, lerpX, - lerpY);


            //This here is just the same as the above except flipped    //
            push();                                                     //
            scale(1,-1);                                                //
                                                                        //
            // law of sines calculation for next line                   //
            var HYPOTENUSE = radius / sin(90);                          //
            x = HYPOTENUSE * sin(90 - (360 / sides));                   //
            y = HYPOTENUSE * sin(360 / sides);                          //
                                                                        //
            //get lerp values on new axis                               //
            lerpX = lerp (x, radius, lerpStep * j);                     //
            lerpY = 1 - lerp (y, 0, lerpStep * j);                      //
                                                                        //
            // connect the points on the lines                          //
            line (radius - radius * lerpStep * j, 0, lerpX, - lerpY);   //
            pop();                                                      //
        }

        //rotate the full petal around to make a polygon
        rotate (360/sides);
    }
}

// number of sides changes based on scrolled direction
function mouseWheel() {

    // cover all that was just drawn
    background(140);

    // on scroll, change number of splines but don't take it as input
    sides += event.delta/50;
    return false;
}

This was a tough project, mostly because I had to go back and partially re-learn trigonometry. That being said I started by making a parametric spider web generator, but that didn’t fit the guidelines nearly well enough. So I took a lot of what I’d learned and wrote for that and turned it into this. Also, shoutout to the Law of Sines, you’re my hero. Maybe one day I’ll be able to break out the web generator, but until then, here’s a parametric flower.