Category: SectionD

var cacti = [];
var canyons = [];
var sand = [];
var ball = [];
var noiseParam = 0;
var noiseStep = 0.02;

function setup() {
    createCanvas(640, 240); 
    background(0);

    
    /*// create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }*/
    frameRate(20);
    //canyon values
    for(var i = 0; i <= width/5; i++){
        var n = noise(noiseParam);
        canyons[i];
        var value = map(n, 0, 1, 0, height);
        canyons.push(value);
        noiseParam += noiseStep;
    }
    //sand values
    for(var i = 0; i <= width/5; i++){
        var n = noise(noiseParam);
        sand[i];
        var value = map(n, 0, 1, 0, height/2);
        sand.push(value);
        noiseParam += 0.5*noiseStep;
    }

}


function draw() {
    //sunset gradient
    var gradRed = color(190, 60, 38); // darker red color
    var gradYellow = color(250, 185, 21); // yellow
    for (var i = 0; i < height; i++){
        var gradient = map (i, 0, (height/3)*1.5, 0, 1);
        var bgColor = lerpColor(gradRed, gradYellow, gradient);
        stroke(bgColor);
        line(0, i, width, i);
    } 
    // draw a setting sun
    push();
    noStroke();
    fill(255, 226, 161);
    circle(500, 110, 180);
    pop();
    
    drawCanyons();
    drawSand();

    // taller cacti
    updateAndDisplayCacti();
    removeCactiThatHaveSlippedOutOfView();
    addNewCactiWithSomeRandomProbability(); 
    

    updateAndDisplayBalls();
    removeBallsThatHaveSlippedOutOfView();
    addNewBallsWithSomeRandomProbability(); 




}

//draws background canyons (still)
function drawCanyons(){
    // canyon values
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    noiseParam += noiseStep;
    // draws shape for canyons
    beginShape();
    vertex(0, height);
    for(var i = 0; i <= width/5; i++){
        //filling the canyons with translucent brown
        fill(178, 108, 55, 180);
        noStroke();
        //vertex function to fill the canyon
        vertex((i * 5), canyons[i]); 
        vertex((i + 1) * 5, canyons[i + 1]);   
    }
    vertex(width, height);
    endShape(CLOSE);
}

// draws sand (moving)
function drawSand(){
    push();
    translate(0, 130)
    sand.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height/2);
    sand.push(value);
    // draws shape for sand
    beginShape();
    vertex(0, height);
    for(var i = 0; i <= width/5; i++){
        //filling the sand color
        fill(237, 197, 154);
        noStroke();
        //vertex function to fill the sand
        vertex((i * 5), sand[i]); 
        vertex((i + 1) * 5, sand[i + 1]);   
    }
    vertex(width, height);
    endShape(CLOSE);
    pop();
}



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


function removeCactiThatHaveSlippedOutOfView(){
    var cactiToKeep = [];
    for (var i = 0; i < cacti.length; i++){
        if (cacti[i].x + cacti[i].breadth > 0) {
            cactiToKeep.push(cacti[i]);
        }
    }
    cacti = cactiToKeep; // remember the surviving buildings
}


function addNewCactiWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.02; 
    if (random(0,1) < newCactusLikelihood) {
        cacti.push(makeCactus(width));
    }
}


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

//draw the cactus
function cactusDisplay() {
    cacti.push();
    strokeWeight(25);
    stroke(this.color);

    //main stalk
    var y = 220;
    line(this.x, this.cBottom, this.x, this.cBottom-this.cHeight)
    strokeWeight(17);
    stroke(204, 209, 135, 60);
    line(this.x, this.cBottom, this.x, this.cBottom-this.cHeight)

    // two stalks on side
    strokeWeight(13);
    stroke(this.color);
    line(this.x-20, this.cBottom-this.s1Bottom, this.x-20, this.cBottom-this.s1Height); 
    // left stalk has a random height
    line(this.x+20, this.cBottom-this.s2Bottom, this.x+20, this.cBottom-this.s2Height); 
    // right stalk has a random height
}



