Category: Project-11-Landscape

sketch

//Michelle Dang
//mtdang
//Section D
var cloud = [];

var water = [];
var offset = 0;

mountain = [];
var inc = 0.01;
var xoff = 0;

function newWater(px, py, pw) {
    var p = {x: px, y: py, w: pw,
             right: watRight};
    return p;
}

// compute the location of the right end of a platform
function watRight() {
    return this.x + this.w;
}


function setup() {
    createCanvas(480, 300); 
    
    // create an initial collection of cloud
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        cloud[i] = makeCloud(rx);
    }

    for (var i=0; i<10; i++) {
        var rx = random(width);
    }

    var pl = newWater(0, 210, 60);  // first platform
    water.push(pl);

     for (var i=0; i<width/5+1; i++) {
        var n = noise(xoff)
        var value = map(n, 0, 1, 0, height);
        xoff+=inc;
        mountain.push(value);
    }

    frameRate(10);

}


function draw() {
    background(220)
    //background
    noStroke()

    displayHorizon();
    updateAndDisplaycloud();
    removecloudThatHaveSlippedOutOfView();
    addNewcloudWithSomeRandomProbability(); 

//mountainss
    beginShape()
    fill("blue")
    vertex(0, height); //bottom left corner of mountain
    for (var i=0; i<width/5; i++) {
        vertex(i*6, mountain[i])  //mountain surface
    }
    vertex(width, height) //bottom right corner of mountain
    endShape();

    mountain.shift();
    mountain.push(map(noise(xoff), 0, 1, 0, 300));
    xoff+= inc;


//water and sand
    fill(235, 226, 160)
    rect(0, 250, width, 200); 
    fill(98, 147, 204)
    rect(0, 200, width, 50); 


    fill("blue");
    noStroke(0);
    for (var i = 0; i < water.length; i++) {
        var p = water[i];
        rect(p.x - offset, p.y, p.w, 10, 10);
    }

    // if first platform is offscreen to left, remove it
    if (water.length > 0 & water[0].right() < offset) {
        water.shift();
    }

    // if last platform is totally within canvas, make a new one
    var lastPlat = water[water.length-1];
    if (lastPlat.right() - offset < width) {
        var p = newWater(10+lastPlat.right(), // start location
              random(210, 235), // height of new platform
              60); // all water have width 200 for now
        water.push(p); // add to our array of water
    }

      offset += 1;
  

 }

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



function removecloudThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find cloud
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the cloud
    // we want to keep into a new array.
    var cloudToKeep = [];
    for (var i = 0; i < cloud.length; i++){
        if (cloud[i].x + cloud[i].breadth > 0) {
            cloudToKeep.push(cloud[i]);
        }
    }
    cloud = cloudToKeep; // remember the surviving cloud
}





function addNewcloudWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCloudLikelihood = 0.007; 
    if (random(0,1) < newCloudLikelihood) {
        cloud.push(makeCloud(width));
    }
}


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


// draw the building and some windows
function cloudDisplay() {
    var floorHeight = 5;
    var bHeight = 30; 
    var cHeight = 40; 
    fill(255);
    noStroke()
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight-100, this.breadth, bHeight, 20);
    rect(20, -bHeight-100, this.breadth, bHeight+10, 20);
    rect(20, -bHeight-200, this.breadth, cHeight, 20);
    stroke(200); 
    pop();
}


function makeCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 60,
                speed: -1.0,
                nFloors: round(random(2, 7)),
                move: cloudMove,
                display: cloudDisplay}
    return bldg;
}



function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}

I’ve been missing my grandparents recently, so I knew I wanted to do something that reminds me of them. That means mountains. My grandfather is Austrian and he and my grandmother live in Colorado currently, so I wanted to make the scene feel like I was riding in the car in some mountainous area, complete with rolling hills, pine trees, a nice wooden fence, and a couple goats. I used a noise function for the mountains and hills at different amplitudes. The hill noise function gave me a little trouble when I started implementing my trees, but by lowering the amplitude more and limiting the range for the random tree generation, I was able to mitigate most of the floating trees. Originally, I was thinking about making the goat change color as well, but I couldn’t successfully implement it, so I left it out. Overall, I’m happy with how my landscape came out. I think that if I had more time, there are certainly more tweaks I would make, but with the time that was available to me this week I’m happy with what I made.

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

var goats = [];
var hill = [];
var mountain = [];
var fence = [];
var trees = [];
var noiseParam = 1; //for the mountains
var noiseStep = 0.05; //for the mountains
var noiseParam2 = 5; //for the hills
var noiseStep2 = 0.005; //for the hills

