Category: Project-07-Curves

rjpark_curves

var nPoints = 300;
var angle = 0;

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

function draw() {
    background(175, 110, 235); // resets background every time draw is called so only one curve shows

    push();
    translate(mouseX, mouseY); // center of curve follows mouse
    rotate(radians(angle)); // rotates on center of curve
    drawEightCurve(); // draws curve
    pop();

    angle = angle + 3.5; // speed of rotation
}

// http://mathworld.wolfram.com/ConicalSpiral.html    
function drawEightCurve() {
    var x;
    var y;
    var r;
    
    var a = constrain(mouseX, width / 6, width / 2.2);
    
    fill(60, 20, 35);
    stroke(160, 15, 90);
    strokeWeight(5);

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

I first went to the Mathworld curves site and found the trifolium curve. It reminded me of a fidget spinner and so I got inspired to create one using this curve. As a result, I created a function (drawTrifolium()) that would draw the trifolium curve and, to do this, I used the polar equation from the site. Within the function, I made the “a” variable dependent on my mouseX movement. This changes the size of the fidget spinner as mouseX decreases or increases. Then, within the draw() function, I called drawTrifolium() and translated it so that the center of the fidget spinner would be wherever my mouse (mouseX and mouseY) is. Below are two pictures of the minimum and maximum size of the fidget spinner.

catherine curves

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project 7  - Curves

// equations taken from http://mathworld.wolfram.com/Hypotrochoid.html

var n = 1;
var h = 2;
var t = 1;
var a;
var b;

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

function draw() {
    background(226, 237, 255);
    // number of 'rotations' is dependent on y
    n = map(mouseY, 0, height, .9, 1.1);
    // size of rotation circles is dependent on x
    h = map(mouseX, 0, width, 2, 4);
    // smaller helper functions below here
    a = aCalc();
    b = bCalc();
    drawHypotochroidShadow(t, a, b);
    drawHypotochroid(t, a, b);
}

// i broke a lot of the heavy math parts into smaller functions
// to make it more manageable
function aCalc() {
    return(2 * n * h / (n + 1));
}

function bCalc() {
    return(((n - 1) * h) / (n + 1));
}

function xPar(t, a, b) {
    var answer = (a - b) * cos(radians(t));
    var cosVal = ((a - b) / b) * t;
    answer = answer + h * cos(radians(cosVal));
    return answer;
}

function yPar(t, a, b) {
    var answer = (a - b) * sin(radians(t));
    var cosVal = ((a - b) / b) * t;
    answer = answer + h * sin(radians(cosVal));
    return answer
}

function drawHypotochroid(t, a, b) {
    stroke(193, 124, 124);
    noFill();
    // loops through entire curve and plot every point
    beginShape();
    for(var i = 0; i < width; i++){
        var x = map(xPar(i, a, b), -4, 4, 0, width);
        var y = map(yPar(i, a, b), -4, 4, 0, height);
        curveVertex(x, y);
    }
    endShape();
}

// same as above but with some offset just to look cool
function drawHypotochroidShadow(t, a, b) {
    stroke(66, 134, 244, 50);
    noFill();
    // loops through entire curve and plot every point
    beginShape();
    for(var i = 0; i < width; i++){
        var x = map(xPar(i, a, b), -4, 4, 0, width);
        var y = map(yPar(i, a, b), -4, 4, 0, height);
        curveVertex(x-4, y-4);
    }
    endShape();
}

This project was kind of hard to get started with but once I wrapped my head around it I found it very cool.

I probably spent a good hour on the mathworld website trying to settle on a curve, but found that a lot of them were too hard to implement. I decided to go with the hypotrochoid shape found here.

If you keep your mouse on the left end of the screen, the curve should stay within the canvas if you want to see an entire design. Otherwise, moving your mouse to the right will kind of ‘zoom in’ to the center of the curve.

It took a lot of experimenting and trial and error to make the program work right, but in the end it produced some nice results.

 

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-07-Composition with Curves

var nPoints = 200; 

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

function draw() {
  background(0);
  
  //middle green diamond 
  push();
  translate(width/2, height/2);
  noFill();
  strokeWeight(2);
  stroke(35, 255, 0);
  drawAstroid();
  pop();

  //right blue diamond
  push();
  translate((width/2) + 10, height/2);
  noFill()
  stroke(35, 0, 255);
  drawAstroid();
  pop();

  //left red diamond
  push();
  translate((width/2) - 10, height/2);
  noFill()
  stroke(255, 0, 0);
  drawAstroid();
  pop();
}

  //atroid move based on mouseX and mouseY 
  // Asteroid - http://mathworld.wolfram.com/Astroid.html
function drawAstroid() {
  var x; //xvalue for astroid curve
  var y; //yvalue for astroid curve
  var a; //for mouse X movement 
  var b; //constrains mouseY values 0 to 300

  a = mouseX; 
  b = constrain(mouseY, 0, 300);

  beginShape(); 
  for(var i = 0; i < nPoints; i++) {
    var t = map(i, 0, nPoints, 0, TWO_PI);
    //for degrees based on i 

    x = 3 * a * (cos(t)) + b * (cos(3*t)); 
    y = 3 * a * (sin(t)) - b * (sin(3*t));
    vertex(x,y);
  } 
  endShape();
}

For the “Composition with Curves,” I decided to do an “Astroid” curve, which is a 4-cusped hypocycloid. At first, I was really confused which equation I use for the parametric equations, because the website offered 3 equations for each variable (x, y). I tried all three for each variable to see which one showed the diamond-like shaped curves. Within that process, I got static-like lines, which looked beautiful but was not what I wanted in my final product. After many trials and the right equations, I was able to find the diamond-like curves and create 3 different copies with different colors using push() and pop(). I really liked the way my code turned out, because the changes of the curves reminded me of the Louis Vuitton branding.

curves

/* 
Alexandra Kaplan
Section C
aekaplan@andrew.cmu.edu
Project - 07 
*/


var nPoints = 400; // length of all for loops

function setup() {
    createCanvas(480, 400);
    background(220);    
}

function draw() {
	background(150, 200, 255);
	drawStem1();	
	drawEpicycloid1();
	drawCenter1();
	drawStem2();
	drawEpicycloid2();
	drawCenter2();
	drawStem3();
	drawEpicycloid3();
	drawCenter3();
}

// draws middle flower
function drawEpicycloid1() { 
	var x;
	var y;
	var b = 4 + (mouseX/50); // frequency of curves
	var a = map(mouseY, 0, 400, 200, 0); // diameter of path of curve
	var h = 10 // distance from path to outer curve

	fill(220, 200, 100);
	stroke(180, 160, 60);

    beginShape();
	for (var i = 0; i < nPoints; i += 1) {
        var t = map(i, 0, nPoints, 0, 360);
        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 + width / 2, y + mouseY);    
        
    }
    endShape(CLOSE);
}

