Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*Skull Kid & the Moon
    The eyes will follow your mouse and the stars will twinkle
    when mouse is pressed.*/

void setup() {
  size(400,400); //setting canvas size
  smooth(); //makes the lines smooth
  frameRate(30); //sets framerate to 30 per sec
}

void draw() {
background(57,59,72); //setting bg colour
ellipseMode(CENTER); //setting ellipse mode

//gradient background
noStroke();
fill(45,46,56);
rect(0,0,400,320);
fill(26,27,34);
rect(0,0,400,240);
fill(14,15,18);
rect(0,0,400,160);
fill(0);
rect(0,0,400,80);

///the base colour and shape of the moon
fill(100,84,76);
stroke(31,30,19);
ellipse(200,100,320,320);

//the moon's eyes
fill(0);
stroke(0);
quad(100,20,180,80,140,120,60,100);
quad(220,80,300,20,340,100,260,120);
line(110,10,190,70);
line(210,70,290,10);

//the moon's eyeballs - they follow the mouse
fill(139,33,11); //orange ring
noStroke();
ellipse(120+mouseX/15,80+mouseY/20,40,40);
ellipse(260+mouseX/15,80+mouseY/20,40,40);
fill(250,197,39); //yellow ring
ellipse(120+mouseX/15,80+mouseY/20,20,20);
ellipse(260+mouseX/15,80+mouseY/20,20,20);
//pupil
stroke(0);
strokeWeight(5);
point(120+mouseX/15,80+mouseY/20);
point(260+mouseX/15,80+mouseY/20);

//to prevent eyes from moving out of sockets
fill(100,84,76);
noStroke();
quad(140,120,140,140,60,140,60,100);
quad(180,80,220,80,260,120,140,120);
quad(260,120,260,140,340,140,340,100);

//nose and bottom eyelids
fill(65,51,45);
stroke(0);
strokeWeight(1);
triangle(60,100,160,100,140,120);
triangle(240,100,340,100,260,120);
triangle(160,140,200,120,240,140);

//moon's mouth
fill(0);
noStroke();
rect(120,160,160,60);
triangle(120,160,120,220,100,200);
triangle(280,160,280,220,300,200);
//moon's teeth
fill(181,162,147);
stroke(0);
rect(120,160,40,20);
rect(160,160,40,20);
rect(200,160,40,20);
rect(240,160,40,20);
rect(120,200,40,20);
rect(160,200,40,20);
rect(200,200,40,20);
rect(240,200,40,20);
//the gums
fill(100,61,51);
triangle(120,160,200,170,280,160);
triangle(120,220,200,210,280,220);

//rooftop spire
fill(21,20,23);
quad(160,370,240,370,250,410,150,410);
ellipse(200,350,80,60);

//skullkid silhouette
fill(0);
stroke(0);
triangle(220,320,200,330,190,320);
triangle(200,310,200,320,190,320);
triangle(200,310,200,290,210,290);
quad(200,290,210,270,220,280,210,290);
triangle(210,270,200,290,190,280);
quad(210,270,210,260,180,260,190,280);
quad(190,280,180,260,170,260,180,280);
quad(180,280,170,260,160,270,170,290);
triangle(170,270,150,280,150,290);
triangle(150,290,150,270,140,270);
triangle(150,270,150,260,140,270);
rect(180,240,40,20);
triangle(170,240,200,230,240,240);
triangle(190,220,210,220,200,230);
triangle(220,240,220,250,240,240);
triangle(220,250,240,270,220,260);
triangle(240,270,260,260,250,280);
rect(170,240,20,20);
triangle(170,240,170,250,150,240);
triangle(170,240,160,240,160,230);
triangle(160,240,160,230,180,220);
triangle(180,210,180,220,160,210);

//stars left side
stroke(225,247,153);
line(20,10,20,30);
line(10,20,30,20);
line(10,110,10,130);
line(0,120,20,120);
line(20,190,20,210);
line(10,200,30,200);
line(80,230,80,250);
line(70,240,90,240);
line(40,290,40,310);
line(30,300,50,300);
//stars right side
line(360,0,360,20);
line(350,10,370,10);
line(380,70,380,90);
line(370,80,390,80);
line(360,190,360,210);
line(350,200,370,200);
line(320,250,320,270);
line(310,260,330,260);
line(380,290,380,310);
line(370,300,390,300);
}

//the stars twinkle when the mouse is pressed
void mousePressed() {
//left side
line(10,10,30,30);
line(30,10,10,30);
line(0,110,20,130);
line(20,110,0,130);
line(10,190,30,210);
line(30,190,10,210);
line(90,230,70,250);
line(70,230,90,250);
line(30,290,50,310);
line(50,290,30,310);
//right side
line(370,0,350,20);
line(350,0,370,20);
line(370,70,390,90);
line(390,70,370,90);
line(350,190,370,210);
line(370,190,350,210);
line(310,250,330,270);
line(330,250,310,270);
line(370,290,390,310);
line(390,290,370,310);
}