Category: Project-11-Landscape

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.

sketch

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 11 - Generative Landscape

var landscapeScale = 0.005; //detail in hills
var landscapeSpeed = 0.00075; //speed of hills going by
var hillColor = '#92CA6D'; //light green

var houses = []; //array for houses
var trees = []; //array for trees

var train = { ////train variables
    wY: 200, //Y of windows
    wW: 325, //width of windows
    wH: 275, //height of windows
    corners: 30, //roundness of window corners
    wWeight: 25, //stroke weight of light gray
    backgroundColor: 255, //white
    mainColor: '#475AA8', //light blue
    wColor: '#2A357A', //dark blue, color of window and seats
    divXL: 61, //X coordinate of left divider
    divXR: 419, //X coordinate of right divider
}

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 5; i ++) { //first houses
        var rx = random(width);
        houses[i] = makeHouses(rx);
    }
    for (var i = 0; i < 3; i ++) { //first trees
        var tx = random(width);
        trees[i] = makeTrees(tx);
    }
    frameRate(30);   
}

function draw() {
    background('#8ED9EF'); //blue sky
    //creates hills in the background
    stroke(hillColor);
    for (var x = 0; x < width; x ++) {
        var l = (x * landscapeScale) + (millis() * landscapeSpeed);
        var y = map(noise(l), 0, 1, 100, 230); //constrains hills
        line(x, y, x, height); //creates vertical lines, forming a solid shape
    }
    displayHouses(); //houses
    removeOldHouses();
    addHouses();

    displayTrees(); //trees
    removeOldTrees();
    addTrees();

    drawTrain(); //train
}

