Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*

    Bath Time is Scary
    An Interactive Drawing by Keana Almario

    I dedicate this piece to my dog who always freaks out whenever I give him a bath. (This is for your own good!)
    
*/

void setup() {
  //Set the canvas size to 400x400
  size(400, 400);
}

void draw() {

  //Remove outlines
  noStroke();

  //Set the modes for drawing shapes so that the ellipses depend on the center coordinates and the rectangles depend on the corner coordinates.
  ellipseMode(CENTER);
  rectMode(CORNERS);

  //Set the background to blue (for the wall)
  background(70+(mouseY/5), 120+(mouseY/5), 150+(mouseY/5)); //Background gets darker as the cursor rises

  //Draw the window
  fill(250+(mouseY/5), 250+(mouseY/5), 200+(mouseY/5)); //Window gets darker as the cursor rises
  rect(10, 0, 200, 50+(height-mouseY)/15);

  //Draw the floor, which moves with the bathtub
  fill(160+(mouseY/5), 190+(mouseY/5), 190+(mouseY/5)); //Floor gets darker as the cursor rises
  rect(0, 200+(height-mouseY)/15, width, height);

  //Draw the shadow of the tub
  fill(100, ((height-mouseY)/5)+20);
  triangle(130, 240+(height-mouseY)/9, 230+(height-mouseY)/9, height, width, height);
  triangle(130, 240+(height-mouseY)/9, width, height, width, 200+(height-mouseY)/15);

  //Draw the tub behind the rising water
  fill(255);
  triangle(180, 100+(height-mouseY)/9, 130, 150+(height-mouseY)/9, 180, 150+(height-mouseY)/9);
  rect(180, 100+(height-mouseY)/9, 395, 120+(height-mouseY)/9);
  fill(230);
  rect(185, 105+(height-mouseY)/9, 390, 170+(height-mouseY)/9);
  fill(220);
  triangle(185, 105+(height-mouseY)/9, 135, 155+(height-mouseY)/9, 185, 155+(height-mouseY)/9);

  //Draw the water that rises as the cursor rises
  fill(126, 211, 255);
  rect(185, 170-(height-mouseY)/50, 390, 200-(height-mouseY)/50);
  fill(116, 201, 245);
  triangle(185, 170-(height-mouseY)/50, 185, 200-(height-mouseY)/50, 155, 200-(height-mouseY)/50);

  //Draw the tub in front of the rising water
  fill(255);
  triangle(385, 100+(height-mouseY)/9, 335, 150+(height-mouseY)/9, 385, 150+(height-mouseY)/9);
  rect(385, 100+(height-mouseY)/9, 395, 120+(height-mouseY)/9);
  rect(140, 143+(height-mouseY)/9, 360, 200+(height-mouseY)/9);
  //shadowed part in the front
  fill(230+(mouseY/5), 230+(mouseY/5), 230+(mouseY/5));
  rect(130, 150+(height-mouseY)/9, 345, 240+(height-mouseY)/9);
  //shadowed part on the side
  fill(220+(mouseY/5), 220+(mouseY/5), 220+(mouseY/5));
  triangle(395, 100+(height-mouseY)/9, 345, 150+(height-mouseY)/9, 395, 150+(height-mouseY)/9);
  rect(345, 150+(height-mouseY)/9, 395, 190+(height-mouseY)/9);
  triangle(345, 190+(height-mouseY)/9, 395, 190+(height-mouseY)/9, 345, 240+(height-mouseY)/9);

  //Draw the door
  fill(98, 81, 48);
  rect(310+(height-mouseY)/3, 0, width, height);
  

  //*************DOG***************

  //Set the rect mode to CENTER for convenience
  rectMode(CENTER);

  //Draw the dog (dark brown parts)
  fill(219, 159, 86);
  //left ear
  ellipse(40+mouseY/5-mouseX/10, 145+mouseY/30, 30, 30);
  ellipse(30+mouseY/5-mouseX/10, 210+mouseY/30, 60, 30);
  triangle(25+mouseY/5-mouseX/10, 140+mouseY/30, 0+mouseY/5-mouseX/10, 210+mouseY/30, 80+mouseY/5-mouseX/10, 220+mouseY/30);
  //right ear
  ellipse(120+mouseY/5-mouseX/10, 145+mouseY/30, 30, 30);
  ellipse(130+mouseY/5-mouseX/10, 210+mouseY/30, 60, 30);
  triangle(135+mouseY/5-mouseX/10, 140+mouseY/30, 160+mouseY/5-mouseX/10, 210+mouseY/30, 80+mouseY/5-mouseX/10, 220+mouseY/30);
  //body
  rect(80+mouseY/5-mouseX/10, 300+mouseY/30, 90, 140, 40, 40, 40, 40); 

  //Draw the dog (light brown parts)
  fill(245, 189, 84);
  //head
  rect(80+mouseY/5-mouseX/10, 180+mouseY/30, 110, 80, 50, 50, 40, 40);
  rect(80+mouseY/5-mouseX/10, 220+mouseY/30, 80, 70, 50, 50, 60, 60);
  //cheeks
  triangle(27+mouseY/5-mouseX/10, 196+mouseY/30, 45+mouseY/5-mouseX/10, 240+mouseY/30, 80+mouseY/5-mouseX/10, 180+mouseY/30);
  triangle(133+mouseY/5-mouseX/10, 196+mouseY/30, 115+mouseY/5-mouseX/10, 240+mouseY/30, 80+mouseY/5-mouseX/10, 180+mouseY/30);

  //Draw the human hands (in the front)
  fill(252, 205, 158);
  //left hand
  ellipse(40+mouseY/5-mouseX/10, 310+mouseY/30, 40, 40); 
  triangle(40+mouseY/5-mouseX/10, 330+mouseY/30, 61+mouseY/5-mouseX/10, 310+mouseY/30, 74+mouseY/5-mouseX/10, 350+mouseY/30);
  ellipse(40+mouseY/5-mouseX/10, 360+mouseY/30, 70, 80);
  rect(55+mouseY/5-mouseX/10, 450+mouseY/30, 40, 180);
  //right hand
  ellipse(120+mouseY/5-mouseX/10, 310+mouseY/30, 40, 40); 
  triangle(120+mouseY/5-mouseX/10, 330+mouseY/30, 99+mouseY/5-mouseX/10, 310+mouseY/30, 86+mouseY/5-mouseX/10, 350+mouseY/30);
  ellipse(120+mouseY/5-mouseX/10, 360+mouseY/30, 70, 80);  
  rect(105+mouseY/5-mouseX/10, 450+mouseY/30, 40, 180);
 
  //Set the rect mode to CORNERS since I will be decreasing only the height of the second corner for the dog's tongue
  rectMode(CORNERS);

  //Draw the dog (pink part)
  fill(245, 111, 99);
  //tongue
  rect(72.5+mouseY/5-mouseX/10, 240+mouseY/30, 87.5+mouseY/5-mouseX/10, 230+mouseY/10, 0, 0, 10, 10); 

  //Set the rect mode back to CENTER
  rectMode(CENTER);

  //Draw the dog (light brown parts in the front)
  fill(245, 189, 84);
  //part to hide tongue
  triangle(80+mouseY/5-mouseX/10, 235+mouseY/30, 70+mouseY/5-mouseX/10, 245+mouseY/30, 60+mouseY/5-mouseX/10, 235+mouseY/30);
  triangle(80+mouseY/5-mouseX/10, 235+mouseY/30, 90+mouseY/5-mouseX/10, 245+mouseY/30, 100+mouseY/5-mouseX/10, 235+mouseY/30);
  //arms
  rect(45+mouseY/5-mouseX/10, 285+mouseY/30, 40, 70, 40, 40, 40, 40);
  rect(115+mouseY/5-mouseX/10, 285+mouseY/30, 40, 70, 40, 40, 40, 40);

  //Draw the dog's details (dark dark brown)
  fill(95, 67, 37);
  //eyes
  ellipse(50+mouseY/5-mouseX/10, 200+mouseY/30, 20, 20);
  ellipse(110+mouseY/5-mouseX/10, 200+mouseY/30, 20, 20);
  //nose
  triangle(70+mouseY/5-mouseX/10, 230+mouseY/30, 90+mouseY/5-mouseX/10, 230+mouseY/30, 80+mouseY/5-mouseX/10, 240+mouseY/30);
  //mouth
  stroke(95, 67, 37); //lets 
  strokeWeight(3);
  line(80+mouseY/5-mouseX/10, 237+mouseY/30, 70+mouseY/5-mouseX/10, 245+mouseY/30);
  line(80+mouseY/5-mouseX/10, 237+mouseY/30, 90+mouseY/5-mouseX/10, 245+mouseY/30);

  //Draw the dog's details (white)
  noStroke();
  fill(255);
  //white part of eyes
  ellipse(50+mouseY/5-mouseX/10, 200+mouseY/40, 10, 10);
  ellipse(110+mouseY/5-mouseX/10, 200+mouseY/40, 10, 10);

  //Draw the dark blue overlay over the dog
  fill(38, 30, 90, (height-mouseY)/5);
  rect(80+mouseY/5-mouseX/10, 180+mouseY/30, 110, 80, 50, 50, 40, 40);
}

void mousePressed(){
  println("PLEASE DON'T GIVE ME A BATH I DON'T LIKE BATH");
}