Month: October 2019

curves

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-07-curves

 
 var ang = 0;
 var nPoints = 100; 

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

function draw() {

    background(0);
    noFill();
    //orange curves
    push();
    translate(width / 2, height / 2);
    strokeWeight(2);
    stroke(255, 159, 28);
    drawHypo1();
    pop();
    //red curves
    push();
    translate(width / 2, height / 2);
    strokeWeight(8);
    stroke(181, 42, 74);
    drawHypo2();
    pop();
    //yellow curves
    push();
    strokeWeight(2);
    stroke(255, 240, 122);
    translate(width / 2, height / 2);
    rotate(radians(ang));
    ang += mouseX / 50;
    drawRan();
    pop();
}
//Ranunculoid Curve 
function drawRan(){ //http://mathworld.wolfram.com/Ranunculoid.html
    var sz = 10;
    //curve
    beginShape();
    for (var i = 0; i < nPoints; i += 0.1){
      var xr = sz * (6 * cos (i) - cos (6 * i));
      var yr = sz * (6 * sin (i) - sin (6 * i));
      vertex(xr, yr);
    }
    endShape();
}

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

    var x;
    var y;
    //controls 
    var h = map(mouseY, 0, height, 0, 80);
    var a = map(mouseX, 0, width, 0, 300);
    var b = a / 8;
    //curve
    beginShape();
    for (var i = 0; i < nPoints; 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();
}

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

    var x;
    var y;
    //controls 
    var h = map(mouseY, 0, height, 0, 80);
    var a = map(mouseX, 0, width, 0, 300);
    var b = a / 12;
    //curve
    beginShape();
    for (var i = 0; i < nPoints; 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();
}

At first, trying to understand how the math equations were controlled was pretty confusing; after experimenting with the variables, I was able to adjust and change the outputs of the curves equations to how I wanted it to look. Then, I formatted the curves in terms of color and stroke weight to create a flowery design.

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 07 - Composition with Curves

var points = 200 //number of points
// for an episprial this will be sections
//the equation for an epispiral
//r = a sec (ntheta)
function setup() {
	createCanvas(480, 480);
}

function draw() {
	background(186, 112, 141);
	//calling the curve functions
	drawCraniodCurve1();
	drawCraniodCurve2();
}
	
function drawCraniodCurve1() {
var x;
var y;
var r;
var a = map(mouseX, 0, width, 0, width / 2); //makes the first epispiral relate to mouseX
var c = map(mouseY, 0, height, 0, height / 2); //makes the second epispiral relate to mouseY
var b = a / 5;
var p = 100;
var theta;

	//calling the curve functions to be drawn
	push();
	translate(width / 2, height / 2);
	fill(158, 200, 222); //blue
	beginShape();
	for (var i = 0; i < points; i += 1) {
		theta = map(i, 0, points, 0, TWO_PI);
		r = (a * (1 / cos((i + points) * theta))) //epispiral equation
		x = r * cos(theta);
		y = r * sin(theta);
		vertex(x, y);
	}
	endShape(CLOSE);
	pop();
}

function drawCraniodCurve2() {
	push();
	translate(width / 2, height / 2);
	fill(255, 77, 77); //red
	beginShape();
	for (var i = 0; i < points; i += 1) {
		var c = map(mouseY, 0, height, 0, height / 2);
		theta = map(i, 0, points, 0, TWO_PI);
		r = (c * (1 / cos((i + points) * theta))) //epispiral equation
		x = r * cos(theta);
		y = r * sin(theta);
		vertex(x, y);
	}
	endShape(CLOSE);
	pop();
}

For this project, I at first was trying to create an image more similar to a typical spirograph. However, after choosing to work with the epispiral, I liked how it almost looked like shattered glass. It reminded me of a comic strips and when an action was done there would be action bubbles. I then chose to animate it similarly to a “POW” action that could be drawn in the comics. Therefore, I overlayed the original epispiral with another with colors that could seem comic book like.

sketch_project07

/*Katrina Hu
15104-C
kfh@andrew.emu.edu
Project-07*/

var nPoints = 100;

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

function draw() {
    push();
    translate(width/2, height/2);
    drawHypotrochoid();
    drawAstroid();
    pop();

}

function drawHypotrochoid() {
    var x;
    var y;
    //mouse used to change color
    var r = constrain(mouseX, 0, 255);
    var g = constrain(mouseY, 0, 255);
    var b = constrain(mouseY, 200, 255);
    //stroke appearance
    stroke(r, g, b);
    strokeWeight(1);
    noFill();
    //hypotrochoid equation
    var a = map(mouseX, 0, 600, 0, 300);
    var b = 10
    var h = map(mouseY, 0, 600, 2, 105);
    beginShape();
    for (var i = 0; i < nPoints; i++ ) {
        var angle1 = map(i, 0, nPoints, 0, TWO_PI);
        //equation of hypotrochoid
        x = (a - b) * cos(angle1) + h * cos((a - b) * (angle1 / b));
        y = (a - b) * sin(angle1) - h * sin((a - b) * (angle1 / b));
        vertex(x, y);
    }

  endShape();
}

function drawAstroid() {
    //mouse used to change color
    var r = constrain(mouseX, 200, 255);
    var g = constrain(255, mouseY/4, 50);
    var b = constrain(mouseY, 200, 255);
    //stroke appearance
    stroke(r, g, b);
    strokeWeight(2);
    noFill();
    //asteroid equation
    var a = int(map(mouseX, 0, width, 4, 10));
    var b = int(map(mouseX, 0, width, 0, 100));
    beginShape();
    for (var i = 0; i < nPoints; i++){
        angle1 = map(i, 0, nPoints, 0, TWO_PI);
        //equation of Astroid
        x = (b / a) * ((a - 1) * cos(angle1) + cos((a - 1) * angle1));
        y = (b / a) * ((a - 1) * sin(angle1) - sin((a - 1) * angle1));
        vertex(x,y);
    }
    endShape();

}

In my project I used a Hypotrochoid and an Asteroid. I decided to use my mouse to play around with the RGB values, which change depending on mouseX and mouseY. The project has a large Hypotrochoid on the outside with the Asteroid on the inside.

I decided to let it draw over itself, as it adds more curves when you move the mouse. I thought it added a cool layering effect where you could see all the colors on top of one another.

Overall, the project was fun to do as I learned a lot about experimenting with the different curves and parametric equations.