Category: SectionB

//num of lines(rose) & size for bifoliate
var nPoints = 100;


function setup() {
    createCanvas(400, 400);
    frameRate(50);
    background(220);
}

function draw() {
    background(0);

    push();
    //moves origin to center of canvas
    translate(width/2, height/2);
    //inner petals
    draw4BifoliateCurve();
    //outer curves
    drawRoseCurve();
    pop();
}

//creating one singular bifoliate curve
function drawBifoliateCurve() {
    var x;
    var y; 
    var r;

    //conforming a (which controls the size of the bifoliate) to mouseX
    var a = constrain(mouseX - 200, -100, 100); 
    //opaque purple
    fill(200, 162, 230, 100); 
    noStroke();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI); 
            //bifoliate equation
            r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
            print("Value" + a);

            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape(CLOSE);

}

//creating one bifoliate curve in y-direction
function drawmouseYbifoliateCurve() {
    var x;
    var y; 
    var r;

    var a = constrain(mouseY-200, -120, 120);

    fill(200, 162, 200, 100);
    noStroke();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI);
            //bifoliate equation
            r = ((8*cos(t) * (sin(t)**2))/(3 + cos(4*t))) * (a);
            //print("Value" + a);

            //change from polar to x and y
            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape(CLOSE);
 
}
 
//creating 4 Curves (Outer/Inner Petals)   
function draw4BifoliateCurve() {
    push();
    //2 Petals (Top and Bottom)
    rotate(PI/5);
    drawmouseYbifoliateCurve();
    rotate(PI)
    drawmouseYbifoliateCurve();
    pop();
    //2 Petals (Left and Right)
    drawBifoliateCurve();
    push();
    rotate(PI);
    drawBifoliateCurve();
    pop();
}

//draws rose curve
function drawRoseCurve() {
    var x;
    var y; 
    var r;
    var a = 1500;
    //mouse Y controls how many lines
    var n = constrain(mouseY/20, 0, 400/20);

    stroke(255, 255, 255, 150);
    strokeWeight(0.5);
    noFill();
    beginShape();
    for (var i = 0; i < nPoints; i++) {
            //remap i from 0 to 2PI to create theta
            var t = map(i, 0, nPoints, 0, TWO_PI);

            //rose equation
            r = a*sin(n*t);

            //change from polar to x and y
            x = r * cos(t);
            y = r * sin(t);
            vertex(x,y); 
    }
    endShape();

}

//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-07

//Referrence Curve: Atzema Spiral
//move the mouse up and down to change the rotation angle
//move the mouse left and right to change radius

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

function draw() {
    background(0);
    //draw the pair of lines that change with mouseX and mouseY
    lines1(mouseX, mouseY);
    lines2(mouseX, mouseY);
}

//define the function to draw the lines
function lines1 (R, A) {
    //constrain the angle and radius and map them to specific ranges
    RR = constrain(R, 0, width);
    AA = constrain(A, 0, height);
    //radius with the range(20, 20)
    r = map(RR, 0, width, 20, 50);
    //angle within the range(50, 800)
    a = map(AA, 0, height, 50, 800);
    
    //for loop to draw the lines and circles
    for (angle = 57.2957795; angle < 57.2957795+a; angle += 3) {
        push(); //push to save the orgin tranformation

        //translate the origin to (width/3, width/3)
        translate(width/3, width/3);
        //polar coordinates according to Atzema Spiral
        var t = radians(angle);
        var x = x3+ r * ( sin(t)/t - 2*cos(t) - t*sin(t) );
        var y = y3+ r * ( -cos(t)/t - 2*sin(t) - t*cos(t) );
        //another series of polar coordinates with 60 more degrees of angle
        var t2 = radians(angle+60);
        var x2 = x3 + (r) * ( sin(t2)/t2 - 2*cos(t2) - t2*sin(t2) );
        var y2 = y3 + (r) * ( -cos(t2)/t2 - 2*sin(t2) - t2*cos(t2) );
        //reference circle polar coordinates
        var radius = 2*r; //radius of the circle
        var x3 = radius * cos(radians(angle));
        var y3 = radius * sin(radians(angle));

        strokeWeight(0.5);
        //purple and opacity 90 of the lines from center to polar coordinates
        stroke(183, 125, 255, 90);
        line(0, 0, x, y);
        
        //blurish purple 
        stroke(104, 81, 225); 
        noFill();
        
        //three circles
        ellipse(0, 0, radius*2, radius*2);
        ellipse(0, 0, radius*2+10, radius*2+10);
        ellipse(0, 0, radius*2+20, radius*2+20);

        //blue
        stroke(1, 124, 228);
        //lines from first series of polar coordinates to the second series
        line(x, y, x2, y2);
        //lines from center to the reference circle
        line(0, 0, x3, y3);

        //purple
        stroke(183, 125, 255)
        fill(183, 125, 255);
        //small circles
        circle(x, y, 3);

        pop(); //pop to return to the original setting of the origin 
    }

}
    
