Nayeon-Project07-Curves

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-07 (Composition with Curves)

//draw canvas
function setup() {
    createCanvas(480, 480);
}

//map the r, g, b color
function draw() {
    var r = map(mouseX, 0, width, 100, 255);
    var g = map(mouseY, 0, height, 0, 150);
    var b = map(mouseX, 0, width, 0, 255);
    noFill();
    background(0);

//Hypotrochoid changing color based on mouse cursor
    push();
    stroke(r, g, b, 50);
    strokeWeight(0.5);

    translate(width / 2, height / 2);
    drawHypotrochoid();
    pop();

//hypocycloid changing color based on mouse cursor
    push();
    stroke(b, r, g);
    strokeWeight(0.2);

    translate(width / 2, height / 2);
    drawHypocycloid();
    pop();
}

function drawHypotrochoid() {
//draw hypotrochoid
//http://mathworld.wolfram.com/Hypotrochoid.html
    var x;
    var y;
    var h = 400;
    var a = map(mouseX, 0, width, 0, 5);
    var b = map(mouseY, 0, height, 0, 1);
//x = (a - b) * cos t + h cos(((a - b) / b) * t)
//y = (a - b) * sin t - h sin(((a - b) / b) * t)
    beginShape();
      for(var i = 0; i < 500; i ++) {
        var angle = map(i, 0, 200, 0, 360);
        x = (a - b) * cos(angle) + h * cos(((a - b)) * angle);
        y = (a - b) * sin(angle) - h * sin(((a - b)) * angle);
        vertex(x, y);
      }
    endShape();
}

function drawHypocycloid() {
//draw hypocycloid
//http://mathworld.wolfram.com/Hypocycloid.html
    var x;
    var y;
    var a = map(mouseX / 2, 0, width, 0, 200);
    var b = map(mouseY / 2, 0, height, 0, 200);
//x = ((a - 1) * cos t) + ((a - 1) * cos t)
//y = ((a - 1) * sin t) - ((a - 1) * sin t)
    beginShape();
    for (var i = 0; i < 300; i ++) {
      var angle = map(i, 0, 100, 0, 6);
      x = ((a - 1) * cos(angle / 2)) + ((a - 1) * cos(angle * b));
      y = ((a - 1) * sin(angle / 2)) - ((a - 1) * sin(angle * b));
      vertex(x, y);
    }
    endShape();
}

For this assignment, I looked through the Mathworld curves site first. And I realized that It’s been a while(I mean.. really….) to study any math so I need to start from very simple math stuff. I also got little help from some friends who are familiar with math to build a equation for this. After long time struggle, I finally managed to build a curves, and then I played it with fun! It was very hard to think about draw something with math, but after knowing the formula it was fun to play with numbers!
Here are some screenshot images from composition curves that I made.