Category: Project-11-Landscape

//Jessie Chen
//D
//Project 11
//Generative Landscape

var kiki = [];
var stars = [];
var clouds = [];
var animation = 0;

function preload() {
    //loads kiki animation frames
    var kikiFrames = [];
    kikiFrames[0] = "https://i.imgur.com/LxKITCM.png";
    kikiFrames[1] = "https://i.imgur.com/535FqDb.png";

    for (var i = 0; i < kikiFrames.length; i++) {
        kiki[i] = loadImage(kikiFrames[i]);
    }
}


function setup() {
    createCanvas(400, 300);
    imageMode(CENTER);
    frameRate(5);
    noStroke();

    //create an initial collection of stars
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height)
        stars[i] = makeStars(rx, ry);
    }

    //creates an initial collection of clouds
    for (var i = 0; i < 10; i++) {
        var rx = random(width);
        var ry = random(height);
        clouds[i] = makeClouds(rx, ry);
    }
}

function draw() {
    background(39, 36, 55);

    //draws the moon
    fill(233, 220, 152);
    ellipse(200, 150, 200, 200);


    updateStars();
    removeStars();
    addNewStars();

    updateClouds();
    removeClouds();
    addNewClouds();

    //plays kiki animation
    image(kiki[animation%kiki.length], 200, 150, 270, 200);
    animation ++;
}

//update positions
function updateStars() {
    for (var i = 0; i < stars.length; i++) {
        stars[i].move();
        stars[i].display();
    }
}

//remove stars that have gone off canvas
function removeStars() {
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++) {
        if (stars[i].x < width) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}
//add new stars from the left
function addNewStars() {
    var newStarLikelihood = 0.05; 
    if (random(0,1) < newStarLikelihood) {
        stars.push(makeStars(-10, random(0, height)));
    }
}

//stars move to the right
function starsMove() {
    this.x += this.speed;
}

//draws stars
function starsDisplay() {
    fill(233, 220, 152, 100);
    ellipse(this.x, this.y, this.size + 10);
    fill(233, 220, 152)
    ellipse(this.x, this.y, this.size);
}

//stars object
function makeStars(startX, startY) {
    var star = {x: startX,
                y: startY,
                speed: 0.5,
                size: random(2, 5),
                move: starsMove,
                display: starsDisplay}
    return star;
}

//update positions
function updateClouds() {
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

//remove clouds that have gone off canvas
function removeClouds() {
    var cloudToKeep = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x < width + 100) {
            cloudToKeep.push(clouds[i]);
        }
    }
    clouds = cloudToKeep;
}

//add new clouds from the left
function addNewClouds() {
    var newCloudLikelihood = 0.05; 
    if (random(0,1) < newCloudLikelihood) {
        clouds.push(makeClouds(-100, random(0, height)));
    }
}

//clouds move to the right
function cloudsMove() {
    this.x += this.speed;
}

//draws clouds
function cloudsDisplay() {
    fill(102, 94, 110, 60);
    noStroke();
    arc(this.x, this.y, 25 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 10, this.y, 25 * this.size, 45 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 25, this.y, 25 * this.size, 35 * this.size, PI + TWO_PI, TWO_PI);
    arc(this.x + 40, this.y, 30 * this.size, 20 * this.size, PI + TWO_PI, TWO_PI);
}

//clouds object
function makeClouds(startX, startY) {
    var cloud = {x: startX,
                y: startY,
                speed: 2,
                size: random(0, 8),
                move: cloudsMove,
                display: cloudsDisplay}
    return cloud;
}

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);
  }
}