Erin Fuller – Generative Landscape

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 10

var terrainSpeed1 = 0.00009; //background mountain speed
var terrainDetail1 = 0.006; //background mountain detail

var terrainSpeed2 = 0.00025; //foreground mountain speed
var terrainDetail2 = 0.005; //foreground mountain detail

var terrainSpeed3 = 0.00025; //foreground plane speed
var terrainDetail3 = 0.0015; //foreground plane detail

var img;
var gFrameCount = 0; 

function preload() {
    img = loadImage("https://i.imgur.com/mO1FDPJ.png"); //preload image
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

function draw() {
//sky
    colorMode(HSB);
    var s = 55; // saturation 55
    var b = 100; //brightness 100

    gFrameCount = gFrameCount + 1;
    if (gFrameCount > 600) {
        gFrameCount = 0;
    } //add frame count, restart after 600

    if (gFrameCount > 300) {
        var s = map(gFrameCount, 300, 600, 85, 55);
        var b = map(gFrameCount, 300, 600, 25, 100);
        var m = map(gFrameCount, 300, 600, 25, 65);
    } else {
        var s = map(gFrameCount, 0, 300, 55, 85);
        var b = map(gFrameCount, 0, 300, 100, 25);
        var m = map(gFrameCount, 0, 300, 65, 25);        
    } //changes sky background + mountains to night
    background(214, s, b); 

//sun & moon
    var centerx = width / 2; 
    var centery = 170;
    var radius = 120;
    var d = 45 + random(-2, 2); //makes sun and moon more fun
    var rAngle = map(frameCount, 0, 600, 0, 360) + 45; //
    
    noStroke();
    line(centerx, centery, centerx + x, centery - y); //rotating line w circles at end

    var sX = cos(radians(rAngle)) * radius;
    var sY = sin(radians(rAngle)) * radius;

    ellipseMode(CENTER);
    fill('yellow');
    ellipse(centerx + sX, centery - sY, d, d); //sun

    var mX = cos(radians(-rAngle)) * radius; //neagtive to go in opposite of sun
    var mY = sin(radians(-rAngle)) * radius;

    fill('white');
    ellipse(centerx + mX, centery - mY, d, d); //moon

//background-mountain
    noStroke(); 
    fill(32, 60, m - 5);
    beginShape(); 
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0, 1, height / 12, height / 3);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();

//foreground-mountain
    fill(32, 45, m); 
    beginShape(); 
    vertex(0, height);
    for (var z = 0; z < width; z++) {
        var f = (z * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(f), 0, 1, height / 12, height / 2);
        vertex(z, y); 
    }
    vertex(width, height);
    endShape();

//foreground-plane
    fill(32, 30, m + 20); 
    beginShape(); 
    vertex(0, height);
    for (var z = 0; z < width; z++) {
        var p = (z * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(p), 0, 1, height / 2, height * .75);
        vertex(z, y); 
    }
    vertex(width, height);
    endShape();
 
//foreground-train
    fill(10); 
    beginShape(); // clockwise

    vertex(0, 480);
    vertex(0, 0);
    vertex(480, 0);
    vertex(480, 480);

    var a = 20;
    var b = 40;
    var c = 60

    beginContour(); // counter clockwise
    vertex(b, a); //left-up
    bezierVertex(a, a, a, a, a, b);
    vertex(a, height - b - c); //left-down
    bezierVertex(a, height - a - c, a, height - a - c, b, height - a - c);
    vertex(width - b, height - a - c); //right-down
    bezierVertex(width - a, height - a - c, width - a, height - a - c, width - a, height - b - c);
    vertex(width - a, b); //right up
    bezierVertex(width - a, a, width - a, a, width - b, a);  

    endContour();
    endShape(CLOSE);

    rect(0, 115, width, 5);
    rect(0, 210, width, 5);
    rect(0, 305, width, 5);
    
    noFill(); 
    colorMode(RGB, 225);
    stroke(139, 186, 213, 130);
    strokeWeight(10);
    
    line(60, 100, 120, 40); //"window glares"
    line(62, 73, 93, 42);
    line(95, 95, 130, 59);

    line(426, 322, 387, 361); //"window glares"
    line(443, 328, 390, 381);
    line(451, 344, 412, 382);

//foreground cowboy
    image(img, -90, 140, img.width * .25, img.height * .25);
}

I generated a landscape that both travels through space and time. The cowboy is watching the desert pass by from the train, as well as the day change to night and back.