Category: Project-11-Landscape

sketch

// Ankitha Vasudev
// Section B
// ankithav@andrew.cmu.edu
// Project-11

// global variables
var birds = []; // bird objects

var terrainSpeed1 = 0.0005; // back mountains speed
var terrainDetail1 = 0.015; // back mountains detail
var terrainSpeed2 = 0.001;  // front mountains speed
var terrainDetail2 = 0.008; // front mountains detail

function setup() {
	createCanvas(450, 400);

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

    frameRate(10);
}

function draw() {
    background(80);
    
    // window arc frame 
    fill(230);
    arc(width/2, 400, width*2, 750, PI, 0);

    // landscape elements
    sun();
    backMountains();
    carWindowandRoad();
    frontMountains();
    mountainreflection();

    // displaying birds 
    updateAndDisplayBirds();
    removeOldBirds();
    addNewBirds();

    // vertical window frame line
	stroke(0);
	strokeWeight(7);
	line(75, 50, 75, height);
}

function carWindowandRoad() {

    // window frame
	stroke(0);
	strokeWeight(7);
	noFill();
	arc(width/2, 400, width*2, 750, PI, 0);

	// water
	noStroke();
	fill(230);
	rect(0, 340, width, 100);

	// road
	stroke(255);
	strokeWeight(2);
	fill(100);
	rect(-10, 380, width+20, 70);

    // bottom window frame
    noStroke();
    fill(0);
	rect(0, 393, width, height);
}

function backMountains() {
	// large mountains in the back 
    stroke(215);
    beginShape();
	for(var x=0; x<=width; x++) {
		var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
		var y = map(noise(t), 0, 1, 100, 350);
		line(x, y, x, 380);
	}
	endShape();
}

function frontMountains() {
	// smaller mountains in the front
	stroke(150);
    beginShape();
	for(var x=0; x<=width; x++) {
		var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
		var y = map(noise(t), 0, 2, 300, 200);
		line(x, y, x, 340);
	}
	endShape();
}

function mountainreflection() {
	// reflection of small mountains in the water
    stroke(200);
    beginShape();
	for(var x=0; x<=width; x++) {
		var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
		var y = map(noise(t), 0, 5, 120, 250);
	    line(x, y+220, x, 340);
	}
	endShape();
}

function sun() {
	//sun 
	noStroke();
	fill(238);
	ellipse(370,100, 60);
	fill(247);
	ellipse(370, 100, 55);
	fill(255);
	ellipse(370, 100, 50);
}

function updateAndDisplayBirds() {
	// display and move birds
    for (var i=0; i<birds.length; i++) {
    	birds[i].move();
    	birds[i].display();
    }
}

function removeOldBirds() {
	// remove old birds off canvas
	var birdsToKeep = [];
	for (var i=0; i<birds.length; i++) {
		if (birds[i].x + birds[i].breadth > 0) {
			birdsToKeep.push(birds[i]);
		}
	}
	birds = birdsToKeep;
}

function addNewBirds() {
	// add new birds with a probability of 0.05
	var newBirds = 0.05;
	if (random(0,1) < newBirds) {
		birds.push(makeBirds(width));
	}
}

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

function displayBirds() {
	// code to draw each bird
	noFill();
	stroke(this.col);
	strokeWeight(0.8);
	arc(this.x, this.y, this.width, this.height, PI, TWO_PI);
	arc(this.x+this.width, this.y, this.width, this.height, PI, TWO_PI);
}

function makeBirds(birthLocationX) {
	// randomization of birds
	var birdy = {x: birthLocationX,
		y: random(140, 230),
		col: random(30,100),
		breadth: 50,
        speed: random(-3,-6),
        width: random(3,8),
        height: random(2,4),
        move: moveBirds,
		display: displayBirds
	}
    return birdy;
}

For this project I created a generative landscape of a view out a car window. I wanted to create a strong sense of foreground vs background and did this by including many elements: mountains in the back and front, water with the mountain reflections and a thin strip of the road. I used birds as my objects and randomized the width, height and color. I also used this project as an opportunity to play with a monotone color scheme (since all my previous project use a lot of color). Overall, it was fun and I’m much more confident about using objects. 

Landscape

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-11
*/
//important variables
var fish = [];
var star = [];

function setup() {
    createCanvas(480, 480);
    frameRate(20);
    //initial collection of fish
    for (i = 0; i < 30; i++) {
        var fishx = random(width);
        var fishy = random(300, height);
        fish[i] = makeFish(fishx, fishy);
    }
    //initial collection of stars
    for (i = 0; i < 10; i++) {
        var starx = random(width);
        var stary = random(0, 100);
        star[i] = makeStar(starx, stary);
    }
}

function draw() {
    //black background
    background(0);
    //draw mountains, water, bed, fish, stars, and moon
    drawMountains();
    drawWater();
    drawBed();
    fishies();
    stars();
    drawMoon();
}

function drawBed() {
    stroke(0); //black outline
    fill(255, 254, 242); //bed color
    rect((width/2)-30, (height/2)-10, 150, 40); //bed shape
    fill(255); //pillow color
    ellipse(width/2+105, height/2-14, 30, 10); //pillow shape
    fill(255, 243, 222); //head color
    ellipse(width/2+100, height/2-25, 20, 20); //head shape
    noStroke(); //no outline for neck
    ellipse(width/2+83, height/2-20, 20, 5); //neck shape
    stroke(0); //black outline
    fill(203, 202, 204); //blanket color
    ellipse(width/2+30, height/2-10, 120, 40); //blanket shape
}

