Caroline Song – Project 11 – Landscape

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 11: Landscape

var tree = [];
var star = [];
var speedTerrain = 0.001;
var slopeTerrain = 0.008;
var yPoint = 380; //where mountains meet ground
//2, 19, 46

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of stars
    for (var i = 0; i < 25; i++){
        var starX = random(width);
        var starY = random(0, height/2);
        star[i] = makeStar(starX, starY);
    }

    //create an initial collection of trees
    for (var i = 0; i < 10; i++){
        var treeX = random(width);
        var treeY = random(360, 380);
        tree[i] = makeTree(treeX, treeY);
    }
    frameRate(10);
}


function draw() {
    background(0, 19, 48); 
    fill(43, 75, 128)
    //draw ground
    rect(0, yPoint, width, 150);

    displayStars();
    drawTallerMountains();
    drawMountains();
    displayTree();
}

function displayTree(){
    //call move and show trees
    for (var l = 0; l < tree.length; l++){
        tree[l].move();
        tree[l].draw();
    }
}

function moveTree(){
    //set speed of trees and repeat them as they leave the screen 
    this.x2 += this.speed2;
    if(this.x2 <= -10) {
        this.x2 += width
    }
}

function drawTree(){
    //draw trees
    noStroke();
    fill(54, 100, 156);
    push();
    translate(this.x2, this.y2);
    triangle(3, -this.treeHeight, -this.treeWidth/2, 3, this.treeWidth/2 + 5, 3)
    rect(0, 0, 7, 20);
    pop();

}

function makeTree(locationX, locationY){
    var makeT = {x2: locationX,
                y2: locationY,
                treeWidth: random(20, 30),
                treeHeight: random(15, 40),
                speed2: -5,
                move: moveTree,
                draw: drawTree}
    return makeT;
} 

function drawStar(){
    var starWidth = random(1, 3); //make stars sparkle!
    //draw stars
    noStroke();
    fill(252, 232, 3);
    push();
    translate(this.x, this.y);
    ellipse(20, 20, starWidth, starWidth);
    pop();
}

function makeStar(locationX, locationY){
    var makeS = {x: locationX,
                y: locationY,
                speed: -5,
                move: moveStar,
                draw: drawStar}
    return makeS;
}

function moveStar(){
    //speed of star and repeat on canvas
    this.x += this.speed;
    if(this.x <= -10){
        this.x += width;
    }
}

function displayStars(){
    //display stars
    for(i = 0; i < star.length; i++){
        star[i].move();
        star[i].draw();
    }
}

function drawMountains(){
    //draw front mountains
    stroke(5, 40, 97);
    beginShape();
    for (var i = 0; i < width; i++){
        var t = (i * slopeTerrain) + (millis() * speedTerrain);
        var y = map(noise(t), 0, 1, 100, 400);
        line(i, y, i, yPoint);
    }
    endShape();
}

function drawTallerMountains(){
    //draw back mountains
    stroke(1, 27, 66)
    beginShape();
    for(var i2 = 0; i2 < width; i2++){
        var t2 = (i2 * slopeTerrain * 2) + (millis() * speedTerrain);
        var y2 = map(noise(t2), 0, 1, 100, 200);
        line(i2, y2, i2, yPoint);
    }
    endShape();
}

I took my inspiration from the times when I was little and went camping with my family. Some of my favorite memories were in the car on our way there or back home and looking out the car window. I would see the mountain landscape/all the stars and my parents would be telling us stories about the different constellations in the sky. I wanted to create contrast between the foreground and the background with value contrast in the blue tones.