Category: SectionE

sketch

//Jina Lee
//jinal2@andrew.cmu.edu
//Section E
//Project 07

var numLines = 30;
var angle = 0;
var angleX;
var circleW;
var r;
var g;
var b;

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

function draw() {
    background(0);
    //r is a random number between 0 - 255
    r = random(255);
    //g is a random number betwen 0 - 255
    g = random(255);
    //b is a random number between 0 - 255
    b = random(255);
    for(var i = 0; i < numLines; i++){
        noFill();
        push();
        //changing the speed of ellipse
        angleX = map(mouseX, 0, 400, 0, 90);
        //changing the amount of lines drawn
        numLines = map(mouseY, 0, 400, 5, 50);
         //changing the ellipse width
        circleW = map(mouseY, 0, 400, 200, 50);
        //color is random
        stroke(r, g, b);
        strokeWeight(5);
        //move it so it is random
        translate(width / 2, height / 2);
        rotate(radians(angle));
        ellipseMode(CENTER);
        ellipse(0, 0, circleW, 470);
        pop();
        angle += angleX;

    }
}

For this project, I was really worried on how to start because the shapes seemed so difficult and complex. As I was working, I realized that it was not as bad as I thought. as long as I defined my variables properly and used a for loop to draw the pattern, it worked. I used the map function to control the to control the speed, number of lines, and width of ellipse.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-07-Composition-with-Curves*/

var nPoints = 500;

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

function draw() {
    //background color changes based on mouse location
    background(mouseX / 2, 50, mouseY / 2);
    Epitrochoid();
}

function Epitrochoid() {
    stroke(255);
    strokeWeight(0.5);
    //fill color changes based on mouse location
    fill(mouseX, mouseX / 2, mouseY);
    push();
    //begin at the center of the canvas
    translate(width / 2, height / 2);
    //constrain through mouseX and mouseY
    var consx = constrain(mouseX, 0, mouseX, 0, width);
    var consy = constrain(mouseY, 0, mouseY, 0, height);
    //define constants that depend on mouse position
    var a = map(consx, 0, width, 0, width / 3);
    var b = map(consy, 0, width, 0, width / 5);
    var h = map(consy, 0, height, 0, 400);
    //draw primary epitrochoid curve
    beginShape();
    for (var i = 0; i < nPoints; i ++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        var x = (a + b) * cos(t) - h * cos((a + b) / b * t);
        var y = (a + b) * sin(t) - h * sin((a + b) / b * t);
        vertex(x, y);
        //draw secondary epitrochoid curve rendered with small rectangles
        rect(x * 1.5, y * 1.5, 15, 15);
        //draw terciary epitrochoid curve rendered with large rectangles
        rect(x * 3, y * 3, 30, 30);
    }
    endShape(CLOSE);
    pop();
}

I chose to use the Epitrochoid curve. I chose this curve because first, I wanted to play around with many constants, and second, I thought that the curly movement is interesting. Because of the way the curve draws in a curly and dynamic way, I though it would be more harmonious to use differently rendered curves derived from the primary curve, instead of adding new Epitrochoid curves that would overlap with the primary curve. It was difficult to understand the different values in the equation, and which valuables controlled the curve in what ways, but after studying it for a while, I could make it so that the details that I wanted were being displayed on the canvas at an appropriate scale. It was very fun to be able to create something very complex and dynamic with the help of a mathematical equation.

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();
}