Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*
The Great Sea: By Dylan Montgomery
September 17th 2018

> Sail interaction flips left and right with mouse
> Sky interaction, darkens with descending mouseY
> Rudder interaction tilts left and right opposite to mouseX

< Clouds float left and right idly, offset from their adjacent counterparts
< Ship bobs up and down idly
< Wake pulses larger and smaller idly

*/

void setup() 
{
  //Set screen size
  size(400, 400);
  //Hide cursor while on screen
  noCursor();
  frameRate(120);
}

void draw()
{
  //Set background Colour
  background(7 - mouseY/20, 162 - mouseY/10, 252 - mouseY/5);
  //MouseY darkens sky, descending
  
  
  //Disable perimeter stroke on shapes
  noStroke();
  
  //Draw Sea to screen
  rectMode(CORNER);
  fill(55, 112, 211);
  rect(0, 240, 400, 160);
  
  //
  //Draw Clouds
  //
  
  //Set Cloud colour and opacity
  fill(255, 255, 255, 200);
  
  //Left Cloud
  ellipse(75 + sin(millis()/150)*10, 60, 80, 30);
  ellipse(115 + cos(millis()/150)*10, 35, 80, 30);
  
  //Right Cloud
  ellipse(275 + sin(millis()/150)*10, 60, 80, 30);
  ellipse(315 + cos(millis()/150)*10, 35, 80, 30);
  
  //
  //Draw Wake
  //
  
  //Left Wake Whitecaps
  fill(255, 255, 255, 255);
  ellipse(120, 300, 75 + sin(millis()/150)*10, 60 + sin(millis()/150)*10);
  
  //Left Wake Wave
  fill(55, 112, 211);
  ellipse(125, 315, 70 + cos(millis()/150)*15, 55 + cos(millis()/150)*15);
  
  //Right Wake Whitecaps
  fill(255, 255, 255);
  ellipse(280, 300, 75 + sin(millis()/150)*10, 60 + sin(millis()/150)*10);
  
  //Right Wake Wave
  fill(55, 112, 211);
  ellipse(275, 315, 70 + cos(millis()/150)*15, 55 + cos(millis()/150)*15);
  
  //
  //Draw Ship (Bobs up and down)
  //
  
  //Ship Hull
  fill(255, 0, 0);
  quad(170, 250 + sin(millis()/150), 230, 250 + sin(millis()/150), 260, 350 + sin(millis()/150), 140, 350 + sin(millis()/150));
  quad(140, 350 + sin(millis()/150), 260, 350 + sin(millis()/150), 235, 385 + sin(millis()/150), 165, 385 + sin(millis()/150));
  
  fill(155, 40, 40);
  quad(170, 355 + sin(millis()/150), 230, 355 + sin(millis()/150), 235, 385 + sin(millis()/150), 165, 385 + sin(millis()/150));
  
  fill(255, 255, 255);
  quad(175, 255 + sin(millis()/150), 225, 255 + sin(millis()/150), 250, 345 + sin(millis()/150), 150, 345 + sin(millis()/150));
  quad(250, 345 + sin(millis()/150), 150, 345 + sin(millis()/150), 170, 355 + sin(millis()/150), 230, 355 + sin(millis()/150));
  
  fill(0);
  quad(180, 260 + sin(millis()/150), 220, 260 + sin(millis()/150), 240, 340 + sin(millis()/150), 160, 340 + sin(millis()/150));
  quad(240, 340 + sin(millis()/150), 160, 340 + sin(millis()/150), 175, 347 + sin(millis()/150), 225, 347 + sin(millis()/150));
  
  //Rudder
  fill(255, 255, 0);
  quad(200, 360 + sin(millis()/150), 205, 370 + sin(millis()/150), 205 - mouseX/30, 395 + sin(millis()/150), 195, 370 + sin(millis()/150));
  
  //Mast
  fill(50, 130, 50);
  quad(190, 270 + sin(millis()/150), 210, 270 + sin(millis()/150), 225, 290 + sin(millis()/150), 175, 290 + sin(millis()/150));
  
  fill(50, 110, 50);
  quad(175, 290 + sin(millis()/150), 225, 290 + sin(millis()/150), 224, 300 + sin(millis()/150), 176, 300 + sin(millis()/150));
  
  rectMode(CORNERS);
  fill(50, 190, 50);
  rect(195, 90 + sin(millis()/150), 205, 270 + sin(millis()/150));
  
  //Sail
  fill(255, 254, 244); //change to beige
  triangle(200, 100 + sin(millis()/150), 200, 255 + sin(millis()/150), mouseX/1.5 + 70, 255 + sin(millis()/150)); // default x3 = 330

}