xxxxxxxxxx
405
let song;
let started = false;
let Logo1;
let Logo2;
function preload() {
song = loadSound('The Black Keys !Never Gonna Give You Up! Remastered 10th Anniversary Edition [Official Audio].mp3');
Logo1 = loadFont('KingthingsBloone-3926.ttf');
Logo2 = loadFont('aAttackGraffiti.ttf');
}
let BrickColors = ["#533B2B", "#473312", "#382607", "#463922"];
function setup() {
createCanvas(640, 360);
}
function mouseClicked() {
if (mouseX > 530 && mouseX < 550 && mouseY > 170 && mouseY < 200) {
if (!started) {
song.loop();
song.setVolume(0.1);
started = true;
} else {
song.pause();
started = false;
}
}
}
function draw() {
background(180);
randomSeed(1);
drawPavement();
for (let i = 0; i < 12; i++) {
for (let j = 0; j < 7; j++) {
let ox1 = -1;
let oy1 = 10;
let x1 = ox1 + i * 60;
let y1 = oy1 + j * 40;
drawBrickWall(x1, y1);
}
}
for (let h = 0; h < 12; h++) {
for (let k = 0; k < 9; k++) {
let ox2 = -31;
let oy2 = -50;
let x2 = ox2 + h * 60;
let y2 = oy2 + k * 40;
drawBrickWall(x2, y2);
}
}
push();
translate(240, 0);
drawWindow();
pop();
drawTrashCan();
push();
translate(140, 10);
drawTrashCan();
pop();
drawMrCatTail();
drawMrCatBody();
if (!started) {
drawMrCatHead();
} else {
drawMusicNotes();
drawMrCatVibingHead();
}
textFont(Logo1);
strokeWeight(2.5);
stroke(229, 224, 200);
fill("teal");
textSize(55);
textAlign(CENTER);
text("Mr. Cat,", 255, 85);
textFont(Logo2);
fill("mediumpurple");
textSize(35);
text("The Dumpster Cat!", 255, 140);
}
function drawPavement() {
strokeWeight(2);
stroke(130);
line(120, 280, 105, 400);
line(300, 280, 290, 400);
line(480, 280, 475, 400);
}
function drawBrickWall(x, y) {
push();
stroke(229, 224, 200);
fill(random(BrickColors));
rect(x, y, 60, 20);
pop();
}
function drawWindow() {
push();
rectMode(CORNER);
fill(200, 242, 250);
rect(270, 30, 200, 180);
// Speaker
fill(0);
strokeWeight(0);
stroke(0);
rect(290, 170, 20, 30);
fill(100);
circle(300, 185, 10);
circle(305, 175, 3);
// Hanging Plant: Back string
strokeCap(SQUARE);
stroke("tan");
strokeWeight(2);
line(380, 35, 381.5, 100);
// Hanging Plant: Pot and Leaves
fill("green");
stroke("green");
ellipse(360, 93, 10, 5);
line(365, 93, 370, 103);
// accompanying ellipse is below
line(365, 103, 375, 93);
line(374, 93, 380, 103);
ellipse(369, 87, 10, 5);
line(374, 87, 379, 100);
// accompanying ellipse is below
line(396, 105, 385, 90);
line(386, 90, 380, 103);
ellipse(388, 85, 10, 5);
line(383, 85, 379, 100);
ellipse(393, 93, 10, 5);
line(398, 93, 400, 103);
fill("saddlebrown");
noStroke();
rect(360, 100, 45, 30);
fill("green");
stroke("green");
strokeWeight(2);
ellipse(370, 103, 6, 11);
ellipse(390, 105, 6, 11);
ellipse(400, 102, 5, 10);
// Hanging Plant: Front strings
stroke("tan");
line(361, 100, 380, 35);
line(380, 35, 402, 100);
// Flower
noStroke();
fill("green");
rect(366.5, 160, 2, 20);
fill("brown");
rect(360, 175, 15, 20);
rect(357.5, 175, 20, 5);
fill("red");
circle(365, 157.5, 6);
circle(370, 162.5, 6);
circle(365, 162.5, 6);
circle(370, 157.5, 6);
fill("yellow");
circle(367.5, 160, 5);
// Window glaze
strokeWeight(10);
stroke(255);
fill(109, 162, 206, 100);
rect(270, 30, 200, 180);
line(270, 120, 400, 120);
// Other side of the window/shadows
strokeWeight(10);
stroke(200);
line(275, 130, 400, 130);
line(275, 200, 400, 200);
strokeWeight(2);
rect(340, 113, 10, 1);
// Seams
stroke(230);
strokeWeight(1);
line(275, 205, 265, 215);
line(265, 25, 275, 35);
// Glass strokes
line(300, 48, 290, 60);
line(305, 50, 295, 62);
pop();
}
function drawMusicNotes() {
stroke(0);
strokeWeight(1);
push();
frequency = 1.2;
move = (cos((millis() / 150) * frequency)) / 400;
rotate(move);
fill(0);
circle(547.5, 159, 2.5);
line(550, 150, 549, 159.5);
circle(559.5, 153.5, 2.5);
line(560, 155, 565, 145);
pop();
}
function drawTrashCan() {
rectMode(CENTER);
noStroke();
fill(100);
rect(100, 260, 100, 150, 0, 0, 5);
fill(70);
rect(100, 190, 120, 15, 2);
rect(100, 180, 20, 7, 2);
strokeWeight(3);
stroke(140);
line(72, 210, 74, 320);
line(102, 210, 102, 320);
line(132, 210, 130, 320);
stroke(70);
line(70, 210, 72, 320);
line(100, 210, 100, 320);
line(130, 210, 128, 320);
}
function drawMrCatBody() {
noStroke();
fill("#F0D266");
beginShape();
curveVertex(398, 250);
curveVertex(394, 275);
curveVertex(395, 295);
curveVertex(407, 295);
curveVertex(414, 299);
curveVertex(423, 299);
curveVertex(430, 295);
curveVertex(433, 290);
curveVertex(434, 285);
curveVertex(433.5, 280);
curveVertex(432, 275);
curveVertex(429, 270);
curveVertex(423, 260);
curveVertex(420, 255);
curveVertex(415, 240);
endShape(CLOSE);
ellipse(396, 294, 12, 9);
ellipse(405, 298, 12, 7);
}
function drawMrCatTail() {
noStroke();
fill("#F2D777");
beginShape();
curveVertex(434, 285);
curveVertex(437, 287);
curveVertex(440, 290);
curveVertex(441, 293);
curveVertex(440.5, 296);
curveVertex(439, 299);
curveVertex(437, 302);
curveVertex(434, 306);
curveVertex(431, 309);
curveVertex(428, 311);
curveVertex(425, 312);
curveVertex(423, 312);
curveVertex(422, 311.5);
curveVertex(421, 311);
curveVertex(420, 308);
curveVertex(421, 305);
curveVertex(423, 303);
curveVertex(426, 300);
curveVertex(428, 297);
curveVertex(430, 294);
endShape(CLOSE);
}
function drawMrCatHead() {
noStroke();
// Head/Ears
fill("#F2D777");
ellipse(407, 235, 40, 35);
triangle(388, 230, 392, 210, 404, 230);
triangle(407, 230, 422, 210, 426, 230);
// Eyes
fill(255);
circle(399, 230, 8);
circle(415, 230, 8);
let outputA = 397;
let outputB = 401;
let outputC = 413;
let outputD = 417;
let outputE = 228;
let outputF = 232;
let x1 = map(mouseX, 0, width, outputA, outputB);
let x2 = map(mouseX, 0, width, outputC, outputD);
let y = map(mouseY, 0, height, outputE, outputF);
// Eye balls
fill("blue");
noStroke();
circle(x1, y, 4.5);
circle(x2, y, 4.5);
// Nose
fill("magenta");
triangle(407, 239, 405, 236, 409, 236);
// Whiskers
strokeWeight(1);
stroke(60);
line(392, 237, 382, 235);
line(392, 239, 382, 238);
line(432, 235, 422, 237);
line(432, 238, 422, 239);
// Smile
line(405, 243, 409, 243);
}
function drawMrCatVibingHead() {
noStroke();
push();
frequency = 1.2;
move = (sin((millis() / 150) * frequency)) / 400;
rotate(move);
// Head/Ears
fill("#F2D777");
ellipse(407, 235, 40, 35);
triangle(388, 230, 392, 210, 404, 230);
triangle(407, 230, 422, 210, 426, 230);
// Eyes
push();
strokeWeight(1);
stroke(60);
translate(-7, -10)
curve(400, 238, 405, 243, 409, 243, 412, 238);
pop();
push();
strokeWeight(1);
stroke(60);
translate(7, -10);
curve(400, 238, 405, 243, 409, 243, 412, 238);
pop();
// Nose
fill("magenta");
triangle(407, 239, 405, 236, 409, 236);
// Whiskers
strokeWeight(1);
stroke(60);
line(392, 237, 382, 235);
line(392, 239, 382, 238);
line(432, 235, 422, 237);
line(432, 238, 422, 239);
// Smile
curve(400, 238, 405, 243, 409, 243, 412, 238);
pop();
}