function preload() {
    treeImg = loadImage("https://i.imgur.com/eI7dRxU.png");
    fenceImg = loadImage("https://i.imgur.com/8f0PfZu.png");
    goatImg = loadImage("https://i.imgur.com/TX6vImS.png");
}

//the mountains
function mountains() {
    //sets up the mountains
    strokeWeight(3);
    stroke(100); //dark gray
    fill(100); //dark gray

    //creates the mountains
    translate(0,0.5);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,mountain[i]);
    }
    vertex(width,height);
    endShape();
    mountain.shift();
    var n=noise(noiseParam);
    var value=map(n,0,1,0,height);
    mountain.push(value);
    noiseParam+=noiseStep;
}

//the hills
function hills() {
    //sets up the hills
    strokeWeight(3);
    stroke(27,81,45); //dark green
    fill(27,81,45); //dark green

    //creates the hills
    translate(0,10);
    beginShape();
    vertex(0,height);
    for (var i=0; i<(width/5)+1; i+=1) {
        vertex(i*5,hill[i]);
    }
    vertex(width,height);
    endShape();
    hill.shift();
    var n=noise(noiseParam2);
    var value=map(n,0,1,0,height);
    hill.push(value);
    noiseParam2+=noiseStep2;
}

//the goats
function makeGoat(gx) {
    var g = {x: gx,
        goatSpeed: -3.0,
        goatSizeMod: random(0,51),
        move: goatMove,
        display: goatDisplay}
    return g;
}
function goatDisplay() {
    image(goatImg, this.x+200,90-this.goatSizeMod, 100+this.goatSizeMod,100+this.goatSizeMod);
}
function goatMove() {
    this.x += this.goatSpeed;
}
function updateGoats() {
    //update the goat positions and display them
    for (var i=0; i<goats.length; i+=1) {
        goats[i].move();
        goats[i].display();
    }
}
function removeGoats() {
    //remove goat when no longer on screen
    var goatOnScreen = [];
    for (var i=0; i<goats.length; i+=1) {
        if (goats[i].x + 400 > 0) {
            goatOnScreen.push(goats[i]);
        }
    }
    goats = goatOnScreen;
}
function addNewGoats() {
    var newGoatChance = 0.004;
    if (random(0,1) < newGoatChance) {
        goats.push(makeGoat(width));
    }
}

//the trees
function makeTree(tx) {
    var t = {x: tx,
        y: 90-random(0,50),
        treeSpeed: -5.0,
        treeSizeMod: random(0,51),
        move: treeMove,
        display: treeDisplay}
    return t;
}
function treeDisplay() {
    image(treeImg, this.x+200, this.y, 50+this.treeSizeMod,75+this.treeSizeMod);
}
function treeMove() {
    this.x += this.treeSpeed;
}
function updateTrees() {
    //update the tree positions and display them
    for (var i=0; i<trees.length; i+=1) {
        trees[i].move();
        trees[i].display();
    }
}
function removeTrees() {
    //remove tree when no longer on screen
    var treesOnScreen = [];
    for (var i=0; i<trees.length; i+=1) {
        if (trees[i].x + 400 > 0) {
            treesOnScreen.push(trees[i]);
        }
    }
    trees = treesOnScreen;
}
function addNewTrees() {
    var newTreeChance = 0.1;
    if (random(0,1) < newTreeChance) {
        trees.push(makeTree(width));
    }
}

function setup() {
    createCanvas(480,200);
    frameRate(25);
    
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        mountain[i]=value;
        noiseParam+=noiseStep;
    }
    //for the mountains
    for (var i=0; i<(width/5)+1; i+=1) {
        var n=noise(noiseParam2);
        var value=map(n,0,1,0,height);
        hill[i]=value;
        noiseParam2+=noiseStep2;
    }
    //inital collection of trees
    for (var i=0; i<10; i+=1) {
        var rx = random(width);
        trees[i]=makeTree(rx);
    }
}

function draw() {
    background(123, 196, 227); //sky blue

    //sun
    noStroke();
    fill(255, 255, 227); //very light yellow
    ellipse(40,30,25);

    mountains();
    hills();

    //trees
    updateTrees();
    removeTrees();
    addNewTrees();

    //goats
    updateGoats();
    removeGoats();
    addNewGoats();

    //fence
    var fenceX=0;
    for (var i=0; i<5; i+=1) {
        image(fenceImg, fenceX+(i*200),115, 200,100);
    }
}

sketch

// gnmarino
// gia marino
// section D

