Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
/*  INTERACTIVE ART DESIGN: LIGHTHOUSE
Author: Heather Cleveland
Date Last Edited: 

*/

void setup() {
  //background size
  size(400, 400);
}

//mouse press to change colour of clouds
  void mousePressed(){
    fill( 255, 255, 255);
    ellipse( 40, 112, 40, 20); 
    ellipse( 50, 82, 60, 20);
    ellipse( 80, 122, 15, 10); 
    ellipse( 100, 92, 40, 20); 
    ellipse( 120, 42, 120, 60); 
    ellipse( 120, 122, 10, 5); 
    ellipse( 140, 132, 20, 10); 
    ellipse( 170, 122, 30, 15); 
    ellipse( 180, 92, 80, 20); 
    ellipse( 200, 62, 60, 20); 
    ellipse( 220, 22, 80, 40);
    ellipse( 230, 112, 60, 20); 
    ellipse( 240, 82, 60, 20); 
    ellipse( 300, 42, 80, 40); 
    ellipse( 360, 102, 60, 20); 
    ellipse( 380, 42, 120, 60); 
    ellipse( 40, 22, 160, 60);
    ellipse( 90, 2, 160, 60);
  }
  
void draw() {
  /* 
  MOVEMENT CONTROL
  each drawing cordinate includes +mouseX and +mouseY divided 
  by a number, this will make the drawing move with the user's
  mouse, and the higher the number divided, the slower the movement,
  allowing for a parallax effect to occur
  */
  //background colour slate grey
  background(25);
  //ellispes to center mode, rect to corners
  rectMode(CORNERS);
  ellipseMode(CENTER); 
  noStroke(); 

  //LIGHT PART OF CLOUDS

  // light colour
  fill(60);
  ellipse( 40, 112, 40, 20); 
  ellipse( 50, 82, 60, 20);
  ellipse( 80, 122, 15, 10); 
  ellipse( 100, 92, 40, 20); 
  ellipse( 120, 42, 120, 60); 
  ellipse( 120, 122, 10, 5); 
  ellipse(140, 132, 20, 10); 
  ellipse( 170, 122, 30, 15); 
  ellipse( 180, 92, 80, 20); 
  ellipse( 200, 62, 60, 20); 
  ellipse( 220, 22, 80, 40);
  ellipse( 230, 112, 60, 20); 
  ellipse( 240, 82, 60, 20); 
  ellipse( 300, 42, 80, 40); 
  ellipse( 360, 102, 60, 20); 
  ellipse( 380, 42, 120, 60); 

  //DARK PART OF CLOUDS

  //just brighter than background
  fill(30); 
  //clouds back to front, left to right
  ellipse( 40, 110, 40, 20); 
  ellipse( 50, 80, 60, 20);
  ellipse( 80, 120, 15, 10); 
  ellipse( 100, 90, 40, 20); 
  ellipse( 120, 40, 120, 60); 

  //for special overlapping in clouds
  fill(60);
  ellipse( 40, 22, 160, 60);
  fill(30);
  ellipse( 40, 20, 160, 60); 

  ellipse( 120, 120, 10, 5); 
  ellipse(140, 130, 20, 10); 
  ellipse( 170, 120, 30, 15); 
  ellipse( 180, 90, 80, 20); 
  ellipse( 200, 60, 60, 20); 
  ellipse( 220, 20, 80, 40);
  ellipse( 230, 110, 60, 20); 
  ellipse( 240, 80, 60, 20); 
  ellipse( 300, 40, 80, 40); 
  ellipse( 360, 100, 60, 20); 
  ellipse( 380, 40, 120, 60);

  //special overlapping in clouds
  fill(60);
  ellipse( 90, 2, 160, 60);
  fill(30);
  ellipse( 90, 0, 160, 60);


  //WATER

  //water base colour
  fill(28, 42, 55);
  //water base
  rect(-40+mouseX/150, 160+mouseY/150, 430+mouseX/150, 430+mouseY/150);
  //water details, alternating +/-mouseX for dynamic look
  //colour for -mouseX alpha
  fill( 57, 88, 109, 200-mouseX);
  //waves for -mouseX alpha 
  rect( -20+mouseX/20, 280+mouseY/80, 50+mouseX/20, 290+mouseY/80); 
  rect( 20+mouseX/20, 240+mouseY/80, 40+mouseX/20, 245+mouseY/80); 
  rect( -60+mouseX/20, 200+mouseY/80, 20+mouseX/20, 205+mouseY/80); 
  rect( 65+mouseX/20, 175+mouseY/80, 115+mouseX/20, 180+mouseY/80); 
  rect( 220+mouseX/20, 175+mouseY/80, 265+mouseX/20, 180+mouseY/80); 
  rect( 100+mouseX/20, 235+mouseY/80, 140+mouseX/20, 240+mouseY/80); 
  rect( 330+mouseX/20, 165+mouseY/80, 360+mouseX/20, 170+mouseY/80);
  rect( 340+mouseX/20, 205+mouseY/80, 380+mouseX/20, 210+mouseY/80); 
  //colour for +mouseX
  fill( 41, 84, 84, -150+mouseX);
  //waves for +mouseX alpha 
  rect( 20+mouseX/20, 260+mouseY/80, 80+mouseX/20, 270+mouseY/80); 
  rect( 40+mouseX/20, 220+mouseY/80, 70+mouseX/20, 225+mouseY/80);
  rect( 25+mouseX/20, 185+mouseY/80, 55+mouseX/20, 190+mouseY/80);
  rect( 180+mouseX/20, 170+mouseY/80, 205+mouseX/20, 175+mouseY/80);
  rect( 210+mouseX/20, 215+mouseY/80,260+mouseX/20, 220+mouseY/80);
  rect( 340+mouseX/20, 175+mouseY/80, 395+mouseX/20, 180+mouseY/80); 
  

  //BACKGROUND ROCK FORMATION 

  //from left to right, bottom up
  //darken colour
  fill( 12, 5, 22); 
  //rocks
  ellipse(170-mouseX/100, 260-mouseY/100, 100, 40);
  ellipse( 170-mouseX/100, 230-mouseY/100, 80, 20); 
  ellipse( 160-mouseX/100, 190-mouseY/100, 20, 40);
  ellipse( 220-mouseX/100, 220-mouseY/100, 40, 20); 
  ellipse( 240-mouseX/100, 220-mouseY/100, 20, 20); 
  ellipse( 250-mouseX/100, 210-mouseY/100, 40, 10);
  ellipse( 360-mouseX/100, 220-mouseY/100, 80, 20);
  ellipse( 390-mouseX/100, 240-mouseY/100, 60, 20);
  ellipse( 140-mouseX/100, 280-mouseY/100, 80, 60);
  //rectangles in back to block water
  rect( 170-mouseX/100, 230-mouseY/100, 420-mouseX/100, 350-mouseY/100);
  rect( 210-mouseX/100, 220-mouseY/100, 410-mouseX/100, 240-mouseY/100); 
  //rectangle to mask rock
  fill(28, 42, 55); 
  rect( 120-mouseX/100, 190-mouseY/100, 170-mouseX/100, 210-mouseY/100); 


  //LIGHT HOUSE

  //Glowing light behind
  fill( 255, 250, 196, 20);
  ellipse( 310+mouseX/40, 100+mouseY/40, 120, 120);
  //light house white  
  fill( 166, 166, 166); 
  // light house base
  triangle( 240+mouseX/40, 320+mouseY/40, 370+mouseX/40, 320+mouseY/40, 310+mouseX/40, 30+mouseY/40); 
  //red circle
  fill( 82, 28, 22); 
  ellipse( 310+mouseX/40, 80+mouseY/40, 55, 55);
  //back of light house
  fill(158, 141, 111); 
  rect(280+mouseX/40, 120+mouseY/40, 340+mouseX/40, 80+mouseY/40);
  //light yellow
  fill(219, 196, 18); 
  ellipse( 310+mouseX/40, 115+mouseY/40, 25, 25); 
  //light house white
  fill( 166, 166, 166); 
  //base
  triangle( 310+mouseX/40, 150+mouseY/40, 280+mouseX/40, 120+mouseY/40, 340+mouseX/40, 120+mouseY/40); 
  //red
  fill( 82, 28, 22); 
  //lower beam
  rect( 275+mouseX/40, 120+mouseY/40, 345+mouseX/40, 115+mouseY/40); 
  //left beam
  rect( 280+mouseX/40, 115+mouseY/40, 283+mouseX/40, 80+mouseY/40); 
  //middle beam
  rect( 308+mouseX/40, 115+mouseY/40, 311+mouseX/40, 80+mouseY/40); 
  //right beam
  rect( 337+mouseX/40, 115+mouseY/40, 340+mouseX/40, 80+mouseY/40); 
  // top beam
  rect( 275+mouseX/40, 80+mouseY/40, 345+mouseX/40, 75+mouseY/40);
  //stripe down side
  rect( 308+mouseX/40, 290+mouseY/40, 311+mouseX/40, 140+mouseY/40); 

  //windows
  fill( 25); 
  rect( 325+mouseX/40, 200+mouseY/40, 330+mouseX/40, 180+mouseY/40); 
  rect( 325+mouseX/40, 280+mouseY/40, 330+mouseX/40, 260+mouseY/40); 
  rect( 285+mouseX/40, 240+mouseY/40, 290+mouseX/40, 220+mouseY/40); 


  //LIGHT
  //lighthosue lightwill follow the mouse
  fill( 255, 250, 196, 20);
  ellipse( mouseX, mouseY, 160, 160);

  //SEAGULLS 
  //drawn with lines
  //stroke and strokeWeight to make seagulls more visible 
  stroke(0);
  strokeWeight(2);
  //seagull 1
  line(210-mouseX/60, 100-mouseY/60, 210-mouseX/60, 90-mouseY/60); 
  line(210-mouseX/60, 90-mouseY/60, 220-mouseX/60, 100-mouseY/60);
  line( 220-mouseX/60, 100-mouseY/60, 220-mouseX/60, 90-mouseY/60);
  line( 220-mouseX/60, 90-mouseY/60, 230-mouseX/60, 100-mouseY/60); 
  //seagull 2
  line( 220-mouseX/60, 70-mouseY/60, 230-mouseX/60, 80-mouseY/60);
  line( 230-mouseX/60, 80-mouseY/60, 230-mouseX/60, 70-mouseY/60);
  line(230-mouseX/60, 70-mouseY/60, 240-mouseX/60, 70-mouseY/60);
  line( 240-mouseX/60, 70-mouseY/60, 240-mouseX/60, 60-mouseY/60); 
  //seagull 3
  line( 240-mouseX/60, 100-mouseY/60, 240-mouseX/60, 90-mouseY/60);
  line(240-mouseX/60, 90-mouseY/60, 250-mouseX/60, 90-mouseY/60);
  line( 250-mouseX/60, 90-mouseY/60, 250-mouseX/60, 80-mouseY/60);
  line( 250-mouseX/60, 80-mouseY/60, 260-mouseX/60, 80-mouseY/60);
  //end stroke
  noStroke(); 

  // FRONT ROCKS

  //dark rocks
  fill( 30, 27, 34); 
  //triangles moving from left to right
  rect(-40+mouseX/15, 320+mouseY/15, 420+mouseX/15, 420+mouseY/15); 
  triangle(20+mouseX/15, 320+mouseY/15, 20+mouseX/15, 300+mouseY/15, 40+mouseX/15, 300+mouseY/15); 
  triangle( 40+mouseX/15, 300+mouseY/15, 40+mouseX/15, 280+mouseY/15, 80+mouseX/15, 260+mouseY/15); 
  triangle( 20+mouseX/15, 320+mouseY/15, 80+mouseX/15, 320+mouseY/15, 80+mouseX/15, 260+mouseY/15); 
  triangle( 80+mouseX/15, 200+mouseY/15, 80+mouseX/15, 320+mouseY/15, 190+mouseX/15, 320+mouseY/15); 
  triangle(100+mouseX/15, 260+mouseY/15, 190+mouseX/15, 260+mouseY/15, 190+mouseX/15, 320+mouseY/15);
  triangle(160+mouseX/15, 320+mouseY/15, 250+mouseX/15, 320+mouseY/15, 230+mouseX/15, 250+mouseY/15); 
  triangle( 180+mouseX/15, 320+mouseY/15, 280+mouseX/15, 320+mouseY/15, 280+mouseX/15, 260+mouseY/15); 
  triangle(250+mouseX/15, 320+mouseY/15, 320+mouseX/15, 320+mouseY/15, 300+mouseX/15, 290+mouseY/15); 
  triangle( 280+mouseX/15, 320+mouseY/15, 360+mouseX/15, 320+mouseY/15, 330+mouseX/15, 290+mouseY/15); 
  triangle( 280+mouseX/15, 320+mouseY/15, 340+mouseX/15, 300+mouseY/15, 400+mouseX/15, 320+mouseY/15);
  //front rock details
  //highlight colour
  fill( 50, 43, 58);
  //details
  triangle( 80+mouseX/15, 200+mouseY/15, 100+mouseX/15, 270+mouseY/15, 170+mouseX/15, 300+mouseY/15); 
  triangle( 170+mouseX/15, 290+mouseY/15, 190+mouseX/15, 260+mouseY/15, 190+mouseX/15, 300+mouseY/15); 
  triangle( 220+mouseX/15, 280+mouseY/15, 230+mouseX/15, 250+mouseY/15, 240+mouseX/15, 290+mouseY/15); 
  triangle( 260+mouseX/15, 290+mouseY/15, 280+mouseX/15, 260+mouseY/15, 280+mouseX/15, 300+mouseY/15); 
  triangle( 360+mouseX/15, 310+mouseY/15, 380+mouseX/15, 340+mouseY/15, 400+mouseX/15, 320+mouseY/15); 
}