ashleyc1-Section C-Project-10-Landscape

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-10-Landscape

var flowers = [];

var boatX = 440;
var boatY = 280;
var floatHeight;


function setup() {
    createCanvas(480, 480);
    frameRate(10);

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){

        var rx = random(width);
        var ry = random(height);

        flowers[i] = makeFlower(rx, ry);
    }

    frameRate(10);

}
 
function draw() {
    background(252, 220, 255);

    drawMountains();
    drawWater();
    drawBoat();

    
    displayHorizon();

    updateAndDisplayFlowers();
    removeFlowersThatHaveSlippedOutOfView();
    addNewFlowersWithSomeRandomProbability(); 

    
}

function updateAndDisplayFlowers(){
    // Update the flower's positions, and display them.
    for (var i = 0; i < flowers.length; i++){

        flowers[i].move();
        flowers[i].display();
    }
}

function removeFlowersThatHaveSlippedOutOfView(){

    var flowersToKeep = [];
    
    for (var i = 0; i < flowers.length; i++){

        if (flowers[i].x + flowers[i].stemThickness > 0) {

            flowersToKeep.push(flowers[i]);
        
        }
    }

    flowers = flowersToKeep; // remember the surviving flowers
}


function addNewFlowersWithSomeRandomProbability() {

    // With a very tiny probability, add a new flower to the end.
    var newFlowerLikelihood = 0.01; 

    if (random(0,1) < newFlowerLikelihood) {

        flowers.push(makeFlower(width));
    }
}


// method to update position of flower every frame
function flowerMove() {
    this.x += this.speed;
    this.y += this.speed;

}
    

// draw the flower and some windows
function flowerDisplay() {

    var floorHeight = -5;
    var stemHeight = this.nFloors * floorHeight; 

    push();
    translate(this.x, height - this.offset);
    
    //draw stems
       fill(210);
       rect(0, 0, this.stemThickness, stemHeight);

       translate(this.stemThickness/2, stemHeight);
        //draw flowers here
        for (var i = 0; i < 100; i++) {

            var g = random(0, 100);
            var b = random(0, 100);

            noStroke();
            fill(206, g, b);
            ellipse(0 , 10, 5, 30);
            rotate(PI/5);

            } 

    pop();
}


function makeFlower(birthLocationX, birthLocationY) {
    var flwr = {x: birthLocationX, 
                y: birthLocationY,
                floatHeight: random(10, 100),
                stemThickness: 5,
                speed: -1.0,
                nFloors: round(random(5, 10)),
                offset: random(10, 40), //allows stems to be drawn at various points
                move: flowerMove,
                display: flowerDisplay}

    return flwr;
}

//horizon that flowers are on
function displayHorizon(){
    noStroke(0);
    fill(81, 64, 137);
    rect(0, height - 100, width, height - 100); 
}


function drawWater() {

    var waterSpeed = 0.00009;
    var waterDetail = 0.0005;

    beginShape(); 

    fill(209, 211, 255);
    noStroke();
   
    for (var xWater = 0; xWater < width; xWater++) {

        var tWater = (xWater * waterDetail) + (millis() * waterSpeed);
        var yWater = map(noise(tWater), 0,1, 180, 280);
        vertex(xWater, yWater); 

        //make it draw to edge of canvas
        vertex(0, height);
        vertex(width, height);

    }

    endShape();

}

function drawMountains() {

    var mountainSpeed = 0.0005;
    var mountainDetail = 0.008;

    //Background Mountains
    beginShape(); 

    fill(101, 101, 202, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 20, 100);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);


    }

    //foreground mountains
    endShape();
    beginShape(); 

    fill(204, 204, 255, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 80, 180);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);

        //stagger mountain edges
        mountainDetail = .01;
    }

    endShape();

}


function drawBoat() {

    //post and sail
    stroke(255);
    strokeWeight(2);
    fill(255);
    line(boatX, boatY, boatX, boatY - 50);
    triangle(boatX, boatY - 50, boatX + 30, boatY -10, boatX, boatY - 5);

    fill(153, 51, 0);
    noStroke();
    arc(boatX, boatY, 80, 50, TWO_PI, PI);

    boatX -= 1;

    //var constrainY = constrain(boatY, 180, 280); 

    //reset boatX so it can repeat when it goes over edge of canvas
    if (boatX < -40) {

        boatX = width;
    }
}

For this project, I wanted to create a mountainscape because I find those peaceful to look at especially when going through the terrible stress of school in general. My image probably could’ve been pushed further but I had a lot of difficulty understanding what characteristics could automatically be defined within an objet and how those elements interacted with one another so just getting my landscape to this point was a success for me.

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-10-Landscape