function displayHouses() { //displays and updates house location
    for (var i = 0; i < houses.length; i ++) {
        houses[i].move();
        houses[i].draw();
    }
}
function removeOldHouses() { //gets rid of old houses, puts the houses that are still on the canvas in a new array
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i ++) {
        if (houses[i].x + houses[i].breadth > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep;
}
function addHouses() { //adds new houses into the array
    if (random(0, 1) < 0.02) {
        houses.push(makeHouses(width));
    }
}
function moveHouses() { //moves the houses
    this.x += this.speed;
    if (this.x < -this.breadth) {
        this.x == width + this.breadth;
    }
}
function drawHouses() { //draws the houses
    noStroke();
    rectMode(CORNER);
    fill(this.r, this.g, this.b); //randomizes color
    push();
    translate(this.x, this.y);
    rect(0, -this.height, this.breadth, this.height); //house rectangle
    //roof
    fill(255);
    triangle(-2, -this.height + 1, this.breadth + 2, -this.height + 1, this.breadth / 2, -this.height - this.roofH);
    //door
    rect(this.doorX, - this.doorH, this.doorW, this.doorH);
    pop();
}
function makeHouses(locationX) { //house variables
    var hse = {x: locationX,
               y: random(225, 275),
               r: random(255),
               g: random(255),
               b: random(255),
               roofH: round(random(10, 25)),
               height: round(random(25, 50)),
               breadth: round(random(30, 60)),
               doorX: random(10, 20),
               doorW: 10,
               doorH: 15,
               speed: -6.0,
               move: moveHouses,
               draw: drawHouses}
    return hse;
}

//trees
function displayTrees() { //dispays and updates tree locations
    for (var i = 0; i < trees.length; i ++) {
        trees[i].movet();
        trees[i].drawt();
    }
}
function removeOldTrees() { //gets rid of old trees
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i ++) {
        if (trees[i].xt + trees[i].breadtht > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}
function addTrees() { //adds new trees
    if (random(0, 1) < 0.1) {
        trees.push(makeTrees(width));
    }
}
function moveTrees() { //moves trees
    this.xt += this.speedt;
    if (this.xt < -this.breadtht) {
        this.xt == width + this.breadtht;
    }
}
function drawTrees() { //draws trees
    noStroke();
    rectMode(CORNER);
    colorMode(HSB, 100); //switches color mode to HSB to assist with random colors
    fill(this.ht, 55, this.bt); //random colors between yellow-green to green
    push();
    translate(this.xt, height * 3 / 4);
    rect(0, -this.heightt, this.breadtht, this.heightt, 50, 50, 0, 0);
    pop();
}
function makeTrees(locationX) { //tree variables
    var trs = {xt: locationX,
               bt: random(50, 85),
               ht: random(17, 25),
               heightt: round(random(50, 160)),
               breadtht: round(random(100, 130)),
               speedt: -10.0,
               movet: moveTrees,
               drawt: drawTrees}
    return trs;
}

//train
function drawTrain() {
    colorMode(RGB);
    drawWindow(width / 2); //draws center window
    drawWindow(-118); //draws left window
    drawWindow(width + 118); //draws right window
    //light blue panels
    noStroke();
    rectMode(CORNER);
    fill(train.mainColor);
    rect(0, 0, width, train.wY - (train.wH / 2) - 10); //top panel
    rect(0, train.wY + (train.wH / 2) + 10, width, height - (train.wY + (train.wH / 2)) - 10); //bottom panel
    //seats
    drawSeats(train.divXL, 0, 0, 40); //left seat
    drawSeats(train.divXR, width - 200, 40, 0); //right seat
    //table
    rectMode(CENTER);
    rect(width / 2, height - 105, 150, 20, 5, 5, 5, 5);
    //section dividers, light gray
    drawDividers(train.divXL);
    drawDividers(train.divXR);
}
function drawWindow(x) { //creates center window
    rectMode(CENTER);
    noFill();
    stroke(train.backgroundColor); //creates light gray area around the windows
    strokeWeight(train.wWeight);
    rect(x, train.wY, train.wW + train.wWeight, train.wH + train.wWeight, train.corners, train.corners, train.corners, train.corners);
    stroke(train.wColor); //creates blue window border
    strokeWeight(10);  
    rect(x, train.wY, train.wW, train.wH, train.corners, train.corners, train.corners, train.corners);
}
function drawSeats(x1, x2, UL, UR) {
    fill(train.wColor);
    rect(x1 - 45, height - 200, 90, 200, 30, 30, 0, 0); //seat back
    rect(x2, height - 50, 200, 50, UL, UR, 0, 0); //left seat cushions
}
function drawDividers(x) {
    strokeWeight(5);
    stroke(200);
    line(x, train.wY - (train.wH / 2) - 7.5, x, height); //line dividing sections
}

For this project, I wanted to create a landscape outside of a train window. I decided to use three layers, some bushes or trees in the foreground, houses in the middle ground, and hills in the background. I tried to change the speeds of the different layers, with the tree layer the fastest and the hill layer the slowest, in order to give the illusion of perspective, and that you’re looking out of a window as everything flies by.

I had started out wanting to do a sunset, with the view of a car driving by it. I didn’t want to create a jagged moving landscape, so I decided to do a desert instead. I was first going to make cactuses, but then I made the ground black and realized I wanted a more futuristic look. So I decided my image would have the sunset, black ground, and then geometric shapes with their shadows. Because I had used the bezier() function in the past, I decided to use that for the sunset, having the anchor parts react with the sun, almost like the sky was melting. 

During the project I changed my objects from pyramids to stars to, finally, sailboats. I added to the black water horizon, putting color lines under the sun to look like a water reflection, and adding vertical lines to the water with an invisible ball pushing them to look like the boats were pushing the current.

sketch

var quarW = 120;//width divided by 4
var quarW2 = 360;//qaurW times 3
var bezH = 40;//height of bezier anchors
var bezW = 48;//width of ground bezier anchors
var bezWS = 48;//width of ground bezier side points
var sunX = 240;//x value placement of sun in sky
var sunH = 100;//height of sun in sky
var currX = 480;//x placement of horizontal circle
var bzHorLn1 = 360;//horizon line of the bezier anchors
var bzHorLn2 = 360;//horizon line of the bezier anchors
var bzHorLn3 = 360;//horizon line of the bezier anchors
var bzHorLn4 = 360;//horizon line of the bezier anchors
var bzHorLn5 = 360;//horizon line of the bezier anchors
var bzHorLn6 = 360;//horizon line of the bezier anchors
var bzHorLn7 = 360;//horizon line of the bezier anchors
var bzHorLn8 = 360;//horizon line of the bezier anchors
var horLn = 360;//horizon line of the bezier non anchors

var boats = [];

function setup() {
    createCanvas(480, 480); 
    frameRate(10);//faster framerate
    // create an initial collection of boats
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        boats[i] = makeBoat(rx);
    }
    frameRate(20);
}

function draw() {
    background(38,59,103);//dark blue
    
    fill(244,182,103);//brighter orange
    bezier(0,320, quarW,bezH * 8, quarW2,bezH * 8, 480,320);//8
    fill(213,131,87);//bright orange
    bezier(0,280, quarW,bezH * 7, quarW2,bezH * 7, 480,280);//7
    fill(185,106,82);//orange
    bezier(0,240, quarW,bezH * 6, quarW2,bezH * 6, 480,240);//6
    fill(207,63,57);////bright orange
    bezier(0,200, quarW,bezH * 5, quarW2,bezH * 5, 480,200);//5
    fill(167,62,72);//bright pink
    bezier(0,160, quarW,bezH * 4, quarW2,bezH * 4, 480,160);//4
    fill(141,80,94);//pink
    bezier(0,120, quarW,bezH * 3, quarW2,bezH * 3, 480,120);//3
    fill(93,80,109);//purple
    bezier(0,80, quarW,bezH * 2, quarW2,bezH * 2, 480,80);//2
    fill(67,88,122);//blue
    bezier(0,40, quarW,bezH, quarW2,bezH, 480,40);//1
    
    //-------------------------------SUN
    push();
    fill(0);
    ellipse(sunX, sunH, 200,200);
    pop();
    sunH += 5;//sun speed
    if(sunH > height + 100) {//resets sun placement if it moves past canvas
        sunH = -100;
    }
    if(dist(sunX,sunH, quarW,quarW) < 210){//pushes down sunset blocks
        bezH += 3;
    } 
    noFill();
    if(dist(sunX,sunH, horLn,horLn) < 170){//pushes down susnet lines
        bzHorLn1 += .05;
        bzHorLn2 += .1;
        bzHorLn3 += .15;
        bzHorLn4 += .2;
        bzHorLn5 += .25;
        bzHorLn6 += .3;
        bzHorLn7 += .35;
        bzHorLn8 += .4;
    } 
    //-------------------------------
    //-------------------------------GROUND
    push();
    fill(0);
    stroke(0);
    rect(0,360, 480,130);
    stroke(255);
    //vertical lines on black area
    stroke(255);
    strokeWeight(.1);
    bezier(bezWS,360, bezW,400, bezW,440, bezWS,480);
    bezier(bezWS * 2,360, bezW * 2,400, bezW * 2,440, bezWS * 2,480);
    bezier(bezWS * 3,360, bezW * 3,400, bezW * 3,440, bezWS * 3,480);
    bezier(bezWS * 4,360, bezW * 4,400, bezW * 4,440, bezWS * 4,480);
    bezier(bezWS * 5,360, bezW * 5,400, bezW * 5,440, bezWS * 5,480);
    bezier(bezWS * 6,360, bezW * 6,400, bezW * 6,440, bezWS * 6,480);
    bezier(bezWS * 7,360, bezW * 7,400, bezW * 7,440, bezWS * 7,480);
    bezier(bezWS * 8,360, bezW * 8,400, bezW * 8,440, bezWS * 8,480);
    bezier(bezWS * 9,360, bezW * 9,400, bezW * 9,440, bezWS * 9,480);
    pop();
    //horizontal sunset lines
    push()
    stroke(244,182,103);//brighter orange
    bezier(140,horLn, 190,bzHorLn1, 290,bzHorLn1, 340,horLn);
    stroke(213,131,87);//bright orange
    bezier(140,horLn, 190,bzHorLn2, 290,bzHorLn2, 340,horLn);
    stroke(185,106,82);//orange
    bezier(140,horLn, 190,bzHorLn3, 290,bzHorLn3, 340,horLn);
    stroke(207,63,57);////bright orange
    bezier(140,horLn, 190,bzHorLn4, 290,bzHorLn4, 340,horLn);
    stroke(167,62,72);//bright pink
    bezier(140,horLn, 190,bzHorLn5, 290,bzHorLn5, 340,horLn);
    stroke(141,80,94);//pink
    bezier(140,horLn, 190,bzHorLn6, 290,bzHorLn6, 340,horLn);
    stroke(93,80,109);//purple
    bezier(140,horLn, 190,bzHorLn7, 290,bzHorLn7, 340,horLn);
    stroke(67,88,122);//blue
    bezier(140,horLn, 190,bzHorLn8, 290,bzHorLn8, 340,horLn);
    pop();
    //water current (pushed by invisible ball)
    push();
    fill(50);
    noFill();
    noStroke();
    ellipse(currX,420, 20,20);//current ball
    currX -= 5;//speed of invisible ball
    if(currX < width - 600) {//resets invisible ball if it moves off canvas
        currX = 590;
    }
    if(dist(currX,currX, bezW,bezW) < 210){//moves vertical lines if ball nears
        bezW -= .5;//pushes them forward
    }
    else {
        bezW += .3;//pushes them back after ball leaves
    } 
    pop();

    updateAndDisplayBoats();
    removeBoatsThatHaveSlippedOutOfView();
    addNewBoatsWithSomeRandomProbability(); 
}

function updateAndDisplayBoats(){
    // Update the boats positions, and display them.
    for (var i = 0; i < boats.length; i++){
        boats[i].move();
        boats[i].display();
    }
}

function removeBoatsThatHaveSlippedOutOfView(){
    //If a boat has dropped off the left edge,
    //remove it from the array.  
    //Copy boats I want to keep into a new array.
    var boatsToKeep = [];
    for (var i = 0; i < boats.length; i++){
        if (boats[i].x + boats[i].breadth > 0) {
            boatsToKeep.push(boats[i]);
        }
    }
    boats = boatsToKeep; // remember the surviving boats
}

function addNewBoatsWithSomeRandomProbability() {
    // With a very tiny probability, add a new boats to the end.
    var newBoatLikelihood = 0.009; 
    if (random(0,1) < newBoatLikelihood) {
        boats.push(makeBoat(width));
    }
}

function boatMove() {//method to update position of boat every frame
    this.x += this.speed - 3;
}
    
function boatDisplay() {//draw the boat and some windows
    var floorHeight = 10;
    var bHeight = this.hPoles * floorHeight; 
    fill(this.R, this.G, this.B);//star colors
    stroke(0); 
    push();
    translate(this.x, height - 135);
    //boat
    noFill();
    stroke(255);
    bezier(30,67, 50,70, 80,74, 90,73);//top
    line(30,67, 37,83);//front side
    bezier(85,83, 91,80, 90,75, 90,73);//back side
    line(37,83, 85,83);//bottom
    line(60,5 * -bHeight / 60, 60,71);//pole
    triangle(40 / this.sailW,60, 60,5 * -bHeight / 60, 60,60);//flap large
    triangle(60,58, 60,5 * -bHeight / 60, 75 * this.sailW,58);//flap small
    pop();
}

function makeBoat(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 85,
                speed: -1.0,
                sailW: random(1,1.3),
                R: random(142),
                G: random(255),
                B: random(130),
                hPoles: round(random(-5,40)),
                move: boatMove,
                display: boatDisplay}
    return bldg;
}