Month: October 2019

sketch

//Jina Lee
//jinal2@andrew.cmu.edu
//Section E
//Project 07

var numLines = 30;
var angle = 0;
var angleX;
var circleW;
var r;
var g;
var b;

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

function draw() {
    background(0);
    //r is a random number between 0 - 255
    r = random(255);
    //g is a random number betwen 0 - 255
    g = random(255);
    //b is a random number between 0 - 255
    b = random(255);
    for(var i = 0; i < numLines; i++){
        noFill();
        push();
        //changing the speed of ellipse
        angleX = map(mouseX, 0, 400, 0, 90);
        //changing the amount of lines drawn
        numLines = map(mouseY, 0, 400, 5, 50);
         //changing the ellipse width
        circleW = map(mouseY, 0, 400, 200, 50);
        //color is random
        stroke(r, g, b);
        strokeWeight(5);
        //move it so it is random
        translate(width / 2, height / 2);
        rotate(radians(angle));
        ellipseMode(CENTER);
        ellipse(0, 0, circleW, 470);
        pop();
        angle += angleX;

    }
}

For this project, I was really worried on how to start because the shapes seemed so difficult and complex. As I was working, I realized that it was not as bad as I thought. as long as I defined my variables properly and used a for loop to draw the pattern, it worked. I used the map function to control the to control the speed, number of lines, and width of ellipse.

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-07-Composition-with-Curves*/

var nPoints = 500;

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

function draw() {
    //background color changes based on mouse location
    background(mouseX / 2, 50, mouseY / 2);
    Epitrochoid();
}

function Epitrochoid() {
    stroke(255);
    strokeWeight(0.5);
    //fill color changes based on mouse location
    fill(mouseX, mouseX / 2, mouseY);
    push();
    //begin at the center of the canvas
    translate(width / 2, height / 2);
    //constrain through mouseX and mouseY
    var consx = constrain(mouseX, 0, mouseX, 0, width);
    var consy = constrain(mouseY, 0, mouseY, 0, height);
    //define constants that depend on mouse position
    var a = map(consx, 0, width, 0, width / 3);
    var b = map(consy, 0, width, 0, width / 5);
    var h = map(consy, 0, height, 0, 400);
    //draw primary epitrochoid curve
    beginShape();
    for (var i = 0; i < nPoints; i ++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        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);
        //draw secondary epitrochoid curve rendered with small rectangles
        rect(x * 1.5, y * 1.5, 15, 15);
        //draw terciary epitrochoid curve rendered with large rectangles
        rect(x * 3, y * 3, 30, 30);
    }
    endShape(CLOSE);
    pop();
}

I chose to use the Epitrochoid curve. I chose this curve because first, I wanted to play around with many constants, and second, I thought that the curly movement is interesting. Because of the way the curve draws in a curly and dynamic way, I though it would be more harmonious to use differently rendered curves derived from the primary curve, instead of adding new Epitrochoid curves that would overlap with the primary curve. It was difficult to understand the different values in the equation, and which valuables controlled the curve in what ways, but after studying it for a while, I could make it so that the details that I wanted were being displayed on the canvas at an appropriate scale. It was very fun to be able to create something very complex and dynamic with the help of a mathematical equation.

sketch

In this project, it was fun to explore the different kinds of curves that can be created with math equations, and it intrigues me how interesting patterns can be generated through math. I took a pop art approach to my project by using bright colors and thick outlines.

//Charmaine Qiu
//charmaiq@andrew.cmu.edu
//section E
//Project - 07 - Composition Curve

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

function draw() {
    //set color to change with movement of mouse
    background(mouseX, mouseY, 100);
    drawHypotrochoid();
    drawAstroid();
}

function drawHypotrochoid() {
  //http://mathworld.wolfram.com/Hypotrochoid.html
  //constraining the mouse action to the canvas
  //map the variables in equation to a fit proportion of the curve
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 150, 200);
    var b = map(y, 0, height, 0, 50);
    var h = map(x, 0, width, 0, 50);

  //draw the first curve
    push();
    strokeWeight(10);
    beginShape();
    //rotate so that the beginning of curve does not show
    rotate(radians(120));
    //for loop that makes the shape
    for(var i = 0; i < 300; i += .045){
      var t = map(i, 0, 300, 0, TWO_PI);
      //equation of the curve
      x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
      y = (a - b) * sin(t) + h * sin(((a - b) / b) * t);
      vertex(x, y);
    }
    endShape(CLOSE);
    pop();

  //drawing the sencond curve
    push();
    //place it at the right bottom corner of canvas
    translate(width, height);
    strokeWeight(10);
    beginShape();
    //for loop that makes the shape
    for(var i = 0; i < 300; i += 0.045){
      var t = map(i, 0, 300, 0, TWO_PI);
      //equation of the curve
      x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
      y = (a - b) * sin(t) + h * sin(((a - b) / b) * t);
      vertex(x, y);
    }
    endShape(CLOSE);
    pop();
}


function drawAstroid(){
  //http://mathworld.wolfram.com/Astroid.html
    //draw first curve
    push();
    //place curve at center of canvas
    translate(width / 2, height / 2);
    strokeWeight(10);
    //constraining the mouse action to the canvas
    //map the variables in equation to a fit proportion of the curve
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(mouseX, 0, width, 150, 200);
    beginShape();
    //for loop that makes the shape
    for(var i = 0; i < 2 * PI; i += 0.045){
      //rotate with the increment of mouseX
      rotate(radians(x));
      //equation of the curve
      y = a * pow(sin(i), 3);
      x = a * pow(cos(i), 3);
      vertex(x, y);
    }
    endShape();
    pop();

    //draw first curve
    push();
    //place curve at center of canvas
    translate(width / 2, height / 2);
    strokeWeight(10);
    //constraining the mouse action to the canvas
    //map the variables in equation to a fit proportion of the curve
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(mouseX, 0, width, 20, 70);
    beginShape();
    //for loop that makes the shape
    for(var i = 0; i < 2 * PI; i += 0.045){
      //rotate with the increment of mouseY
      rotate(radians(y));
      //equation of the curve
      y = a * pow(sin(i), 3);
      x = a * pow(cos(i), 3);
      vertex(x, y);
    }
    endShape();
    pop();

}