Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/* Project 1 Interactive Drawing
Allie Arnott 991396872
Bathtub Ducky

Vertical Mouse movement controls bubbles
Horizontal mouse movement controls Ducky
*/

void setup()
{
  //window size
  size(400, 400);
  
  //remove cursor
  noCursor();
}

void draw()
{
  //removes stroke
  noStroke();
  
  //background
  background(253, 255, 240);
  
  //wall gradient
  fill(205, 245, 217, 25);
  rectMode(CORNERS);
  rect(0, 250, 400, 0);
  rect(0, 225, 400, 0);
  rect(0, 200, 400, 0);
  rect(0, 175, 400, 0);
  rect(0, 150, 400, 0);
  rect(0, 125, 400, 0);
  rect(0, 100, 400, 0);
  rect(0, 75, 400, 0);
  rect(0, 50, 400, 0);
  rect(0, 25, 400, 0);
  
  
  //static water
  fill(162, 234, 255);
  rectMode(CORNER);
  rect(0,300,400,100);
  
  //static water gradient
  fill(72, 178, 209, 25);
  rect(0, 310, 400, 100);
  rect(0, 320, 400, 100);
  rect(0, 330, 400, 100);
  rect(0, 340, 400, 100);
  rect(0, 350, 400, 100);
  rect(0, 360, 400, 100);
  rect(0, 370, 400, 100);
  rect(0, 380, 400, 100);
  rect(0, 390, 400, 100);
  
  //static foam
  fill(232, 255, 255,191);
  ellipse(10,300,80,30);
  ellipse(30,300,50,30);
  ellipse(90,300,95,40);
  ellipse(130,300,130,55);
  ellipse(200,300,100,45);
  ellipse(290,300,95,40);
  ellipse(330,300,60,30);
  ellipse(360,300,80,45);
  
  //ducky dependant on mouseX
  fill(240, 235, 120); //main body colour
  
  //duck head
  ellipse(+10 + (mouseX * 1.5), 200, 90, 90);
  
  //duck body
  ellipse(+35 + (mouseX * 1.5), 270, 150, 100); 
  
  //duck tail
  ellipse(+112 + (mouseX * 1.5), 240, 37, 27); //tail part 1
  triangle(+100 + (mouseX * 1.5), 290, +100 + (mouseX * 1.5), 245, +130 + (mouseX * 1.5), 245); //tail part 2
  
  //duck wing
  fill(227, 223, 101); //wing colour
  ellipse(+10 + (mouseX * 1.5), 270, 55, 55); //wing part 1
  ellipse(+40 + (mouseX * 1.5), 260, 35, 35); //wing part 2
  triangle(+10 + (mouseX * 1.5), 242, +10 + (mouseX * 1.5), 260, +40 + (mouseX * 1.5), 242); //wing part 3
  triangle(+20 + (mouseX * 1.5), 297, +20 + (mouseX * 1.5), 270, +50 + (mouseX * 1.5), 272); //wing part 4
  
  //duck beak
  fill(250, 209, 73); //beak colour
  triangle(-60 + (mouseX * 1.5), 220, -33 + (mouseX * 1.5), 190, -30 + (mouseX * 1.5), 220); //beak triangle
  ellipse(-25 + (mouseX * 1.5), 210, 25, 25); //beak cheek
 
  //duck eye
  fill(250); //eye white
  ellipse(-15 + (mouseX * 1.5), 183, 20, 25); //eye white
  fill(47, 131, 245); //blue iris
  ellipse(-18 + (mouseX * 1.5), 185, 15, 15); //iris
  fill(0); //pupil black
  ellipse(-20 + (mouseX * 1.5), 187, 10, 10); //pupil
  fill(245); //shine white-grey
  ellipse(-14 + (mouseX * 1.5), 183, 5, 5); //eye shine
  
  
  //bubbles for duck dependant on mouse
  fill(232, 255, 255,191); //matches background foam
  ellipse(-40 + (mouseX * 1.5), 300, 45, 30);
  ellipse(-25 + (mouseX * 1.5), 300, 25, 20);
  ellipse(-5 + (mouseX * 1.5), 310, 55, 30);
  ellipse(+20 + (mouseX * 1.5), 320, 67, 40);
  ellipse(+10 + (mouseX * 1.5), 305, 20, 20);
  ellipse(+35 + (mouseX * 1.5), 296, 30, 30);
  ellipse(+45 + (mouseX * 1.5), 320, 40, 40);
  ellipse(+60 + (mouseX * 1.5), 315, 45, 40);
  ellipse(+75 + (mouseX * 1.5), 310, 57, 30);
  ellipse(+99 + (mouseX * 1.5), 300, 50, 30);
  
  //bubbles dependant on mouseY
  //bubble set colour 1
  fill(218,242,242,127);
  ellipse(25, -110 + (mouseY * 4), 40, 40);
  ellipse(40, +40 + (mouseY * 3), 50, 50);
  ellipse(100, -200 + (mouseY * 3), 60, 60);
  ellipse(175, -40 + (mouseY * 3), 20, 20);
  ellipse(350, -180 + (mouseY * 5), 45, 45);
  ellipse(270, -10 + (mouseY * 2), 75, 75);
  
  //bubble set colour 2
  fill(229, 255, 253, 187);
  ellipse(75, -210 + (mouseY * 3), 25, 25);
  ellipse(130, +50 + (mouseY * 4), 50, 50);
  ellipse(260, +80 + (mouseY *6), 35, 35);
  ellipse(310, -100 + (mouseY * 2.5), 80, 80);
  
  //bubble set colour 3
  fill(245, 252, 252, 157);
  ellipse(120, +40 + (mouseY * 3), 45, 45);
  ellipse(205, -30 + (mouseY * 4), 60, 60);
  ellipse(165, -45 + (mouseY * 3), 35, 35);
  ellipse(105, +70 + (mouseY * 5.5), 42, 42);
  
}