Beach Landscape

When I saw the prompt for the project this week, I immediately thought of doing something with a noise function. I felt as though mountains wouldn’t allow for enough variability, so I decided to do a beach. I laid out the very basic sand, water, and sky, and then added embellishing elements to try to create a drive by beach scene.

beach
var boats = [];     //arrays to hold respective objects
var clouds = [];
var umbrellas = [];
var planes = []; 
var buildings = [];
var railings = [];
var people = [];
var towels = [];
var landscape = [];     //array that creates slope of shoreline
var noiseParam = 0;     
var noiseStep = 0.005;      //defines extremity of shoreline slope


function setup() {
    createCanvas(480,300); 
    
    for (var i = 0; i < 3; i++){        //make a certain amount of (object) to start out, at random locations within a constraint
        var rx = random(width);
        var ry = random(80,150)
            boats[i] = makeBoat(rx,ry);
    }

    for (var i = 0; i < 3; i++){
        var Cx = random(width);
        var Cy = random(0,60)
            clouds[i] = makeCloud(Cx,Cy);
    }

    for (var i = 0; i < people.length; i++){
        var Tx = random(width);
        var Ty = random(250,300)
            towels[i] = makeTowel(Tx,Ty);
    }
    for (var i = 0; i < people.length; i++){
        var Px = random(width);
        var Py = random(250,300)
            people[i] = makePerson(Px,Py);
    }

    for (var i = 0; i < 5; i++){
        var Ux = random(width);
        var Uy = random(250,300)
            umbrellas[i] = makeUmbrella(Ux,Uy);
    }
    
    for (var i = 0; i < 15; i++){
        var Bx = random(width);
            buildings[i] = makeBuilding(Bx);
    }

    for (var i = 0; i < 0.9; i++){
        var Px = random(width);
        var Py = random(0,20)
            planes[i] = makePlane(Px,Py);
   }
    

    for(var i=0;i<=width/5;i++){    
        var n= noise(noiseParam);       //picks value 0-1
        var value = map(n,0,1,50,height);        //scales it to the canvas size

            landscape.push(value);      //adds to array
            noiseParam+=noiseStep;      //moves to the right for the next point in the array
   }
    
    frameRate(5);
}



function draw() {
    background(3,220,245);

    fill(13,66,212,230);    //dark blue
        rect(0,height/4,width,height);      //body of water   
    fill(227,232,164,175);  //pale beige
        rect(0,height/4-7,width,7);    //distant shoreline

                    //call the functions to spawn and despawn respective obejcts
    removeBoat();         
    newBoat(); 

    removeCloud();
    newCloud();

    removeUmbrella();

    removePlane();
    newPlane();

    removeBuilding();
    newBuilding();

    removeRailing();
    newRailing();

    removePerson();

    removeTowel();
  
   
                                                //call the move and show functions to continually draw and redraw objects after updated coordinates
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].show();
    }

    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].show();
     }

    for (var i = 0; i < boats.length; i++){
        boats[i].move();
        boats[i].show();
    }
   

    displayHorizon();

     for (var i = 0; i < towels.length; i++){
        towels[i].move();
        towels[i].show();
    }

    for (var i = 0; i < people.length; i++){
        people[i].move();
        people[i].show();
    }

    for (var i = 0; i < umbrellas.length; i++){
        umbrellas[i].move();
        umbrellas[i].show();
    }


    for (var i = 0; i < planes.length; i++){
       planes[i].move();
       planes[i].show();
     }

    fill(159,159,159);
        rect(0,height-50,width,40);
    fill(110,110,110);
        rect(0,height-45,width,30);


    for (var i = 0; i < railings.length; i++){
       railings[i].move();
       railings[i].show();
     }    
}

                        //functions to remove an object from a displayed array once "out of sight"
function removeBoat(){
    
    var boatsToKeep = [];    //the boats that should still be displayed
    for (var i = 0; i < boats.length; i++){
        if (boats[i].x + boats[i].breadth > 0) {    //if the boat is closer than it's width to the edge
            boatsToKeep.push(boats[i]);     //add this boat to the boats that will be displayed
        }
    }
    boats = boatsToKeep; // only display the baots currently being kept
}

function removeCloud(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
           cloudsToKeep.push(clouds[i]);
        }
   }
    clouds = cloudsToKeep; 
}

function removeUmbrella(){
    var umbrellasToKeep = [];
    for (var i = 0; i < umbrellas.length; i++){
        if (umbrellas[i].x + umbrellas[i].breadth > 0) {
           umbrellasToKeep.push(umbrellas[i]);
        }
    }
    umbrellas = umbrellasToKeep; 
}

function removePlane(){
    var planesToKeep = [];
    for (var i = 0; i < planes.length; i++){
        if (planes[i].x + 150 > 0) {
           planesToKeep.push(planes[i]);
        }
   }
    planes = planesToKeep; 
}

function removeBuilding(){
    var buildingsToKeep = [];
        for (var i = 0; i < buildings.length; i++){
            if (buildings[i].x > 0) {
                buildingsToKeep.push(buildings[i]);
        }
   }
    buildings = buildingsToKeep; 
}

function removeRailing(){
    var railingsToKeep = [];
        for (var i = 0; i < railings.length; i++){
            if (railings[i].x > 0) {
                railingsToKeep.push(railings[i]);
        }
   }
    railings = railingsToKeep; 
}

function removePerson(){
    var peopleToKeep = [];
        for (var i = 0; i < people.length; i++){
            if (people[i].x > 0) {
               peopleToKeep.push(people[i]);
        }
   }
    people = peopleToKeep; 
}

function removeTowel(){
    var towelsToKeep = [];
        for (var i = 0; i < towels.length; i++){
            if (towels[i].x > 0) {
               towelsToKeep.push(towels[i]);
        }
   }
    towels = towelsToKeep; 
}

                    //functions to create new objects that come into sight

function newBoat() {

    var newBoatChance = 0.009;      //the chance that a new boat will appear
    if (random(0,1) < newBoatChance) {      //activate probability
        boats.push(makeBoat(width,random(100,150)));        //add a new boat if the porbability condition is met
    }
}
function newCloud() {

    var newCloudChance = 0.001; 
    if (random(0,1) < newCloudChance) {
        clouds.push(makeCloud(width,random(0,60)));
    }
}


function newPlane() {

    var newPlaneChance = 0.003; 
    if (random(0,1) < newPlaneChance) {
        planes.push(makePlane(width, random(0,50)));
   }
}

function newBuilding() {

    var newBuildingChance = 0.1; 
    if (random(0,1) < newBuildingChance) {
        buildings.push(makeBuilding(width));
   }
}

function newRailing() {

    var newRailingChance = 0.8; 
    if (frameCount % 2 == 0 & random(0,1)

Leave a Reply