//Michael Li
//Section C 

//set variables for points
var points = 100;
//set variable for state machine
var type = 0


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


function draw() {
    background(50);
    //add text
    text("Click to change shape", 20, 30)
    //move to the center of the canvas
    translate(width/2,  height/2)
    
    //to change the shapes between spiral and flower
    if (type == 0){
    spiral() //spiral function
    } else if(type == 1){
        //repeat the function for flower
        for(var i = 0; i <5; i++){
            //different state
            drawEpitrochoid(i) 
        }
    } 
    //draw center flower
    drawRoseCurve();


}

function drawRoseCurve() {
    // RoseCurve
    //constrain the mouse within the canvas
    var conMX = (constrain(mouseX, 0, width))
    var conMY = (constrain(mouseY, 0, width))
    //map the height of the rosecurve
    var h = map(conMY, 0, width, width*1/5, width*2/5)

    var x;
    var y;
    //map the color to the mouse movement
    var mapColorX = map(mouseX, 0, width, 100, 255)
    var mapColorY = map(mouseY, 0, width, 100, 255)
    //the color of the rosecurve changes depending on the outer elements
    if(type == 0){
        //blue and orange
        var c = color(mapColorX, mapColorX/2+mapColorY/2, mapColorY)
    } else if (type == 1){
        //green and purple
        var c = color(mapColorX/2+mapColorY/2, mapColorY, mapColorX)
    }
    var r; 
    //have the variable n only store odd numbers for better rose curve
    var n = printOdd(int(map(conMX, 0, width, 3, 20)))
    
    noFill()
    strokeWeight(1)
    stroke(255)
    circle(0, 0, h*2)
    fill(c)
    stroke(c);
    //draw rose curve
    beginShape();
        for (var i = 0; i < points; i++) {
            var theta = map(i, 0, points, 0, PI);
        
            r = h*cos(theta*n)
            x = r*cos(theta+conMY)
            y = r*sin(theta+conMY)
            curveVertex(x, y);

        }
    endShape(CLOSE)
}

//draw spiral
function spiral(){
    //constrain mouse within the canvas
    var conMY = (constrain(mouseY, 0, width))
    //map value to mouseY
    var a = map(conMY, 0, width, width*1/5, width*2/5)
    
    var x;
    var y;
    var r;

    noFill()
    push()
    beginShape()
    //map number of points to mouse Y
    //spiral grows as mouseY moves
    var mapYPoints = map(mouseY, 0, height, 25, 100)
        //draw spiral
        for (var u = 0; u < mapYPoints; u++) {
            //theta depend on mouse Y
            //spiral spins
            var theta = map(u, 0, mapYPoints/10, 0, TWO_PI);
            //circle size depend on mouseY
            var mapSize = map(u, 0, mapYPoints, 40, 10)
            r = ((theta)**(1/2))*a/4
            x = r*cos(theta+10)
            y = r*sin(theta+10)

            curveVertex(x, y)
            stroke(255-u*4)
            fill(255-u*4)
            //draw circles on the spiral
            circle (x, y, mapSize/2)
            stroke(200)
            noFill()
        }
    endShape()
}
//draww epitrochoid
function drawEpitrochoid(rot){
    push()
    //constrain mouseX and mouseY
    var conMX = (constrain(mouseX, 0, width))
    var conMY = (constrain(mouseY, 0, width))
    var a = map(conMY, 0, width, width*1/5, width*2/5)
    var b = constrain(a / int(conMX / 30), 0, 20)
print(a)
    var x;
    var y;

    //rotates the shape each loop
    rotate(rot+conMY/10)
    noFill()
    stroke(200)
    push()
    beginShape()
    //fill the shape with lower opacity to create layering effect
    fill(200, 200, 200, 50)
    var mapYPoints = map(mouseY, 0, height, 0, 25)
    //draw epitrochoid
        for (var u = 0; u < 100; u++) {
            var theta = map(u, 0, 100, 0, TWO_PI);

            x = rot/2*(a+b)*cos(theta)-b*cos(((a+b)/b)*theta);
            y = rot/2*(a+b)*sin(theta)-b*sin(((a+b)/b)*theta);
            curveVertex(x, y)

            
        }
    endShape(CLOSE)
    pop()
}
//only store odd numbers in a variable
function printOdd(x){

    if(x%2 == 0){
        return x-1
    } else{
        return x
    }
}
//swtich the type when mouse pressed