// draws center of middle flower
function drawCenter1(){
	fill(50);
	var centerW1 = 1
	centerW1 = map(mouseY, 0, 400, 200, 1)
	ellipse(width / 2, mouseY, centerW1, centerW1);
}

// draws middle stem
function drawStem1(){
	fill(50, 150, 50);
	stroke(20, 120, 20);
	rect(width / 2 - 5, mouseY, 10, 1000);
}

// draws left flower
function drawEpicycloid2() {
	var x;
	var y;
	var b = 3 + (mouseX / 50); // frequency of curves
	var a = map(mouseY, 0, 400, 50, 0); // diameter of path of curve
	var h = 10 // distacne from path to outer curve

	fill(220, 200, 220);
	stroke(160, 140, 160);

    beginShape();
	for (var i = 0; i < nPoints; i += 1) {
        var t = map(i, 0, nPoints, 0, 360);
        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 + width / 4, y + mouseY + 170);    
        
    }
    endShape(CLOSE);
}


// draws left center
function drawCenter2(){
	fill(50);
	var centerW2 = 0;
	centerW2 = map(mouseY, 0, 400, 50, 1);
	ellipse(width / 4, mouseY + 170, centerW2, centerW2);
}

// draws right stem
function drawStem2(){
	fill(150, 250, 150, 150);
	stroke(100, 200, 100);
	rect(width / 4 - 5, mouseY + 170, 10, 1000);
}

// draws right flower
function drawEpicycloid3() {
	var x;
	var y;
	var b = 2 + (mouseX / 50); // frequency of curves
	var a = map(mouseY, 0, 400, 20, 0); // diameter of path of curve
	var h = 6 // distance from path to outer curve

	fill(155, 155, 250);
	stroke(130, 130, 230);

    beginShape();
	for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, 360);
        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 + width - width/4, y + mouseY + 250);         
    }
    endShape(CLOSE);
}

// draws right center
function drawCenter3(){
	fill(50);
	var centerW3 = 0;
	centerW3 = map(mouseY, 0, 400, 20, 0);
	ellipse(width - width / 4, mouseY + 250, centerW3, centerW3);
}

// draws right stem
function drawStem3(){
	fill(100, 200, 100, 200);
	stroke(80, 180, 80);
	rect(width - width / 4 - 5, mouseY + 250, 8, 1000);
}

When looking at the description for this project, my mind immediately went to flowers and the different shapes of flower petals. It was pretty difficult at first to figure out how to insert the equations from the website into my code, but once I did it was fun to play around how I could then change the curves. Here are some screenshots of different x and y combinations: