Shirley Chen-Project-07-Curves

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-07


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

function draw(){
	background(242, 186, 176);
	curveA();
	curveB();
}

function curveA(){
//Create the Fixed-Position Astroid Curve
    noFill();
    beginShape();
    var col = mouseX * 0.3;
    stroke(221, 127, col);
    translate(100, 200);
    for (var i = 0; i < mouseX/2; i ++){ 
//The Number of Curves Will Change According to MouseX
        LimitedMouseX = constrain(mouseX, 0, width);
        var cons = map(LimitedMouseX, 0, width, 10, 100); 
//The Angle Will Change According to MouseX
        var theAngle = map(i, 0, mouseX, 20, 360);
        var x = 2 * cons * cos(theAngle) + cons * cos(2 * theAngle);
        var y = 2 * cons * sin(theAngle) - cons * sin(2 * theAngle);
        vertex(x, y);
    endShape();
//Rotate The Curves According to MouseX
    rotate(mouseX); 
    }
}


function curveB(){
//Create the Moving Astroid Curve
    noFill();
    beginShape();
    var col = mouseY * 0.5;
    stroke(col, col, 110);
    translate(150, 200);
    for (var i = 0; i < mouseY*0.7; i ++){ 
//The Number of Curves Will Change According to MouseY
        LimitedMouseY = constrain(mouseY, 0, height);
        var cons = map(LimitedMouseY, 0, width, 10, 100); 
//The Angle Will Change According to MouseY
        var theAngle = map(i, 0, mouseY, 20, 360);
        var x = 2 * cons * cos(theAngle) + cons * cos(2 * theAngle);
        var y = 2 * cons * sin(theAngle) - cons * sin(2 * theAngle);
        vertex(x, y);
    endShape();
//Rotate The Entire Astroid Curve According to MouseY
    rotate(mouseY); 
    }
}

In This Project, I created a set of stable astroid curve at a fixed position and a movable set of astroid curve that keeps rotating around a center point. For the fixed set of astroid curves, the number of curves and the angle are based on the position of mouse X; for the movable set of curves, the number of curves and the angle are based on the position of mouse Y. Therefore, I used map and constrain command to limit my X and Y positions. Moreover, the colors are also changed according to the mouse X and Y. For the fixed-position set of curves, the curves inside the set is rotating according to the mouse X. For the movable set of curves, the curves inside the set and the set itself are both rotating according to the position of Y.