Month: October 2022

//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
    }
}