Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup(){
size(400,400);
 
}

void draw(){
//Background
fill(23,44,64);
stroke(23,44,64);
rect(0,0, 400,400); 

//Ground
fill(171,255,102);
noStroke();
rect(0,340,60,30);
rect(40,390,80,10);
rect(120,370,30,20);
rect(170,370,30,20);
rect(300,340,40,30);
rect(270,370,20,20);
rect(330,380,30,20);
rect(190,390,70,10);

fill(43,64,25);
rect(0,370,90,20);
rect(200,340,80,20);
rect(150,370,20,10);
rect(380,370,20,30);
rect(120,390,30,10);
rect(240,390,50,10);
rect(90,340,60,20);

fill(98, 229, 72);
rect(60,340,30,30);
rect(90,380,30,10);
rect(0,390,40,10);
rect(150,380,20,20);
rect(290,380,20,20);
rect(340,340,60,30);
rect(200,370,50,20);
rect(120,360,30,10);
rect(150,340,50,30);
rect(280,340,20,20);

fill(54,127,40);
rect(90,360,30,20);
rect(170,390,20,10);
rect(200,360,100,10);
rect(290,370,90,10);

fill(30,229,55);
rect(250,370,20,20);
rect(310,380,20,20);
rect(360,380,20,20);
//END OF BACKGROUND

//FALL LINES
stroke(200,200,200);
line(180+((mouseX-200)/2),50+((mouseY-200)/2), 180+((mouseX-200)/2),130+((mouseY-200)/2));
line(200+((mouseX-200)/2),90+((mouseY-200)/2),200+((mouseX-200)/2),200+((mouseY-200)/2));
line(230+((mouseX-200)/2),90+((mouseY-200)/2),230+((mouseX-200)/2),200+((mouseY-200)/2));
line(290+((mouseX-200)/2),160+((mouseY-200)/2), 290+((mouseX-200)/2), 120+((mouseY-200)/2));

//Hat kid cape
fill(222,190,0);
triangle(215+((mouseX-200)/2),230+((mouseY-200)/2),255+((mouseX-200)/2),150+((mouseY-200)/2),175+((mouseX-200)/2),150+((mouseY-200)/2));

//Umbrella
stroke(64,40,18);
strokeWeight(3);
line(180+((mouseX-200)/2),200+((mouseY-200)/2), 180+((mouseX-200)/2),130+((mouseY-200)/2));
ellipse(180+((mouseX-200)/2),130+((mouseY-200)/2),5,5);
noStroke();
fill(62,189,229);
triangle(180+((mouseX-200)/2),110+((mouseY-200)/2),190+((mouseX-200)/2),160+((mouseY-200)/2),170+((mouseX-200)/2),160+((mouseY-200)/2));

//body
fill(255,229,0);
rect(200+((mouseX-200)/2),200+((mouseY-200)/2),30,10);
fill(101,46,191);
rect(200+((mouseX-200)/2),210+((mouseY-200)/2),30,50);
triangle(180+((mouseX-200)/2),180+((mouseY-200)/2),200+((mouseX-200)/2),210+((mouseY-200)/2),200+((mouseX-200)/2),230+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),210+((mouseY-200)/2),230+((mouseX-200)/2),230+((mouseY-200)/2),240+((mouseX-200)/2),260+((mouseY-200)/2));
fill(229,171,98);
triangle(200+((mouseX-200)/2),260+((mouseY-200)/2),210+((mouseX-200)/2),260+((mouseY-200)/2),200+((mouseX-200)/2),290+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),260+((mouseY-200)/2),220+((mouseX-200)/2),260+((mouseY-200)/2),230+((mouseX-200)/2),290+((mouseY-200)/2));
fill(64,47,27);
triangle(205+((mouseX-200)/2),275+((mouseY-200)/2),200+((mouseX-200)/2),275+((mouseY-200)/2),200+((mouseX-200)/2),290+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),275+((mouseY-200)/2),225+((mouseX-200)/2),275+((mouseY-200)/2),230+((mouseX-200)/2),290+((mouseY-200)/2));

//head
fill(255,227,153);
ellipse(230+((mouseX-200)/2),190+((mouseY-200)/2),40,40);
ellipse(180+((mouseX-200)/2),180+((mouseY-200)/2),3,3);
ellipse(240+((mouseX-200)/2),260+((mouseY-200)/2),3,3);

//hat
fill(101,46,191);
stroke(101,46,191);
strokeWeight(1);
triangle(210+((mouseX-200)/2),160+((mouseY-200)/2),260+((mouseX-200)/2),210+((mouseY-200)/2),270+((mouseX-200)/2),200+((mouseY-200)/2));
triangle(210+((mouseX-200)/2),160+((mouseY-200)/2),270+((mouseX-200)/2),200+((mouseY-200)/2),220+((mouseX-200)/2),150+((mouseY-200)/2));//purple rim
triangle(240+((mouseX-200)/2),150+((mouseY-200)/2),270+((mouseX-200)/2),180+((mouseY-200)/2),290+((mouseX-200)/2),160+((mouseY-200)/2));
triangle(240+((mouseX-200)/2),150+((mouseY-200)/2),290+((mouseX-200)/2),160+((mouseY-200)/2),260+((mouseX-200)/2),130+((mouseY-200)/2));//Purple top
fill(255,229,0);
stroke(255,229,0);
triangle(230+((mouseX-200)/2),160+((mouseY-200)/2),260+((mouseX-200)/2),190+((mouseY-200)/2),270+((mouseX-200)/2),180+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),160+((mouseY-200)/2),270+((mouseX-200)/2),180+((mouseY-200)/2),240+((mouseX-200)/2),150+((mouseY-200)/2));
noStroke();

}


