Your browser does not support the canvas tag.
previous        Show / Hide Source    
Process
    Download        next
/*
 Moonlight - An interactive drawing of the Ocean at night.
 Moving the mouse left and right will control the clouds.
 Clicking will make the lights bigger
*/

void setup () {
background(#1D2263);
size(400, 400);

}

void draw () {
frameRate(60);

//Sky

noStroke();

fill(#04050F);
rectMode(CORNER);
rect(0, 0, 400, 40);
noFill();

fill(#080A1E);
rectMode(CORNER);
rect(0, 40, 400, 40);
noFill();

fill(#0E1133);
rectMode(CORNER);
rect(0, 80, 400, 40);
noFill();

fill(#141949);
rectMode(CORNER);
rect(0, 120, 400, 40);
noFill();

fill(#191E56);
rectMode(CORNER);
rect(0, 160, 400, 40);
noFill();

fill(#1D2263);
rectMode(CORNER);
rect(0, 200, 400, 400);
noFill();

//Moon

fill(#E3E5F2);
ellipseMode(CORNER);
ellipse(140, 20, 60, 60);

//Clouds (back)

fill(#426EFF, 50);

ellipse(mouseX*0.05, height/10, 200, 20);

ellipse(mouseX*0.07, height/5, 100, 20);

ellipse(mouseX*0.15, height/4, 200, 20);

ellipse(mouseX*0.5, height/12, 200, 20);

ellipse(mouseX*0.8, height/3, 200, 20);

ellipse(mouseX*0.1, height/7, 200, 20);

noFill();

//Mountain (back)

fill(#060A1A);

triangle(0, 170, 20, 120, 40, 170);
triangle(40, 170, 80, 80, 100, 170);
triangle(100, 170, 130, 120, 160, 170);
triangle(160, 170, 200, 80, 240, 170);
rectMode(CORNER);
rect(0, 170, 250, 400);

noFill();

//Clouds (middle)

fill(#426EFF, 120);
ellipse(mouseX*1, height/5, 200, 20);
ellipse(mouseX*0.07, height/4.5, 200, 20);
ellipse(mouseX*0.9, height/3, 200, 20);

noFill();

//Mountain (front)

fill(0);
triangle (0, 350, 160, 100, 270, 350);
triangle (100, 350, 250, 60, 350, 350);
triangle (100, 350, 300, 30, 500, 400);
rectMode(CORNER);
rect(0, 350, 400, 400 );

//Water1

fill(#0078FF, 100);
rectMode(CORNER);
rect(0, 295, 400, 400 );
noFill();

//Bridge

fill(#624444);
rectMode(CORNER);
rect(0, 240, 400, 40);

rectMode(CORNER);
rect(60, 260, 20, 400);

rectMode(CORNER);
rect(190, 260, 20, 400);

rectMode(CORNER);
rect(320, 260, 20, 400);
noFill();


//Water2

fill(#0078FF, 100);
rectMode(CORNER);
rect(0, 310, 400, 400 );
noFill();

//Water3

fill(#0090FF, 100);
rectMode(CORNER);
rect(0, 320, 400, 400 );
noFill();

//Clouds (front)

fill(#426EFF, 150);

ellipse(mouseX*0.5, height/13, 100, 10);
ellipse(mouseX*0.55, height/3, 300, 10);
ellipse(mouseX*0.3, height/7, 200, 20);
ellipse(mouseX*0.55, height/5, 200, 20);
ellipse(mouseX*0.6, height/10, 400, 20);

noFill();

//Lights

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(95, 300, 50, 50);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(95, 300, 20, 20);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(80, 260, 30, 30);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(80, 260, 10, 10);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(40, 280, 30, 30);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(40, 280, 30, 30);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(20, 260, 10, 10);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(350, 280, 50, 50);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(350, 280, 20, 20);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(300, 260, 20, 20);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(280, 300, 10, 10);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(280, 300, 30, 30);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(370, 300, 20, 20);

fill(#E3E5F2,150);
ellipseMode(CENTER);
ellipse(135, 280, 10, 10);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(135, 280, 25, 25);

noFill();

//Filter - To make the drawing look darker
rectMode(CORNER);
rect(0, 0, 400, 400);
noFill();


}

void mousePressed() {
// Makes the lights bigger
frameRate(3);
//Sky

noStroke();

fill(#04050F);
rectMode(CORNER);
rect(0, 0, 400, 40);
noFill();

fill(#080A1E);
rectMode(CORNER);
rect(0, 40, 400, 40);
noFill();

fill(#0E1133);
rectMode(CORNER);
rect(0, 80, 400, 40);
noFill();

fill(#141949);
rectMode(CORNER);
rect(0, 120, 400, 40);
noFill();

fill(#191E56);
rectMode(CORNER);
rect(0, 160, 400, 40);
noFill();

fill(#1D2263);
rectMode(CORNER);
rect(0, 200, 400, 400);
noFill();

//Moon

fill(#E3E5F2);
ellipseMode(CORNER);
ellipse(140, 20, 60, 60);

//Clouds (back)

fill(#426EFF, 50);

ellipse(mouseX*0.05, height/10, 200, 20);

ellipse(mouseX*0.07, height/5, 100, 20);

ellipse(mouseX*0.15, height/4, 200, 20);

ellipse(mouseX*0.5, height/12, 200, 20);

ellipse(mouseX*0.8, height/3, 200, 20);

ellipse(mouseX*0.1, height/7, 200, 20);

noFill();

//Mountain (back)

fill(#060A1A);

triangle(0, 170, 20, 120, 40, 170);
triangle(40, 170, 80, 80, 100, 170);
triangle(100, 170, 130, 120, 160, 170);
triangle(160, 170, 200, 80, 240, 170);
rectMode(CORNER);
rect(0, 170, 250, 400);

noFill();

//Clouds (middle)

fill(#426EFF, 120);
ellipse(mouseX*1, height/5, 200, 20);
ellipse(mouseX*0.07, height/4.5, 200, 20);
ellipse(mouseX*0.9, height/3, 200, 20);

noFill();

//Mountain (front)

fill(0);
triangle (0, 350, 160, 100, 270, 350);
triangle (100, 350, 250, 60, 350, 350);
triangle (100, 350, 300, 30, 500, 400);
rectMode(CORNER);
rect(0, 350, 400, 400 );

//Water1

fill(#0078FF, 100);
rectMode(CORNER);
rect(0, 295, 400, 400 );
noFill();

//Bridge

fill(#624444);
rectMode(CORNER);
rect(0, 240, 400, 40);

rectMode(CORNER);
rect(60, 260, 20, 400);

rectMode(CORNER);
rect(190, 260, 20, 400);

rectMode(CORNER);
rect(320, 260, 20, 400);
noFill();


//Water2

fill(#0078FF, 100);
rectMode(CORNER);
rect(0, 310, 400, 400 );
noFill();

//Water3

fill(#0090FF, 100);
rectMode(CORNER);
rect(0, 320, 400, 400 );
noFill();

//Clouds (front)

fill(#426EFF, 150);

ellipse(mouseX*0.5, height/13, 100, 10);
ellipse(mouseX*0.55, height/3, 300, 10);
ellipse(mouseX*0.3, height/7, 200, 20);
ellipse(mouseX*0.55, height/5, 200, 20);
ellipse(mouseX*0.6, height/10, 400, 20);

noFill();

//Lights

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(95, 300, 70, 70);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(95, 300, 40, 40);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(80, 260, 50, 50);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(80, 260, 40, 40);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(40, 280, 50, 50);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(40, 280, 50, 50);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(20, 260, 40, 40);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(350, 280, 50, 50);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(350, 280, 40, 40);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(300, 260, 30, 30);

fill(#E3E5F2,200);
ellipseMode(CENTER);
ellipse(280, 300, 20, 20);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(280, 300, 50, 50);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(370, 300, 40, 40);

fill(#E3E5F2,150);
ellipseMode(CENTER);
ellipse(135, 280, 20, 20);

fill(#E3E5F2,80);
ellipseMode(CENTER);
ellipse(135, 280, 45, 45);

noFill();

//Filter - To make the drawing look darker

fill(#031DFF, 40);
rectMode(CORNER);
rect(0, 0, 400, 400);
noFill();


}

void keyPressed() {
  
// Changes the drawing to look more red in colour
frameRate(1);

fill (#BF000D,100);
rectMode(CORNER);
rect(0,0,400,400);
noFill();
}