For this project, I wanted to make the time easy to tell. I did not want the viewer to have to analyze every detail to be able to understand what time it was. Therefore I tried to keep it simple by having the boxes represent the hour number, the sky background represent what time of the day it is, and the coins to represent how many minutes have passed. I also made the piranha plant rise with respect to every second. When a minute passes, the piranha plant starts back at the base of the pot. While doing this project, I had a lot of difficult making each detail of Mario. I did not want to just import an image of him, and wanted to challenge myself by creating him through layers of shapes. In my thought process, I wrote down a lot of color combinations for each part of Mario, but I mainly referred to an actual image/screenshot of a Mario game (attached below.) Also attached to this post is some progress photos I took as I worked on the project.
sketch
function setup() {
createCanvas(480, 480);
background(95, 201, 247);
}
function draw() {
var h = hour();
var s = second();
if (h < 18 & h > 6) {
background(95, 201, 247);
}
else {
background(20, 25, 68);
}
fill(220, 137, 20);
stroke(180, 107, 40);
ellipse(5, 360, 60, 100); line(0, 320, 23, 320); line(0, 330, 28, 330);
line(0, 340, 32, 340);
line(0, 350, 34, 350);
line(0, 360, 35, 360);
ellipse(100, 350, 90, 130);
line(100, 315, 138, 315);
line(100, 330, 142, 330);
line(100, 345, 144, 345);
line(90, 360, 140, 360);
line(90, 375, 140, 375);
ellipse(240, 345, 80, 90);
line(207, 320, 273, 320);
line(200, 345, 280, 345);
line(207, 370, 273, 370);
ellipse(275, 380, 60, 110);
line(245, 380, 305, 380);
line(240, 365, 303, 365);
line(242, 360, 302, 360);
line(244, 355, 301, 355);
line(246, 350, 300, 350);
line(246, 345, 297, 345);
line(255, 340, 294, 340);
ellipse(470, 370, 70, 85);
line(445, 340, 480, 340);
line(443, 345, 480, 345);
line(441, 350, 480, 350);
line(439, 355, 480, 355);
line(437, 360, 480, 360);
line(435, 365, 480, 365);
line(437, 370, 480, 370);
line(437, 375, 480, 375);
line(437, 380, 480, 380);
line(437, 385, 480, 385);
ellipse(400, 390, 100, 110);
line(350, 390, 450, 390);
line(352, 375, 449, 375);
line(361, 355, 445, 355);
fill(75, 165, 75);
noStroke();
rect(0, 400, 480, 80);
circle(10, 400, 80);
circle(8, 360, 30);
circle(75, 400, 40);
circle(105, 400, 30);
circle(135, 400, 70);
circle(113, 380, 30);
circle(135, 370, 40);
circle(160, 380, 30);
circle(165, 400, 40);
circle(195, 400, 50);
circle(260, 400, 80);
circle(245, 370, 40);
circle(260, 360, 40);
circle(275, 370, 40);
circle(315, 400, 30);
circle(350, 400, 60);
circle(400, 400, 40);
circle(450, 400, 60);
fill(250, 130); noStroke();
ellipse(40, 60, 100, 28);
ellipse(240, 190, 190, 40);
ellipse(350, 15, 130, 20);
ellipse(420, 100, 180, 30);
noStroke();
fill(250, 220, 103); rect(0, 445, 480, 35);
orangecircles(); fill(108, 220, 68);
rect(0, 430, 480, 17); greencircles();
fill(105, 67, 45); circle(33, 407, 32); circle(80, 415, 36); circle(89, 416, 39); quad(33, 422, 80, 432.5, 80, 400, 33, 400);
fill(31, 73, 180);
quad(60, 300, 130, 300, 80, 395, 25, 390); ellipse(53, 395, 61, 27); stroke(31, 73, 180); line(78, 370, 80, 395);
fill(244, 44, 42); noStroke();
quad(148, 235, 110, 205, 155, 140, 180, 150); fill(255); ellipse(162, 140, 60, 50);
fill(147, 42, 43); ellipse(158, 118, 140, 30);
fill(248, 217, 191); ellipse(125, 115, 95, 110);
ellipse(124, 148, 85, 90);
rect(70, 105, 50, 100);
fill(248, 217, 191); ellipse(175, 152, 30, 25); ellipse(160, 162, 45, 10);
fill(74, 45, 32); rect(60, 65, 35, 100);
ellipse(90, 155, 20, 25); circle(63, 158, 20);
circle(75, 160, 30);
triangle(135, 100, 130, 150, 100, 100); ellipse(122, 135, 15, 30);
ellipse(123, 140, 15, 23);
circle(128, 144, 14);
triangle(133, 145, 135, 100, 125, 125);
fill(224, 44, 42); noStroke();
rect(60, 75, 120, 40);
beginShape(); curveVertex(80, 98);
curveVertex(80, 98);
curveVertex(80, 58);
curveVertex(105, 43);
curveVertex(130, 42);
curveVertex(150, 41);
curveVertex(160, 39);
curveVertex(170, 38);
curveVertex(179, 60);
curveVertex(177, 70);
curveVertex(177, 70);
endShape();
line(175, 30, 180, 30);
noStroke();
ellipse(177, 73, 60, 75);
ellipse(67, 85, 50, 60);
fill(255); stroke(255);
ellipse(197, 80, 20, 40);
stroke(224, 44, 42);
strokeWeight(4);
line(195, 70, 193, 92);
line(195, 70, 198, 80);
line(198, 81, 201, 68);
line(201, 68, 203, 89);
fill(248, 217, 191);
stroke(208, 177, 151);
strokeWeight(1);
ellipse(100, 128, 30, 40);
stroke(238, 207, 181); ellipse(100, 128, 15, 20);
fill(255); ellipse(160.5, 135, 14, 30);
fill(105, 180, 255); noStroke();
ellipse(163, 139, 8, 20);
fill(0); ellipse(164, 141, 5, 10);
stroke(60, 50, 50);
strokeWeight(3);
noFill();
arc(162, 128, 10, 25, PI + QUARTER_PI, 0);
fill(204, 2, 3);
noStroke();
arc(195, 100, 80, 40, 0 + 0.5*QUARTER_PI, PI, CHORD);
triangle(155, 100, 195, 100, 227, 114);
fill(41, 93, 200); noStroke();
ellipse(100, 250, 100, 130);
circle(90, 210, 80, 50);
circle(100, 225, 80);
circle(80, 280, 70);
strokeWeight(10);
stroke(41, 93, 200);
line(55, 250, 51, 270);
line(80, 310, 100, 310);
line(55, 220, 55, 250);
fill(105, 67, 45); noStroke();
circle(164, 362, 32); circle(201, 350, 36); circle(207, 347, 39); quad(165, 377, 205, 366.5, 195, 340, 165, 350);
fill(41, 93, 200);
noStroke();
ellipse(125, 290, 120, 50);
circle(165, 280, 50); quad(140, 300, 190, 280, 201, 330, 150, 345); quad(200, 329, 203, 328, 150, 355, 150, 344);
beginShape(); curveVertex(150, 354);
curveVertex(150, 354);
curveVertex(160, 352);
curveVertex(180, 347);
curveVertex(195, 335);
curveVertex(200, 330);
curveVertex(202, 327);
curveVertex(202, 327);
endShape();
strokeWeight(10);
stroke(41, 93, 200);
line(165, 259, 145, 255);
stroke(31, 83, 170);
strokeWeight(3);
line(90, 200, 90, 270); line(118, 246, 149, 251); line(145, 313, 163, 288); line(172, 305, 180, 345); stroke(21, 63, 140); line(90, 317, 50, 407); noStroke();
fill(244, 44, 42);
noStroke();
ellipse(85, 200, 60, 50);
quad(45, 160, 95, 180, 90, 225, 45, 210); quad(45, 160, 0, 180, 0, 230, 45, 210);
fill(255, 253, 104);
ellipse(135, 220, 10, 20);
fill(35, 23, 17);
arc(145, 160, 20, 10, 0, PI + QUARTER_PI);
arc(158, 164, 15, 10, 0, PI + QUARTER_PI);
stroke(100);
noFill();
strokeWeight(2);
arc(158, 170, 20, 10, 0.5*PI, PI);
stroke(79, 145, 45);
strokeWeight(10);
quad(423, 380, 423, 340 - s, 427, 340 - s, 427, 380);
fill(215, 15, 15);
noStroke();
circle(425, 330 - s, 80); fill(255);
circle(423, 360 - s, 13); circle(395, 325 - s, 13);
circle(405, 345 - s, 15);
circle(435, 340 - s, 13);
circle(457, 325 - s, 10);
circle(455, 345 - s, 10);
if (h < 18 & h > 6) {
fill(95, 201, 247);
}
else {
fill(20, 25, 68);
}
triangle(425, 345 - s, 340, 280 - s, 510, 280 - s);
stroke(220); fill(245); strokeWeight(1);
triangle(418, 320 - s, 416, 340 - s, 408, 330 - s);
triangle(405, 310 - s, 403, 330 - s, 395, 320 - s);
triangle(434, 320 - s, 441, 330 - s, 431, 340 - s);
triangle(450, 310 - s, 457, 320 - s, 447, 330 - s);
fill(245);
noStroke();
circle(382, 315 - s, 15);
triangle(377, 320 - s, 425, 345 - s, 385, 308 - s); circle(468, 315 - s, 15);
triangle(463, 309 - s, 425, 345 - s, 473, 320 - s);
fill(75, 118, 68);
noStroke();
rect(400, 380, 50, 50); stroke(55, 98, 48);
strokeWeight(1);
rect(390, 370, 70, 20);
for (m = 0; m < minute(); m ++) {
row = Math.floor(m / 4);
coins(240 + (m - 4 * row) * 28, 19 + (29 * row));
}
for (h = 0; h < hour(); h ++) {
row1 = Math.floor(h / 6);
boxes(336 + (h - 6 * row1) * 24, 10 + (35 * row1));
}
fill(143, 121, 91);
noStroke();
ellipse(210, 429, 18, 11);
ellipse(210, 426, 16, 4);
fill(134, 80, 50); ellipse(202, 433, 13, 8);
ellipse(218, 433, 13, 8);
noStroke();
ellipse(210, 400, 30, 40);
circle(203, 410, 30);
circle(217, 410, 30);
rect(203, 410, 14, 15);
triangle(200, 385, 190, 403, 210, 400);
triangle(220, 385, 230, 403, 210, 400);
fill(255); stroke(230);
ellipse(204, 400, 6, 13);
ellipse(217, 400, 6, 13);
fill(0); ellipse(205, 399, 5, 8);
ellipse(216, 399, 5, 8);
fill(255); circle(205, 398, 1);
circle(216, 398, 1);
fill(255);
stroke(210);
strokeWeight(1);
triangle(197, 414, 199, 408, 202, 412); triangle(223, 414, 221, 408, 218, 412); stroke(0);
strokeWeight(2);
noFill();
arc(210, 415, 25, 4, PI, 0);
stroke(0);
strokeWeight(2);
noFill();
beginShape();
curveVertex(193, 384)
curveVertex(193, 384);
curveVertex(195, 383);
curveVertex(197, 383);
curveVertex(199, 384);
curveVertex(202, 387);
curveVertex(203, 389);
curveVertex(205, 392);
curveVertex(207, 394);
curveVertex(207, 394);
endShape();
beginShape();
curveVertex(213, 394);
curveVertex(213, 394);
curveVertex(215, 392);
curveVertex(217, 389);
curveVertex(219, 387);
curveVertex(221, 384);
curveVertex(223, 383);
curveVertex(225, 383);
curveVertex(228, 384);
curveVertex(228, 384);
endShape();
}
function coins(x, y) {
fill(242, 220, 95); stroke(222, 200, 75); ellipse(x, y, 13, 25); fill(222, 200, 75);
rect(x - 1, y - 10, 3, 21);}
function boxes(x, y) {
fill(151, 88, 53); strokeWeight(2); stroke(0);
square(x, y, 24); strokeWeight(1); line(x, y + 8, x + 24, y + 8); line(x, y + 16, x + 24, y + 16);
line(x + 12, y, x + 12, y + 8);
line(x + 8, y + 8, x + 8, y + 16);
line(x + 16, y + 8, x + 16, y +16);
line(x + 12, y + 16, x + 12, y + 24);
}
function greencircles() { for (var a = 0; a < 485; a += 20) {
fill(108, 220, 68); circle(a, 445, 20);
}
}
function orangecircles() { for (var b = 0; b < 485; b += 25) {
fill(238, 117, 40); ellipse(b, 463, 35, 17);
fill(250, 220, 103); ellipse(b, 457, 35, 17);
}
}