Project 7 Curves

I connected mouseX and mouseY to the mapping of t to visualize the continuous movement of the curves and the larger shapes they create. It is interesting as you can watch it wind itself, giving a Spirograph effect. I then connected mouseX to a of the ranunculoid which affects the scaling from left to right. It is interesting how both x and y on the canvas determines the complexity of the shapes created. I also had fun experimenting with the different ways the shapes could be shown and decided to have the hypocycloid made of small squares.

project7
// Rachel Legg / rlegg / Section C

//# of point of each shape
var nPoints = 150;

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

function draw() {
    //draw the ranunculoid & astroid curve
    background(0, 38, 38);    //dark green-blue
    fill(255);
    push();
    translate(width/2, height/2);
    fill(121, 33, 250);        //purple
    drawRanunculoid();
    noFill();
    drawHypocycloid();
    scale(1/12);
    fill(105, 20, 235);        //darker purple
    drawRanunculoid();
    pop();

}

function drawRanunculoid() {
    //Ranunculoid : https://mathworld.wolfram.com/Ranunculoid.html

    var x;
    var y;

    var a = 30;        

    stroke(149, 198, 35);      //green
    strokeWeight(1);
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        //map points to mouseX & mouseY for continuous flow
        var t = map(i, 0, nPoints, mouseX, mouseY); 
        a += mouseX / 500;                    //scale when mouseX changes
        
        //adjust to 7 to increase petals to 6
        x = (a * (7 * cos(t) - cos(7 * t)));
        y = (a * (7 * sin(t) - sin(7 * t)));
        vertex(x, y);                           //vertex gets spinograph effect
        //line(x - 5, y - 5, 10, 10);           //visually different. shows lines to center

    }
    endShape(CLOSE);
}

function drawHypocycloid() {
    //https://mathworld.wolfram.com/Hypocycloid.html

    var x;
    var y;
    

    var a = 110;        
    var b = 30;

    noFill();
    stroke(212, 223, 158);     //light green
    strokeWeight(1);
    for(var i = 0; i < nPoints; i++){
        //map points to mouseX & mouseY for continuous change
        var t = map(i, 0, nPoints, mouseX, mouseY);  

        x = ((a - b) * cos(t)) - (b * cos(t * ((a - b) / b)));
        y = ((a - b) * sin(t)) - (b * sin(t * ((a - b) / b)));
        //rectangle shapes to show patterns
        rect(x - 5, y - 5, 10, 10);
    }
}

Leave a Reply