Category: Section E

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-07-curve
*/

var k = 1; // controls the numbers for the flower
function setup() {
    createCanvas(480, 480);
    angleMode (DEGREES)
    frameRate(15);

}

function draw() {
    background(220);
    translate(240,240);
    stroke(0);
    strokeWeight(2);
    noFill();
    // call the flower function and draw the curve
    flower();
}

function flower() {
    // x = cos(k data) cos(data)
    // y = cos(k data) sin(data)

    //identify all the variables from the equation
    var x;
    var y;
    var theta = 45;

    //map and constrain to make mouseX and mouseY control the size and 
    //number of panels of the flower
    var boundX = constrain(mouseX, 0, 480);
    var boundY = constrain(mouseY, 0, 480);
    var k = map(boundX, 0, 480, 0, 20);
    var theta = map(boundY, 0, 480, 45, 360);
    var sizz = map(boundX, 0, 480, 100, 250);
    //i has to start at 500 otherwise the size of the flower will be too small
    //then plug all variables into the equation from wekipedia
    beginShape()
    for (var i = 500; i < 1000; i++) {
        x = cos(k * theta) * cos(theta)
        y = cos(k * theta) * sin(theta)
        vertex(x * sizz, y * sizz);
        theta += 1; //keep theta changes to make more interesting shape
    }
    endShape();

}

I used the rose formula from Wikipedia. I think this project is very fun because it is not super hard but simple code creates a crazy result. This project also allowed me to understand “constraint” and “map” better. I never thought that they can be used together, and they are so cool! I do not have enough time to render my drawing, but it turned out fine after all. I enjoy this project a lot.

jenny’s sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 07


var nPoints = 250;


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


function draw() {
    background(250);
    
    // draw the curve
    push();
    translate(width / 2, height / 2);
    HypotrochoidCurves();
    pop();
}


///////


function HypotrochoidCurves() {

    var x;
    var y;
    var a = 90.0;
    var a2 = 30.0;

    var b = a / 2.0;
    var b2 = a2 / 10;
    var b3 = a / 15;

    var h1 = constrain(mouseY/2, 0, width/5);
    var h2 = constrain(mouseY/8, 0, width/2);
    var h3 = constrain(mouseX/5, 0, width/5);
    var h4 = constrain(mouseX/15, 0, width/10);

    var ph1 = mouseX / 50.0;
    var ph2 = mouseY / 25.0;


    // Hypotrochoid Curve 1 (light purple)
    fill(210, 200, 250);
    stroke(255);
    strokeWeight(2);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a2 + b3) * cos(t) + h1 * cos(ph2 + t * (a2 + b3) / b3);
        y = (a2 + b3) * sin(t) - h1 * sin(ph2 + t * (a2 + b3) / b3);
        vertex(x, y);
    }
    endShape(CLOSE);


    // Hypotrochoid Curve 2 (Pink)
    fill(255, 200, 200);
    stroke(255);
    strokeWeight(2);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) + h2 * cos(ph1 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph1 + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Hypotrochoid Curve 3 (Purple)
    fill(100, 110, 200);
    stroke(255);
    strokeWeight(2);
    beginShape();

    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) + h3 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h3 * sin(ph2 + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);

    // Hypotrochoid Curve 4 (green)
    fill(50, 210, 200);
    stroke(255);
    strokeWeight(2);
    beginShape();

    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a2 + b2) * cos(t) + h4 * cos(ph2 + t * (a2 + b2) / b2);
        y = (a2 + b2) * sin(t) - h4 * sin(ph2 + t * (a2 + b2) / b2);
        vertex(x, y);
    }
    endShape(CLOSE);
    
}

For this project, I created a layered set of different Hypotrochoids.  These parametric forms are altered differently and independently based on mouseX and mouseY. I found the Epitrochoid example from the blog really inspiring for its globby, blobby shape and movement and wanted to do the same for a roulette-like shape.

Please see the different shots below!

sketch
(Drag mouse to the pink circle to return to “butterfly” shape!)

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project 07
*/

//butterfly curve 
//http://mathworld.wolfram.com/ButterflyCurve.html

var mX; 
var mY;
var dis;
var wing = 4;
var size;
var col = 255;

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

}

