Crystal-Xue-Project-11

sketch-237.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project-11

var terrainSpeed;
var terrainDetail;
var c1, c2;
var cacti = [];
var cWidth = 50; //cactus Width
var cLeft = - 20 - cWidth; //left point of cactus drawn

function setup() {
    createCanvas(480, 240);
    // create an initial collection of cacti
    for (var i = 0; i < 4; i++){
        var xLocation = random(width);
        var yLocation = random(150, 170);
        cacti[i] = makeCacti(xLocation, yLocation);
    }

    frameRate(20);
    //two end colors of the gradient backgound
    c1 = color(134, 162, 148);
    c2 = color(245, 193, 140);
}

function draw() {
    setGradient(c1, c2);
    terrain();
    //addCacti();
    updateCacti();

}

function drawCacti() {
    noStroke();
    fill(255, 230, 238);
    push();
    translate(this.x2, this.y2);
    scale(this.cactiSize);
    stroke(61,73,49);
    strokeWeight(10);
    line(0, 0, 0,60);

    noFill();
    stroke(61,73,49);
    strokeWeight(10);
    beginShape();
    curveVertex(-20,20);
    curveVertex(-20,20);
    curveVertex(-15,30);
    curveVertex(0,30);
    curveVertex(20,25);
    curveVertex(25,-10);
    curveVertex(25,-10);
    endShape();

    stroke(100,100,89);
    strokeWeight(0.5);
    line(0, -2, 0,62);
    line(2, -2, 2,62);
    line(-2, -2, -2,62);

    //draw cacti spines
    fill(0);
    noStroke();
    ellipse(0,2,2,2);
    ellipse(5,20,3,3);
    ellipse(20,30,2,2);
    ellipse(30,10,2,2);
    ellipse(-15,17,3,3);
    ellipse(-10,27,2,2);
    ellipse(5,45,2,2);
    pop();
}


function makeCacti(xlocation, ylocation) {
    //Cacti objects
    var makeCactus = {x2: xlocation,
                      y2: ylocation,
                      cactiSize: random(0.8,1.5),
                      speed: -2.0,
                      move: moveCacti,
                      draw: drawCacti}
    return makeCactus;
}

function moveCacti() {
    //make cacti move
    this.x2 += this.speed;
    if (this.x2 <= cLeft) {
        this.x2 += width - cLeft;
    }
}

function updateCacti() {
    for(i = 0; i < cacti.length; i++) {
        cacti[i].move();
        cacti[i].draw();
    }
}

function setGradient(c1, c2) {
    //gradient color background
    noFill();
    for (var y = 0; y < height; y++) {
        var inter = map(y, 0, height, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, y, width, y);
    }
}

function terrain(){
    terrainSpeed = 0.0002;
    terrainDetail = 0.006;

    //draw dessert mountain 1
    fill(225, 184, 139);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y1 = map(noise(t1), 0, 1, 80, height);
        vertex(x, y1);
    }
    vertex(width, height);
    endShape();

    //draw dessert mountain 2
    terrainDetail = 0.007;
    fill(225, 164, 109);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y1 = map(noise(t1), 0, 1, 100, height);
        vertex(x, y1);
    }
    vertex(width, height);
    endShape();

    //draw ground
    terrainDetail = 0.0005;
    fill(160, 96, 69);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y2 = map(noise(t2), 0, 1, 180, height);
        vertex(x, y2);
    }
    vertex(width, height);
    endShape();
}

This is a landscape of a desert with different sized cactus along the road and different depth of the scenery.