Jamie Dorst Project 10

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-10
*/

var trees = [];
// noise variables
var terrainSpeed1 = 0.0005;
var terrainDetail1 = 0.002;
var terrainSpeed2 = 0.0003;
var terrainDetail2 = 0.004;
var terrainSpeed3 = 0.0001;
var terrainDetail3 = 0.006;

function setup() {
    createCanvas(480, 480);
    // create an initial collection of trees
    for (var i = 0; i < 7; i++){
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
    frameRate(10);
}

function draw() {
    background('#E0F7FA');
    // draw sun
    fill('gold');
    noStroke();
    ellipse(100, 100, 100, 100);
    // draw clouds
    fill(255);
    ellipse(340, 80, 50, 50);
    ellipse(360, 90, 60, 60);
    ellipse(380, 70, 75, 75);
    ellipse(400, 80, 50, 50);

    ellipse(220, 200, 50, 50);
    ellipse(250, 210, 60, 60);
    ellipse(260, 190, 75, 75);
    ellipse(280, 200, 50, 50);

    drawHills();
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 
}

function drawHills() {
    // blue hills
    beginShape(); 
    stroke('#3949AB');
    for (var q = 0; q < width; q++) {
        var t = (q * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0,1, 25, height)
        line(q, y, q, height); 
    }
    endShape();
    // pink hills
    beginShape(); 
    stroke('#E91E63');
    for (var a = 0; a < width; a++) {
        var t = (a * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, height / 2, height)
        line(a, y, a, height); 
    }
    endShape();

    // yellow hills
    beginShape(); 
    stroke('#FFEB3B');
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, 2 * height / 3, height)
        line(x, y, x, height); 
    }
    endShape();
}

function updateAndDisplayTrees() {
    // update the trees' positions and display them
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}

function removeTreesThatHaveSlippedOutOfView() {
    // if a tree has dropped off the left edge remove it from the array
    // copy all the trees we want to keep into a new array
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}

function addNewTreesWithSomeRandomProbability() {
    // add a new tree to the end, 20% chance
    var newTreeLikelihood = 0.2; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

// draw the tree
function treeDisplay() {
    if (this.colors < 0.5) {
        var fillColor = 255;
        var strokeColor = 0;
    } else {
        fillColor = 0;
        strokeColor = 255;
    }
    fill(fillColor);
    noStroke();
    ellipseMode(CENTER);
    ellipse(this.x, height - this.trunkHeight, this.treeSize, this.treeSize);
    stroke(strokeColor);
    strokeWeight(3);
    line(this.x, height - this.trunkHeight - 5, this.x, height);
    line(this.x, height - this.trunkHeight + 5, this.x - 7, height - this.trunkHeight - 2);
    line(this.x, height - this.trunkHeight + 10, this.x + 7, height - this.trunkHeight + 3);
}

function makeTree(birthLocationX) {
    var tree = {
        trunkHeight: random(40, 80),
        treeSize: random(30, 50),
        colors: random(0, 1),
        x: birthLocationX,
        sizes: 50,
        breadth: 50,
        speed: -20.0,
        move: treeMove,
        display: treeDisplay
    }
    return tree;
}

// method to update position of building every frame
function treeMove() {
    this.x += this.speed;
}

For this project, I just wanted to make a fun landscape and then have a lot of contrasting colors, which is why I made the trees randomize to be black with white or white with black. I had a lot of trouble at the beginning figuring out how to get the trees to stay on the page, and then later, move. I also struggled with getting the hills to be different heights, but when I figured it out it was a pretty simple change. I think that overall though I ended up learning a lot more about objects, and I’m happy with how it turned out.