function mousePressed() {
    type += 1
    if(type > 1){
        type = 0
    }
}

//Michael Li
//Section C 

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

    
}
    //write object for candle dimensions
    var candle = {xPos: 130, yPos: 120, w: 50,  h: 280}
    //establish variables for the timer
    var timerS;
    var timerM; 
    var timerH;
    //Pen x position
    var penX = 370;
    //pen movement indedx
    var moveP = 0.3;

function draw() {
    background(62, 35, 16); //dark brown
    timerM = minute(); //assign minute function for variable
    //pages
    fill(76, 135, 74); //green book cover
    rect(190, 420, 230, 20); //draw bottom cover
    //alternate the page color between white and grey for distinction
    //use for loop to draw number of pages depending on the minute
    for (var i = 0; i<=60-timerM; i++){
        noStroke();
        if (i%2==0){
            fill(255);
        } else {
            fill(200);
        }
        //draw pages
        rect(190, 420-(3*i), 230, 3);

    }
    //draw pen function
    drawPen(penX, 235+3*timerM);
    //pen moves left and right
    penX +=moveP;
        //constrain pen in a range
        if (penX>= 380 || penX <= 350){
            moveP = -moveP;
        } 
    //draw the panel with the hour carvings
    drawBackPanel(80, 100);

    //draw the table
    fill(154, 121, 102);
    rect(0, height*9/10, width, height*9/10);

    //draw hour carvings behind the candle
    //for loop to draw the larger lines
    for (var i = 0; i <=12; i++){
        strokeWeight(3);
        stroke(161, 158, 75);
        line(100, 350.4-(9.6*2*i), 215, 350.4-(9.6*2*i));
    //drawing the shorter lines
    } for (var i = 0; i <=12; i++){
        strokeWeight(2);
        stroke(161, 158, 75);
        line(120, 360-(9.6*2*i), 195, 360-(9.6*2*i));
    }
    //drawing the body of the candle
    drawCandleB(candle.xPos, candle.yPos, candle.w, candle.h);
    //drawing the base of the candle
    drawBase(candle.xPos-10, 360);

    //assign hour to variable timerH
    timerH = hour();
    //map the hour to fit the candle length
    var hourMap = map(timerH/2, 0, 12, 240, 10);
    //candle length changes depending on the hour
    candle.yPos = 120 + 240 - hourMap;
    candle.h = hourMap + 30;

}
//function for drawing the candle's body
function drawCandleB (x, y, w, h){
    //establish remapped value for hour
    var hourMap = map(timerH/2, 0, 12, 240, 30);

    fill(250, 244, 192); //light yellow
    noStroke()
    rect(x, y, w, h); //candle  body
    //function for drawing the fire
    drawCandleFire(x, y, w, h);
    //function for drawing the wax dripping
    drawCanldeT(x, y, w);
    //function for drawing the halo of light
    drawLight(x, y, w, h, hourMap);

}
//function for drawing the wax
function drawCanldeT (x, y, w){
    //set lineweight
    strokeWeight(8);
    stroke(220, 213, 142); //darker yellow

    line(x+2, y, x+w-2, y);//horizontal line
    //two drips
    line(x+w*3/5, y, x+w*3/5, y+w/2); 
    line(x+w*4/5, y, x+w*4/5, y+w*3/4);
}
//function for drawing the fire
function drawCandleFire (x, y, w, h){
    //establish variable for the tip of the fire
    //fire positions
    var fTipy; 
    var fTipx;
    //variable for seconds for fire flicker
    timerS = second();
    //fire flickers each second
    if (timerS %2 == 0){
        fTipy = y-w*4/5;
        fTipx = x+w/2;
   
    } else {
        fTipy = y-w*4/5;
        fTipx = x+w/2 - 10;
    }
    noStroke();
    //draws the fire
        fill(246, 74, 22); //red
        ellipse(x+w/2, y-w/5, w/4, w/3);
        triangle(fTipx, fTipy, x+w*5/8, y-w/5, x+3*w/8, y-w/5);
    
}
//halo of light
function drawLight (x, y, w, h, hour){

    timerS = second();//establish the second variable
    //halo grows and shrinks each second
    if (timerS %2 == 0){
        hourMap = hour+10;
    } else {
        hourMap = hour-5;
    }

    noStroke();
    fill(249, 246, 152, 20);//yellow with light transparency
    ellipse(x+w/2, y-w*2/5, hourMap*2, hourMap*2); //draws light

}
//function drawing the back panel
function drawBackPanel (x, y){
    
    strokeWeight(9);
    stroke(225, 176, 104); // light brown
    //outer framing
    line(x, y, x, y+350);
    line(x+155, y, x+155, y+350);
    arc(x+77, y, x+75, y+55, PI, 0);

    //inner board
    noStroke();
    fill(186, 167, 135);

    ellipse(x+77, y, x+75, y+55);
    rect(x, y, x+75, y+250);
}
//candle base
function drawBase (x, y){
    fill(100); //grey
    //top and bottom qadralateral
    quad(x, y, x+70, y, x+60, y+20, x+10, y+20);
    quad(x+10, 420, x+60, y+60, x+70, y+73, x, y+73);
    //middle rectangle
    fill(150);
    rect(x+10, y+20, 50, 40);
}
//pen
function drawPen (x, y){
    push();
        translate(x, y); //move to the right
        rotate(radians(315)); //rotate for pen mvement
        noStroke();
        fill(200); //grey
        //draws pen
        rect(0, 0, 100, 5);
        fill(255); //white
        triangle(0, 0, 0, 5, -5, 2.5);
    pop();
}

