Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
//Clear Skies, by Ashborn Binapal 2018
//PROG 14998 Interactive Drawing Assignment



void setup() {
  noCursor(); //removes mouse Cursor
  size(600,400); //sets image to Landscape
  rectMode(CORNERS); //set rectangles to CORNERS mode
  ellipseMode(CORNERS); //set ellipses to CORNERS mode
  noStroke(); //removed outline on shapes/objects
}


void draw() {
  
  noStroke();
  
  //Sky
  
    //Background (Early Morning)
      background(70,72,129); //set as a transition colour between the phases
  
    //Night time light
      fill(1,2,52,250); //set colour to night like blue
      rect(0,0,600,400);
  
    //Day time light
      fill(243,236,208,(-80+mouseX)); //set colour to Very light yellow
      rect(0,0,600,400); //main sky colour
      fill(254,225,151,(-285+mouseX)); //set colour to light yellow
      rect(0,250,600,300); //secondary sky colour
      fill(230,177,93,(-250+mouseX)); //set colour to moderate orange
      rect(0,300,600,400); //darkest sky colour
  

  //Animated
   
    //Stars (They're 2pix by 2pix squares which expand to seem like they're flashing
      fill(255,255,255,255-(mouseX*1.25)); //set colour to white with fading opacity
      rect(200,150,202+sin(frameCount*.4),152+sin(frameCount*.4));
      rect(250,165,252+sin(frameCount*.4),167+sin(frameCount*.4));
      rect(225,90,227+sin(frameCount*.4),92+sin(frameCount*.4));
      rect(134,232,136+sin(frameCount*.4),234+sin(frameCount*.4));
      rect(276,258,278+sin(frameCount*.4),260+sin(frameCount*.4));
      rect(145,119,147+sin(frameCount*.4),121+sin(frameCount*.4));
      rect(291,308,293+sin(frameCount*.4),310+sin(frameCount*.4));
      rect(343,57,345+sin(frameCount*.4),59+sin(frameCount*.4));
      rect(420,236,422+sin(frameCount*.4),238+sin(frameCount*.4)); //420 hehe its lit
      rect(500,185,502+sin(frameCount*.4),187+sin(frameCount*.4));
      rect(39,30,41+sin(frameCount*.4),32+sin(frameCount*.4));
      rect(50,273,52+sin(frameCount*.4),275+sin(frameCount*.4));
      rect(75,200,77+sin(frameCount*.4),202+sin(frameCount*.4));
      rect(350,180,352+sin(frameCount*.4),182+sin(frameCount*.4));
      rect(555,46,557+sin(frameCount*.4),48+sin(frameCount*.4));
      rect(485,140,487+sin(frameCount*.4),142+sin(frameCount*.4));
      rect(455,85,457+sin(frameCount*.4),87+sin(frameCount*.4));
      rect(55,85,57+sin(frameCount*.4),87+sin(frameCount*.4));
      /* sin(frameCount) functions allow for the illusion that the stars are flashing
      by constantly making their second X and Y values slightly increase and decrease*/
      
      
  //Solar Objects     
  
    //Moon
      fill(219,219,219,105-(mouseX/6)); //set colour to translucent grey
      ellipse(mouseX/1.25+445+sin(frameCount*.4),80,mouseX/1.25+500+sin(frameCount*.4),135);
      fill(180,180,180,240-(mouseX/2)); //set colour to grey
      ellipse(mouseX/1.25+450,85,mouseX/1.25+495,130);
  
    //Sun
      fill(236,242,83,225); //set colour to bright yellow
      ellipse(mouseX/1.2-185,65,mouseX/1.2-120,130);
    
    
  //Static   
  
    //Lighthouse
    
      //Lighthouse Lower Body
        fill(237-(mouseX/5),239-(mouseX/5),247-(mouseX/5)); //set colour to white (gets darker to contrast with background with higher mouseX value)
        quad(465,260,490,260,485,190,470,190);
      
      //Lighthouse Middle Glass
        fill(119-(mouseX/10.5),153-(mouseX/10.5),155-(mouseX/10.5)); //set colour to light blue (gets darker with higher mouseX value)
        rect(485,190,470,175);
      
      //Lighthouse Upper Roof
        fill(121+(mouseX/12),27+(mouseX/28),28+(mouseX/28)); //set colour to red (gets brighter with higher mouseX value)
        triangle(465,175,490,175,477.5,168);
      
      //Lighthouse Stripe
        quad(468,200,487,200,488,210,467,210);
      
    
    //Ledge
    
      fill(50+(mouseX/14),28+(mouseX/14),12); //set colour to slightly darker brown (gets lighter with higher mouseX value)
      triangle(524,260,386,245,464,400);
      
      fill(56+(mouseX/14),32+(mouseX/14),12); //set colour to brown (gets lighter with higher mouseX value)
      rect(600,400,450,260);
  
  
    //Stones
    
      //Stone 1 (Right side)
        fill(140+(mouseX/12),140+(mouseX/12),142+(mouseX/12)); //set colour to grey (gets lighter with higher mouseX value)
        ellipse(536,300,555,400);
        ellipse(527,320,555,400);
        ellipse(555,312,564,400);
        
      //Stone 2 (Left side)
        ellipse(374,320,385,400);
        ellipse(367,335,385,400);
        ellipse(385,308,402,400);
    
    
      //Water
        fill(0+(mouseX/8),19+(mouseX/7),117+(mouseX/7)); //set colour to blue
        rect(0,325+(mouseY/20+sin(frameCount*.1)),600,400); //allows water to slightly move without mouseY movement
    
    
      //Clouds
        fill(222-(mouseX/10),222-(mouseX/10),222-(mouseX/10),245+(mouseX/7)); //set colour to very light grey (gets darker to contrast with background as mouseX value gets higher)
    
        //Small cloud
          ellipse(50+(mouseX/7),60,95+(mouseX/7),70);
    
        //Larger cloud #1 (The one closer to the center of the canvas at mouseX=0)
          ellipse(250+(mouseX/12),120,340+(mouseX/12),140);
          ellipse(245+(mouseX/12),135,330+(mouseX/12),155);
          ellipse(255+(mouseX/12),128,355+(mouseX/12),155);
      
        //Larger cloud #2 (The one closes to the left of the canvas at mouseX=0)
          ellipse(150+(mouseX/18),160,205+(mouseX/16),180);
          ellipse(140+(mouseX/18),175,195+(mouseX/16),195);
          ellipse(165+(mouseX/18),168,215+(mouseX/16),195);
    
        //Larger could #3 (The one closes to the right of the canvas at mouseX=0)
          ellipse(550+(mouseX/25),160,635+(mouseX/25),180);
          ellipse(525+(mouseX/25),175,610+(mouseX/25),195);
          ellipse(550+(mouseX/25),175,635+(mouseX/25),195);
      
        //Larger cloud #4 (Moves onto screen slowly as mouseX value increases)
          ellipse(-125+(mouseX/6),260,-35+(mouseX/6),280);
          ellipse(-100+(mouseX/6),275,-10+(mouseX/6),295);
          ellipse(-125+(mouseX/6),275,-35+(mouseX/6),295);
    
    
  //UI
     //mouse location
      fill(188,188,188,55); //set colour to very translucent grey
      rect(20,20,580,30);
      ellipse(18+(mouseX/1.1),15,38+(mouseX/1.1),35); //follows mouse's X position while staying on the bar
      
}


void mouseMoved() {
  
  //Lighthouse Light effect
  fill(249,252,171,125-(mouseX/6));
  triangle(470,182.5,0,250,0,67.5);
  
}

//Roof and Stripe colour change
void mousePressed() {

      //Lighthouse Upper Roof
        fill(113+(mouseX/12),255+(mouseX/28),100+(mouseX/28)); //set colour to green
        triangle(465,175,490,175,477.5,168);
      
      //Lighthouse Stripe
        quad(468,200,487,200,488,210,467,210);
  
}

void keyPressed() {
  
  //Key button press message
  print(" Looks like we have some clear skies.");
  
}