var flowers = [];

var boatX = 440;
var boatY = 280;
var floatHeight;


function setup() {
    createCanvas(480, 480);
    frameRate(10);

    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){

        var rx = random(width);
        var ry = random(height);

        flowers[i] = makeFlower(rx, ry);
    }

    frameRate(10);

}
 
function draw() {
    background(252, 220, 255);

    drawMountains();
    drawWater();
    drawBoat();

    
    displayHorizon();

    updateAndDisplayFlowers();
    removeFlowersThatHaveSlippedOutOfView();
    addNewFlowersWithSomeRandomProbability(); 

    
}

function updateAndDisplayFlowers(){
    // Update the flower's positions, and display them.
    for (var i = 0; i < flowers.length; i++){

        flowers[i].move();
        flowers[i].display();
    }
}

function removeFlowersThatHaveSlippedOutOfView(){

    var flowersToKeep = [];
    
    for (var i = 0; i < flowers.length; i++){

        if (flowers[i].x + flowers[i].stemThickness > 0) {

            flowersToKeep.push(flowers[i]);
        
        }
    }

    flowers = flowersToKeep; // remember the surviving flowers
}


function addNewFlowersWithSomeRandomProbability() {

    // With a very tiny probability, add a new flower to the end.
    var newFlowerLikelihood = 0.01; 

    if (random(0,1) < newFlowerLikelihood) {

        flowers.push(makeFlower(width));
    }
}


// method to update position of flower every frame
function flowerMove() {
    this.x += this.speed;
    this.y += this.speed;

}
    

// draw the flower and some windows
function flowerDisplay() {

    var floorHeight = -5;
    var stemHeight = this.nFloors * floorHeight; 

    push();
    translate(this.x, height - this.offset);
    
    //draw stems
       fill(210);
       rect(0, 0, this.stemThickness, stemHeight);

       translate(this.stemThickness/2, stemHeight);
        //draw flowers here
        for (var i = 0; i < 100; i++) {

            var g = random(0, 100);
            var b = random(0, 100);

            noStroke();
            fill(206, g, b);
            ellipse(0 , 10, 5, 30);
            rotate(PI/5);

            } 

    pop();
}


function makeFlower(birthLocationX, birthLocationY) {
    var flwr = {x: birthLocationX, 
                y: birthLocationY,
                floatHeight: random(10, 100),
                stemThickness: 5,
                speed: -1.0,
                nFloors: round(random(5, 10)),
                offset: random(10, 40), //allows stems to be drawn at various points
                move: flowerMove,
                display: flowerDisplay}

    return flwr;
}

//horizon that flowers are on
function displayHorizon(){
    noStroke(0);
    fill(81, 64, 137);
    rect(0, height - 100, width, height - 100); 
}


function drawWater() {

    var waterSpeed = 0.00009;
    var waterDetail = 0.0005;

    beginShape(); 

    fill(209, 211, 255);
    noStroke();
   
    for (var xWater = 0; xWater < width; xWater++) {

        var tWater = (xWater * waterDetail) + (millis() * waterSpeed);
        var yWater = map(noise(tWater), 0,1, 180, 280);
        vertex(xWater, yWater); 

        //make it draw to edge of canvas
        vertex(0, height);
        vertex(width, height);

    }

    endShape();

}

function drawMountains() {

    var mountainSpeed = 0.0005;
    var mountainDetail = 0.008;

    //Background Mountains
    beginShape(); 

    fill(101, 101, 202, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 20, 100);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);


    }

    //foreground mountains
    endShape();
    beginShape(); 

    fill(204, 204, 255, 150);
    noStroke();
   
    for (var xMount = 0; xMount < width; xMount++) {

        var tMount = (xMount * mountainDetail) + (millis() * mountainSpeed);
        var yMount = map(noise(tMount), 0,1, 80, 180);
        vertex(xMount, yMount); 
        vertex(0, height);
        vertex(width, height);

        //stagger mountain edges
        mountainDetail = .01;
    }

    endShape();

}


function drawBoat() {

    //post and sail
    stroke(255);
    strokeWeight(2);
    fill(255);
    line(boatX, boatY, boatX, boatY - 50);
    triangle(boatX, boatY - 50, boatX + 30, boatY -10, boatX, boatY - 5);

    fill(153, 51, 0);
    noStroke();
    arc(boatX, boatY, 80, 50, TWO_PI, PI);

    boatX -= 1;

    //var constrainY = constrain(boatY, 180, 280); 

    //reset boatX so it can repeat when it goes over edge of canvas
    if (boatX < -40) {

        boatX = width;
    }
}