anabelle’s project 03

// kayla anabelle lee (kaylalee)
// section c
// project 03 ^^

moonX = 200; 
moonY = 150;
outline = 55;
inline = 50;

let direction = 0.8;
let speed = 1;
let starDiam = 20; 

let redValue = 231;
let greenValue = 157;
let blueValue = 193;

let skyScraperX = 300;
let skyScraperY = 100;

let happyMouthX = 60;
let happyMouthY = 450;

let triangleWindowX = 225;
let triangleWindowY = 185;
let catDirection = 1;
let catAngle = 1;
let moonSpin = 0;

function setup () {
    createCanvas(450, 600);
}

function draw() {
    print(catAngle);
    background(redValue, greenValue, blueValue);

    // constrain the rbg values to the 2 sky colors i want
    redValue = constrain(redValue, 46, 231);
    greenValue = constrain(greenValue, 26, 157);
    blueValue = constrain(blueValue, 71, 193);

    // turns dusk when mouse on left, turns night when mouse on right
    if (mouseX > width/2) { 
        redValue -= 3;
        blueValue -= 3;
        greenValue -= 3;

    } if (mouseX < width/2) {
        redValue += 3;
        blueValue += 3;
        greenValue += 3;
    }

    // moon cycle
    if (mouseX <= 100) {
        newMoon(35, 290, 30, 30);
    } if (100 < mouseX & mouseX <= 200) {
        crescentMoon(115, 110, 30, 30);
    } if (200 < mouseX & mouseX <= 300) {
        gibbousMoon(190, 50, 30, 30);
    } if (300 < mouseX) {
        fullMoon(300, 50, 30, 30);
    }

    // triangular building
    stroke(164, 96, 175);
    strokeWeight(1);
    fill(119, 127, 199);
    fill(230, 209, 242);
    quad(95, 600, 220, 170, 390, 170, 390, 600);

    // triangle building windows
    // im sorry i couldnt use a forLoop for these as well -- whenever i tried, the program wouldnt load

    triangleWindow(triangleWindowX,triangleWindowY);
    triangleWindow(triangleWindowX - 5, triangleWindowY + 20);
    triangleWindow(triangleWindowX - 10, triangleWindowY + 40);
    triangleWindow(triangleWindowX - 15, triangleWindowY + 60);
    triangleWindow(triangleWindowX - 20, triangleWindowY + 80);
    triangleWindow(triangleWindowX - 25, triangleWindowY + 100);
    triangleWindow(triangleWindowX - 30, triangleWindowY + 120);
    triangleWindow(triangleWindowX - 35, triangleWindowY + 140);
    triangleWindow(triangleWindowX - 40, triangleWindowY + 160);
    triangleWindow(triangleWindowX - 45, triangleWindowY + 180);
    triangleWindow(triangleWindowX - 50, triangleWindowY + 200);
    triangleWindow(triangleWindowX - 55, triangleWindowY + 220);
    triangleWindow(triangleWindowX - 60, triangleWindowY + 240);
    triangleWindow(triangleWindowX - 65, triangleWindowY + 260);

    // skyscraper
    fill(217, 196, 236);
    stroke(164, 96, 175);
    strokeWeight(1);

    rect(300, 100, 150, 500);
    rect(350, 45, 100, 55);
    triangle(350, 40, 450, 0, 530, 40);

    // skyscraper windows
    for(skyScraperX = 300; skyScraperX < 440; skyScraperX += 40) {
        for(skyScraperY = 100; skyScraperY < 650; skyScraperY +=40) {
            push(); 
            translate(20, 20);
            skyWindow();
            pop();
        }
    }

    // happymouth building
    stroke(164, 96, 175);
    strokeWeight(1);
    fill(204, 183, 229);
    rect(40, 430, 195, 170);
    rect(50, 380, 170, 40);

    textSize(25);
    fill(244, 244, 211);
    stroke(119, 127, 199);
    text("happyMouth()", 60, 405);

    // happymouth windows
    for(happyMouthX = 40; happyMouthX < 200; happyMouthX += 60) {
        for(happyMouthY = 420; happyMouthY < 600; happyMouthY += 30) {
            push(); 
            translate(15, 30);
            happyWindow();
            pop(); 
        }
    }

    // if mouse on happymouth sign, stars pulse AND crescent moon rotates
    if (dist(135, 390, mouseX, mouseY) < 30) {
        starrySky();
        starDiam += direction * speed;

        if (starDiam > 30) {
            direction = -direction;
            starDiam = 30;

        } if (starDiam < 0) {
            direction = -direction;
            starDiam = 0;  
        } 

    } else starrySky();

    // rooftop building
    fill(177, 156, 216);
    stroke(64, 96, 175);
    quad(185, 550, 270, 420, 430, 420, 410, 550);
    fill(190, 169, 223);
    rect(185, 550, 225, 50);
    quad(410, 600, 410, 550, 430, 420, 430, 600);

    // cat perch and cat
    fill(117, 80, 166);
    rect(0, 180, 150, 60);

    cat(130, 120, 10, 10)
    triangle(43, 69, 39, 78, 45, 78);
    triangle(74, 82, 64, 84, 72, 93);

    push();
    rotate(radians(catAngle*catDirection));
    push();
    scale(0.7);
    rotate(radians(-20));
    catTail(-50, 250, catAngle*catDirection); 
    pop();
    pop();

    // cat tail animation
    if (dist(60, 50, mouseX, mouseY) < 50) { 
        push();
        rotate(radians(catAngle*catDirection));
        push();
        scale(0.7);
        rotate(radians(-20));
        catTail(-50, 250, catAngle*catDirection); 
        pop();
        pop();
    
        catAngle -= 1;
        if (catAngle < -10) {
            catAngle = -10;
        }

        } if (dist(40, 120, mouseX, mouseY) < 50) {
            catAngle += 1;
            if (catAngle > 10){
                catAngle = 10;
            }
   
        }
    }

