Gretchen Kupferschmid-Project 07- Curves

sketch

//Gretchen Kupferschmid
//Section E
//gkupfers@andrew.cmu.edu
//Project-07-Curves

function setup() {
    createCanvas(480,480);
}
 function draw (){
    //gradient picking color
    var gradient1 = color(255, 238, 87); 
    var gradient2 = color(247, 119, 179); 
    createGradient(gradient1, gradient2);
    
    push();
    //moves all objects to center of canvas
    translate(width/2, height/2);
    //rotates shapes with movement of mouse X value from values 0 to pi
    rotate (map(mouseX, 0, width, 0, 10));
    circlePedal();
    deltoidCata();
    hypotrochoid();
    pop();
 }

function deltoidCata(){
    //mapping colors to mouse
    colorR = map(mouseX, 0, width, 200, 255);
    colorB = map(mouseY, 0, height, 200, 255);
    
    //mapping factor of deltoid to mouse
    g = map(mouseX, 0, width, 0, 100);
    g = map(mouseY, 0, height, 25, 50);
    
    //stroke & fill
    strokeWeight(5);
    fill(colorR, 250, colorB);
    stroke(0);
    

    // creating deltoid catacaustic
    beginShape();
    for (var i = 0; i < 200; i ++) {
        
        var angle = map(i, 0, 200, 0, 2*(TWO_PI));
        //formula for deltoid catacaustic
        x= ((2 *(cos(angle))) + (cos(2*angle)))*g ;
        y= ((2 *(sin(angle))) - (sin(2*angle)))*g ;
        vertex(x,y);
    }
    endShape();
}

function circlePedal(){
    //mapping colors to mouse X & Y
    colorR = map(mouseX, 0, width, 80, 200);
    colorG = map(mouseX, 0, width, 0, 50);
    colorB = map(mouseY, 0, height, 70, 170);
    
    //mapping factor multiplied by to mouse X & Y
    t = map(mouseX, 0, width, 150, 250);
    t = map(mouseY, 0, height, 130, 200);
    
    //stroke & fill
    strokeWeight(2);
    fill(colorR, colorG, colorB);
    stroke(255);
    
    //creating circle pedal
    for (var i = 0; i < 500; i ++) {
        
        var angle = map(i, 0, 500, 0, 2*(TWO_PI));
        //formula for circle pedal
        var x1 = cos(angle);
        var y1 = sin(angle);
        var x2 = t *((cos(angle)) -( y1 * cos(angle) * sin(angle)) + (x1 * pow(sin(angle),2))); 
        var y2 = (.5* (y1 + (y1 * cos(2*angle))+ (2*sin(angle))- (x1 * sin(2*angle)))) * t;
        vertex(x2,y2);
    }
    endShape();
     
}

function hypotrochoid(){
    //mapping size of hypotrochoid to mouse
    a = map(mouseX, 0, width, 200, 350);
    b = map(mouseY, 0, height, 100, 200);
    h = map(mouseY, 0, height, 2, 105);
    
    //stroke & fill
    strokeWeight(2);
    noFill();
    stroke(255);

    // creating hypotrochoid
    beginShape();
    for (var i = 0; i < 500; i ++) {
        // hypotrochoid formula
        angle = map(i, 0, 500, 0, TWO_PI);
        var x = (a - b) * cos(angle) + h * cos((a - b) / b * i);
        var y = (a - b) * sin(angle) + h * sin((a - b) / b * i);
        vertex(x, y);
    }
    endShape();
}

//function gradient 
function createGradient(top, bottom) {
    for(var i = 0; i <= height; i++) {
      var mapColor = map(i, 0, height, 0, 1);
      var interA = lerpColor(top, bottom, mapColor);
      stroke(interA);
      line(0, i, width, i);
    }
}

I started the project with just creating the deltoid curve and the circle pedal curve, but realized that just them two together weren’t creating a very interesting composition even though the formulas to create them were pretty complex. Even with altering numbers, mapping values, and angle amounts, I still wasn’t getting anything particularly interesting or complex looking. So, I decided to add a more circular and dynamic curve of the hypotrochoid, which can be altered by various radii values and its repeating structure.

Leave a Reply