Project 07-Curves

project07-curves
/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A

This program draws a grid of Epicycloids.
Functions for this shape where adapted from 
https://mathworld.wolfram.com/Epicycloid.html.

*/


//sets up the canvas size and initial background
function setup() {
    createCanvas(480, 480);
    background(220, 100, 100); 
}

//draws a grid of epicycloids
function draw() {
    translate(20, 20);
    background(0);
    strokeWeight(2);
    noFill();

    //color changes with mouse position
    //red and green change with y position
    //blue changes with x position
    var r=map(mouseY, 0, height, 80, 255);
    var g=map(mouseY, 0, height, 80, 120);
    var b=map(mouseX, 0, width, 80, 200);
    
    for (var row=0; row<width-20; row+=50) {
        push();
        for (var col=0; col<height-20; col+=50) {
            stroke(r, g, b);
            drawEpicycloid();
            translate(0, 50);
        }
        pop();
        translate(50, 0)
    }
}

//draws a singular epicycloid
function drawEpicycloid() {
    var minPetal=6;
    var maxPetal=10;
    var minSize=4;
    var maxSize=8;
    //number of petals increases as y position of mouse increases
    var numPetals = int(map(mouseY, 0, height, minPetal, maxPetal));
    //size of shape increases as x position of mouse increases
    var size = (map(mouseX, 0, width, minSize, maxSize))/(numPetals/2);

    beginShape();
    for (var i=0; i<100; i++) {
        var t = map(i, 0, 100, 0, TWO_PI);
        var x = (size * (numPetals*cos(t) - cos(numPetals*t)));
        var y = (size * (numPetals*sin(t) - sin(numPetals*t)));
        vertex(x, y);
    }

    endShape();
}

For this project I was really interested in the epicycloid because of the variation that could be added to the number of petals. In my program, I explored altering the number of petals in relation the mouse y position. I also added a variation in the size based on the mouse x position. It was fun to figure out through experimenting what each variable in the formula affected within the actual shape. Here are some screen shots with different mouse positions.

Leave a Reply