// my catalogue of functions 

function cat(x, y, w, h) { 
    fill(50);
    noStroke();
    ellipse(x/2, y/2, 50, 50);
    ellipse(x/2 + 17, y/2 + 5, 25, 28);
    ellipse(x/2 - 20, y/2 + 65, 70, 100);
    arc(x/2 - 20, y/2 + 120, 90, 70, radians(180), radians(0));

    triangle(x/2 + 5, y/2 - 15, x/2 + 20, y/2 - 15, x/2 + 13, y/2 - 35);
    triangle(x/2 - 5, y/2 - 15, x/2 - 20, y/2 - 15, x/2 - 13, y/2 - 35);

    bezier(x/2 - 20, y/2 + 5, x/2 - 30, y/2 + 30, x/2 - 30, y/2 + 20, x/2 - 40, y/2 + 25);
    bezier(x/2 + 10, y/2 + 20, x/2 + 5, y/2 + 30, x/2 + 5, y/2 + 40, x/2 + 13, y/2 + 55);
}

function catTail(x, y, catAngle) {
    noStroke();
    beginShape();
    curveVertex(x, y);
    curveVertex(x, y);
    curveVertex(x - 5, y + 40);
    curveVertex(x + 20, y + 100);
    curveVertex(x + 80, y + 140);
    curveVertex(x + 150, y + 150);
    curveVertex(x + 160, y + 140);
    curveVertex(x + 145, y + 120);
    curveVertex(x + 70, y + 100);
    curveVertex(x + 40, y + 50)
    curveVertex(x + 30, y);
    curveVertex(x + 30, y);
    endShape();
}

function triangleWindow(triangleWindowX, triangleWindowY) {
    fill(244, 244, 211);
    quad(triangleWindowX, triangleWindowY, triangleWindowX -5, triangleWindowY + 15, triangleWindowX + 200, triangleWindowY + 15, triangleWindowX + 200, triangleWindowY);
}

function happyWindow() {
    rect(happyMouthX, happyMouthY, 50, 15);
}

function skyWindow() {
    fill(244, 244, 211);
    rect(skyScraperX, skyScraperY, 20, 20);
} 

function newMoon(newX, newY, w, h) {
    outline = 55;
    inline = 50;

    stroke(255);
    fill(redValue, greenValue, blueValue);
    ellipse(newX, newY, outline, outline);
    ellipse(newX, newY, inline, inline);
}
   
function crescentMoon(crescentX, crescentY, w, h) {
    outline = 55;
    inline = 50;

    fill(255);
    ellipse(crescentX, crescentY, inline, inline);
    fill(redValue, greenValue, blueValue);
    noStroke();
    rect(115, 80, outline/2, outline)
    stroke(255);
    noFill();
    ellipse(crescentX, crescentY, outline, outline);
    fill(redValue, greenValue, blueValue);
    noStroke();
    ellipse(crescentX, crescentY, inline/2, inline);
}
   
function gibbousMoon(gibbousX, gibbousY, w, h) {
    outline = 55;
    inline = 50;

    noStroke();
    fill(255);
    ellipse(gibbousX, gibbousY, inline, inline);
    fill(redValue, greenValue, blueValue);
    noStroke();
    fill(redValue, greenValue, blueValue);
    rect(190, 24, outline/2, outline);
    stroke(255);
    noFill();//Outline
    ellipse(gibbousX, gibbousY, outline, outline);
    fill(255)
    arc(gibbousX, gibbousY, inline/2, inline, PI/2, -PI/2);
}

function fullMoon (fullX, fullY, w, h) {
    outline = 55;
    inline = 50;

    noFill();
    stroke(255);
    ellipse(fullX, fullY, outline, outline);
    fill(255);
    ellipse(fullX, fullY, inline, inline);
}

function starrySky() {
    noStroke();
    fill(253, 253, 150);

    circle(140, 30, starDiam/5);
    circle(275, 136, starDiam/7);
    circle(61, 303, starDiam/4);
    circle(167, 38, starDiam/6);
    circle(10, 34, starDiam/7);
    circle(163, 147, starDiam/3);
    circle(292, 121, starDiam/8);
    circle(154, 328, starDiam/5);
    circle(360, 15, starDiam/2);
    circle(19, 386, starDiam/6);
}


// ALL moon functions were made by brantschen at https://editor.p5js.org/brantschen/sketches/bGH-klhrY
// cat mechanics inspired by jiatong li