Category: Project-07-Curves

atreu-proj-07

/*Austin Treu
    atreu@andrew.cmu.edu
    Section B
    Project 07*/

var cX = 0, cY = 0, nPoints = 100,
    t = 0, up = 0, bot = 0, a = 0, b = 0;

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

function draw() {
    //fade the background
    background(255,255,0,20);

    //actual shape
    //shape is based upon the devil's curve
    //http://mathworld.wolfram.com/DevilsCurve.html
    fill('orange');
    push();
    //center the shape
    translate(width/2, height/2);
    //scale down to half size
    scale(0.5);

    //create the shape
    beginShape();
    //utilize mouse values for a and b
    a = mouseX;
    b = mouseY;
    for (var i = 0; i < nPoints; i++) {
        //map t around a full circle
        t = map(i, 0, nPoints, 0, TWO_PI);
        //calculate points
        up = pow(a,2)*pow(sin(t),2)-pow(b,2)*pow(cos(t),2);
        bot = pow(sin(t),2) - pow(cos(t),2);
        cX = cos(t)*(sqrt(up/bot));
        cY = sin(t)*(sqrt(up/bot));
        vertex(cX, cY);
    }
    endShape(CLOSE);
    pop();

    //accidental spiky thing
    stroke('red');
    push();
    //center the shape
    translate(width/2, height/2);
    //increase size
    scale(25);

    //create the shape
    beginShape();
    //utilize mouse values for a and b
    a = mouseX;
    b = mouseY;
    for (var i = 0; i < nPoints; i++) {
        //map t around a full circle
        t = map(i, 0, nPoints, 0, TWO_PI);
        //calculate points
        up = pow(a,2)*pow(sin(t),2)-pow(b,2)*pow(cos(t),2);
        bot = pow(sin(t),2) - pow(cos(t),2);
        //an incorrect parenthesis can change EVERYTHING!!
        cX = cos(t*(sqrt(up/bot)));
        cY = sin(t*(sqrt(up/bot)));
        vertex(cX, cY);
    }
    endShape(CLOSE);
    pop();
}

The devil’s curve is what I based this project on. I struggled through this project at the beginning, dealing with a variety of issues that prevented the program from functioning correctly. This was mainly due to two parentheses that were out of place in my math.

I mistakenly read this as cosine of the quantity of t times the square root as opposed to cosine of t times the quantity of the square root. I did the same for both x and y values. This created the red ‘starburst’ that appears in the middle of the drawing. Once I corrected this, I made a shape correctly based upon the devil’s curve but decided to leave the starburst, as it adds some interesting randomness to the image. Believe it or not, both of the things you see on screen were created with the same equation, only differing by two parentheses and scale.

sketch

//Xiaoying Meng
//xiaoyinm@andrew.cmu.edu
//Project 7
function setup(){
    createCanvas(480,480);
    frameRate(10);
}

function draw(){
    background(220);
//top curve
    push();
    translate(width/3,height/3);
    rotate(PI - mouseY/40);
    drawCurve();
    pop();
//middle curve
    push();
    translate(width/2,height/2);
    rotate(PI + mouseY/40);
    drawCurve2();
    pop();
//bottom curve
    push();
    translate(width- width/3, height- height/3);
    rotate(PI - mouseY/40);
    drawCurve3();
    pop();

   
}

//regular Crv
function drawCurve(){
    var nPoints = 200;
    var a = (mouseX-100)/3*2;
    var b = (mouseY-100)/3*2;
    fill(0);
    noStroke();
    beginShape();
    for (var i=0; i < nPoints; i++ ){
        var angle = map ( i, 0, mouseX, 0, 2*PI);
        var x = a* (1/cos(angle));
        var y = b * tan(angle);
        vertex(x,y);
    }
    endShape();
}

//wiggly Crv
function drawCurve2(){
    var nPoints = 200;
    var a = (mouseX-100)/3*2;
    var b = (mouseY-100)/3*2;
    fill(255);
    noStroke();
    beginShape();
    for (var i=0; i < nPoints; i++ ){
        var angle = map ( i, 0, mouseX, 0, 2*PI);
        var x = a* (1/cos(angle));
        var y = b * tan(angle);
        vertex(x + random(-5,5),y + random(-5,5));
    }
    endShape();
}
//dotted Crv
function drawCurve3(){
    var nPoints = 200;
    var a = (mouseX-100)/3*2;
    var b = (mouseY-100)/3*2;
    fill(150);
    noStroke();
    beginShape();
    for (var i=0; i < nPoints; i++ ){
        var angle = map ( i, 0, mouseX, 0, 2*PI);
        var x = a* (1/cos(angle));
        var y = b * tan(angle);
        ellipse(x, y, 10, 10);
    }
    endShape();
}

 

I chose hyperbola curves. I created three different type of representation of the curves as surfaces and lines. By rotating them to different directions, interesting abstract composition start to occur.

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-07-Curves
*/

// initial angle of rotation for the shape
var angle = 0;

function setup() {
    // establishes canvas size
    createCanvas(480, 480);
}

function draw() {
    // sets background color
    // the same one as from my ptoject 3... I really like it:)
    // the opacity gives it a cool fading effect!
    background('rgba(255,187,203,0.05)');
    // C's get DEGREES
    angleMode(DEGREES);
    // declares variables that will be used in the mathy-math later on
    var x;
    var y;
    var radius1;
    var radius2;
    var ratio1;
    var ratio2;
    // center x and center y points
    var cx = width / 2;
    var cy = height / 2;
    // color of shape's line will change as mouse moves from right to left
    var strokeColor = map(mouseX, 0, width, 0, 255);
    // color of shape's fill will change as mouse moves from right to left
    var fillColor = map(mouseX, 0, width, 255, 0);
    // makes that angle of rotation will change as mouse moves up and down
    var increment = map(mouseY, 0, height, 0, 7);

    beginShape();
    stroke(strokeColor);
    fill(fillColor);
    push();
    // draws at center of canvas
    translate(cx, cy);
    rotate(angle);
    // math *bows*
    for (var theta = 0; theta < 360; theta +=1) {
        radius1 = 70;
        radius2 = 30;
        ratio1 = map(mouseX, 0, width, 10, 200);
        x = (radius1 * cos(theta) + radius2 * cos(theta * ratio1));
        y = (radius1 * sin(theta) + radius2 * cos(theta * ratio1));
        vertex(x, y);
    }
    // makes the shape rotate
    angle = angle + increment;
    endShape(CLOSE);
    pop();
}

So doing this project, I struggled a bit because, uh, I haven’t had to use cos or sin since highschool….
Anyway. I got inspiration from Spirographs, since I think they’re cool and vintage-y and nostalgic and remind me of being little and stories my parents have told me. But how does one draw a Spirograph??? I took to the internet to find out. I found many very unhelpful resources, and one most-helpful one, here. It listed the equations x = cx + radius1 × cos(θ) + radius2 × cos(θ) and y = cy + radius1 × sin(θ) + radius2 × cos(θ), which I used to design my curve.

I have interactive elements for the shape fill, shape color, density(?) of curves comprising the shape, and speed of rotation.

And I made the background pretty pink with the opacity toyed with for a cool effect, stolen from my own Project 3 assignment because I like this effect so much.

Very trippy, this project. Quite trippy.