Mirage (Charlie Mo)

sketch

//Charlie MO
//cdmo@andrew.cmu.edu
//Section B

var terrainSpeed = 0.0001;
var terrainSpeed2 = 0.0003;
var terrainDetail = 0.002;

function setup() {
    createCanvas(1000, 1000);
    frameRate(10);
}
 
function draw() {
    background(137, 255, 196);
    
    //mountains
    noStroke();
    fill(255)
    ellipse(700,300,170,170)

    fill(175, 38, 38,30)
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 600, 440);
        vertex(x, y); 
 
        stroke(175, 38, 38,100)
        line(x,y,0,-50) //the line create peaks when connected to the vertex
       
    }
    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, 600, 700);
        vertex(x, y); 
        stroke(186, 27, 27,100)
        line(x+300,y-100,1000,200)

        stroke(186, 27, 27,200)
        line(x+100,y,1000,400)

    }
    endShape();

    //clouds and sea foam
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, 400, 500);
        fill(255,255,255,150)
        noStroke();
        vertex(x+100, y); 
    
    }
    endShape();

    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 300, 170);
        fill(255,255,255,150)
        noStroke();
        vertex(x+700, y); 
      
    }
    endShape();


    beginShape(); 
    for (var x = 0; x < width/2; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 300, 170);
        fill(255,255,255,150)
        noStroke();
        vertex(x+100, y-100); 
    }

    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 600, 800);
        fill(255,255,255,150)
        noStroke();
        vertex(x, y); 
	}

    endShape();

    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * -terrainSpeed2);
        var y = map(noise(t), 0,1, 700, 800);
        fill(255,255,255,150)
        noStroke();
        vertex(x+200, y+100); 
    
    }
    endShape();

}