// sushi conveyor belt animation

var sushis = [];
var nigiris = [];

function setup() {
    createCanvas(480, 320);

}

function draw() {
    background(220);

    // moves sushis and nigiris 
    moveDisplayOfSushiAndNigiri(); 
    // removes them if they go off the screen
    removeOldSushiAndNigiri();
    // adds new sushis and nigiris based off a low probability
    addSushi_or_Nigiri();
    // makes conveyour belt for sushi and nigiri to move on
    conveyorBelt();
}

function removeOldSushiAndNigiri() {
    var freshSushi = [];
    var freshNigiri = [];

    // if sushis are on the screen then put them in fresh sushi array
    // if they are not on the screen then they will disappear because 
    // they won't be added to the new array
    for (var i = 0; i < sushis.length; i++){
        if (sushis[i].x + sushis[i].sushiWidth > 0) {
            freshSushi.push(sushis[i]);
        }
    }

    // same with nigiris
    for (var i = 0; i < nigiris.length; i++){
        if (nigiris[i].x + nigiris[i].nigiriWidth > 0) {
            freshNigiri.push(nigiris[i]);
        }
    }

    sushis = freshSushi;
    nigiris = freshNigiri;
}

function moveDisplayOfSushiAndNigiri(){
    for(var i = 0; i < sushis.length; i ++){
        sushis[i].move();
        sushis[i].display();
    }

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

function addSushi_or_Nigiri() {

    // this is the probability of being added everytime code loops
    var addSushiLikelihood = .005;
    var addNigiriLikelihood = .004;

    if(random(0, 1) < addSushiLikelihood) {
        sushis.push(makeSushi(width));
    }

    if(random(0, 1) < addNigiriLikelihood) {
        nigiris.push(makeNigiri(width +10));
    }

}

function displayNigiri() {

    push();
    strokeWeight(2);
    // these variables are used to make it easier to put the shapes together
    var nigiriTop = 180-this.nigiriHeight   // conveyor belt is at 180
    var nigiriMiddle = this.nigiriWidth/2 + this.x

    fill(247, 246, 241);    //off-white
    rect(this.x, nigiriTop, this.nigiriWidth, this.nigiriHeight);
    fill(this.sashimiColor);
    ellipse(nigiriMiddle, nigiriTop, this.nigiriWidth + 15, 40);

    // this is to cover last ellipse so it looks more like shashimi
    fill(247, 246, 241);    //off-white
    ellipse(nigiriMiddle, nigiriTop + 10, this.nigiriWidth, 25);
    noStroke();
    rect(this.x + 1, nigiriTop + 10, this.nigiriWidth-2, 15);
    pop();

}

function displaySushi() {

    // these variables are used to make it easier to put the shapes together
    var sushiMiddle = this.sushiWidth/2 + this.x
    var sushiTop = 180-this.sushiHeight     // conveyor belt is at 180
    push();
    strokeWeight(2);
    fill(this.wrapColor);
    rect(this.x, sushiTop, this.sushiWidth, this.sushiHeight);
    fill(247, 246, 241);    //off-white
    ellipse(sushiMiddle, sushiTop, this.sushiWidth, 25);
    fill(this.fishColor);
    ellipse(sushiMiddle, sushiTop, this.sushiWidth-20, 15);
    pop();
}

function move_sushi_nigiri() {
    this.x += this.speed;
}

// sushi object
function makeSushi(originX) {
    var sushi = {x: originX, 
                 sushiWidth: random(55, 100),
                 sushiHeight: random(35, 70),
                 wrapColor: color(0, random(100) , 0),
                 fishColor: 
                 color(random(230, 260), random(145, 225), random(70, 160)),
                 speed: -3,
                 move: move_sushi_nigiri,
                 display: displaySushi}
    return sushi;
}

// nigiri object
function makeNigiri(originX) {
    var nigiri = {x: originX,           // don't know if i need to change that
                 nigiriWidth: random( 70, 110),
                 nigiriHeight: random( 15, 40),
                 sashimiColor: 
                 color(random(230, 260), random(145, 225), random(70, 160)),
                 speed: -3,
                 move: move_sushi_nigiri,
                 display: displayNigiri}
    return nigiri;
}

function conveyorBelt() {

    push();
    fill(70);
    rect(40, 185, 440, 150)
    fill(180);
    strokeWeight(5);
    ellipse(30, 260, 150);
    ellipse(450, 260, 150);

    strokeWeight(12);
    line(30, 335, 450, 335);
    line(30, 185, 450, 185);
    arc(30, 260, 150, 150, radians(90), radians(270), OPEN);
    arc(450, 260, 150, 150, radians(-90), radians(90), OPEN);

    pop();
}

//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Generative Landscape

var hills = []; //hills array
var trees = [];
var treesShowing = [];
var clouds = [];
var cloudsShowing = [];
var counter = 0;
var cloudCounter = 0;
var noiseParam = 0;
var noiseStep = 0.002;


function setup() {
    createCanvas(480, 300);
    //trees 
    for (var i = 0; i < 20;i++){
        var trs = random(width);
        trees[i] = makeTrees(trs);
    }
    //hills
    for (var i=0; i<width/2+1; i++){
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height);
        noiseParam += noiseStep;
        hills.push(value);
    }

      for (var i = 0; i < 5; i ++) {
        var cloudX = random(width);
        var cloudY = random(0, 40);
        cloudsShowing[i] = makeClouds(cloudX, cloudY);
    }

    frameRate(20);
}

