var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
function setup() {
createCanvas(480, 480);
frameRate(10);
}
function draw(){
background(0, 29, 76);
//draw sun
sun();
//draw landscape
noStroke()
fill(44, 0, 206);
beginShape();
for (var x = 0; x < width; x++) {
var u = x * terrainDetail + millis() * terrainSpeed;
//restrict map to bounded range
var y = map(noise(u), 0,1, 110, height/2);
//bring waves up
vertex(x,y+100);
}
vertex(width,height);
vertex(0,height);
endShape();
//draw the lines in the front of the landscape
for (var k = 0; k < 30; k++){
stroke(255);
beginShape();
for (var x = 0; x <width*5; x++) {
var u = x * terrainDetail + millis() * terrainSpeed;
var y = map(noise(u), 0,1, 110, height/2);
//make lines start left of each other, y modified to start beyond canvas
vertex(x-5*k,y+100+5*k);
}
vertex(width*5,height);
vertex(0,height);
endShape();
}
}
//draw sun
function sun() {
fill(255, 59, 0);
ellipse(240,290,400,400);
//white circle outlines
for (var j = 0; j < 36; j++){
noFill();
stroke(255);
strokeWeight(1);
ellipse(240,290,400 + 10*j,400 + 10*j);
}
}
This was kinda hard so I kept it simple. I have an object sun in the back, and layered the foreground to create a sense of depth, instead of doing so with different colors.