// makes taller cacti
function makeCactus(birthLocationX) {
    var ccts = {x: birthLocationX,
                breadth: 50,
                speed: -4.5,
                cHeight: random(30, 60), // height of cactus
                cBottom: random(200, 225), // bottom of cactus
                s1Height: random(20, 60), // top of the left stalk
                s1Bottom: random(5, 20), // bottom of left stalk
                s2Height: random(20, 60), // top of right stalk
                s2Bottom: random(5, 20), // bottom of right stalk
                
                color: color(random(40, 100), random(80, 200), 72), // varies shades of green
                move: cactusMove,
                display: cactusDisplay}
    return ccts;
}

function addNewBallsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBallLikelihood = 0.02; 
    if (random(0,1) < newBallLikelihood) {
        ball.push(makeBall(width));
    }
}

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

function removeBallsThatHaveSlippedOutOfView(){
    var ballsToKeep = [];
    for (var i = 0; i < ball.length; i++){
        if (ball[i].x + ball[i].breadth > 0) {
            ballsToKeep.push(ball[i]);
        }
    }
    ball = ballsToKeep; // remember the surviving buildings
}

function addNewBallWithSomeRandomProbability() {
    // With a very tiny probability, add a new ball cactus to the end.
    var newBallLikelihood = 0.02; 
    if (random(0,1) < newBallLikelihood) {
        ball.push(makeBall(width));
    }
}

// method to update position of ball shaped cactus every frame
function ballMove() {
    this.x += this.speed;
}


// displays ball-shaped cacti
function ballDisplay(){
    push();
    noStroke();
    fill(this.color);
    ellipse(this.x, this.ey, this.ew, this.eh); // main ball cactus
    fill(204, 209, 135, 60)
    ellipse(this.x, this.ey, this.ew-5, this.eh-5); // highlight
    fill(this.color);
    ellipse(this.x, this.ey, this.ew-10, this.eh-10);
    fill(251, 203, 188);
    stroke(this.color);
    strokeWeight(1);
    ellipse(this.x, this.ey-(this.eh/2), 8, 5) // lil flower guy on top
    pop();
}

// makes ball-shaped cacti
function makeBall(birthLocationX) {
    var b = {x: birthLocationX,
                breadth: 50,
                speed: -4.5,
                eh: random(20, 40), // height of ellipse
                ey: random(200, 225), // y coord of ellipse
                ew: random(20, 40), // width of ellipse
                color: color(random(50, 150), 100, random(100, 200)), // varies shades of blue
                move: ballMove,
                display: ballDisplay}
    return b;
}

//Ian Lippincott
//ilippinc@andrew.cmu.edu
//Section: D
//Project 11

var hill = [];
var mountains = [];
var trees = [];
var c1;
var c2;
var noiseParam = 0;
var noiseStep = 0.03;

function setup() {
    createCanvas(400, 240);
    //Define background colors
    c1 = color(228, 90, 41);
    c2 = color(221, 197, 75);
    strokeWeight(1);
    frameRate(20);
    for (var i = 0; i < (width / 5) + 1; i++) {
      var n = noise(noiseParam);
      var value = map(n, 0, 1, 50, 200);
      hill.push(value);
      noiseParam += noiseStep;
    }
}

 // create an initial collection of mountains 
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        mountains[i] = makemountain(rx);
    }

// create an initial collection of trees 
    for (var i = 0; i < 10; i++){
        var r = random(width);
        trees[i] = maketree(r);
    }    

function draw() {
  setGradient(c1, c2);
  strokeJoin(BEVEL);
  stroke(0);
  strokeWeight(4);
  fill(63, 77, 44);
  hill.shift(); 
  var n = noise(noiseParam);
  var value = map(n, 0, 1, 50, 150);
    hill.push(value);
    noiseParam += noiseStep;
    beginShape();
    vertex(0, height);
    for (var i = 0; i < (width / 5) + 1; i++) {
      vertex(i * 5, hill[i]);
    } 
    vertex(width, height);
    endShape();

    //Ground
    fill(95, 110, 73);
    rect(0, 199, width, height);

    //mountains
    updateAndDisplayMountains();
    removeMountainsThatHaveSlippedOutOfView();
    addNewMountainsWithSomeRandomProbability();

    //Trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
}

//mountains
function makeMountain(birthLocationX) {
    var mntn = {x: birthLocationX,
                breadth: 70,
                speed: -5.5,
                nFloors: round(random(2,8)),
                move: mountainMove,
                display: mountainDisplay}
    return mntn;
}

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

