Taisei Manheim – Project 07 – Composition with Curves

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-07


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

function draw() {
    //background color determined by mouse
    background(mouseX, mouseY, mouseX - mouseY);
    drawHypotrochoidCurve()
    drawRanunculoidCurve()
}

function drawHypotrochoidCurve() {
    //http://mathworld.wolfram.com/Hypotrochoid.html

    //mouse only affects image while on canvas
    var x = constrain(mouseX, 0, width); 
    var y = constrain(mouseY, 0, height);

    //changes speed in which it changes so that as you move away from center image changes
    var a = map(x, 0, width, 0, width / 64); 
    var b = map(y, 0, height, 0, height / 64);
    var h = width / 2;

    push();
    translate(width / 2, height / 2); // starts in the center of the canvas
    noFill();
    beginShape();
    for(var i = 0; i < 360; i += 1) {
        var x = (a - b) * cos(i) + h * cos((a - b) * i);
        var y = (a - b) * sin(i) - h * sin((a - b) * i);
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawRanunculoidCurve() {
    //http://mathworld.wolfram.com/Ranunculoid.html
    
    //mouse only affects image while on canvas
    var x = constrain(mouseX, 0, width); 
    var y = constrain(mouseY, 0, height);

    //changes speed in which it changes
    var a = map(x, 0, width, 0, width / 8); 
    var b = map(y, 0, height, 0, height / 8);

    push();
    translate(width / 2, height / 2); // starts in the center of the canvas
    rotate(mouseX/ mouseY);
    noFill();
    beginShape();
    for(var i = 0; i < 360; i += 1) {
        var x = a * (6 * cos(i) - cos(6 * i));
        var y = a * (6 * sin(i) - sin(6 * i));
        vertex(x, y);
    }
    endShape();
    pop();
}

For this project, I was intimidated at first because I was not sure how some of the mathematical equations for the lines worked because I haven’t taken a math class in a while.  However, I realized that just by plugging different equations into the for loop it created interesting results that I was not expecting.  In the end I chose to use a Hypotrochoid and a Ranunculoid.  The combination of the overlapping  geometries, along with the changing colors according to the mouse location give it a bit of a psychedelic vibe.