sajohnso-project-10

landscape

/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-10
*/

//setting up arrays
var moons = [];
var clouds = [];
var planets = [];
var c1, c2; //setting up colors for gradient


function setup() {
    createCanvas(600, 240); 
    frameRate(10);

    //sets up the two colors in the gradient background
    c1 = color('#221A25'); //black on top
    c2 = color('#3B2A3A'); //dark purple on bottom

    // create initial moons
    for (var i = 0; i < 2; i++){ //changng limit of loop affects # of moons initially on screen
        var rx = random(width);
        moons[i] = makeMoon(rx);
    }

    // create initial clouds
   for (var c = 0; c < 8; c++){ //affects # of planets initially on screen
        var cl = random(width);
        clouds[c] = makeCloud(cl);
    }

    // create initial clouds
    for (var p = 0; p < 5; p++){ //affects # of planets initially on screen
        var pl = random(width);
        planets[p] = makePlanet(pl);
    }

}


function draw() {

    //purple-black gradient in backgorund
    for (var i = -00; i <= height-50; i++) {
        var inter = map(i, 90, 170, 0, 1);
        var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(0, i, width, i);
    }

    //OCEAN
    drawOcean();
    
    //MOONS
    updateAndDisplayMoons();
    removeMoonsThatHaveSlippedOutOfView();
    addNewMoonsWithSomeRandomProbability(); 

    //PLANETS
    updateAndDisplayPlanets();
    removePlanetsThatHaveSlippedOutOfView();
    addNewPlanetsWithSomeRandomProbability();
   
    //CLOUDS
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    



}


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

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

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


function removeMoonsThatHaveSlippedOutOfView(){
    var moonsToKeep = [];
    for (var i = 0; i < moons.length; i++){
        if (moons[i].x + moons[i].breadth > 0) {
            moonsToKeep.push(moons[i]);
        }
    }
    moons = moonsToKeep; // remember the surviving moons
}

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

function removePlanetsThatHaveSlippedOutOfView(){
    var planetsToKeep = [];
    for (var i = 0; i < planets.length; i++){
        if (planets[i].x + planets[i].breadth > 0) {
            planetsToKeep.push(planets[i]);
        }
    }
    planets = planetsToKeep; // remember the surviving planets
}


function addNewMoonsWithSomeRandomProbability() {
    // Spawn a new moon to the right edge of the canvas
    var newMoonLikelihood = 0.0004; //moons are VERY unlikely
    if (random(0,1) < newMoonLikelihood) {
        moons.push(makeMoon(width));
    }
}

function addNewCloudsWithSomeRandomProbability() {
    // Spawn a new cloud to the right edge of the canvas
    var newCloudLikelihood = 0.02; //clouds are spawned relatively often
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeCloud(width));
    }
}

function addNewPlanetsWithSomeRandomProbability() {
    // Spawn a new cloud to the right edge of the canvas
    var newPlanetLikelihood = 0.002; //moderately likely
    if (random(0,1) < newPlanetLikelihood) {
        planets.push(makePlanet(width));
    }
}


// method to update position of moon every frame
function moonMove() {
    this.x += this.speed;
}

// method to update position of cloud every frame
function cloudMove() {
    this.x += this.speed;
}
    
// method to update position of planet every frame
function planetMove() {
    this.x += this.speed;

}


