I hope they have good ventilation down here!
Javascript Code
// City beneath the surface
ctx.fillStyle = "#000000"; // Setting background color to black
ctx.fillRect(0, 0, 512, 512); // Drawing a black rectangle to fill the canvas
// Creating buildings
ctx.fillStyle = "#333333"; // Setting building color to dark gray
ctx.fillRect(100, 150, 50, 200); // Drawing a tall building
ctx.fillRect(200, 100, 100, 250); // Drawing a wider building
ctx.fillRect(350, 200, 75, 150); // Drawing a shorter building
ctx.fillRect(430, 50, 50, 300); // Drawing a skinny building
// Creating windows
ctx.fillStyle = "#ffffff"; // Setting window color to white
for (let i = 115; i < 150; i += 25) {
for (let j = 165; j < 345; j += 25) {
ctx.fillRect(j, i, 10, 10); // Drawing windows on the tall building
}
}
for (let i = 120; i < 300; i += 25) {
for (let j = 215; j < 285; j += 25) {
ctx.fillRect(j, i, 10, 10); // Drawing windows on the wider building
}
}
for (let i = 225; i < 325; i += 25) {
for (let j = 375; j < 425; j += 25) {
ctx.fillRect(j, i, 10, 10); // Drawing windows on the shorter building
}
}
for (let i = 75; i < 325; i += 25) {
for (let j = 445; j < 495; j += 25) {
ctx.fillRect(j, i, 10, 10); // Drawing windows on the skinny building
}
}
// Creating streetlights
ctx.fillStyle = "#ffcc33"; // Setting streetlight color to yellow
ctx.fillRect(120, 380, 10, 50); // Drawing the first streetlight
ctx.fillRect(280, 380, 10, 50); // Drawing the second streetlight
ctx.fillRect(385, 280, 10, 50); // Drawing the third streetlight
ctx.fillRect(450, 380, 10, 50); // Drawing the fourth streetlight
// Creating stairs
ctx.fillStyle = "#666666"; // Setting stair color to dark gray
ctx.fillRect(50, 450, 50, 10); // Drawing the first stair
ctx.fillRect(40, 460, 70, 10); // Drawing the second stair
ctx.fillRect(30, 470, 90, 10); // Drawing the third stair
// Creating the entrance
ctx.fillStyle = "#cc9966"; // Setting entrance color to brown
ctx.fillRect(250, 400, 50, 50); // Drawing the entrance
// Creating the sign
ctx.fillStyle = "#ffffff"; // Setting sign color to white
ctx.fillRect(265, 370, 20, 20); // Drawing the sign
ctx.fillStyle = "#000000"; // Setting text color to black
ctx.font = "12px Arial"; // Setting font size and type
ctx.fillText("Entrance", 255, 385); // Adding text to the sign
// Adding shadows
ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; // Setting shadow color to transparent black
ctx.fillRect(110, 360, 40, 10); // Adding a shadow to the first streetlight
ctx.fillRect(270, 360, 40, 10); // Adding a shadow to the second streetlight
ctx.fillRect(375, 260, 40, 10); // Adding a shadow to the third streetlight
ctx.fillRect(440, 360, 40, 10); // Adding a shadow to the fourth streetlight
ctx.fillRect(110, 460, 80, 10); // Adding a shadow to the stairs
ctx.fillRect(240, 410, 70, 10); // Adding a shadow to the entrance
// Adding highlights
ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // Setting highlight color to transparent white
ctx.fillRect(110, 350, 40, 10); // Adding a highlight to the first streetlight
ctx.fillRect(270, 350, 40, 10); // Adding a highlight to the second streetlight
ctx.fillRect(375, 250, 40, 10); // Adding a highlight to the third streetlight
ctx.fillRect(440, 350, 40, 10); // Adding a highlight to the fourth streetlight
ctx.fillRect(120, 440, 70, 10); // Adding a highlight to the stairs
ctx.fillRect(240, 400, 70, 10); // Adding a highlight to the entrance
// Adding some flora
ctx.fillStyle = "#33cc33"; // Setting flower color to green
ctx.beginPath(); // Starting a new path
ctx.arc(80, 170, 10, 0, 2 * Math.PI); // Drawing a circle for the flower
ctx.fill(); // Filling in the circle
ctx.fillStyle = "#ffccff"; // Setting petal color to pink
ctx.beginPath(); // Starting a new path
ctx.arc(80, 170, 5, 0, 2 * Math.PI); // Drawing a circle for the petal
ctx.fill(); // Filling in the circle
ctx.rotate(45 * Math.PI / 180); // Rotating the canvas by 45 degrees
ctx.beginPath(); // Starting a new path
ctx.arc(140, -10, 10, 0, 2 * Math.PI); // Drawing a circle for the flower
ctx.fill(); // Filling in the circle
ctx.fillStyle = "#ffff66"; // Setting petal color to yellow
ctx.beginPath(); // Starting a new path
ctx.arc(140, -10, 5, 0, 2 * Math.PI); // Drawing a circle for the petal
ctx.fill(); // Filling in the circle
// Adding a happy mole person
ctx.fillStyle = "#996633"; // Setting mole person color to brown
ctx.beginPath(); // Starting a new path
ctx.arc(350, 450, 30, 0, 2 * Math.PI); // Drawing a circle for the body
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(350, 420, 20, 0, Math.PI); // Drawing a half circle for the head
ctx.fill(); // Filling in the half circle
ctx.beginPath(); // Starting a new path
ctx.arc(340, 410, 5, 0, 2 * Math.PI); // Drawing a circle for the left eye
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(360, 410, 5, 0, 2 * Math.PI); // Drawing a circle for the right eye
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(350, 430, 10, 0, Math.PI, true); // Drawing a half circle for the mouth
ctx.stroke(); // Drawing the half circle
// Adding a happy bird person
ctx.fillStyle = "#0099cc"; // Setting bird person color to blue
ctx.beginPath(); // Starting a new path
ctx.arc(450, 120, 30, 0, 2 * Math.PI); // Drawing a circle for the body
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(450, 90, 20, 0, Math.PI); // Drawing a half circle for the head
ctx.fill(); // Filling in the half circle
ctx.beginPath(); // Starting a new path
ctx.arc(440, 80, 5, 0, 2 * Math.PI); // Drawing a circle for the left eye
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(460, 80, 5, 0, 2 * Math.PI); // Drawing a circle for the right eye
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.moveTo(455, 95); // Moving to the starting point of the beak
ctx.lineTo(465, 100); // Drawing a line for the beak
ctx.lineTo(455, 105); // Drawing another line for the beak
ctx.closePath(); // Closing the path
ctx.fill(); // Filling in the path
// Adding a happy worm person
ctx.fillStyle = "#ff99ff"; // Setting worm person color to pink
ctx.beginPath(); // Starting a new path
ctx.arc(200, 400, 15, 0, 2 * Math.PI); // Drawing a circle for the body
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(200, 390, 10, 0, Math.PI); // Drawing a half circle for the head
ctx.fill(); // Filling in the half circle
ctx.beginPath(); // Starting a new path
ctx.arc(195, 385, 3, 0, 2 * Math.PI); // Drawing a circle for the left eye
ctx.fill(); // Filling in the circle
ctx.beginPath(); // Starting a new path
ctx.arc(205, 385, 3, 0, 2 * Math.PI); // Drawing a circle for the right eye
ctx.fill(); // Filling in the circle
// Adding a happy comment
// I hope they have good ventilation down here!
AI
Model: gpt-3.5-turbo-0301
Time: 89 seconds
Prompt Tokens: 182
Completion Tokens: 2103
Total Token Cost: 2285
balloon party
beautiful beach
cute puppy dog
happy cat
house