Category: SectionC

sketch

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Project 07 Composition with Curves

// number of points
var np = 100;

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

function draw() {
    background("black");

    stroke("#f7fad2");
    noFill();
    strokeWeight(2);

    // center the curves
    push();
    translate(200, 200);
    drawHypocycloid(100);

    // color of second curve depends on mouseX
    fill(255, 200, mouseX);
    drawHypocycloid(-200);
    pop();
}


// http://mathworld.wolfram.com/HypocycloidEvolute.html
function drawHypocycloid(xy) {
    var x;
    var y;
    var a = xy;
    var b = mouseY;

    beginShape();
    for (var i = 0; i < np; i++) {
        var t = map(i, 50, np, 50, TWO_PI);

        var one = a / (a - 2 * b);

        x = one * ((a - b) * cos(t) - b * cos(((a - b) / b) * t));
        y = one * ((a - b) * sin(t) + b * sin(((a - b) / b) * t));

        vertex(x, y);
    }
    endShape();
}

For this project, I chose to draw a curve called Hypocycloid Evolute. It was fun playing around by plugging in different variables at different points and seeing how it affects the shape. I eventually decided on having one of the variables, b, be dependent on the y-position of the mouse. I originally drew one curve, but decided to add another one to create depth. I drew another, larger curve and filled in the shape to create different flower-esque shapes as a result. I really enjoyed seeing how the changing colors and varying number of edges and angles created significantly different images with a single curve.

sketch

/*
Joanne Chui
Section C 
Project 6
*/

var nPoints = 200;

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

function draw(){
  background(227, 127, 190);
  stroke(227, 175, 127);
  spirograph();
  push();
  translate(200, 200);
  for(var a = 0; a < 5; a++){
    rotate(a * PI/2);
    strokeWeight(3);
    spirograph();
  }
  pop();

}

function spirograph(){
  var x = constrain(mouseX, 0, width);
  var y = constrain(mouseY, 0, height);
  var r = 40;
  var s = 100; 

  push();
  translate(200, 200);
  beginShape();
  noFill();
  for(i = 0; i<nPoints; i++){
    var t = map(i, 0, nPoints, 0, 5*TWO_PI);
    x = (s - r)*cos(r*t/s) + i*(mouseX/100)*cos((1 - r/s)*t);
    y = (s - r)*sin(r*t/s) + i*(mouseX/100)*sin((1 - r/s)*t);
    vertex(x, y);
  }
  endShape(CLOSE);
  pop();
}

I made the original curve visible so that when a pattern is generated on the screen you can see where the pattern is derived from. I also liked the look of fewer lines so that the pattern seems more abstract.

ycho2-07

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-07 */

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

function draw() {
	push();
	background(0);
	strokeWeight(2);
	noFill();
	translate(width / 2, height / 2);
	stroke(188, 19, 254);
	drawHypotrochoidCurve();
	stroke(250, 237, 39)
	drawEpitrochoidCurve();
	pop();
};

//Hypotrochoid Curve
function drawHypotrochoidCurve() {
	//http://mathworld.wolfram.com/Hypotrochoid.html

	//equations
	var x;
	var y;

	//parameters to control curve
	var a = map(mouseX, 0, width, 0, 200)
	var b = a / 20
	//curve radius
	var h = map(mouseY, 0, height, 0, 200)

	//drawing curve
	push();
	beginShape();
	for (var i = 0; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI)
		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();
	pop();
} 

//Epitrochoid Curve
function drawEpitrochoidCurve() {
	//http://mathworld.wolfram.com/Epitrochoid.html

	//equations
	var x;
	var y;

	//parameters to control curve
	var a = map(mouseX, 0, width, 0, 250)
	var b = a / 20
	//curve radius
	var h = map(mouseY, 0, height, 0, 250)

	//drawing curve
	push();
	beginShape();
	for (var i = 0; i < 100; i ++) {
		var t = map(i, 0, 100, 0, TWO_PI)
		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();
	pop();
} 

I found the flexibility of this project to be fun in the multitude of possible outcomes it allowed for even with the same kind of curves. The initial exploration of the various equations and curves was interesting– especially in discovering cool, interesting shapes or curves with just math equations. Although the complex equations were intimidating in my first approach to the project, it was pretty amusing to see how the curves reacted to changes in the different parameters. I chose to layer two different types of curves to create an illusion of depth and overlap. Overall, I enjoyed this project and think it was a great introduction to a mathematical approach to design through p5js.

Sketch

//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project 07: Abstract Clock

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

var pts = 200; 

function draw(){
    background(0);

    // using push & pull to orient the Bicorn 
    push()
    translate(width/2, height/2) //center focused
    drawCurve();
    pop();

    push();
    rotate(PI);  //upside down
    translate(-width/2, -height/2); 
    drawCurve();
    pop();

    push();
        rotate(PI/2); // clokcwise 
        translate(width/2, -height/2)
    drawCurve();
    pop();

    push();
    rotate(-PI/2); //counter clockwise
        translate(-width/2, height/2)
    drawCurve();
    pop();

}

function drawCurve(){

    //fill(255)
    noFill();
    stroke(255)
    //noStroke();
    var g = map(mouseX, 0, width, 0, width/2); //moving the parameters of mouse x
    var g = map(sq(mouseY), 0, height, 0, 1); //moving parameters of mouse y

    beginShape();
        for (i = 0; i < pts; i++){
            var j = map(i, 0, pts, 0, radians(360));
            x = g * sin(j); //forumla
            y = (g * cos(j) * cos(j) * (2+ cos(j))) / (3 + sin(j) * sin(j)); //formula
            var w = map(mouseX, 0, height, 1, 70) //remapping width
            var h = map(mouseY, 0, width, 1, 60) //remapping heigth
            ellipse(x, y, w, h); //ellipse
        }
        endShape(CLOSE);
}

For this project, I found the Bicornal Curve interesting, so I decided to explore its possibilities. Once I drew it using the math equation provided, I found it a tad dull. I then decided to create 3 more, creating 4 bicornal curves