Category: Project-07-Curves

sketch

In this project, it was fun to explore the different kinds of curves that can be created with math equations, and it intrigues me how interesting patterns can be generated through math. I took a pop art approach to my project by using bright colors and thick outlines.

//Charmaine Qiu
//charmaiq@andrew.cmu.edu
//section E
//Project - 07 - Composition Curve

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

function draw() {
    //set color to change with movement of mouse
    background(mouseX, mouseY, 100);
    drawHypotrochoid();
    drawAstroid();
}

function drawHypotrochoid() {
  //http://mathworld.wolfram.com/Hypotrochoid.html
  //constraining the mouse action to the canvas
  //map the variables in equation to a fit proportion of the curve
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 150, 200);
    var b = map(y, 0, height, 0, 50);
    var h = map(x, 0, width, 0, 50);

  //draw the first curve
    push();
    strokeWeight(10);
    beginShape();
    //rotate so that the beginning of curve does not show
    rotate(radians(120));
    //for loop that makes the shape
    for(var i = 0; i < 300; i += .045){
      var t = map(i, 0, 300, 0, TWO_PI);
      //equation of the curve
      x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
      y = (a - b) * sin(t) + h * sin(((a - b) / b) * t);
      vertex(x, y);
    }
    endShape(CLOSE);
    pop();

  //drawing the sencond curve
    push();
    //place it at the right bottom corner of canvas
    translate(width, height);
    strokeWeight(10);
    beginShape();
    //for loop that makes the shape
    for(var i = 0; i < 300; i += 0.045){
      var t = map(i, 0, 300, 0, TWO_PI);
      //equation of the curve
      x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
      y = (a - b) * sin(t) + h * sin(((a - b) / b) * t);
      vertex(x, y);
    }
    endShape(CLOSE);
    pop();
}


function drawAstroid(){
  //http://mathworld.wolfram.com/Astroid.html
    //draw first curve
    push();
    //place curve at center of canvas
    translate(width / 2, height / 2);
    strokeWeight(10);
    //constraining the mouse action to the canvas
    //map the variables in equation to a fit proportion of the curve
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(mouseX, 0, width, 150, 200);
    beginShape();
    //for loop that makes the shape
    for(var i = 0; i < 2 * PI; i += 0.045){
      //rotate with the increment of mouseX
      rotate(radians(x));
      //equation of the curve
      y = a * pow(sin(i), 3);
      x = a * pow(cos(i), 3);
      vertex(x, y);
    }
    endShape();
    pop();

    //draw first curve
    push();
    //place curve at center of canvas
    translate(width / 2, height / 2);
    strokeWeight(10);
    //constraining the mouse action to the canvas
    //map the variables in equation to a fit proportion of the curve
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(mouseX, 0, width, 20, 70);
    beginShape();
    //for loop that makes the shape
    for(var i = 0; i < 2 * PI; i += 0.045){
      //rotate with the increment of mouseY
      rotate(radians(y));
      //equation of the curve
      y = a * pow(sin(i), 3);
      x = a * pow(cos(i), 3);
      vertex(x, y);
    }
    endShape();
    pop();

}

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.

For this project, I wanted to play with hypotrochoid forms and astroids in hopes of making something pretty dynamic. I had really brief understanding of roulettes from high school mathematics so a lot of my learning came from going through the Wolfram Alpha website and learning about each form. At the end, these were the two that I wanted to continue playing with.

Quiet honestly, I had no idea how it would come out at the end and much of the process just came from experimenting with mouse positions, mapping, and tweaking with equations. Below are some screenshots of its different forms.

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmu.edu
// Project-07: Composition with Curves

var points = 2000;
var rotateCount = 0;

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

}

// calls each shape and continuously rotates the form
function draw() {
    background(20);
    push();
        translate(width / 2, height / 2);
        rotate(rotateCount);
        rotateCount++;
        drawAstroid();
        drawHypo();
    pop();
}

// draws the Astroid form (inside shape)
function drawAstroid() {
    // colors is dependent on mouse position
    colorR = map(mouseY, 0, width, 0, 255);
    colorG = map(mouseX , 0, width, 0, 255);
    colorB = map(mouseX , 0, width, 0, 255);
    stroke(colorR , colorG, colorB);
    noFill();
    strokeWeight(1);

    // for loop to draw astorid form
    beginShape();
    petal = int(map(mouseX, 0, width, 4, 10));
    size = int(map(mouseX, 0, width, 0, 100));
    for (var i = 0; i < points; i++){
        t = map(i, 0, points, 0, TWO_PI);
        x = (size / petal) * ((petal - 1) * cos(t) + cos((petal - 1) * t));
        y = (size / petal) * ((petal - 1) * sin(t) - sin((petal - 1) * t));
        vertex(x,y);
    }
    endShape();
}

// draws the hypotrochoid form (outside shape)
function drawHypo() {
    // colors is dependent on mouse position
    colorR = map(mouseX, 0, width, 0, 255);
    colorG = map(mouseY , 0, width, 0, 255);
    colorB = map(mouseY , 0, width, 0, 255);
    stroke(colorR , colorG, colorB);
    strokeWeight(1);
    
    //for loop to draw astroid form
    a =  map(mouseX, 0 , width, 200, 350);
    b =  map(mouseY, 0 , width, 100, 200); 
    h =  map(mouseY, 0 , width, 2, 105); 
    
    beginShape();
    for (var i = 0; i < 10000; i++){

        t = map(i, 0, 500, 0, TWO_PI);
        x = (a - b) * cos(t) + h * cos((a - b) * (t / b));
        y = (a - b) * sin(t) - h * sin((a - b) * (t / b));
        vertex(x, y);
    }
    endShape();
}