void mouseDragged(){
//Background
fill(0,134,255);
stroke(0,134,225);
rect(0,0, 400,400); 

//Ground
fill(171,255,102);
noStroke();
rect(0,340,60,30);
rect(40,390,80,10);
rect(120,370,30,20);
rect(170,370,30,20);
rect(300,340,40,30);
rect(270,370,20,20);
rect(330,380,30,20);
rect(190,390,70,10);

fill(43,64,25);
rect(0,370,90,20);
rect(200,340,80,20);
rect(150,370,20,10);
rect(380,370,20,30);
rect(120,390,30,10);
rect(240,390,50,10);
rect(90,340,60,20);

fill(98, 229, 72);
rect(60,340,30,30);
rect(90,380,30,10);
rect(0,390,40,10);
rect(150,380,20,20);
rect(290,380,20,20);
rect(340,340,60,30);
rect(200,370,50,20);
rect(120,360,30,10);
rect(150,340,50,30);
rect(280,340,20,20);

fill(54,127,40);
rect(90,360,30,20);
rect(170,390,20,10);
rect(200,360,100,10);
rect(290,370,90,10);

fill(30,229,55);
rect(250,370,20,20);
rect(310,380,20,20);
rect(360,380,20,20);
//END OF BACKGROUND

//FALL LINES

//Hat kid cape
fill(222,190,0);
triangle(200+((mouseX-200)/2),200+((mouseY-200)/2),170+((mouseX-200)/2),220+((mouseY-200)/2),200+((mouseX-200)/2),230+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),200+((mouseY-200)/2),260+((mouseX-200)/2),220+((mouseY-200)/2),230+((mouseX-200)/2),230+((mouseY-200)/2));

//Umbrella
stroke(64,40,18);
strokeWeight(3);
line(180+((mouseX-200)/2),200+((mouseY-200)/2), 180+((mouseX-200)/2),130+((mouseY-200)/2));
ellipse(180+((mouseX-200)/2),130+((mouseY-200)/2),5,5);
noStroke();
fill(62,189,229);
triangle(180+((mouseX-200)/2),110+((mouseY-200)/2),130+((mouseX-200)/2),150+((mouseY-200)/2),230+((mouseX-200)/2),150+((mouseY-200)/2));
fill(255,229,0);
ellipse(180+((mouseX-200)/2),120+((mouseY-200)/2),5,5);
ellipse(160+((mouseX-200)/2),140+((mouseY-200)/2),10,10);
ellipse(195+((mouseX-200)/2),140+((mouseY-200)/2),10,10);

//body
fill(255,229,0);
rect(200+((mouseX-200)/2),200+((mouseY-200)/2),30,10);
fill(101,46,191);
rect(200+((mouseX-200)/2),210+((mouseY-200)/2),30,50);
triangle(180+((mouseX-200)/2),180+((mouseY-200)/2),200+((mouseX-200)/2),210+((mouseY-200)/2),200+((mouseX-200)/2),230+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),210+((mouseY-200)/2),230+((mouseX-200)/2),230+((mouseY-200)/2),240+((mouseX-200)/2),260+((mouseY-200)/2));
fill(229,171,98);
triangle(200+((mouseX-200)/2),260+((mouseY-200)/2),210+((mouseX-200)/2),260+((mouseY-200)/2),200+((mouseX-200)/2),290+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),260+((mouseY-200)/2),220+((mouseX-200)/2),260+((mouseY-200)/2),230+((mouseX-200)/2),290+((mouseY-200)/2));
fill(64,47,27);
triangle(205+((mouseX-200)/2),275+((mouseY-200)/2),200+((mouseX-200)/2),275+((mouseY-200)/2),200+((mouseX-200)/2),290+((mouseY-200)/2));
triangle(230+((mouseX-200)/2),275+((mouseY-200)/2),225+((mouseX-200)/2),275+((mouseY-200)/2),230+((mouseX-200)/2),290+((mouseY-200)/2));

//head
fill(255,227,153);
ellipse(215+((mouseX-200)/2),180+((mouseY-200)/2),40,40);
ellipse(180+((mouseX-200)/2),180+((mouseY-200)/2),3,3);
ellipse(240+((mouseX-200)/2),260+((mouseY-200)/2),3,3);

//hat
noStroke();
fill(101,46,191);
rect(190+((mouseX-200)/2),165+((mouseY-200)/2),50,10);
rect(195+((mouseX-200)/2),130+((mouseY-200)/2),40,25);
fill(255,229,0);
rect(195+((mouseX-200)/2),155+((mouseY-200)/2),40,10);
}