function drawWater() {
    fill(66, 112, 128); //blue water color
    rect(0, height/2, width, height); //fill bottom half of canvas
}

function drawFish() {
    noStroke(); //no outline
    fill(255, 160, 122); //orange fish color
    push();
    translate(this.x1, this.y1); //locate fish at x1, y1
    ellipse(10, 10, 10, 5); //fish body
    triangle(10, 10, 5, 5, 5, 15); //fish tail
    pop();
}

function makeFish(xlocation, ylocation) {
    var makeF = {x1: xlocation, 
                y1: ylocation, 
                fishx: random(0, width), 
                fishy: random(300, height),
                speed: -3.0,
                move: moveFish,
                draw: drawFish}
    return makeF;
}

function moveFish() {
    this.x1 += this.speed; //speed of fish moving
    if (this.x1<=-10) { //restart fish at width after it disappears on left
        this.x1 += width;
    }
}

function fishies() {
    for(i=0; i<fish.length; i++) {
        fish[i].move();
        fish[i].draw();
    }
}

function drawStar() {
    noStroke();
    fill(255, 251, 0); //yellow color
    push();
    translate(this.x2, this.y2); //draw stars at x2, y2
    ellipse(10, 10, 5, 5); //star shape
    pop();
}

function makeStar(xlocation, ylocation) {
    var makeS = {x2: xlocation, 
                y2: ylocation, 
                starx: random(0, width), 
                stary: random(0, 100),
                speed: -3.0,
                move: moveStar,
                draw: drawStar}
    return makeS;
}

function moveStar() {
    this.x2 += this.speed; //speed of stars moving
    if (this.x2<=-10) { //restart stars on right if it leaves canvas
        this.x2 += width;
    }
}

function stars() {
    for(i=0; i<star.length; i++) {
        star[i].move();
        star[i].draw();
    }
}

function drawMoon(){
    fill(255, 253, 184); //yellow moon color
    ellipse(400, 50, 50, 50); //moon shape
}

function drawMountains(){
    noStroke();
    fill(43, 43, 36); //dark gray mountain color
    beginShape(); 
    for (i=0; i<width; i++) {
        var mountainSpeed = .0007; //speed of mountains moving
        var mountainDetail = 0.02; //smoothness of mountains
        var t = (i * mountainDetail) + (millis() * mountainSpeed);
        //mountain y coord
        var y = map(noise(t), 0, 1.8, height/8, height);
        //keep drawing mountain
        vertex(i, y);
    }
    //height constriant of mountains
    vertex(width, height);
    //restart mountains at left side 
    vertex(0, height);
    endShape();
}

This process took me a long time. I spent a while thinking about what I wanted to draw and I decided on a Parent Trap theme with a bed floating in the ocean. The stars, moon, mountains, and fish are meant to resemble an ocean view at night. I had some difficulty making my own object, but once I got the hang of it, it was pretty fun.

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//project-10-landscape

var terrainSpeed = 0.0002;//speed of terrian moving
var terrainDetail = 0.015;//smoothness of terrian
var star = [];

function setup() {
    createCanvas(480, 480);
    frameRate(20);//speed of refreshing frames (stars changing)
}

function draw() {
    background("black");

    makeMountain();
    makeMoon();
    makeStar();
    makeCar();
}

//moving terrian
function makeMountain(){
    noStroke();
    fill("blue"); 
    beginShape(); 

    for (var x = 0; x < width; x++) {
      var t = (x * terrainDetail) + (millis() * terrainSpeed);//shape & moving speed of terrian 
      var y = map(noise(t), 0, 1.8, height/8, height);//y-coordinate of terrian
      vertex(x, y);//draw terrian continuously
    }

    vertex(width, height);//constrain range of terrian
    vertex(0, height);//terrian restarts at left side of canvas
    endShape();
}

function makeMoon(){
    noStroke();
    fill(252, 242, 166);
    ellipse(2 * width / 3, height / 4, 120, 120);//outer layer
    fill(239, 207, 104);
    ellipse(2 * width / 3, height / 4, 80, 80);//inner layer
}

function makeStar(){
    fill(270);
    for (var i = 0; i < 30; i++) {
      var starX = random(width); //random stars on upper canvas
      var starY = random(0, 200);
      ellipse(starX, starY, 3, 3);
    }
}

function makeCar(){
    fill("yellow");
    rect(100, random(375, 380), 100, 30);//lower body of shaking car
    rect(100, 350, 70, 30);//uppper body of shaking car

    fill("green");
    stroke("black");
    circle(120, random(410, 415), 30, 30);//left wheel
    circle(170, random(410, 415), 30, 30);//right wheel
}
   

I had fun creating this project. Moving the background (terrain) implies the moving of the main object (car). The process of generating mountain in the back was fascinating, because I learned how to randomize height and width in order to indicate moving scenes. Creating mountains creates a very peaceful and relaxing scene, which is something I desperately want.

I also utilize randomly-positioned stars in the background to make it a starry night. For the car, I used randomized y-coordinates in order to show it is driving on a bumpy road. Overall, I think I achieved my goal of giving the viewer a sense of wonderment.