Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*Interactive drawing by Gabby Simpson
IMC year 1
Move your mouse up and down to raise and lower the tide around
the Hopewell Rocks in New Brunswick
*/
void setup(){
  //set size, modes and framerate
  size(400,400);
  rectMode(CORNERS);
  ellipseMode(CENTER);
  frameRate(30);
  //shows instruction to the screen
  println("Raise and lower your mouse to raise and lower the tide.");
}
void draw(){
  //set background color to light blue
  background(150,200,255);
  //set so that lines don't appear around shapes
  noStroke();
  
  //clouds
  //move across sky as the tide moves
  fill(255,255,255);
  ellipse(mouseY,40,60,30);
  ellipse(mouseY+20,50,60,30);
  ellipse(mouseY+10,60,60,30);
  ellipse(mouseY+200,60,80,40);
  ellipse(mouseY+220,80,80,40);
  
  //set fill color to light brown for dirt
  fill(161,107,46);
  //dirt
  rect(400,300,0,400);
  //left rock
  triangle(40,200,120,200,80,140);
  triangle(80,140,120,210,140,80);
  triangle(80,210,40,300,140,300);
  //right rock
  triangle(140,80,320,120,300,240);
  triangle(140,80,170,240,300,230);
  triangle(170,240,140,300,190,300);
  triangle(170,240,280,240,180,300);
  
  //set fill color to dark brown for rock shadows
  fill(97,64,27);
  //left rock shadows
  triangle(140,80,120,200,150,200);
  triangle(40,200,80,230,150,200);
  triangle(80,230,130,200,140,300);
  triangle(130,270,70,300,140,300);
  //right rock shadows
  triangle(180,300,300,300,280,240);
  triangle(170,240,300,200,300,240);
  triangle(320,120,260,240,300,240);
  triangle(280,240,170,240,280,250);
  
  //trees
  //set fill color to green for trees
  fill(0,102,0);
  triangle(190,20,170,50,210,50);
  triangle(190,40,170,70,210,70);
  triangle(190,60,170,90,210,90);
  triangle(240,30,210,60,270,60);
  triangle(240,50,210,80,270,80);
  triangle(240,70,210,100,270,100);
  
  //tide
  //tide rises when mouse is raised. Water gets darker the higher the mouse is raised.
  fill(0,51,102,100-mouseY/2);
  rect(0,400,400,mouseY+200);
}