//rotate 180 degrees of the lines1
function lines2 (R, A) {
    //tranlate the origin
    translate(width, height);
    rotate(radians(180));
    //call the function lines1
    lines1(R, A);
}

//Jenny Wang
//sectionB
//jiayiw3@andrew.cmu.edu
//project - 07 - curves

var nPoints = 150;

function setup() {
    createCanvas(480, 480);
    background(29,7,79);//dark purple
    frameRate(10);
}

function draw() {
    push();
    //make the center of canvas the origin
    translate(width/2,height/2);

    //draw loop for the curves 1 & 2
    background(29,7,79);//dark purple
    curve1();
    curve2();
    curve3();
    pop();
}

function curve1(){

    //Epicycloid Involute
    //https://mathworld.wolfram.com/EpicycloidInvolute.html
    
    //set varibale
    var x;
    var y;
    var a = mouseX/8
    var b = mouseY/8
    
    beginShape();
    noFill();
    stroke(247,246,208);//light yellow
    for(var i=0; i<nPoints; i++){
            var t = map(i,0,nPoints,0,TWO_PI);
            x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
            y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

function curve2(){

    //Epicycloid Involute
    //https://mathworld.wolfram.com/EpicycloidInvolute.html
    
    //set variable
    var x;
    var y;
    var a = mouseX/5
    var b = mouseY/5
    
    beginShape();
    noFill();
    stroke("white");//white
    for(var i=0; i<nPoints; i++){
            var t = map(i,0,nPoints,0,PI+QUARTER_PI);
            x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
            y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

function curve3(){

    //Epicycloid Involute
    //https://mathworld.wolfram.com/EpicycloidInvolute.html
    
    //set variable
    var x;
    var y;
    var a = mouseX/3
    var b = mouseY/3
    
    beginShape();
    noFill();
    stroke("pink");//pink
    for(var i=0; i<nPoints; i++){
            var t = map(i,0,nPoints,0,PI);
            x = (a+b)*cos(t)-b*cos(((a+b)/b)*t);
            y = (a+b)*sin(t)-b*sin(((a+b)/b)*t);
            vertex(x,y);
            
        endShape(CLOSE);
    }
}

//Sam Rauch, section B, srauch@andrew.cmu.edu, project 07
//This code produces a "laser ballerinas" using epicycloid curves. Ten epicycloid curves of decreasing
//size and random colors are drawn on top of each other to produce "nested curves", and six nested curves
//are drawn in a hexagon pattern around the center of the canvas, which spins. MouseX controls the size of
//the curves and the rotation of the hexagon pattern, while mouseY controls the number of "lobes" produced
//in each epicycloid curve. Click to change the colors of the ballerinas!

var coloroptions;

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);

    coloroptions = [];
    for (var i = 0; i < 9; i++) {
        coloroptions[i] = color(random(255), random(255), random(255));
    }

}

function draw() {
    background(0);
    translate(width/2, height/2);
    
    //create spin the hexagon of curves around the center of the canvas according to mouseX
    push();
    var spinamt = map(mouseX, 0, width, 0, 2*PI)
    rotate(spinamt);


    //draws six nested curves in a hexagon pattern
    for (var i = 0; i < 6; i++){
        push();
        translate(100, 0);
        nestedCurve();
        pop();
        rotate(radians(60));
    }

    pop();

}

//generates epicycloid curve (https://mathworld.wolfram.com/Epicycloid.html) with center at 0,0
function drawCurve(color){ 
    
    noFill();
    stroke(color);
    strokeCap(ROUND);
    strokeJoin(ROUND);
    strokeWeight(3);

    var points = 80;
    var xValues = [];
    var yValues = [];
    var a = mouseX/4; //radius of larger inner circle 
    var b = constrain(mouseY/10, 0, a) ; //40; //radius of smaller outer circle
    var theta = 0;

    //generating x and y values based on epicycloid curve forumla, and increasing the center angle
    //by a small amount
    for (var i = 0; i < points; i++) {
        theta += radians(5);
        xValues[i] = (a+b)*cos(theta) - b*cos(((a+b)/b)*theta);
        yValues[i] = (a+b)*sin(theta) - b*sin(((a+b)/b)*theta);
    }
    
    //plotting x and y values
    beginShape();
    for (var i = 0; i <points; i++) {
        vertex(xValues[i], yValues[i]);
    }
    endShape();
}

//draws ten epicycloid curves of random colors nested inside each other
function nestedCurve() {
    push();

    var size = 1;
    var sizeIncrement = 0.1;

    //draws ten epicycloid curves, but for each one, decreases scale and change color
    for (var i = 0; i < 9; i++) {
        scale(size);

        var col = coloroptions[i];
        drawCurve(col);
        size -= sizeIncrement;
    }

    pop();
}

function mousePressed(){
    for (var i = 0; i < 9; i++) {
        coloroptions[i] = color(random(255), random(255), random(255));
    }
}