Category: SectionE

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104          Section E        Project 7

//Global Variables
var maxIVal = 300;

function setup(){
    createCanvas(450, 450);
    frameRate(40);
}

function draw(){
    background("black");
    drawHypotrochoid();
    drawRanunculoid();
    drawHypotrochoid2();
    drawAstroid();
}

function drawRanunculoid(){
        //http://mathworld.wolfram.com/Ranunculoid.html

    //push and translate the drawing to the center of the canvas
    push();
    translate(width / 2, height / 2);

    //constrain mouseX and map mouse movement
    var canvaWidth = constrain(mouseX, 0, width);
    var angle = map(canvaWidth, 0, width, 0, 360);
    var a = map(canvaWidth, 0, width, 10, width / 18);

    //change stroke color according to mouse movement, begin shape, and rotate
    noFill();
    stroke(canvaWidth, 150, canvaWidth - 20);
    beginShape();
    rotate(radians(angle));

    //forLoop that creates the shape
    for (var i = 0; i < TWO_PI; i += 0.1){
    //equation for the shape and vertex (high points)
        var x = a * (6 * cos (i) - cos (6 * i));
        var y = a * (6 * sin (i) - sin (6 * i));
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawHypotrochoid(){
    //http://mathworld.wolfram.com/Hypocycloid.html

    //push and translate the drawing to the center of the canvas
    push();
    translate(width / 2, height / 2);

    //constrain mouseX, mouseY and map mouse movement
    var canvaLength = constrain(mouseX, 0, width);
    var canvaHeight = constrain(mouseY, 0, height);
    var a = map(canvaLength, 0, width, 10, width / 30);
    var b = map(canvaHeight, 0, height, 2, height / 30);
    var radAngle = 200;

    //change stroke color according to mouse movement and begin shape
    noFill();
    stroke(230, canvaHeight, canvaLength);
    beginShape();

    //forLoop that creates the shape
    for (var i = 0; i < maxIVal; i++){
        //variable rotation that maps the i value into angles
        var rotation = map(i, 0, 360, 0, 360);
        //equation for the shape and vertex
        var x = (a - b) * cos(rotation) + radAngle * cos((a - b * rotation));
        var y = (a - b) * sin(rotation) - radAngle * sin((a - b * rotation));
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawHypotrochoid2(){
    //http://mathworld.wolfram.com/Hypocycloid.html

    //push and translate the drawing to the center of the canvas
    push();
    translate(width / 2, height / 2);

    //constrain mouseX, mouseY and map mouse movement
    var canvaLength = constrain(mouseX, 0, width);
    var canvaHeight = constrain(mouseY, 0, height);
    var a = map(canvaLength, 0, width, 2, width / 60);
    var b = map(canvaHeight, 0, height, 2, height / 60);
    var radAngle = 100;

    //change stroke color according to mouse movement and begin shape
    noFill();
    stroke(canvaLength, canvaHeight, 10);
    beginShape();

    //forLoop that creates the shape
    for (var i = 0; i < maxIVal; i += 2){
        //variable rotation that maps the i value into angles
        var rotation = map(i, 0, 360, 0, 270);
        //equation for the shape and vertex
        var x = (a - b) * cos(rotation) + radAngle * cos((a - b * rotation));
        var y = (a - b) * sin(rotation) - radAngle * sin((a - b * rotation));
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawAstroid(){
    //http://mathworld.wolfram.com/Astroid.html

    push();
    translate(width / 2, height / 2);

    //variables necessary to define the curve
    var canvaLength = constrain(mouseX, 0, width);
    var a = map(canvaLength, 0, width, 20, width * 0.25);
    var angle = map(canvaLength, 0, width, 0, 360);
    //creating the curve
    noFill();
    stroke(100, canvaLength, canvaLength);
    beginShape();
    rotate(radians(angle));

    //forLoop for the curve and the math equation for the curves
    for (var i = 0; i < (2 * PI); i += 0.1){
        var angle = map(i, 360, 0, TWO_PI);
        var x = a * pow(cos(i), 3);
        var y = a * pow(sin(i), 3);
        vertex(x, y);
    }
    endShape();
    pop();
}

Similar to others, I struggled with understanding how to start the project. But after spending some time decoding the code on “notes” and “deliverables” sections, I had a good grasp on how things were supposed to be done. I ended up creating four curves that change color and size/complexity according to the mouse position. I am happy with the way it turned out.

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 7 Curves
 */

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

 function draw() {
    frameRate(20);
    background(0);

    push();
    // functions start at the middle of the canvas
    translate(width/2, height/2);
    // functions rotate with mouseX
    rotate(map(mouseX, 0, 480, 0, TWO_PI)); 
    hypotrochoid();
    epitrochoid();
    astroid();
    pop();
}

function astroid() {
    noStroke();

    // colors change smoothly by milliseconds 
    r = 100 + 100 * sin(millis() / 1000.0);
    g = 150 + 40 * sin(millis() / 1000.0 + HALF_PI);
    b = 230 + 60 * sin(millis() / 1000.0 - HALF_PI);
    fill(r, g, b);

    // outer & inner radii depend on user's mouse
    a = map(mouseX, 0, width, 0, 100);
    b = map(mouseY, 0, height, 0, 100);

    // drawing the astroid
    beginShape();
    for (var i = 0; i < 2000; i ++ ) {
        // angle for astroid formula
        angle = map(i, 0, 2000, 0, TWO_PI);
        var x = pow(cos(angle), 3) * a;
        var y = pow(sin(angle), 3) * b;
        vertex(x, y);
    }
    endShape();
}

function hypotrochoid() {
    strokeWeight(1);
    fill(0);

    // colors change smoothly by milliseconds
    r = 230 + 60 * sin(millis() / 1000.0);
    g = 240 + 80 * sin(millis() / 1000.0 + HALF_PI);
    b = 155 + 90 * sin(millis() / 1000.0 - HALF_PI);
    stroke(r, g, b);

    // outer & inner radii depend on user's mouse
    a = map(mouseX, 0, width, 50, 150);
    b = map(mouseY, 0, height, 5, 10);
    h = map(mouseY, 0, height, 100, 200);

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


function epitrochoid() {
    strokeWeight(1);
    // fill allows it to have no overlap with hypotrochoid
    fill(0); 
    // color changes smoothly by milliseconds
    r = 50 + 20 * sin(millis() / 1000.0);
    g = 150 + 150 * sin(millis() / 1000.0 + HALF_PI);
    b = 230 + 120 * sin(millis() / 1000.0 - HALF_PI);
    stroke(r, g, b);

    // inner & outer radii depend on user's mouse
    a = map(mouseX, 0, width, 50, 100);
    b = map(mouseY, 0, height, 0, 3);
    h = map (mouseX, 0, width, 0, 25);

    // drawing the epitrochoid
    beginShape();
    for (var i = 0; i < 2000; i++) {
        angle = map(i, 0, 2000, 0, TWO_PI);
        var x = (a + b) * cos(angle) - h * cos((a + b) / b * angle);
        var y = (a + b) * sin(angle) - h * sin((a + b) / b * angle);
        vertex(x, y);
    }
    endShape();
}

For this project, I was interested in seeing how multiple curves could overlap, interact, or mirror each other’s movements. So, I made the rotation for all three curves the same, but each curve’s parameter depends on mouseX and mouseY a little differently. Although I liked seeing how the curves could overlap, it got a very visually chaotic sometimes when they did, so I wanted to make the order of the curves constant so one curve was always the smallest, etc. The last part I tweaked about my curves was making the curves go out of the canvas, because the composition looked very restrained otherwise.

sketch

//Zee Salman
//SECTION E
//fawziyas@andrew.cmu.edu
//Project- 07

var nPoints = 100;
var EPITROCHOID = 0; // Cartesian Parametric Form  [x=f(t), y=g(t)]
var curveMode = EPITROCHOID;


function setup() {
    createCanvas(400, 400);
    frameRate(50);
}


function draw() {
    background(180,190,175);
    
    // draw the frame
    fill(0); 
    noStroke();
    noFill(); 

    // draw the curve
    push();
    translate(width / 2, height / 2);
    switch (curveMode) {
    case EPITROCHOID:
        drawEpitrochoidCurve();
        break;
    }
    pop();
}

//--------------------------------------------------
function drawEpitrochoidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    
    var nPoints = 20;
    var radius = 50;
    var separation = 125;

    var x;
    var y;
    
    var a = mouseX / 10;
    var b = a / 10.0;
    var h = constrain(mouseY / 20.0, 20, b *50);
    var ph = mouseX / 50.0;

    stroke(255, 250, 100);
    strokeWeight(3);
//BIGGER SHAPE
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a +30 + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a+30 + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);


   //// smaller shape
    stroke(245, 20, 200);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);

     
    push();
    translate(5*separation, height / 2);
    var qx = 0;
    var qy = 0;
    for (var i = 0; i <= nPoints; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radius * cos(theta);
        var py = radius * sin(theta);
        if ((i % 2 == 0) & (i > 1)) {
            line(qx, qy, px, py);
        }
        qx = px;
        qy = py;
    }
    pop();

    //// smallest shape
    //// smaller shape
  	stroke(mouseY,45,mouseX)
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a/2 + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a/2 + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);

//outer shape
	stroke(mouseY, mouseX, 200);
    push();
	rotate(mouseX*6/ mouseY*6);
    strokeWeight(2);
    beginShape();
    for(var i = 0; i < 200; i +=2) {
        var x =   a * (10 * cos(i) - cos(i));
        var y =   a * (10 * sin(i) -sin(i));
        vertex(x, y);
    }
    endShape();
    pop();


}

I started out wanting to do something floral or something almost pufferfish like but I started to stray away from those because I started to experiment more with my code. I started looking at the constraints and seeing where I can really try to make the piece interesting without losing sight of the project. Also trying to make each part visible to the user. I also played around with repetition and space which I really liked together in the composition. I would also like to take this project further and see how maby Epitrochoids I can fit onto one canvas and how I can make them more complex while again, making it clear.

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 07-Curves

var nPoints = 800;

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

function draw(){
    background(0);
    //calling functions
    drawHypotrochoid1();
    drawHypotrochoid2();
    drawHypotrochoid3();
}

function drawHypotrochoid1() {
    //Hypotrochoid
    //http://mathworld.wolfram.com/Hypotrochoid.html

    //setting variables for light pink hypotrichoid
    var x1 = constrain(mouseX, 0, width);
    var y1 = constrain(mouseY, 0, height);
    var a1 = 100;
    var b1 = map(mouseY, 0, 500, 0, width);
    var h1 = map(mouseX/10, 0, 500, 0, height);

    push();
    //light pink stroke
    noFill();
    stroke(251, 227, 255);
    strokeWeight(2);
    translate(width/2, height/2); //translate hypotrochoid to middle of canvas
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t1 = map(i, 0, 100, 0, TWO_PI);
        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);
    pop();

}

function drawHypotrochoid2() {
    //Hypotrochoid
    //http://mathworld.wolfram.com/Hypotrochoid.html

    //setting variables for pink hypotrichoid on the edges of canvas
    var x2;
    var y2;
    var a2 = 300;
    var b2 = 20;
    var h2 = constrain(mouseY/10, 0, height);

    push();
    noFill();
    stroke(237, 162, 250);
    strokeWeight(2);
    translate(width/2, height/2); //translate to middle of canvas
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t2 = map(i, 0, 100, 0, TWO_PI);

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

}

function drawHypotrochoid3() {
    //Hypotrochoid
    //http://mathworld.wolfram.com/Hypotrochoid.html

    //setting variables for dark pink hypotrochoid
    var x3;
    var y3;
    var a3 = 600;
    var b3 = 50;
    var h3 = mouseY;

    noFill();
    stroke(227, 92, 250);
    strokeWeight(4);
    translate(width/2, height/2); //translate to middle of canvas
    beginShape();
    for(var i = 0; i < nPoints; i++) {
        var t3 = map(i, 0, 100, 0, TWO_PI);

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

}

During the project, I didn’t know exactly what I was looking for. I spent a lot of time on the MathWorld site simply trying to decide what kind of curves to play with. I ended up playing with different epispirals and astroids before becoming intrigued with hypotrochoids. I started playing around with the equations itself, plugging in different numbers to simply experiments with how that affects the curve and the interaction it has with the canvas.

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 5


function setup() {
    createCanvas(480, 480);
}
   
  
function draw() {
    
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    background(0, 0, 0, 75); 

    drawHypotrochoid(); //color one
    drawBlackHypotrochoid(); //black one 
    drawBlackHypotrochoid2(); //black one
    drawCenter(); //center flower ellipse 
    frameRate(500); 
     
}

function drawHypotrochoid(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 230; //radius and parameters 
 
    var r = my * 0.4; //color variables
    var g = 100; 
    var b = mx * 0.4; 

    noFill();
    stroke(r, g, b); 
    strokeWeight(4); 

    var a1 = map(mx, 0, width, 0, 20);
    var b1 = map(my, 0, height, 0, 1); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}

function drawBlackHypotrochoid(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 380; //radius and parameters 
 

    noFill();
    stroke("black"); //overlapping the first function with a black one so that it cuts through it 
    strokeWeight(10); 

    var a1 = map(mx, 0, width, 0, 25);
    var b1 = map(my, 0, height, 0, 5); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){ //determines numnber of times loop runs 
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}
function drawBlackHypotrochoid2(){

    push(); 
    translate(width / 2, height / 2); 
    var mx = constrain(mouseX, 0, 480); //constraining variables 
    var my = constrain(mouseY, 0, 480); 

    var rad1 = 300; //radius and parameters 
 

    noFill();
    stroke("black"); //overlapping the first function with a black one so that it cuts through it 
    strokeWeight(10); 

    var a1 = map(my, 0, width, 0, 30);
    var b1 = map(mx, 0, height, 0, 2); 

    beginShape(); 
    rotate(radians(angle));

    for(var i = 0; i < 360; i += 5){ //determines numnber of times loop runs 
        var angle = map(i, 0, 360, 0, 360); 

        var x = (a1 - b1) * cos(angle) + rad1 * cos((a1 - b1 * angle)); //equations of math functions
        var y = (a1 - b1) * sin(angle) - rad1 * sin((a1 - b1 * angle));

        curveVertex(x, y); //drawing points 

    }

    endShape(); 
    pop(); 

}

function drawCenter(){
    translate(width / 2, height / 2);
    noFill();
    
    var mx = constrain(mouseX, 0, 480); // define constrain variables
    var my = constrain(mouseY, 0, 480);

    var angle = map(mx, 0, width, 0, 360);// define draw parameters
    var a2 = 70 + (.3 * mx);
    var b2 = 70 + (.3 * mx);

    var r = my * 0.5; //color variables
    var g = 50; 
    var b = mx * 0.5; 

    // define stroke
    strokeWeight(1);
    stroke(r, g, b);
    // define shape parameters
    beginShape();
    rotate(radians(angle));
    for (var t = 0; t < 160; t += 2.5){

        var x = a2 * (cos(t)); //equation function 
        var y = b2 * (sin(t));
        curveVertex(x,y);
        }
    endShape();
}

This project was quite confusing to grasp at first, but once I had an idea of what I wanted to do, I was able to explore the functions in an interesting manner. I spent a good amount of time playing around with my numbers in my code to get interesting interactions with the way that the curve moves, and forms. I was also able to layer curves in a way that created fun patterns. Here are some screen shots from the project at different states of the mouse location.