Cathy Dong – Project 11 – Landscape

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project 11 - Landscape
*/

// mountain slope and move speed variables
var tDetail1 = 0.002;
var tSpeed1 = 0.0001;
var tDetail2 = 0.005;
var tSpeed2 = 0.0003;
var tDetail3 = 0.01;
var tSpeed3 = 0.0008;

// mountain colors
var terrC1 = "#597081";
var terrC2 = "#7EA0B7";
var terrC3 = "#D6EEFF";

//mountain heights range
var h1Min = 0;
var h1Max = 300;
var h2Min = 150; 
var h2Max = 400;
var h3Min = 250;
var h3Max = 480;

// star variables
var sList = [];
var sNum = 20; // number of stars
var sLeft = -20; // reset start to canvas right
var sSpeed = -0.5;

// car variables
var cList = [];
var cHeight = 20; // car height
var cWidth = 50; // car width
var cNum = 5; //number of cars
var cLeft = -20 - cWidth; // reset car to start
var cSpeed = -1.5; // car speed
var wSize = 10; // car wheel size


function setup() {
    createCanvas(480, 480);
    // star start at random px and py
    for (var j = 0; j < sNum; j++) {
        var px = random(width);
        var py = random(height / 3);
        sList[j] = starMake(px, py);
    }

    // car cx and cy
    var ground = height - height / 15;
    for (var k = 0; k < cNum; k++) {
        var cx = random(width);
        var cy = ground - wSize / 2 - cHeight;
        cList[k] = carMake(cx, cy);
    }

    
}

function draw() {
    // sky color
    background("#2B2D42");
    // render stars
    starRender();
    // render mountains 
    terrainDraw(tDetail1, tSpeed1, terrC1, h1Min, h1Max);
    terrainDraw(tDetail2, tSpeed2, terrC2, h2Min, h2Max);
    terrainDraw(tDetail3, tSpeed3, terrC3, h3Min, h3Max);
    // draw ground
    fill("#8D99AE");
    rect(0, height - height / 15, width, height / 15);
    // render car
    carRender();
    
}

// mountain draw function 
function terrainDraw(terrainDetail, terrainSpeed, terrC, terrMin, terrMax) {
    noStroke();
    // fill with layer color
    fill(terrC);
    // start drawing the shape
    beginShape();
    vertex(0, height);
    // generate terrian
    for (var i =  0; i < width; i++) {
        var t = (i * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, terrMin, terrMax);

        vertex(i, y);
    }
    vertex(width, height);
    endShape();
}

// star object
function starMake(px, py) {
    var star = {x: px, y:py, speed: sSpeed,
                update: starUpdate,
                draw: starDraw}
    return star;
}

// update star px and py
function starUpdate() {
    this.x += this.speed;
    if (this.x <= sLeft) {
        this.x += width - sLeft;
    }
}

// draw star at this.x and this.y location
function starDraw() {
    noStroke();
    fill("yellow");
    var size = random(1, 5); // make it shine
    push();
    translate(this.x, this.y);
    circle(0, 0, size);
    pop();
}

// render the star based on previous info
function starRender() {
    for (var i = 0; i < sList.length; i++) {
        sList[i].update();
        sList[i].draw();
    }
}

// car info
// a is car x position; b is car y position
function carMake(cx, cy) {
    var car = {a: cx, b: cy, speed: cSpeed, c: color(random(100), random(0), random(255)),
                update: carUpdate,
                draw: carDraw}
    return car;
}

// update car position
function carUpdate() {
    this. a += this.speed;
    if(this.a <= cLeft) {
        this.a += width - cLeft;
    }
}

// draw initial car
function carDraw() {
    // wheel location
    var wX1 = cWidth / 4;
    var wX2 = cWidth - wX1;
    noStroke();
    push();
    translate(this.a, this.b);
    // draw car
    fill(this.c);
    rect(0, 0, cWidth, cHeight);
    // draw car wheels
    fill(0);
    circle(wX1, cHeight, wSize);
    circle(wX2, cHeight, wSize);
    pop();
}

// render car to this.a and this.b
function carRender() {
    for (var m = 0; m < cList.length; m++) {
        cList[m].update();
        cList[m].draw();
    }
}

The idea is to create a night scene on a highway. In the scene, stars and mountains move relative to the cars in a various speed based on depth relationship.