jeeyoonk07

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 7
*/

var nPoints = 360

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

function draw() {
	//drawing curve
	background(130, 20, 40);
	push();
	translate(width / 2, height / 2);
	drawAstroidCurve();
	pop(); 

	fill(255, 100);
	textSize (30);
	textFont('Roboto');

	text("CHAOS", width / 2 - 50, 480);
}

function drawAstroidCurve() { //
	// Astroid;
	//Link: http://mathworld.wolfram.com/Astroid.html
	var x; 
	var y;
	var xR = constrain(mouseX, 0, 500);
	var ellipseR = map(mouseX, 0, 500, 10, 120);
	var a = map(xR, 0, 500, 40, 30);
	var b = map(xR, 0, 500, 50, 300);
	var h = constrain(mouseY, 0, 400);


	stroke(255);
	strokeWeight(0.5);

	//chaotic ASTROID CURVE
	beginShape();
	fill(130, 20, 40);
	for (var i = 0; i < nPoints; i++) {
		x = (4 * a * cos(i)) + (b * cos(3 * h * i));
	    y = (2 * a * sin(i)) - (b * sin(3 * h * i));
        vertex(x, y);
	};
	endShape(CLOSE);

	noStroke();
	fill(255);
	ellipse(3, 5, ellipseR, 50);
}

For this project, I wanted curves that combine to create a chaotic feeling. The ellipse in the middle is supposed to represent a ball of string, and make the whole canvas look like the string is “unraveling” from the ball of string (the ellipse in the middle). I used an Astroid curve from the MathWorld site to reference the function. At first, I was confused on how to utilize map(); and constrain(); to explore different curves and its sizes and limits. However, I eventually understood these concepts through this project. Throughout out the project, I was really amazed on how many variations of curves an asteroid that create although I input certain constraints.

Below are my process work. The top picture shows that I struggled for awhile on how to make the curves show in thin lines. I realized that I had to fill them with background color. The bottom picture is another part of the process. I explored different constrain();.

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Project 07
*/

var maxP = 100; //boundary for points plotted by the curve 
var chang = 1; //variable ised for flipping orientation of fish curve


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

function draw() {
    background("PaleTurquoise");
    textSize(10);
    noStroke();
    fill("LightSeagreen");
    text("click me! yay!", 30, 70);
    text("¡a fish that is math!", 80, 300);
    text("math", 270, 400);
    text("glug....glug", 60, 430);
    text("so interactive!", 350, 30);

    translate(width/2, height/2); //puts axis in center of the canvas 
    if (mouseIsPressed) { //sets if statement that inverses fish curve when mouse is pressed
                chang = -1;
            } else {
                chang = 1;
            }
            print(chang); 
    drawFishie(); //calls fish function 
    drawFishie2();
    drawFishie3(); 
    drawFishie4();
}

function drawFishie() {
        var x; //x value for fish curve parametric equation 
        var y; //y value for fish curve parametric equation 
        var a = constrain(mouseY, 20, 450); //constrains a to value between 20 and 450
        var consT = map(mouseX, 0, width, 1, 5); //maps consT so that mouse X plots a number between 1 and 5
        stroke("peachpuff");
        fill("lightpink");
        
        beginShape();
        for (var i = 0; i < maxP; i++) { //for loop that sets maxiumum points form variable above 
            var t = map(i, 0, maxP, 0, TWO_PI); 

        //fish curve
        //http://mathworld.wolfram.com/FishCurve.html

        x = (a * cos(t)) - ((chang)*((a*(sq(sin(t))))) / 2); //change varibale inverses curve when mouse is pressed
        y = (a* cos(t) * (consT)*sin(t));  //constant manipulates the height of
        // the curve based on mouse x position      
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawFishie2() { //outline, which is slightly off
        var x; //x value for fish curve parametric equation 
        var y; //y value for fish curve parametric equation 
        var a = constrain(mouseY, 20, 450); //constrains a to value between 20 and 450
        var consT = map(mouseX, 0, width, 1, 10); //maps consT so that mouse X plots a number between 1 and 5
        stroke("tomato");
        strokeWeight(2);
        noFill();
        
        beginShape();
        for (var i = 0; i < maxP; i++) { //for loop that sets maxiumum points form variable above 
            var t = map(i, 0, maxP, 0, TWO_PI); 

        //fish curve
        //http://mathworld.wolfram.com/FishCurve.html

        x = (a * cos(t)) - (.5*(chang)*((a*(sq(sin(t))))) / 2); //change varibale inverses curve when mouse is pressed
        y = (a* cos(t) * (consT)*sin(t));  //constant manipulates the height of
        // the curve based on mouse x position      
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawFishie3() { //outline, which is slightly off
        var x; //x value for fish curve parametric equation 
        var y; //y value for fish curve parametric equation 
        var a = constrain(mouseY, 20, 400); //constrains a to value between 20 and 450
        var consT = map(mouseX, 0, width, 0, 5); //maps consT so that mouse X plots a number between 1 and 5
        stroke("salmon");
        strokeWeight(8);
        noFill();
        
        beginShape();
        for (var i = 0; i < maxP; i++) { //for loop that sets maxiumum points form variable above 
            var t = map(i, 0, maxP, 0, TWO_PI); 

        //fish curve
        //http://mathworld.wolfram.com/FishCurve.html

        x = (a * cos(t)) - (.5*(chang)*((a*(sq(sin(t))))) / 2); //change varibale inverses curve when mouse is pressed
        y = (a* cos(t) * 7*(consT)*sin(t));  //constant manipulates the height of
        // the curve based on mouse x position      
        vertex(x, y);
    }
    endShape(CLOSE);
}

function drawFishie4() { //outline, which is slightly off
        var x; //x value for fish curve parametric equation 
        var y; //y value for fish curve parametric equation 
        var a = constrain(mouseY, 20, 450); //constrains a to value between 20 and 450
        var consT = map(mouseX, 0, width, 0, 6); //maps consT so that mouse X plots a number between 1 and 5
        stroke("orange");
        strokeWeight(5);
        noFill();
        
        beginShape();
        for (var i = 0; i < maxP; i++) { //for loop that sets maxiumum points form variable above 
            var t = map(i, 0, maxP, 0, TWO_PI); 

        //fish curve
        //http://mathworld.wolfram.com/FishCurve.html

        x = (a * cos(t)) - (.7*(chang)*((a*(sq(sin(t))))) / 2); //change varibale inverses curve when mouse is pressed
        y = (a* cos(t) * 10*(consT)*sin(t));  //constant manipulates the height of
        // the curve based on mouse x position      
        vertex(x, y);
    }
    endShape(CLOSE);
}

Fish Curve!
For this project, I had to experiment a lot with figuring out a way to build a shape that relied on the equations I gave it. I hadn’t really thought about it before, but we have been creating equations for the for loops we’ve been generating these past 2 weeks, so once I wrapped my head around this concept, I was able to understand how to plug these equations in and turn them into code. I originally played around with a cruciform curve (which I forgot to screenshot!), but after figuring out the fish curve, I wasn’t as inspired by it’s shape. The fish curve, by the way, is a curve that is based off an ellipse’s equation, with a pedal point at a specific point of eccentricity e^2 = 1/2. I had fun manipulating the variables on my various curves so that the different fish outlines took on slightly different characteristics, and adding interactions (click on screen!).