Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
//Title: Hatty's Gems
//Creator: Richard Baldock
//Sheridan ID: 991358231
//Description: Interactive drawing using the character "Hatty" from the puzzle game "Battleblock theater" will follow your mouse as you move it around the screen, and cries as you take his gems away by clicking the mouse. 
//Instructions: Left click the mouse to steal Hatty's gems.
//              Move the mouse around the screen to get Hatty's eyes to follow.

void setup(){
  size(400,400);

}

void draw(){ 
    background(100,0,0);

//Draw Body  
  stroke(0);
fill(165,65,0);
rect(140,300,120,100);

//Draw Ascot
fill(250,0,0);
triangle(140,280,260,280,200,340);

//Draw Shirt
fill(250);
triangle(140,280,170,280,170,310);
triangle(260,280,230,280,230,310);
triangle(190,330,210,330,200,340);

// Draw Face
fill(255);
rect(80,100,240,200);
 
//Draw Hat
fill(0);
rect(140,90,120,10);
rect(150,0,100,70);
  fill(165,75,0);
rect(140,70,120,20);
  fill(250,250,0);
rect(180,70,40,20);
  fill(165,75,0);
rect(185,75,30,10);

//Draw Eyes
fill(0);
ellipse(110,230,20,20); 
ellipse(290,230,20,20);

//Draw Blazer & Mouth, this is where the lapels are drawn on his jacket.
fill(0);
line(80,260,320,260);
line(140,300,180,340);
line(180,340,170,350);
line(170,350,200,380);
line(200,340,200,400);
line(260,300,220,340);
line(220,340,230,350);
line(230,350,200,380);

//Draw Gem 1
fill(0,250,0);
rect(20,40,40,10);
triangle(20,50,60,50,40,70);
triangle(20,40,20,50,30,50);
triangle(20,40,40,40,30,50);
triangle(40,40,30,50,50,50);
triangle(40,40,60,40,50,50);
triangle(30,50,50,50,40,60);
line(40,60,40,70);

//Draw Gem 2
fill(0,250,0);
rect(90,50,40,10);
triangle(90,60,130,60,110,80);
line(90,50,100,60);
line(100,60,110,50);
line(110,50,120,60);
line(120,60,130,50);
triangle(100,60,120,60,110,70);
line(110,70,110,80);

//Draw Gem 3
fill(0,250,0);
rect(20,190,40,10);
triangle(20,200,60,200,40,220);
line(20,190,30,200);
line(30,200,40,190);
line(40,190,50,200);
line(50,200,60,190);
triangle(30,200,50,200,40,210);
line(40,210,40,220);

//Draw Gem 4
fill(0,250,0);
rect(20,310,40,10);
triangle(20,320,60,320,40,340);
line(20,310,30,320);
line(30,320,40,310);
line(40,310,50,320);
line(50,320,60,310);
triangle(30,320,50,320,40,330);
line(40,330,40,340);

//Draw Gem 5
fill(0,250,0);
rect(90,360,40,10);
triangle(90,370,130,370,110,390);
line(90,360,100,370);
line(100,370,110,360);
line(110,360,120,370);
line(120,370,130,360);
triangle(100,370,120,370,110,380);
line(110,380,110,390);

//Draw Gem 6
fill(0,250,0);
rect(300,340,40,10);
triangle(300,350,340,350,320,370);
line(300,340,310,350);
line(310,350,320,340);
line(320,340,330,350);
line(330,350,340,340);
triangle(310,350,330,350,320,360);
line(320,360,320,370);

//Draw Gem 7
fill(0,250,0);
rect(360,230,40,10);
triangle(360,240,400,240,380,260);
line(360,230,370,240);
line(370,240,380,230);
line(380,230,390,240);
line(390,240,400,230);
triangle(370,240,390,240,380,250);
line(380,250,380,260);

//Draw Gem 8
fill(0,250,0);
rect(340,140,40,10);
triangle(340,150,380,150,360,170);
triangle(350,150,370,150,360,160);
line(340,140,350,150);
line(350,150,360,140);
line(360,140,370,150);
line(370,150,380,140);
line(360,160,360,170);

//Programming the mouse click to take the gems away. Changing stroke to (100,0,0) which is the same colour as the background to make the gems dissapear. 
//There is still a very faint outline of the side of the gems, I wasn't able to figure out how or why but it's nearly undetectable. 

if(mousePressed) {
 stroke(100,0,0);
fill(100, 0, 0);
rect(20,40,40,10);
triangle(20,50,60,50,40,70);
triangle(20,40,20,50,30,50);
triangle(20,40,40,40,30,50);
triangle(40,40,30,50,50,50);
triangle(40,40,60,40,50,50);
triangle(30,50,50,50,40,60);
line(40,60,40,70);

//Draw Gem 2
rect(90,50,40,10);
triangle(90,60,130,60,110,80);
line(90,50,100,60);
line(100,60,110,50);
line(110,50,120,60);
line(120,60,130,50);
triangle(100,60,120,60,110,70);
line(110,70,110,80);

//Draw Gem 3
rect(20,190,40,10);
triangle(20,200,60,200,40,220);
line(20,190,30,200);
line(30,200,40,190);
line(40,190,50,200);
line(50,200,60,190);
triangle(30,200,50,200,40,210);
line(40,210,40,220);

//Draw Gem 4
rect(20,310,40,10);
triangle(20,320,60,320,40,340);
line(20,310,30,320);
line(30,320,40,310);
line(40,310,50,320);
line(50,320,60,310);
triangle(30,320,50,320,40,330);
line(40,330,40,340);

//Draw Gem 5
rect(90,360,40,10);
triangle(90,370,130,370,110,390);
line(90,360,100,370);
line(100,370,110,360);
line(110,360,120,370);
line(120,370,130,360);
triangle(100,370,120,370,110,380);
line(110,380,110,390);

//Draw Gem 6
rect(300,340,40,10);
triangle(300,350,340,350,320,370);
line(300,340,310,350);
line(310,350,320,340);
line(320,340,330,350);
line(330,350,340,340);
triangle(310,350,330,350,320,360);
line(320,360,320,370);

//Draw Gem 7
rect(360,230,40,10);
triangle(360,240,400,240,380,260);
line(360,230,370,240);
line(370,240,380,230);
line(380,230,390,240);
line(390,240,400,230);
triangle(370,240,390,240,380,250);
line(380,250,380,260);

//Draw Gem 8
rect(340,140,40,10);
triangle(340,150,380,150,360,170);
triangle(350,150,370,150,360,160);
line(340,140,350,150);
line(350,150,360,140);
line(360,140,370,150);
line(370,150,380,140);
line(360,160,360,170);

//Drawing Tears and turn them transparent in order to still see Hatty's face. Also, adding triangles around the eyes to better shape the tears, rather than having overlap with the rectangle of the tear and the eye itself.
noStroke();
  fill(0,0,250,150);
triangle(100,235,100,240,110,240);
  fill(0,0,250,150);
triangle(120,235,120,240,110,240);
  
  fill(0,0,250,150);
triangle(300,235,300,240,290,240);  
  fill(0,0,250,150);
triangle(280,235,280,240,290,240);

  fill(0,0,250,150);
rect(100,240,20,160);
  fill(0,0,250,150);
  rect(280,240,20,160);

//Draw pupils, this is drawing the pupils a second time after the mouse is pressed, so if held down the pupils stay and will continue to follow.
fill(250);
ellipse(110+mouseX/80,230+mouseY/80,5,5);
ellipse(290+mouseX/80,230+mouseY/80,5,5);

}

}
//This is programming the pupils to follow the mouse cursor, they are quite small so the movement is difficult to ditect, but is there. 
void mouseMoved() {

  //Draw Pupils
fill(250);
ellipse(110+mouseX/80,230+mouseY/80,5,5);
ellipse(290+mouseX/80,230+mouseY/80,5,5);
}