// draw the mountain
function mountainDisplay() {
    var floorHeight = 8;
    var cHeight = this.nFloors * floorHeight; 
    
    strokeWeight(4);
    stroke(0);
    fill(156, 119, 76);
    push();
    translate(this.x, height - 40);

    //Mountain
    triangle(-7,0,this.breadth/2,-cHeight-20,this.breadth + 7,0);
    //Shadow
    fill(87, 66, 42);
    triangle(-7,0,this.breadth/2,-cHeight-20,20,0);
    //Snow
    pop();
}

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

function removeMountainsThatHaveSlippedOutOfView(){
  var mountainToKeep = [];
  for (var i = 0; i < mountains.length; i++){
    if (mountains[i].x + mountains[i].breadth > 0) {
        mountainToKeep.push(mountains[i]);
    }
  }
  mountains = mountainToKeep; // remember the surviving mountain
}

function addNewMountainsWithSomeRandomProbability() {
    // With a very tiny probability, add a new cabin to the end.
    var newMountainLikelihood = 0.02; 
    if (random(0,1) < newMountainLikelihood) {
        mountains.push(makeMountain(width));
    }
}


//trees
function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                breadth: 70,
                speed: -6.0,
                nFloors: round(random(2,8)),
                move: treeMove,
                display: treeDisplay}
    return tr;
}

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

// draw the tree
function treeDisplay() {
    var floorHeight = 8;
    var cHeight = this.nFloors * floorHeight; 
    
    strokeWeight(4);
    stroke(0);
    fill(71, 145, 80);
    push();
    translate(this.x, height - 40);

    //Tree
    triangle(0, 0, 10,-cHeight, 20, 0);
    triangle(0, -8, 10,-cHeight, 20, -8);
    triangle(0, -16, 10,-cHeight, 20, -16);
    pop();
}

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

function removeTreesThatHaveSlippedOutOfView(){
  var treeToKeep = [];
  for (var i = 0; i < trees.length; i++){
    if (trees[i].x + trees[i].breadth > 0) {
        treeToKeep.push(trees[i]);
    }
  }
  trees = treeToKeep; // remember the surviving mountain
}

function addNewTreesWithSomeRandomProbability() {
    // With a very tiny probability, add a new cabin to the end.
    var newTreeLikelihood = 0.08; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

//Makes Gradient Background
function setGradient(c1, c2) {
  noFill();
  for (var b = 0; b < height; b++) {
    var inter = map(b, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, b, width, b);
  }
}

 /*
 Bon Bhakdibhumi
 bbhakdib
 Section D
 */
var backgroundX = 355;
var foregroundX = 250;
function preload() {
    train = loadImage("https://i.imgur.com/cMqi4AV.png");
    house = loadImage("https://i.imgur.com/KrNQaN2.png");
    tower = loadImage("https://i.imgur.com/P6WEAeL.png");
    montain = loadImage("https://i.imgur.com/04duSGs.png");
    backgroundHouse = loadImage("https://i.imgur.com/DgMNstF.png");
    backgroundTower = loadImage("https://i.imgur.com/AuMqECF.png");
}

 function setup() {
    createCanvas(480, 240);
 }

 function draw() {
// backdrop
    noStroke();
    fill(147, 129, 101);
    rect(0, 175, 480, 65);
    fill(164, 233, 244);
    rect(0, 0, 480, 174);
    imageMode(CENTER);
// background elements
    for (var i = 0; i < 3; i ++) {
        image(backgroundTower, backgroundX - (i * 200), 117, 200, 200);
        image(backgroundHouse, (backgroundX + 80) - (i * 200), 147, 200, 200);
    }
// foreground elements
    image(montain, foregroundX, 105, 250, 250);
    image(house, foregroundX - 140, 137, 210, 210);
    image(tower, foregroundX + 130, 105.5, 210, 210);
    image(train, 240, 120, 480, 240);
    backgroundX -= 2; 
    foregroundX -= 2;
// resetting foreground and background elements
    if (backgroundX <= -125) {
        backgroundX = 900;
    }

    if (foregroundX <= -150) {
        foregroundX = 825
    }
}