Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
// Uncharted Waters
// By: Jay Menominee
// "I am cursed with an everlasting itch for things remote, I love to sail forbidden seas,"
// Sail the seas by moving your mouse left or right 
// Change between night & day by moving your mouse up & down
// Beware the Siren!



void setup() {
  size(400,400);
}
void draw() {
  
///////////////////////////////// Sky pt.1 ///////////////////////////////////// 

  //Draw Background
    background(125,175,200);
  //Day is default when mouse is at bottom.  
    noStroke();
    fill(145,185,200);
    rect (0,0,400,400); 
  //Sky Changes oppacity based on mouseY, Night is revealed when mouse reaches the top. 
    fill(25,55,80,350-mouseY*1.5);
    rect (0,0,400,400);
  //Stars appear with night sky
    stroke(255,350-mouseY*1.5);
    strokeWeight(2);
      point(140, 120);
      point(160, 70);
      point(190,30);
      point(210,130);
      point(220,40);
      point(230,90);
      point(260,120);
  //Slightly smaller stars also appear
    strokeWeight(1);
      point(120,110);
      point(150,100);
      point(170,50);
      point(180,100);
      point(190,120);
      point(210,20);
      point(220,10);
      point(240,100);
      point(250,80);
      point(290,130);
      point(220,80);
    noStroke();

     
//////////////////////////////// Mountains ////////////////////////////////////////

//Three mountain ranges with parallax, they also follow the Day/Night shift

  //Mountains 1
    //Day
      fill(169,166,181);
      triangle(120+(mouseX-200)*.1,210,170+(mouseX-200)*.1,110,220+(mouseX-200)*.1,210);
      triangle(160+(mouseX-200)*.1,210,190+(mouseX-200)*.1,90,250+(mouseX-200)*.1,210);
      triangle(160+(mouseX-200)*.1,200,210+(mouseX-200)*.1,110,250+(mouseX-200)*.1,220);
    //Night
      fill(111,106,120, 350-mouseY*1.5);
      triangle(120+(mouseX-200)*.1,210,170+(mouseX-200)*.1,110,220+(mouseX-200)*.1,210);
      triangle(160+(mouseX-200)*.1,210,190+(mouseX-200)*.1,90,250+(mouseX-200)*.1,210);
      triangle(160+(mouseX-200)*.1,200,210+(mouseX-200)*.1,110,250+(mouseX-200)*.1,220);
  //Mountains 2
    //Day
      fill(125,120,130);
      rect(0+(mouseX-200)*.2,170,400,40);
      rect(0+(mouseX-200)*.2,110,60,60);
      rect(60+(mouseX-200)*.2,140,70,30);
      triangle(0+(mouseX-200)*.2,100,0+(mouseX-200)*.2,110,60+(mouseX-200)*.2,110);
      triangle(60+(mouseX-200)*.2,110,60+(mouseX-200)*.2,140,100+(mouseX-200)*.2,140);
      triangle(100+(mouseX-200)*.2,140,105+(mouseX-200)*.2,125,120+(mouseX-200)*.2,140);
      triangle(90+(mouseX-200)*.2,170,120+(mouseX-200)*.2,110,160+(mouseX-200)*.2,170);
      triangle(110+(mouseX-200)*.2,170,150+(mouseX-200)*.2,130,170+(mouseX-200)*.2,170);
      triangle(170+(mouseX-200)*.2,170,190+(mouseX-200)*.2,150,210+(mouseX-200)*.2,170);
      triangle(195+(mouseX-200)*.2,170,210+(mouseX-200)*.2,140,230+(mouseX-200)*.2,170);
      triangle(210+(mouseX-200)*.2,170,225+(mouseX-200)*.2,120,250+(mouseX-200)*.2,170);
      triangle(220+(mouseX-200)*.2,140,240+(mouseX-200)*.2,120,270+(mouseX-200)*.2,140);
      rect(230+(mouseX-200)*.2,140,40,30);
      triangle(235+(mouseX-200)*.2,170,280+(mouseX-200)*.2,130,300+(mouseX-200)*.2,170);
      triangle(280+(mouseX-200)*.2,170,310+(mouseX-200)*.2,110,330+(mouseX-200)*.2,170);
      triangle(280+(mouseX-200)*.2,170,330+(mouseX-200)*.2,130,410+(mouseX-200)*.2,170);
      triangle(320+(mouseX-200)*.2,170,370+(mouseX-200)*.2,120,420+(mouseX-200)*.2,170);
    //Night
      fill(89,83,96,350-mouseY*1.5);
      rect(0+(mouseX-200)*.2,170,400,40);
      rect(0+(mouseX-200)*.2,110,60,60);
      rect(60+(mouseX-200)*.2,140,70,30);
      triangle(0+(mouseX-200)*.2,100,0+(mouseX-200)*.2,110,60+(mouseX-200)*.2,110);
      triangle(60+(mouseX-200)*.2,110,60+(mouseX-200)*.2,140,100+(mouseX-200)*.2,140);
      triangle(100+(mouseX-200)*.2,140,105+(mouseX-200)*.2,125,120+(mouseX-200)*.2,140);
      triangle(90+(mouseX-200)*.2,170,120+(mouseX-200)*.2,110,160+(mouseX-200)*.2,170);
      triangle(110+(mouseX-200)*.2,170,150+(mouseX-200)*.2,130,170+(mouseX-200)*.2,170);
      triangle(170+(mouseX-200)*.2,170,190+(mouseX-200)*.2,150,210+(mouseX-200)*.2,170);
      triangle(195+(mouseX-200)*.2,170,210+(mouseX-200)*.2,140,230+(mouseX-200)*.2,170);
      triangle(210+(mouseX-200)*.2,170,225+(mouseX-200)*.2,120,250+(mouseX-200)*.2,170);
      triangle(220+(mouseX-200)*.2,140,240+(mouseX-200)*.2,120,270+(mouseX-200)*.2,140);
      rect(230+(mouseX-200)*.2,140,40,30);
      triangle(235+(mouseX-200)*.2,170,280+(mouseX-200)*.2,130,300+(mouseX-200)*.2,170);
      triangle(280+(mouseX-200)*.2,170,310+(mouseX-200)*.2,110,330+(mouseX-200)*.2,170);
      triangle(280+(mouseX-200)*.2,170,330+(mouseX-200)*.2,130,410+(mouseX-200)*.2,170);
      triangle(320+(mouseX-200)*.2,170,370+(mouseX-200)*.2,120,420+(mouseX-200)*.2,170);    
  
  //Mountains 3
    //Day
      fill(98,96, 104);
      rect((mouseX-200)*.4,160,120,40);
      rect(120+(mouseX-200)*.4,180,60,20);
      rect(230+(mouseX-200)*.4,180,150,20);
      triangle(0+(mouseX-200)*.4,160,0+(mouseX-200)*.4,200,-50+(mouseX-200)*.4,200);
      triangle(0+(mouseX-200)*.4,160,40+(mouseX-200)*.4,95,100+(mouseX-200)*.4,165);
      triangle(40+(mouseX-200)*.4,160,80+(mouseX-200)*.4,120,100+(mouseX-200)*.4,160);
      triangle(100+(mouseX-200)*.4,160,110+(mouseX-200)*.4,140,120+(mouseX-200)*.4,160);
      triangle(120+(mouseX-200)*.4,160,120+(mouseX-200)*.4,180,145+(mouseX-200)*.4,180);
      triangle(120+(mouseX-200)*.4,180,160+(mouseX-200)*.4,160,160+(mouseX-200)*.4,180);
      triangle(140+(mouseX-200)*.4,200,170+(mouseX-200)*.4,130,200+(mouseX-200)*.4,200);
      triangle(220+(mouseX-200)*.4,200,230+(mouseX-200)*.4,150,240+(mouseX-200)*.4,200);
      triangle(220+(mouseX-200)*.4,200,230+(mouseX-200)*.4,140,280+(mouseX-200)*.4,200);
      triangle(250+(mouseX-200)*.4,200,270+(mouseX-200)*.4,120,300+(mouseX-200)*.4,200);
      triangle(285+(mouseX-200)*.4,200,300+(mouseX-200)*.4,140,320+(mouseX-200)*.4,200);
      triangle(305+(mouseX-200)*.4,200,305+(mouseX-200)*.4,160,330+(mouseX-200)*.4,180);
      triangle(315+(mouseX-200)*.4,200,325+(mouseX-200)*.4,160,325+(mouseX-200)*.4,200);
      triangle(325+(mouseX-200)*.4,160,330+(mouseX-200)*.4,125,340+(mouseX-200)*.4,160);
      rect(325+(mouseX-200)*.4,160,55,20);
      triangle(340+(mouseX-200)*.4,160,360+(mouseX-200)*.4,120,375+(mouseX-200)*.4,140);
      triangle(340+(mouseX-200)*.4,160,375+(mouseX-200)*.4,140,380+(mouseX-200)*.4,160);
      rect(350+(mouseX-200)*.4,140,25,20);
      triangle(340+(mouseX-200)*.4,160,350+(mouseX-200)*.4,140,350+(mouseX-200)*.4,160);
      triangle(380+(mouseX-200)*.4,160,380+(mouseX-200)*.4,200,390+(mouseX-200)*.4,200);
      triangle(380+(mouseX-200)*.4,200,400+(mouseX-200)*.4,160,400+(mouseX-200)*.4,200);
      triangle(400+(mouseX-200)*.4,160,400+(mouseX-200)*.4,200,440+(mouseX-200)*.4,200);
    //Night
      fill(76,71,82,350-mouseY*1.5);
      rect((mouseX-200)*.4,160,120,40);
      rect(120+(mouseX-200)*.4,180,60,20);
      rect(230+(mouseX-200)*.4,180,150,20);
      triangle(0+(mouseX-200)*.4,160,0+(mouseX-200)*.4,200,-50+(mouseX-200)*.4,200);
      triangle(0+(mouseX-200)*.4,160,40+(mouseX-200)*.4,95,100+(mouseX-200)*.4,165);
      triangle(40+(mouseX-200)*.4,160,80+(mouseX-200)*.4,120,100+(mouseX-200)*.4,160);
      triangle(100+(mouseX-200)*.4,160,110+(mouseX-200)*.4,140,120+(mouseX-200)*.4,160);
      triangle(120+(mouseX-200)*.4,160,120+(mouseX-200)*.4,180,145+(mouseX-200)*.4,180);
      triangle(120+(mouseX-200)*.4,180,160+(mouseX-200)*.4,160,160+(mouseX-200)*.4,180);
      triangle(140+(mouseX-200)*.4,200,170+(mouseX-200)*.4,130,200+(mouseX-200)*.4,200);
      triangle(220+(mouseX-200)*.4,200,230+(mouseX-200)*.4,150,240+(mouseX-200)*.4,200);
      triangle(220+(mouseX-200)*.4,200,230+(mouseX-200)*.4,140,280+(mouseX-200)*.4,200);
      triangle(250+(mouseX-200)*.4,200,270+(mouseX-200)*.4,120,300+(mouseX-200)*.4,200);
      triangle(285+(mouseX-200)*.4,200,300+(mouseX-200)*.4,140,320+(mouseX-200)*.4,200);
      triangle(305+(mouseX-200)*.4,200,305+(mouseX-200)*.4,160,330+(mouseX-200)*.4,180);
      triangle(315+(mouseX-200)*.4,200,325+(mouseX-200)*.4,160,325+(mouseX-200)*.4,200);
      triangle(325+(mouseX-200)*.4,160,330+(mouseX-200)*.4,125,340+(mouseX-200)*.4,160);
      rect(325+(mouseX-200)*.4,160,55,20);
      triangle(340+(mouseX-200)*.4,160,360+(mouseX-200)*.4,120,375+(mouseX-200)*.4,140);
      triangle(340+(mouseX-200)*.4,160,375+(mouseX-200)*.4,140,380+(mouseX-200)*.4,160);
      rect(350+(mouseX-200)*.4,140,25,20);
      triangle(340+(mouseX-200)*.4,160,350+(mouseX-200)*.4,140,350+(mouseX-200)*.4,160);
      triangle(380+(mouseX-200)*.4,160,380+(mouseX-200)*.4,200,390+(mouseX-200)*.4,200);
      triangle(380+(mouseX-200)*.4,200,400+(mouseX-200)*.4,160,400+(mouseX-200)*.4,200);
      triangle(400+(mouseX-200)*.4,160,400+(mouseX-200)*.4,200,440+(mouseX-200)*.4,200);
  
//////////////////////////////// Sea pt.2 ft.Rocks /////////////////////////////////////////
//Waves bob up and down to mimic the rolling sea using a sin function
//Rocks move with parallax similar to mountains

  //Stationary water
    //Day
      fill(125,175,170);
      rect (0,200,400,400);
    //Night
      fill(79,91,134,350-mouseY*1.5);
      rect (0,200,400,400);
  
  //Wave 1
    //Day
      fill(100,165,155);
      rect (0,220+1*sin(frameCount*.025),400,400);
    //Night
      fill(66,81,123,350-mouseY*1.5);
      rect (0,220+1*sin(frameCount*.025),400,400);
      
  //Rocks 1
    //Day
      fill(98,96,104);
      triangle(80+(mouseX-200)*.5,280,110+(mouseX-200)*.5,215,120+(mouseX-200)*.5,280);
      triangle(80+(mouseX-200)*.5,280,120+(mouseX-200)*.5,230,160+(mouseX-200)*.5,280);
    //Night
      fill(76,71,82,350-mouseY*1.5);
      triangle(80+(mouseX-200)*.5,280,110+(mouseX-200)*.5,215,120+(mouseX-200)*.5,280);
      triangle(80+(mouseX-200)*.5,280,120+(mouseX-200)*.5,230,160+(mouseX-200)*.5,280);
      
  //Wave 2
    //Day
      fill(80,149,138);
      rect (0,240+2*sin(frameCount*.025),400,400);
    //Night
      fill(52,74,115,350-mouseY*1.5);
      rect (0,240+2*sin(frameCount*.025),400,400);
      
//////////////////////////////// Boat and Lantern /////////////////////////////////
  
  /*Boat will float up and down with Wave 3 
    but will stay stationary in the X axis 
    to make it look like the boat is cruising the sea */
  
  //Hull and Mast
    //Day
     fill(90,64,44,350);
     rect(200,199+4*sin(frameCount*.025),3,55);
     rect(185,250+4*sin(frameCount*.025),30,10);
     triangle(165,245+4*sin(frameCount*.025),185,250+4*sin(frameCount*.025),185,260+4*sin(frameCount*.025));
     triangle(235,245+4*sin(frameCount*.025),215,250+4*sin(frameCount*.025),215,260+4*sin(frameCount*.025));
    //Night
     fill(55,40,39,350-(mouseY)*1.5);
     rect(200,199+4*sin(frameCount*.025),3,55);
     rect(185,250+4*sin(frameCount*.025),30,10);
     triangle(165,245+4*sin(frameCount*.025),185,250+4*sin(frameCount*.025),185,260+4*sin(frameCount*.025));
     triangle(235,245+4*sin(frameCount*.025),215,250+4*sin(frameCount*.025),215,260+4*sin(frameCount*.025));
  
  //Lantern
    //Lantern (Body) 
      fill(255,250,225,125);
      triangle(235,245+4*sin(frameCount*.025),232,250+4*sin(frameCount*.025),237,250+4*sin(frameCount*.025));
      triangle(235,255+4*sin(frameCount*.025),232,250+4*sin(frameCount*.025),237,250+4*sin(frameCount*.025));
    
  //Sail
    //Day
      fill(255,250,225);
      rect(190,205+4*sin(frameCount*.025),25,30);
      triangle(190,210+4*sin(frameCount*.025),185,235+4*sin(frameCount*.025),190,235+4*sin(frameCount*.025));
      triangle(215,205+4*sin(frameCount*.025),220,205+4*sin(frameCount*.025),215,235+4*sin(frameCount*.025));
    //Night
      fill(200,195,175,350-(mouseY)*1.5);
      rect(190,205+4*sin(frameCount*.025),25,30);
      triangle(190,210+4*sin(frameCount*.025),185,235+4*sin(frameCount*.025),190,235+4*sin(frameCount*.025));
      triangle(215,205+4*sin(frameCount*.025),220,205+4*sin(frameCount*.025),215,235+4*sin(frameCount*.025));
      
/////////////////////////////////Siren ft.Rocks/////////////////////////////////////////////////////////////
  
  //Rocks and Siren will parralax on wave 3 to 'collide' with the boat
  
  //Siren Hair
    fill(0);
    rect(360+(mouseX-200)*.6,228,5,30);
    rect(365+(mouseX-200)*.6,230,3,30);
    triangle(365+(mouseX-200)*.6,228,365+(mouseX-200)*.6,230,368+(mouseX-200)*.6,230);
    
  //Rocks 2
     //Day
      fill(98,96,104);
      triangle (340+(mouseX-200)*.6,290,355+(mouseX-200)*.6,250,355+(mouseX-200)*.6,290);
      rect(355+(mouseX-200)*.6,250,15,40);
      triangle(355+(mouseX-200)*.6,290,375+(mouseX-200)*.6,235,390+(mouseX-200)*.6,290);
      triangle(350+(mouseX-200)*.6,240,355+(mouseX-200)*.6,270,370+(mouseX-200)*.6,270);
      triangle(380+(mouseX-200)*.6,225,385+(mouseX-200)*.6,270,410+(mouseX-200)*.6,270);
    //Night  
      fill(76,71,82,350-mouseY*1.5);
      triangle (340+(mouseX-200)*.6,290,355+(mouseX-200)*.6,250,355+(mouseX-200)*.6,290);
      rect(355+(mouseX-200)*.6,250,15,40);
      triangle(355+(mouseX-200)*.6,290,375+(mouseX-200)*.6,235,390+(mouseX-200)*.6,290);
      triangle(350+(mouseX-200)*.6,240,355+(mouseX-200)*.6,270,370+(mouseX-200)*.6,270);
      triangle(380+(mouseX-200)*.6,225,385+(mouseX-200)*.6,270,410+(mouseX-200)*.6,270);

  //Siren Tail
    fill(97,21,4);
    triangle(355+(mouseX-200)*.6,250,360+(mouseX-200)*.6,250,365+(mouseX-200)*.6,260);
    triangle(355+(mouseX-200)*.6,250,360+(mouseX-200)*.6,245,360+(mouseX-200)*.6,250);
    rect(360+(mouseX-200)*.6,245,5,5);
    triangle(365+(mouseX-200)*.6,245,365+(mouseX-200)*.6,250,368+(mouseX-200)*.6,245);
    fill(169,104,81);
    triangle(365+(mouseX-200)*.6,260,360+(mouseX-200)*.6,270,365+(mouseX-200)*.6,265);
    triangle(365+(mouseX-200)*.6,260,368+(mouseX-200)*.6,265,375+(mouseX-200)*.6,265);
    
  //Siren Body
    fill(234,199,165);
    ellipse(364+(mouseX-200)*.6,232,3,4);
    triangle(365+(mouseX-200)*.6,245,365+(mouseX-200)*.6,240,368+(mouseX-200)*.6,245);
    triangle(365+(mouseX-200)*.6,245,365+(mouseX-200)*.6,235,362+(mouseX-200)*.6,238);
    triangle(365+(mouseX-200)*.6,235,365+(mouseX-200)*.6,238,372+(mouseX-200)*.6,245);
    triangle(372+(mouseX-200)*.6,245,374+(mouseX-200)*.6,244,375+(mouseX-200)*.6,245);
    triangle(365+(mouseX-200)*.6,235,362+(mouseX-200)*.6,238,355+(mouseX-200)*.6,240);
    triangle(355+(mouseX-200)*.6,240,357+(mouseX-200)*.6,240,358+(mouseX-200)*.6,235);
    triangle(358+(mouseX-200)*.6,235,358+(mouseX-200)*.6,232,356+(mouseX-200)*.6,233);
  
  
//////////////////////////////// Sea pt.2 ft.Rocks & Lantern Light /////////////////////////////////////////

  //Wave 3
    //Day
      fill(65,140,127);
      rect (0,260+4*sin(frameCount*.025),400,400);
    //Night
      fill(39,64,104,350-mouseY*1.5);
      rect (0,260+4*sin(frameCount*.025),400,400);
  //Lantern Light bobs with the boat
      //Light turns on at night
        fill(240,240,200, 50-mouseY*.5);
        ellipse(235,250+4*sin(frameCount*.025),25+2*sin(frameCount*.03),25+2*sin(frameCount*.03));
        fill(240,240,200, 95-mouseY*.5);
        ellipse(235,250+4*sin(frameCount*.025),13+2*sin(frameCount*.03),13+2*sin(frameCount*.03));
        stroke(200,200,0,150-mouseY*.5);
        strokeWeight(5);
        point(235,250+4*sin(frameCount*.025));
        noStroke();
      
  //Rocks 3
    //Day
      fill(98,96,104);
      triangle(220+(mouseX-200)*.7,310,270+(mouseX-200)*.7,245,280+(mouseX-200)*.7,320);
      triangle(245+(mouseX-200)*.7,310,280+(mouseX-200)*.7,265,290+(mouseX-200)*.7,320);
    //Night
      fill(76,71,82,350-mouseY*1.5);
      triangle(220+(mouseX-200)*.7,310,270+(mouseX-200)*.7,245,280+(mouseX-200)*.7,320);
      triangle(245+(mouseX-200)*.7,310,280+(mouseX-200)*.7,265,290+(mouseX-200)*.7,320);
      
  //Wave 4
    //Day
      fill(55,130,120);
      rect (0,280+8*sin(frameCount*.025),400,400);
    //Night
      fill(30,58,93,350-mouseY*1.5);
      rect (0,280+8*sin(frameCount*.025),400,400);
      
//////////////////////////////// Sky pt.2 /////////////////////////////////////////////////
 
  //Change oppacity of suns to correspond with night and day shifts
     
     //Day
       //top
         fill(250,225,100);
         ellipse (200,60,40,40);
       //botom less opaque to mimic a reflection
         fill(250,225,100,100);
         ellipse (200,340,40,40);
     //Night
       //top
         fill(225,50,25,350-mouseY*1.5);
         ellipse (200,60,40,40);
       //bottom less opaque to mimic a reflection
         fill(225,50,25,100-mouseY*1.5);
         ellipse (200,340,40,40);
    
  //Changes oppacity of secondary, slightly smaller ellipse to make the moon a cresent
  
     //top
       fill(25,55,80,350-mouseY*1.5);
       ellipse (210,60,35,35);
     //bottom
       fill(30,58,93,350-mouseY*1.5);
       ellipse (210,340,35,35);
  
  


//Draw the Border

  //Day
    fill(170, 200, 210);
    triangle(200,0,40,0,40,200);
    triangle(200,0,360,0,360,200);
    triangle(40,200,40,400,200,400);
    triangle(360,200,360,400,200,400);
    rectMode(CORNER);
    rect(0,0,40,200);
    rect(0,200,40,200);
    rect(360,0,40,200);
    rect(360,200,40,200);
  
  //Night
    fill(20,17,35,350-mouseY*1.5);
    triangle(200,0,40,0,40,200);
    triangle(200,0,360,0,360,200);
    triangle(40,200,40,400,200,400);
    triangle(360,200,360,400,200,400);
    rectMode(CORNER);
    rect(0,0,40,200);
    rect(0,200,40,200);
    rect(360,0,40,200);
    rect(360,200,40,200); 
  
}