function draw() {
    background(165,182,182);
    noStroke();
    
    //sun
    fill(204,102,0);
    circle(40,50,30);
    

    //hills fill shape
    beginShape(); 
    fill(56,87,33);
    vertex(0, height);
    for (var i=0; i<width/2; i+=1){
        vertex(i*5, hills[i]);
    }
    vertex(width, height);
    endShape();
    hills.shift();
    hills.push(map(noise(noiseParam), 0, 1, 0, height));
    noiseParam += noiseStep; //move sideways

    updateAndDrawClouds();
    removeCloudsOffScreen();
    addNewClouds();

    updateandDrawTrees();
    removeTreesOffScreen();
    addNewTrees();
    
}

function updateandDrawTrees(){
    for(var i=0; i < treesShowing.length; i++){
        treesShowing[i].move();
        treesShowing[i].draw();
    }

}

function removeTreesOffScreen(){
    var treesToKeep = [];
    for (var i = 0; i < treesShowing.length; i++){
        if (treesShowing[i].x+20 > 0) {
            treesToKeep.push(treesShowing[i]);
        }
    }
    treesShowing = treesToKeep; // remember showing trees
}

function addNewTrees(){
    counter+=1;
    if (counter % 25 == 0){
        treesShowing.push(makeTrees(width, random(150,300)));
    }
}

function makeTrees(tx, ty){
    var trees = {x:tx, y:ty, 
        width:random(10, 20), 
        height:random(50, 90), 
        r:random(75,200), g:random(75,100), b: 0,
        speed: -1.0,
        move: treesMove,
        draw: drawTrees }
    return trees;

}

//draw trees
function drawTrees(){
    fill(160,82,45);
    rect(this.x, this.y, this.width, this.height);
    fill(this.r, this.g, this.b);
    circle(this.x-5, this.y-10, 50);
    circle(this.x+20, this.y-10, 50);
    circle(this.x+5, this.y-20, 50);
}

function treesMove(){
    this.x += this.speed;
}




function updateAndDrawClouds(){
    for (var i = 0; i < cloudsShowing.length; i++) {
        cloudsShowing[i].move();
        cloudsShowing[i].draw();
    }
}

function removeCloudsOffScreen(){
    var cloudsToKeep = [];
    for (var i = 0; i < cloudsShowing.length; i++){
        if (cloudsShowing[i].cloudX + 10 > 0) {
            cloudsToKeep.push(cloudsShowing[i]);
        }
    }
    cloudsShowing = cloudsToKeep;
}

function addNewClouds(){
  cloudCounter+=1;
    if (cloudCounter % 100 == 0){
        cloudsShowing.push(makeClouds(width, random(0,60)));
    }
}

function makeClouds(cx, cy){
    var c = {cloudX: cx,
             cloudY: cy,
             cloudSpeed: -1,
             move: cloudMove,
             draw: cloudDraw}
    return c;
}

function cloudMove(){
    this.cloudX += this.cloudSpeed;
}

function cloudDraw(){
    fill(165);
    noStroke();
    ellipse(this.cloudX, this.cloudY - 5, 60, 50);
    ellipse(this.cloudX - 20, this.cloudY + 10, 60, 50);
    ellipse(this.cloudX + 15, this.cloudY - 5, 70, 50);
    ellipse(this.cloudX + 5, this.cloudY + 20, 60, 50);
    ellipse(this.cloudX + 30, this.cloudY + 10, 80, 50);
}

My landscape is inspired by the autumn. The view from the design studio is very scenic. I think I am most proud of this deliverable. I’ve struggled to make beautiful projects, but I’m pretty satisfied with this one.