//Michael Li
//Section C 
var radi = 30
function setup() {
    createCanvas(755, 630);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background (220);

}

function draw() {
    background(30, 28, 27);

    var color = 0; //set variable color
    //create a line with the for loop
    for (var x = 0; x <= width+80; x += 4.2*radi){
        color += 1; // increment color by 1
            if (color % 2 == 1){ // test color 
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
        //create a grid
        for(var y = 0; y<= height+80; y += 4.2*radi){
            color += 1;
            //test for color
            if (color % 2 == 1){
                stroke(255, 204, 51); //bright yellow
            } else {
                stroke(182, 156, 129); //grey
            }
            //two if statements in each for loop creates the alternating color pattern
            pattern1(x, y); // call to draw function pattern 1
            print(color.toString());
            
        }
    }
    //draw a grid of pattern two
    //reposition x and y initial position
    for (var x = 63; x <= width + 80; x += 4.2*radi){
        for(var y = 0; y <= height + 80; y += 4.2*radi){

        pattern2(x, y); //draw pattern 2
    }
    }
   
    noLoop();//draw once
}
    var flip1 = 1; //set varibales for  flip
    var flip2 = 1;

function pattern1(x, y){
    strokeWeight(2); 
    noFill();
    //only stroke no fill

    push();

    translate(x, y); // translate object to input x and y

    //top and bottom semi circle
    arc(0, 0, radi*2, radi*2, PI+radians(7), 0-radians(7));
    arc(0, 0, radi*2, radi*2, 0+radians(7), PI-radians(7));
    //middle long line
    line(0-radi/1.3, 0, 0+radi/1.3, 0);

    var xSpaing = 3.5;//set a uniformed spacing

    //draw the same line 4 time
    for (var i = 0; i<= 4; i += 1){
        //test which loop number it is to flip the drawing
        if (i == 1 || i == 3){
            flip1 = -flip1; //on first and third loop, flip the x position
        } else if (i == 2){
            flip2 = -flip2; //on the second loop, flip the y position
        }
        line(0-flip1*radi/1.1, 0-(flip2*6), 
        0-flip1*radi/1.5, 0-(flip2*6)); // horizontal short
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.1), 
        0+(flip1*xSpaing), 0+(flip2*radi/1.3)); //verticle short 1
        line(0+(flip1*xSpaing), 0+(flip2*radi/1.8), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // verticle short 2, closer to middle
        line(0+(flip1*20), 0+(flip2*radi/2.5), 
        0+(flip1*xSpaing), 0+(flip2*radi/2.5)); // horizontal longer, at 4 corners
    }

    //middle line top and bottom
    line(0+radi/2.2, 0+6, 0-radi/2.2, 0+6); //bottom middle
    line(0+radi/2.2, 0-6, 0-radi/2.2, 0-6); //top middle

    //four small arcs
    arc(0, 0, radi*1.6, radi*1.6, radians(30), radians(63));
    arc(0, 0, radi*1.6, radi*1.6, radians(85+30), radians(85+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(180+30), radians(180+63));
    arc(0, 0, radi*1.6, radi*1.6, radians(265+30), radians(265+63));
    pop();

    push();
    translate(x, y); //translate to input x and y
    rotate(radians(45)); // rotate around x, y by 45 degrees
    rectMode(CENTER); //draw rect around origin
    //draw rectangle to frame the pattern
    rect(0, 0, radi*3, radi*3);
        //draw 4 times
        for(var i = 0; i<=4; i +=1){
        //test for which loop increment
        if (i == 1 || i == 3){ //first and third flip the x position
            flip1 = -flip1;
        } else if (i == 2){ //second loop flip the y position
            flip2 = -flip2;
        }
        //draw 3 small squares by the corner of the big square
        //repeat for each corner using the for loop
        rect(flip1*1.5*radi, flip2*1.5*radi, radi, radi);
        rect(flip1*1.34*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*0.9*radi, flip2*1.34*radi, radi/4, radi/4);
        rect(flip1*1.34*radi, flip2*0.9*radi, radi/4, radi/4);
   }
   pop()
}


//second pattern, new arguments g and h
function pattern2 (g, h){
    push();
    translate(g, h); // translate origin to g, h
    rotate(radians(45)); //rotate around origin by 45 degrees
    rectMode(CENTER); // set rectMode
    strokeWeight(2);
    stroke(255, 204, 51, 100); // grey line color
    fill(182, 156, 129, 100); // lower transparency
    rect (1.5*radi, 1.5*radi, radi*1.8, radi*1.8); // medium size square
    pop();

    push();
    translate(g, h);
    stroke(182, 156, 129);
    rectMode(CENTER);

    rect(0, 2.1*radi, radi/3, radi/3); // small square inside

    line(0, 0,  0, height); //verticle lines
    pop();
}

//Michael Li
//Section C 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 70;

function setup() {
    createCanvas(400, 300);
    background(200);
    

}

function draw() {
    background("darkred");
    //remapped values for eyeball translation
    var tranX1 = constrain(map(mouseX, 0, 400, 120, 280), 120, 280)
    var tranX2 = constrain(map(mouseX, 0, 400, 130, 270), 130, 270)
    var tranX3 = constrain(map(mouseX, 0, 400, 140, 260), 140, 260)
    var tranX4 = constrain(map(mouseX, 0, 400, 150, 250), 150, 250)
    //set variable for rotation
    var rot = 90
    //eye white
    stroke(255);
    //two lines bottom left and top right
    line(0, 150, 250, 400); 
    line(150, -100, 400, 150)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set initial points for line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //repeat the process diagnally. 
    //draw line top right and bottom left
    line(150, 400, 400, 150);
    line(0, 150, 250, -100)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (400-150)/numLines;
    dy1 = (150-400)/numLines;
    dx2 = (250-0)/numLines;
    dy2 = (-100-150)/numLines;

    //set initial points for line
    x1 = 150;
    y1 = 400;
    x2 = 0;
    y2 = 150;

    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    // spiral controlled by the mouseY position

    //use push and pop to limit the conditions inside
    push()
    //tranlsate origin to the middle of the canvas
    translate(200, 150)
    //set variables for the line positions
    var x =100
    var y = 100
    var dist = 50 //distance between each line
    var rot2 = 5 //set value for rotation degree
    var rotation = constrain(map(mouseY, 0, 300, -500, 100), -500, 100)
    //sets value of y, the loops repeats for 200 times
    for (y = 100; y <= 300; y += 1){
        rotate (radians(rot2)) //rotation of the line around the origin
        stroke("lightyellow") //stroke color
        //draw line to form the spiral
        line(rotation, y, x+dist, y+dist)
        rot2 += 0 //constant rotation
    }

    pop()

    //eyeball formation
    //use written function eyeBall below to draw the eyeball formation

    //Innermost DarkRed
    push()
    stroke("darkred")
    //translate the position based on the mouseX position
    //use tranX variables for remapped values
    translate(tranX1, 150); 
    //use for loop to repeat the Eyeball Function
    for (var spin = 0; spin <=6; spin += 1){
        //written function to draw components of the eyeballs
        eyeBall(30, 30, 30, 30)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //2nd layer lightblue
    push()
    stroke("lightblue")
    //use remapped value for translation based on mouseX
    translate(tranX2, 150);
    //rotate 45 degrees for variation from the last component
    rotate(radians(45))
    //for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //Eyeball function decrease value to increase size
        eyeBall(20, 20, 20, 20)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //3rd layer light green
    push()
    //use remapped value for translation based on mouseX
    translate(tranX3, 150);
    //rotate 90 degrees for variation from the last compone nt
    rotate(radians(90))
    stroke("lightgreen")
    //use for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //eyeBall function increases component size
        eyeBall(10, 10, 10, 10)
        rotate(radians(rot))
        //addes rotation value for the circular shape
        rot += 90
    }
    pop()

    //4th layer dark grey
    push()
    //use remapped value for tranlsation based on mouseX
    translate(tranX4, 150);
    //rotate 45 degrees for variation
    rotate(radians(45))
    stroke(30) //dark grey
    for (var spin = 0; spin <=12; spin += 1){
        //increase in size
        eyeBall(-10, -10, -10, -10)
        rotate(radians(rot))
        //adds 45 degrees for circular form
        rot += 45
    }
    pop()
   
    //eye lids
    stroke("orange");
    //draw two lines
    line(0, 150, 250, 400);
    line(150, 400, 400, 150);
    //calculate length of the line and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150-400)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = 400;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //draw two lines
    line(0, 150, 250, -100)
    line(150, -100, 400, 150)
    //calculate length of the lines and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (-100-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

//set function to draw the eyeball components
function eyeBall (a, b, c, d){
 
    //set two lines
    line(a-40, b-120, c-100, d+40)
    line(a+40, b-120, c-120, d-40)

    //find the length of the lines divided by the number of lines
    dx1 = (c-100-(a-40))/numLines;
    dy1 = (d+40-(b-120))/numLines;
    dx2 = (c-120-(a+40))/numLines;
    dy2 = (d-40-(b-120))/numLines;

    //set values for inital position
    var x1 = a-40;
    var y1 = b-120;
    var x2 = c+40;
    var y2 = d-120;
    //use for loops to continously draw the lines.
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}