Category: SectionC

curvescomposition

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-07 (Composition with Curves)

var points = 100; //helps control length of curves
var turn = 0; //controls speed of rotation

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

function draw() {
    background(20, mouseX / 3, 20);

    //"normal" speed curves
    push();
    translate(width / 2, height / 2);
    rotate(radians(turn));
    turn ++;
    drawEpi();
    drawEpi2();
    drawEpi3();
    pop();

    //slowest set of curves
    push();
    translate(width / 2, height / 2);
    rotate(radians(turn / 2));
    turn ++;
    drawEpi();
    drawEpi2();
    drawEpi3();
    pop();

    //fastest spinning set of curves
    push();
    translate(width / 2, height / 2);
    rotate(radians(turn * 2));
    turn ++;
    drawEpi();
    drawEpi2();
    drawEpi3();
    pop();

    //faster spinning set of curves
    push();
    translate(width / 2, height / 2);
    rotate(radians(turn * 1.5));
    turn ++;
    drawEpi();
    drawEpi2();
    drawEpi3();
    pop();

    //creates center of flower
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(width / 2, height / 2, mouseX / 2.5, mouseX / 2.5);
    fill(255, 255, 255, 50);
    ellipse(width / 2, height / 2, mouseX / 4, mouseX / 4);
    fill(255, 255, 255, 50);
    ellipse(width / 2, height / 2, mouseX / 5, mouseX / 5);

}

//draws the smaller epicycloid curve
function drawEpi() {
    var a = map(mouseX, 0, width, 10, 100);
    var b = a / 2;

    //curves
    strokeWeight(3);
    stroke(mouseX / 2, 30, mouseY / 2);
    noFill();
    beginShape();
    for (var i = 0; i < points; i ++) {
        var t = map(i, 0, 50, 0, TWO_PI);
        crvX = ((a + b) * cos(t)) - (b * cos(((a + b) / b) * t))
        crvY = ((a + b) * sin(t)) - (b * sin(((a + b) / b) * t))
        curveVertex(crvX, crvY);
    }
    endShape();
}

//draws the medium epicycloid shape (filled-in)
function drawEpi2() {
    var a = map(mouseX, 0, width, 10, 300);
    var b = a / 2;

    //curves
    fill(mouseY / 2, 50, mouseX / 2, 100);
    beginShape();
    for (var i = 0; i < points; i ++) {
        var t = map(i, 0, 50, 0, TWO_PI);
        crvX = ((a + b) * cos(t)) - (b * cos(((a + b) / b) * t))
        crvY = ((a + b) * sin(t)) - (b * sin(((a + b) / b) * t))
        curveVertex(crvX, crvY);
    }
    endShape();
}

//draws the biggest epicycloid curves
function drawEpi3() {
    var a = map(mouseX, 0, width, 60, 400);
    var b = a / 2;

    //curves
    stroke(mouseY / 2, 60, mouseX / 2);
    noFill();
    beginShape();
    for (var i = 0; i < points; i ++) {
        var t = map(i, 0, 50, 0, TWO_PI);
        crvX = ((a + b) * cos(t)) - (b * cos(((a + b) / b) * t))
        crvY = ((a + b) * sin(t)) - (b * sin(((a + b) / b) * t))
        curveVertex(crvX, crvY);
    }
    endShape();
}

The trickiest part of doing this project was figuring how to create the curves using the mathematical formulas. I had to carefully study the formula to understand it. For this project, I was inspired by the Camellia flowers, which has petals that look as if they’re rotating around the center. It was interesting to be able to see the different curves and colors generated by the movement of the mouse.

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-07-Composistion with Curves
*/
         
function setup() {
  createCanvas(400,400);
  frameRate(10);
}

function draw() {
  background(0);

  for(var i=0; i<100; i++) {   

    stroke(random(255), random(255), random(255));
    noFill();       
    Hypo(i*30, mouseX);   
  }
}
//hypotrochoid
//http://mathworld.wolfram.com/Hypotrochoid.html
function Hypo(a, mouseY) {
  var x;
  var y; 

  var a;                  
  var b=a/40;            
  var h = constrain(mouseY/10, 0, a);   
  var ph = mouseX/50; 
  push();                
  translate(width/2, height/2);
  beginShape();
  for(var i=0; i<100; i++) {
    var t = map(i, 0, 100, 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);
  pop();
}

In this project I was working mainly with Hypotrochoids in loop. I wanted to make series of psychedelic experience as the mouse scrolls.

sketch

For this project, I tried to understand how curves work using cos() and sin(). So I spent time figuring out how to draw hypotrochoid after numerous attempt failed to get other curve forms.

Other forms that appear when you move your mouse:

/*SooA Kim
Section C
sookim@andrew.cmu.edu
Project 7: Composition with Curves
*/

var nPoints = 360;
var nPoints1 = nPoints * 10;
var angle = 1;

function setup() {
    createCanvas(480, 480);
    angleMode(RADIANS);
  }
  
function draw() {
    frameRate(24);
    var g = map(mouseX, 0, 480, 255, 0); //changing green color 
    background(255, g, 100);
    angle += 10

    //replicate hypotrochoid using for loop

      for (var px = 0; px < 1000 ; px += 240) {
          for (var py = 0; py < 1000; py += 240) {
            push();
            translate(px, py); 
            rotate(angle);
            Hypotrochoid();
            pop();
          } 
      }
    drawCurveOne();
}
    
function Hypotrochoid() {
    var r = map(mouseX, 0, 480, 0, 255); //for red color changes 
    var b = map(mouseY, 0, 480, 0, 255); //for blue

    strokeWeight(1.5);
    stroke(r, 255, b);
    noFill();
    beginShape();    

    var a = map(mouseX, 0, 480, 10, 120);
    var b = map(mouseY, 0, 480, 2, 10);
    var h = map(mouseY, 0, 480, 40, 120);

        for (var i = 0; i < nPoints1; i++) {
            t = map(i, 0, nPoints1, 0, TWO_PI);
//Reference from <mathworld.wolfram.com/Hypocycloid>
            var x = (a - b) * cos(t) + h * cos((a - b) / b * t);
            var y = (a - b) * sin(t) + h * sin((a - b) / b * t);
        
            vertex(x,y);
        }  

    endShape();
}

    function drawCurveOne() {
      stroke(255);
      strokeWeight(1);
      noFill();
      beginShape();
    
      //increase number of vertices of the curve 
      var nuV = map(mouseX, 0, width, HALF_PI, TWO_PI);
      
      for (var i = 0; i < nPoints; i+= nuV) {
          //applied i to cos() and sin() to see what happens  
          var x = 180 * cos(i) + width/2;
          var y = 180 * sin(i) + height/2;
          
          vertex(x,y);
      }
      endShape();
    }