Siwei Xie- Project 11 – Landscape

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//project-10-landscape

var terrainSpeed = 0.0002;//speed of terrian moving
var terrainDetail = 0.015;//smoothness of terrian
var star = [];

function setup() {
    createCanvas(480, 480);
    frameRate(20);//speed of refreshing frames (stars changing)
}

function draw() {
    background("black");

    makeMountain();
    makeMoon();
    makeStar();
    makeCar();
}

//moving terrian
function makeMountain(){
    noStroke();
    fill("blue"); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);//shape & moving speed of terrian 
      var y = map(noise(t), 0, 1.8, height/8, height);//y-coordinate of terrian
      vertex(x, y);//draw terrian continuously
    }

    vertex(width, height);//constrain range of terrian
    vertex(0, height);//terrian restarts at left side of canvas
    endShape();
}

function makeMoon(){
    noStroke();
    fill(252, 242, 166);
    ellipse(2 * width / 3, height / 4, 120, 120);//outer layer
    fill(239, 207, 104);
    ellipse(2 * width / 3, height / 4, 80, 80);//inner layer
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 30; i++) {
      var starX = random(width); //random stars on upper canvas
      var starY = random(0, 200);
      ellipse(starX, starY, 3, 3);
    }
}

function makeCar(){
    fill("yellow");
    rect(100, random(375, 380), 100, 30);//lower body of shaking car
    rect(100, 350, 70, 30);//uppper body of shaking car

    fill("green");
    stroke("black");
    circle(120, random(410, 415), 30, 30);//left wheel
    circle(170, random(410, 415), 30, 30);//right wheel
}
   

I had fun creating this project. Moving the background (terrain) implies the moving of the main object (car). The process of generating mountain in the back was fascinating, because I learned how to randomize height and width in order to indicate moving scenes. Creating mountains creates a very peaceful and relaxing scene, which is something I desperately want.

I also utilize randomly-positioned stars in the background to make it a starry night. For the car, I used randomized y-coordinates in order to show it is driving on a bumpy road. Overall, I think I achieved my goal of giving the viewer a sense of wonderment.