Lanna Lang – Project 07 – Curves

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 07 - Curves

var nPoints = 100;
var angle = 0;

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

function draw() {
    background('#ffc5a1'); //pastel orange
    
    //call, translate, and rotate
    //the epitrochoid curve
    push();
    translate(width/2, height/2);
    rotate(radians(angle));
    drawEpitrochoid();
    angle += 10;
    pop();
    
    //call and translate the hypotrochoid curve
    push();
    translate(width/2, height/2);
    drawHypotrochoid();
    pop();
}

//Epitrochoid curve (biggest curve)
function drawEpitrochoid() {
    //http://mathworld.wolfram.com/Epitrochoid.html
    
    var x1;
    var y1;
    
    //scale and rotation based on mouseY and mouseX
    var a1 = map(mouseY, 0, 480, 10, 70);
    var b1 = 20;
    var h1 = mouseX;
    
    strokeWeight(4);
    stroke('lightyellow');
    fill(mouseX, 150, mouseY); //fill based on the mouse
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t1 = map(i, 0, nPoints, 0, TWO_PI);
        //epitrochoid equation
        x1 = (a1 + b1) * cos(t1) - (h1 * cos((a1 + b1 / b1) * t1));
        y1 = (a1 + b1) * sin(t1) - (h1 * sin((a1 + b1 / b1) * t1));
        vertex(x1, y1);
    }
    endShape(CLOSE);
}

//Hypotrochoid curve
function drawHypotrochoid() {
    //http://mathworld.wolfram.com/Hypotrochoid.html
    
    //rainbow filled hypotrochoid
    var x2;
    var y2;
    
    //scale and rotation based on the mouse
    var a2 = map(mouseY, 0, 480, 80, 200);
    var b2 = 20;
    var h2 = mouseX / 10;
    
    strokeWeight(4);
    stroke('hotpink');
    fill(mouseX, mouseY, 200);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t2 = map(i, 0, nPoints, 0, TWO_PI);
        //hypotrochoid equation
        x2 = (a2 - b2) * cos(t2) + h2 * cos((a2 - b2) / b2 * t2);
        y2 = (a2 - b2) * sin (t2) - h2 * sin((a2 - b2) / b2 * t2);
        vertex(x2, y2);
    }
    endShape(CLOSE);
   
    //green hypotrochoid with lines
    var x3;
    var y3;
    
    var a3 = 180;
    var b3 = map(mouseY, 480, 0, 180, 20);
    var h3 = -mouseX / 10;
    
    //array for the lines inside the curve
    var lineX = [];
    var lineY = [];
    
    strokeWeight(3);
    stroke('lightgreen');
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t3 = map(i, 0, nPoints, 0, TWO_PI);
        //hypotrochoid equation
        x3 = (a3 - b3) * cos(t3) + h3 * cos((a3 - b3) / b3 * t3);
        y3 = (a3 - b3) * sin(t3) - h3 * sin((a3 - b3) / b3 * t3);
        vertex(x3, y3);
        lineX.push(x3);
        lineY.push(y3);
    }
    endShape(CLOSE);
    
    //draw the lines inside the curve with a for loop
    for (var i = 0; i < lineX.length - 1; i++) {
        strokeWeight(2);
        stroke(mouseX + mouseY, mouseY, 120);
        line(0, 0, lineX[i], lineY[i]);
    }   
}

I was intimidated at first looking at the instructions that said we had to create an image based on math curve functions, and I thought it would be very difficult to do, but it turned out to be pretty simple. I had a lot of fun researching the different roulette curves and seeing which ones did cool things with code. I played a lot with mouseX and mouseY, as well as scale, map(), and color. My favorite part of this project is that if you stop your mouse at a different point on the canvas, the epitrochoid curve changes into a completely different curve each time; it’s so interesting to see the crazy curves it can create by changing its a, b, and h values with the mouse’s coordinates.