function moonDisplay() {
    var bHeight = this.nFloors * 20;
    //the following variables are used to randomize the size of the 'reflections'
    var rando1 = random(bHeight/2,bHeight/2+10);
    var rando2 = random(bHeight/2,bHeight/2+10);
    var rando3 = random(bHeight/2,bHeight/2+10);

    noStroke();

    push();
    translate(this.x, height - 40);

    //DRAWS THE ECLIPSE EFFECT BEHIND THE MOON
    for (var i=20; i>0; i--){ //the glow is made of 20 overlapping circles
        fill(217,154,100,(10-i)*4);// semi-transparent yellow glow
        ellipse(0, -bHeight-7, bHeight+(10*i), bHeight+(10*i));
    }

    //DRAWS OPAQUE HIGHLIGHT BEHIND MOON
    fill('#FED196'); //opaque, light yellow
    ellipse(0, -bHeight-3, bHeight+2, bHeight+2);

    //DRAWS THE MOON
    fill('#836469'); //light purple
    ellipse(0, -bHeight, bHeight, bHeight);

    //DRAWS MOON REFLECTION ON WATER
    fill(217,154,100,150); //semi-transparent yellow
    ellipse(0, -bHeight*(5/bHeight), rando1/3, bHeight/20);
    ellipse(0, -bHeight*(5/bHeight)+7, rando2/2, bHeight/20);
    ellipse(0, -bHeight*(5/bHeight)+17, rando3, bHeight/10);
    ellipse(0, -bHeight*(5/bHeight)+27, rando2/2, bHeight/20);
    ellipse(0, -bHeight*(5/bHeight)+45, rando1+10, bHeight/5);
    pop();
}


function cloudDisplay() {
    var bHeight = this.nFloors * 20;
    var lowHeight = bHeight+5;

    push();
    translate(this.x, height-110);

    //DRAWS HIGHLIGHT BEHIND CLOUDS
    fill('#563F51'); //light purple
    //slightly larger and higher than the darker clouds
    //however, these clouds (usually) have the same shape
    ellipse(0, -lowHeight+10, this.breadth, lowHeight/2.5);
    ellipse(-10, -lowHeight+8, this.breadth*.8, lowHeight/2.5);
    ellipse(-10, -lowHeight-15, this.breadth*.7, lowHeight/2.5);
    ellipse(25, -lowHeight+5, this.breadth, lowHeight-20);
    ellipse(15, -lowHeight+15, this.breadth*1.2, lowHeight-20);
    ellipse(15, -lowHeight-10, this.breadth*.6, lowHeight-20);

    //DRAWS DARKER, LOWER CLOUDS
    fill('#353040');//darker purple
    //xposition, yposition and size modified by randomly chosen integers
    //in order to make clouds appear randomly generated
    ellipse(0, -bHeight, this.breadth, bHeight-20);
    ellipse(-10, -bHeight+10, this.breadth*.8, bHeight-20);
    ellipse(-10, -bHeight-15, this.breadth*.7, bHeight-20);
    ellipse(25, -bHeight+5, this.breadth, bHeight-20);
    ellipse(15, -bHeight+15, this.breadth*1.2, bHeight-20);
    ellipse(15, -bHeight-10, this.breadth*.6, bHeight-20);
    pop();
}

function planetDisplay() {
    var bHeight = this.nFloors * 20;
    push();
    translate(this.x, height - 40);

    //DRAWS HIGHLIGHT BEHIND PLANET
    fill(217,154,100,150); //light yellow
    ellipse(0, -bHeight-99, bHeight+3, bHeight+3); //slightly larger and lower than planet

    //DRAWS PLANET
    fill('#352831'); //dark purple
    ellipse(0, -bHeight-100, bHeight, bHeight);
    pop();
}





function makeMoon(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -.1, //moons travel the slowest
                nFloors: round(random(5,8)), //y positions moons travel along
                move: moonMove,
                display: moonDisplay}
    return bldg;
}

function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60, //puffiness of clouds
                speed: -1.6, //clouds travel the fastest
                nFloors: round(random(-1,2)), //y positions clouds travel along
                move: cloudMove,
                display: cloudDisplay}
    return bldg;
}

function makePlanet(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -.2, //planets travel intermediately fast
                nFloors: round(random(-2,4)), //y positions planets travel along
                move: planetMove,
                display: planetDisplay}
    return bldg;
}


 function drawOcean(){
    noStroke();
    fill('#371D20'); //dark purpleish red
    rect(0,height-50,width, 50);

}

For this project, I wanted to draw a sky with different planets, which would move at different speeds. I didn’t anticipate that planets would look so abstract if they were just circular, so I had to use lighting and shadow to make my objects clearer.