Category: Project-07-Curves

sketch

//Alvin Luk
//Section A
//akluk@andrew.cmu.edu
//Project-07


var nPoints = 200;
var edges = 2;


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


function draw() {
    background(255);
    // draw the frame
    fill(0); 
    noStroke();
    stroke(0);
    noFill(); 
    rect(0, 0, width-1, height-1); 
    
    // draw the curve
    push();
    translate(width / 2, height / 2);
    drawCurve(edges);
    pop();
}

//--------------------------------------------------
function drawCurve() {
    // Hypotrochoid
    // http://mathworld.wolfram.com/Hypotrochoid.html
    // draws multiple hypotrochoid with differeing h's
    for (var j = 0; j < 30; j++){
    var x;
    var y;
    
    var a = map(mouseX,0,width,0,200);
    var b = a/edges;
    var h = map(mouseY,0,height,0,4*j);
    //changes color gradient depending on which hypotrochoid currently at
    //and also the position of mouseX and mouseY
    var red = map(j,0,30,0,255);
    var green = map(mouseX,0,width,0,255);
    var blue = map(mouseY,0,height,0,255);
    stroke(color(red,green,blue));

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


}

//adds number of edges/ corners each time the mouse is pressed
function mousePressed() {
    edges +=1
    if (edges > 7){
    	edges = 2;
    }
}
//--------------------------------------------------

For this project. I first followed the guidelines provided in the assignments and chose a graph from the mathworks curves section. I chose the Hypotrochoid, since there was a lot of variables in the parametric equations of the curves that I could play with that enabled me to create varying versions and variations of the curve. I also thought that just one hypotrochoid seems kind of static. So I decided to use a for loop to generate numerous hypotrochoid super imposed on each other with a changed parameters. I also made it so the color changes based on the position of x and y. Clicking also changes the ratio of a and b creating new different classes of hypotrochoid. Below are some screenshots of what my program creates.

sketch

//scarlet tong
//sntong@andrew.cmu.edu
// Section A
// Project 07 - Composition with Curves


//intitalize a value before using it for the x and y equations
var a = 0;

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

function draw(){
  //changing the alpha channel allows the movements of the dots to "lag" behind
  //creating interesting "tails" for each dot
  background(250,170,23,100);
  push();
  translate(150, height/2); // so that we can see the curve on the cancaus
  beginShape();
  for(var i = 0; i < 200; i++){
    var theta = map(i,0,100,0,360);
    // a controls how much the curve "bends" and loops
    var a = map(mouseX, 0,480,-7,7);
    //Conchoid of de Sluze equation from Wolfram MathWorld
    var x = (1/cos(theta)+(a*cos(theta)))*cos(theta);
    var y = (1/cos(theta)+(a*cos(theta)))*sin(theta);
    // color of the dots changes according to mouse position
    var col = map(mouseY, 0,300,0,255);
    var jitter = map(mouseY, 0,300,0,7);
    noStroke();
    fill(col);
    //"polar array" the Conchoid from the center
    rotate(90);
    //the first dotted line
    ellipse(x*20+random(0,1),y*20+random(0,1),2,2);
    //the second dots are rotated on a different angle of offset
    rotate(45);
    //the second dotted line
    fill(255-col);
    ellipse(-x*10+random(0,1),-y*10+random(0,1),2,2);
    // another layer of dots with larger diameters are then introduced to highlight
    //specific paths the curve took.
    if(i%4==0){
      ellipse(x*20+random(0,1),y*20+random(0,1),3,3)
    }
  }
  endShape(CLOSE);
  pop();

}

For this project I choose the to use the Conchoid of de Sluze equation found on Wolfram MathWorld as my base curve. I did more experimenting while I was coding and layer more alterations to the curve configuration each step. In this assignment I wanted to explore the use of density so that it implies a set of lines; however once the image is static it becomes harder to tell which dots make up a specific curve. I started off with a set of mirrored curves where one is scaled to a factor to another. Then I added motion of the curves by tracking mouseX and mouseY. From there color change is referred to mouse position and rotation is introduced to the curves.

My math is a bit rusty so my head spun when perusing the Mathworld website. I first played around with the equations given in the project example, which resulted in this:

I studied each part of the code until I was able to create another curve. I created a Cartioid Curve that increases size and rotates based on mouseX, and the background also changes based on the mouseX and mouseY positions.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 07 - Curves

var nPoints = 500; // amount of points in curve

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

function draw() {
    // background changes colors based on mouse position
    var r = map(mouseX, 0, width, 50, 200);
    var g = map(mouseY, 0, width, 150, 200);
    var b = map(mouseX, 0, height, 200, 255);
    background(r - 100, g - 100, b - 100, 130);

    drawCurve(); // draw the cardioid curve
}

function drawCurve(){
    //mathworld.wolfram.com/Cardioid.html

    var x; // defining x and y positions of vertices in curve
    var y;

    var a = map(mouseX, 0, width, 0, 100); // map mouseX from 0 to 5

    fill(100, 200, 255, 20); // blue
    stroke(255); // white
    translate(width/2, height/2);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a * (1 + cos(t)) * cos(t); // parametric equation of cardioid
        y = a * (1 + cos(t)) * sin(t); // parametric equation of cardioid

        rotate(radians(mouseX/500)); // rotate based on mouseX
        ellipse(x, y, 1, 1); // draw spiral of dots
        vertex(x, y); // draw the first curve (blue)
    }
    endShape();

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x2 = a * (1 + cos(t)) * cos(t); // parametric equation of cardioid
        y2 = a * (1 + cos(t)) * sin(t); // parametric equation of cardioid

        rotate(radians(mouseX/500)); // rotate based on mouseX
        fill(255, 150, 150, 20); // pink
        vertex(x2, y2); // draw the second curve (pink)
    }
    endShape();
}

I fiddled with the math for a while, trying to identify a form I liked and eventually settled on a sort of an hourglass figure.

I connected lines from every point on the hourglass to the center of the figure to create a visually central effect, and then varied the rotation of the figure and the size of the figure on the X and Y coordinates of the mouse.

I then looped the figure to splay out at different speeds when rotating, to layer the image on top of itself in a simple and satisfying way. If you drag the rotation around enough, it starts to look like a clover!

The rotating pairs of cloverleafs also create an even more central effect on the overall image.

sketch

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

function draw() {
    
    stroke(100,200,100);

    background(210, 210, 255);
    fill(50, 100, 50, 70);

    for (var q = 500 ; q > 200 ; q -= 50) {

        push();
        translate(width/2, height/2);
        //Puts the hourglasses at the center of the canvas

        rotate(mouseY/q);
        //Rotates the individual hourglasses at a contantly
        //Increasing rate, so they seperate from each other

        hourglass();
        //Draws the hourglass
        pop();
    }
}

function hourglass() {

    beginShape();
    for (var i = 0; i < mouseX; i++) {

        var t = map(i, 0, mouseX/1.5, 0, TWO_PI);
        var a = i*4;

        var x = (a*sin(t)*cos(t))/t;
        var y = (a*sin(sin(t)))/t;
        //The mathematical equation needed to create the
        //reversing hourglass curve

        vertex(x,y);
        line(x,y,0,0);
        //Draws a line from the center of the figure to
        //Every point on the curve, creating a web-ish
        //effect that draws your eyes to the middle
        
        
    }
    endShape(CLOSE);
}