function draw() {
    background(0);
    stroke("deeppink");

    //draws pink circle
    ellipse(width/2, height/2, width/2, height/2);

    textFont("futura");
    textAlign(CENTER);
    textSize(18);
    text("Click and Drag", width/2, 430);

    //constrains mouse position to canvas size
    mX = constrain(mouseX, 0, width);
    mY = constrain(mouseY, 0, height);

    //measures distance between curve center and mouse position
    dis = dist(mX, mY, width/2, height/2);

    //assigns distance to correspond with curve amplitude
    size = map(dis, 0, width/2, 0, 50);

    //draws butterflys
    butterfly(wing/2, size/2, col/4);
    butterfly(wing - 1, 0.75 * size, col/2);
    butterfly(wing, size, col);



}

//draws butterfly with parameters to change 
//frequency, amplitude, and color
function butterfly(b, a, c) { 
    var x;
    var y;
    stroke(c);
    var points = 400; //number of points on curve
    noFill();

    beginShape();
    //calculates many x and y coordinates using curve function
    //plots vertices at coordinate points 
    for (var i = 0; i < points; i++) {
        var t = map(i, 0, points, 0, TWO_PI);

        //written notation: x = sin(t)[e^cos(t) - 2cos(4t) + sin^5 (t/12)]
        x = width/2 + sin(t) *  a * (Math.pow(Math.E, cos(t)) - 2 * cos(b * t) + Math.pow(sin(t/12), 5));
        y = height/2 + cos(t) * -a * (Math.pow(Math.E, cos(t)) - 2 * cos(b * t) + Math.pow(sin(t/12), 5));

        vertex(x, y);
    }
    endShape(CLOSE);

}

function mouseDragged() {
    //changes frequency of function based on mouse position
    wing = map(dis, 0, width/2, 2, 6);
}

Looking through all these curve functions has made me realize how much math I’ve forgotten in the past year! Nevertheless, I wanted to play around with some of the more complex curves from the website. I saw some pretty cool spirals with integrals but I couldn’t figure out the notation for javascript. The curve I made here is called a “butterfly curve”, but I overlapped a few of them with altered frequencies to explore some of the other cool shapes this function can produce. Drag your mouse around the canvas to check out the other curves! Dragging the mouse to any point on the circle will return it to a butterfly shape.

tron ninja star

// Epitrochoid:
// http://mathworld.wolfram.com/Epitrochoid.html

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

function draw() {
    background(0);
    push();
    translate(width / 2, height / 2);
    drawEpitrochoid1();
    drawEpitrochoid2();
    pop();
}

function drawEpitrochoid1() {
    var x;
    var y;
    // constrain mouseX to canvas width
    var mX = constrain(mouseX, 0, width);
    var a = mX / 5; // size of centre circle
    var b = mX / 100; // size of revolving pattern
    var h = b + 20; // height of revolving pattern
    // epitrochoid
    stroke(246, 76, 114);
    fill(47, 47, 162);
    beginShape();
    for (var t = 0; t < 360; t++) {
        x = (a + b) * cos(radians(t)) - 
             h * cos(radians(((a + b) / b) * t));
        y = (a + b) * sin(radians(t)) - 
             h * sin(radians(((a + b) / b) * t));
        vertex(x, y);
        t += 7;
    }
    endShape(CLOSE);
}

function drawEpitrochoid2() {
    var x;
    var y;
    var mX = constrain(mouseX, 0, 300);
    var a = mX / 10;
    var b = mX / 100;
    var h = b + 20;

    stroke(246, 76, 114);
    fill(47, 47, 162);
    beginShape();
    for (var t = 0; t < 360; t++) {
        x = (a + b) * cos(radians(t)) - 
             h * cos(radians(((a + b) / b) * t));
        y = (a + b) * sin(radians(t)) - 
             h * sin(radians(((a + b) / b) * t));
        vertex(x, y);
        t += 1;
    }
    endShape(CLOSE);
}

From initially studying the sample code, I noticed that multiple elements (a, b, h, ph) were being related to the mouse or each other. When I began surfing the MathWorld curves site, I searched for curves with equations that used at least three variables. I chose the epitrochoid because I liked its symmetry and the wide range of complexity to be explored in its form.

In constructing the code, I had a lot of fun playing with different value and observing the effect. I mixed relations and added slight changes to the variable values until I was happy with the outcome. I also added a second epitrochoid for an even more complex shape.

Early iterations: