This is my project! Try making the sky change from sundown to midnight, see the moon change phases, and the stars glitter! You can try to pet the cat as well <3
// 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