Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next

//  INTERACTIVE DRAWING
//  " SPACE "
//  JACKSON LANAUS
//  9/ /2017


void setup() {
  size(400,400);
  frameRate(60);
  noCursor();
}


//________color key________
// Space:7,21,67
// water:53,117,203
// land 1:34,162,42
// land 2:47,193,55
// cloud light:(255)
// cloud dark:(200)
// cloud darker:(170)
// sun darker: (255,185,8)
// sun light: (255,235,54)
// moon dark: (197,206,224)
// moon light: (242,245,250)
//__________________________
void draw() {
  background(7,21,67);
  noStroke();
  rectMode(CORNERS);
  
  //sun
  // the 470-mouseY sets the suns begining point as -470, which places it below the screen.
  // this allows for the timing between the shadows opacity to co-incide with the rising of the sun and producing the effect.
  fill(255,185,8);
  ellipse (160,470-mouseY, 70,70);
  fill(255,235,54);
  ellipse (160,470-mouseY, 60,60);
  
  fill(53,117,203);
  //base earth
  ellipse(200,200,200,200);
  //land darker
  // the final value of 10 sets the rounding of the rectangles corners, and I tend to use that rounding alot.
  fill(34,162,42);
  rect(120,130,170,160,10);
  rect(140,140,190,200,10);
  rect(170,160,230,190,10);
  rect(210,150,220,170,10);
  rect(160,180,210,230,10);
  rect(180,220,200,260,10);
  rect(150,250,200,250,10);
  rect(190,260,200,280,10);
  //land lighter
  fill(47,193,55);
  rect(260,130,280,150,10);
  rect(280,150,290,180,10);
  rect(280,170,300,190,10);
  rect(260,160,270,180,10);
  rect(260,190,300,220,10);
  rect(250,220,300,240,10);
  rect(260,230,290,260,10);
  rect(270,260,280,270,10);

  //shadow
  // the MouseY valuse in the fill line controls the opacity, by subtracting the mouses co-ordinate value from the default state of 200,
  //this makes the opacity value essentially decrease as I move the mouse down and produces an effect like that of the sun rising (it becomes brighter)
  fill(7,21,67,180-mouseY);
  ellipse(200,200,210,210);
  
  
  //darker clouds
  fill(200);
  rect(120,140,180,160,10);
  rect(240,100,290,120,10);
  rect(160,220,200,240,10);
  rect(240,210,300,230,10);
  rect(140,290,180,310,10);
  //lighter clouds
  fill(255);
  rect(120,80,160,100,10);
  rect(100,110,160,130,10);
  rect(210,90,260,110,10);
  rect(230,190,270,210,10);
  rect(120,210,170,230,10);
  rect(190,270,240,290,10);
  
  //moon
  // the 50+mouseY allows for the moon to start in the highest point, and fall bellow the screen to hide itself as the mouse moves down. 
  fill(197,206,224);
  ellipse (250,50+mouseY, 60,60); 
  fill(242,245,250);
  ellipse (250,50+mouseY, 50,50);
  fill(197,206,224);
  ellipse (260,60+mouseY, 10,10);
  ellipse (235,42+mouseY, 10,10);
  
 //stars (just small white ellipses)
  fill(255);
  ellipseMode(CENTER);
  ellipse(20,140,4,4);
  ellipse(320,145,4,4);
  ellipse(20,40,4,4);
  ellipse(40,20,4,4);
  ellipse(80,30,4,4);
  ellipse(240,20,4,4);
  ellipse(280,5,4,4);
  ellipse(320,10,4,4);
  ellipse(360,20,4,4);
  ellipse(385,0,4,4);
  ellipse(380,60,4,4);
  ellipse(340,40,4,4);
  ellipse(20,60,4,4);
  
  // stalite
  fill(80);
  quad(mouseX+10,70,mouseX-20,110,mouseX-10,110,mouseX+20,75);
  fill(110);
  quad(mouseX,70,mouseX-20,90,mouseX+10,110,mouseX+20,100);
  fill(73,131,180);
  quad(mouseX-20,100,mouseX-40,120,mouseX-20,130,mouseX,110);
  quad(mouseX,70,mouseX+20,50,mouseX+40,60,mouseX+20,80);
  fill(200);
  ellipse(mouseX+5,80,30,30);
  fill(180);
  ellipse(mouseX+5,80,20,20);
  fill(120);
  ellipse(mouseX+5,80,5,5);
}

void mousePressed (){
  println("The thrid rock from the sun");
}