Category: Project-10-Landscape

sketch

 /* Nina Lee Yoo
Section E
nyoo@andrew.cmu.edu
Project- 10:Landscape*/
var terrainSpeed = 0.0005;
var terrainDetail = 0.005;
var terrainDetailB = 0.0015;
var person = [];




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

  }
 
function draw() {
    background("pink");
   	
   	noStroke();
    push();
    beginShape();
    fill(176, 196, 222);
    vertex(0,height);



    for (var x = 0; x < width; x++) { // creating background of the first landscape
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y+10); 
    }
    vertex(width,height);
    endShape();
    pop();

    push();
    beginShape();
    fill(250,250,205);
    vertex(0,height);
    for(var x = 0; x<width; x ++){ // creating backfround for the yellow landscape
    	var t = (.5*x*terrainDetailB)+ (millis()*terrainSpeed);
    	var y = map(noise(t),0,1,0,height);
    	vertex(x,y+200);

    }
    vertex(width,height);
    endShape();
    pop();

    //people
  
    push()
    updateP();
    removeP();
    addNewP(); 
    pop()
}


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


function removeP(){

    var personToKeep = [];
    for (var i = 0; i < person.length; i++){
        if (person[i].x + person[i].breadth > 0) {
            personToKeep.push(person[i]);
        }
    }
    persons = personToKeep; 
}

function addNewP(){
   
    var newPerson = 0.01; 
    if (random(0,1) < newPerson) {
        person.push(makePerson(width));
    }
}


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

function personDisplay() {
	push()
    var personHeight = 20;
    var pHeight = this.nPersons * personHeight; 
    fill(255); 
    noStroke(); 
    push();
    translate(this.x, height - 40);
    ellipse(0, -pHeight, this.breadth, pHeight); // drawing the body
    fill(0);
    ellipse(-15, -pHeight - 20, 5, 5); // drawing eyes 
    ellipse(15, -pHeight - 20, 5, 5);

    stroke(200); 
    
    pop()
    }

 



function makePerson(birthLocationX) {
    var personn = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nPersons: round(random(2,8)),
                move: personMove,
                display: personDisplay}
    return personn;
}

I got inspired by this show I watched a long time ago with my brother. It was this weird cartoon blobs with little beady eyes that would just move from place to place in swarms, creating trouble along the way. It was fun to create the moving setting for the little guys and see the different little white marshmellow blobs come out.

week10

var sheep = [];
var terrainSpeed = 0.0005;
var terrainSpeedB = 0.0002;
var terrainSpeedS = 0.0001;

var terrainDetail = 0.02;
var terrainDetailB = 0.01;
var terrainDetailS = 0.03;

function setup() {
    createCanvas(480, 480); 
    
    for (var i = 0; i < 10; i++){ //fills the array with sheep
        var rx = random(width);
        sheep[i] = makeSHEEPS(rx);
    }
    frameRate(10);
}

function draw() {
    background("PaleTurquoise"); //the sky
    noStroke();
    fill("coral"); //sun
    ellipse(130, 100, 30, 30) 

    //darkest green hills
    beginShape(); 
    stroke("darkgreen");
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeedS); //creates detail in terrain
        //based on milliseconds that pass
        var y = map(noise(t), 0,1, 170, height/2);
        line(x, y, x, height); //I used this in order to fill my hills with color
    }
    endShape();
    
    //darker green hills
    beginShape(); 
    stroke("forestgreen");
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeedB); //terrain speeds differ as object appear closer
        //or further away
        var y = map(noise(t), 0,1, 210, height/2);
        line(x, y, x, height); 
    }
    endShape();

    //green hills
    beginShape(); 
    stroke("darkseagreen");
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetailB) + (millis() * terrainSpeedB);
        var y = map(noise(t), 0,1, 280, height/2);
        line(x, y, x, height); 
    }
    endShape();
    
    showSHEEP();
    byeOLDsheep(); //removes old sheep when they leave the frame
    addNewSHEEPS(); //adds more sheep

    //road bushes
    beginShape(); 
    stroke("olivedrab");
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetailB) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 430, 400);
        line(x, y, x, height); 
    }
    endShape();
    noStroke(); 

    displayROAD();

}

function showSHEEP() {
    // prints and moves the sheep
    for (var i = 0; i < sheep.length; i++){
        sheep[i].move();
        sheep[i].display();
    }
}

function byeOLDsheep(){
    var sheepToKeep = [];
    for (var i = 0; i < sheep.length; i++){
        if (sheep[i].x + sheep[i].breadth > 0) {
            sheepToKeep.push(sheep[i]);
        }
    }
    sheep = sheepToKeep; //fills with remaining sheeps so they continue to print
}

function addNewSHEEPS() {
    var newSHEEPLikelihood = 0.009; 
    if (random(0,1) < newSHEEPLikelihood) {
        sheep.push(makeSHEEPS(width));
    }
}

//makes the sheep move forward with each frame, depending on var speed
function sheepMove() {
    this.x += this.speed;
}
    
// the physical build of each sheep
function SheepDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    push();
    noStroke();
    translate(this.x, height - 40);
    //legs of sheep
    fill("wheat");
    rect(-7, -bHeight+3, 3, 16);
    rect(-1, -bHeight+5, 3, 16);
    rect(7, -bHeight+5, 3, 16);
    rect(12, -bHeight+3, 3, 16);

    //body of sheep
    fill(255); 
    ellipse(0, -bHeight, 10, 10);
    ellipse(10, -bHeight+10, 10, 10);
    ellipse(5, -bHeight+10, 10, 10);
    ellipse(10, -bHeight+5, 10, 10);
    ellipse(10, -bHeight+5, 15, 15);
    ellipse(-5, -bHeight+5, 15, 15);
    ellipse(-5, -bHeight+10, 10, 10);
    ellipse(0, -bHeight+12, 10, 10);
    ellipse(10, -bHeight, 10, 10);
    fill("wheat");
    ellipse(-10, -bHeight+7, 12, 8);
    ellipse(-7, -bHeight+3, 2, 5);
    ellipse(-10, -bHeight+3, 2, 5);
    fill("black");
    ellipse(-10, -bHeight+7, 2, 2);

    pop();
}

function makeSHEEPS(birthLocationX) { //creates sheeep at their randomized locations within reason
    var lilsheep = {x: birthLocationX,
                breadth: 10,
                speed: -2.5,
                nFloors: round(random(2,8)),
                move: sheepMove,
                display: SheepDisplay}
    return lilsheep;
}

function displayROAD(){ //function for printing the road in the foreground
    noStroke();
    fill("silver");
    rect(0,height-50, width, height-50); 
    fill("dimgray");
    rect(0,height-45, width, height-50); 
}

For this landscape, I wanted to make something that was idellic and nice to look at. When I was little, I would always try to draw the landscape outside when I was sitting in the car on road trips (especially when there are livestock to admire!) but I never could capture it accurately since it’s moving by so quickly. This is hardly an accurate description of what I would remember, but I like that this medium allows me to create moving animations that at least capture that aspect of my memory. I also had fun choosing colors.

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project 10
*/


//array to store craters
var crater = [];
//starting x position of rocket
var rocketX = 540;
//starting y position of rocket
var rocketY = 100;
//starting rocket speed
var rs = 8;
//rocket is not on screen
showRocket = false;
//faulty rocket
var faulty = false;

//creates initial craters with no overlap
function setCrater() {
    //craters that do not overlap are infrequent, so loop
    //runs many times to ensure more craters are drawn
    for (var j = 0; j < 100; j++) {  

        //create a random position
        var pos = {x: random(width), y: random(height * 0.55, height)};
        //assume there is no overlap
        var overlap = false;

        //check new position against all old positions
        //if distance between old and new position is greater than the 
        //maximum size of the crater, assume overlap
        for (var i = 0; i < crater.length; i++) {
            var old = crater[i];
            var d = dist(pos.x, pos.y, old.x, old.y)
            if (d < 180) overlap = true;
        }

        //push position into array if there is no overlap
        if (!overlap) {
            crater.push(pos);
        }
        //make a crater for each position in the array
        for (var w = 0; w < crater.length; w++) {
            crater[w] = makeCrater(crater[w].x, crater[w].y);
        }
    }   
}

function setup() {
    createCanvas(480, 400);
    frameRate(20);

    //create stars with random positions and size
    for (var i = 0; i < STARPOINTS; i++) {
        pX.push(random(0, width));
        pY.push(random(0, height / 2));
        pS.push(random(0.2, 2))
    }

    setCrater();
}


function draw() {
    background(0);
    drawStars();
    //if rocket is prompted, 
    //draw it and move it across screen
    if (showRocket == true) {
        makeRocket(rocketX);
        rocketX -= rs;
    }

    //resets rocket position once it has travelled across screen
    if (rocketX <= -60) {
        showRocket = false;
        faulty = false;
        rocketX = 540;
        rocketY = random(0, height * 0.45);
        rs = random(5, 20);

    }

    //draw terrain
    drawMoon();
    //move craters
    updateCrater();
    removeCrater();
    //add craters and rockets
    addStuff();
}

/////////////ROCKET////////////////
function drawRocket() {
    //flame position
    var fireX = this.x + 25;
    //size of flame
    var fire = 15;

    noStroke();

    //flame
    fill("orange");
    ellipse (fireX, this.y, fire, fire);
    triangle(fireX + 2, this.y + fire / 2, fireX + 2, this.y - fire / 2, 
              fireX + 20, this.y);

    //fins
    fill("red");
    arc(this.x + 10, this.y, 60, 60, HALF_PI, 3 * HALF_PI, CHORD);
    rect(this.x - 10, this.y - 10, 30, 20);

    //body
    fill("blue");
    arc(this.x, this.y, 120, 30, PI / 4, PI * 1.58, CHORD);

    //window
    fill("lightblue");
    strokeWeight(4);
    stroke("darkblue");
    ellipse(this.x - 30, this.y, 15, 15);
}

function makeRocket(rx) {
    //give some rockets a concerningly faulty motion
    if (faulty == true) rocketY += random(-5, 5);

    //create object
     var rocket = {x: rx, y: rocketY, display: drawRocket, speed: rs};
     rocket.display();
}

///////////////STARS////////////////

//number of stars
var STARPOINTS = 300;

//arrays for position and stroke
var pX = [];
var pY = [];
var pS = [];

function drawStars() {
    //draw 300 stars
    for (var i = 0; i < STARPOINTS; i++) {
        // make 'em TWINKLE
        stroke(random(100, 255));
        strokeWeight(pS[i]);
        point(pX[i], pY[i], 10, 10);
    }
}

////////////MOON//////////////////////
function drawMoon() {

    //blue stroke for faint glow
    var w = 5;
    strokeWeight(w);
    stroke("darkblue");

    //draw moon terrain and have it move across screen
    fill(233, 238, 240);
    beginShape();
    for (var x = 0; x < width + w; x++) {
        var t = x * 0.005 + millis() * 0.0001;
        var y = map(noise(t), 0,1, height/3, height * 0.55);
        while (y >= height * 0.6) y = map(noise(t), 0,1, height/3, height * 0.55);
        vertex(x, y)
    }
    vertex(width + w, height + w);
    vertex(-w, height + w);
    endShape();
}

//////////CRATERS///////////////////////////

//draw craters and move them across screen
function updateCrater() {
    for (var i = 0; i < crater.length; i++) {
        crater[i].move();
        crater[i].display();
    }
}

//keep craters that are still on screen and 
//remove the rest from the array
function removeCrater() {
    var keepCrater = [];
    for (var i = 0; i < crater.length; i++) {
        if (crater[i].x + crater[i].w > 0) {
            keepCrater.push(crater[i]);
        }
    }
    crater = keepCrater;
}

//periodically adds elements to screen
function addStuff() {

    //creates new craters and adds them to array
    //every 100 frame counts to prevent overlap
    if (frameCount % 100 == 0) {
        crater.push(makeCrater(width + 90, random(height / 2, height)));
    }

    //infrequently creates a rocket if there is not already one on screen
    var spotRocket = 0.1;
    var faultyRocket = 0.3;
    if (spotRocket > random(0, 1) & showRocket == false) {
        showRocket = true;
        //occasionally creates a faulty rocket
        if (faultyRocket > random(0, 1)) faulty = true;
    }

}

//move craters across screen
function moveCrater() {
    this.x += this.speed;
}

//draws craters
function drawCrater() {
    noStroke();
    //shadow
    fill(this.color - 30);
    ellipse(this.x, this.y - 10, this.w, this.h);
    //crater
    fill(this.color);
    ellipse(this.x, this.y, this.w, this.h);
    stroke(240);
    noFill();

    //outline
    strokeWeight(this.stroke);
    ellipse(this.x, this.y - 5, this.w - 3, this.h + 8);

}

function makeCrater(cx, cy) {
    //maps width, color and stroke so craters appear
    //smaller when they are "farther" away
    var breadth = map(cy, height / 2, height, 55, 180);
    var col = map(cy, height / 2, height, 220, 80);
    var s = map(cy, height / 2, height, 7, 10);

    var crater = {x: cx, y: cy, w: breadth, h: breadth / 4,
                  color: col,  
                  speed: -2.2, 
                  stroke: s,
                  move: moveCrater, 
                  display: drawCrater};
    return crater;

}

This was the most I’ve ever been confused on a project! So many functions! I feel like this is the first time I actually started to understand how functions and objects relate to each other. I was also pleasantly surprised by how some of the elements turned out, like the perspective of the craters and the twinkliness of the stars. I originally wanted the whole thing to be rotating on the axis, but oh man it did not work.

sketch

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 19: Generative Landscape
*/

var sailboats = [];

function setup() {
    createCanvas(480, 480);
    noStroke();
    background('blue');

    for(var i = 0; i < 3; i ++) {
    	var rndmX = random(width);
    	sailboats[i] = drawSailboats(rndmX);
    }
    
    frameRate(50);
}

function draw() {
    // Background color changes according to hour time bracket
    // Draw sun and moon according to hour time bracket
	if (hour() >= 0 & hour() <= 8) {
		fill(210, 195, 135);
		rect(0, 0, width, height);
		strokeWeight(15);
		fill(240, 100, 70);
		fill(225, 145, 90);
		ellipse(390, 90, 135);
	} else if (hour() > 8 & hour() <= 16) {
		fill(190, 230, 250);
		rect(0, 0, width, height);
		stroke(255, 231, 101, 80);
        strokeWeight(15);
		fill(230, 210, 120);
		ellipse(390, 90, 135);
	} else if (hour() > 16 & hour() <= 24) {
		fill(10, 50, 70);
		rect(0, 0, width, height);
		strokeWeight(15);
		fill(205, 205, 200);
		fill(225, 225, 210);
		ellipse(390, 90, 135);	
	}	

	// Calls function to draw waves
	waves1();
	waves2();

	updateandDisplaySailboats();
	addSailboats();
}

// Draws wave layer 1 via Perlin Noise
function waves1() {
	noStroke();
    var wavesSpeed = 0.0002;
    var wavesDetail = 0.0004;
    push();
    beginShape();
    fill(0, 100, 140);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var w = (x * wavesDetail) + (millis() * wavesSpeed);
        var y = map(noise(w), 0, 1.2, height /2 + 70, height);
        vertex(x, y);
    }
    vertex(x, height);
    vertex(0, height);
    vertex(0, y); 
    endShape();
    pop();
}

// Draws wave layer 2 via Perlin Noise
function waves2() {
	noStroke();
	wavesSpeed = 0.0004;
    wavesDetail = 0.0008;
    push();
    beginShape();
    fill(80, 135, 155);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var w = (x * wavesDetail) + (millis() * wavesSpeed);
        var y = map(noise(w), 0, 1, height / 1.5 + 50, height);
        vertex(x, y);
    }
    vertex(x, height);
    vertex(0, height);
    vertex(0, y); 
    endShape();
    pop();
} 

// Updates and displays the position of sailboats
function updateandDisplaySailboats() {
	for(var i = 0; i < sailboats.length; i++) {
		sailboats[i].move();
		sailboats[i].display();
	}
}

// Adds a new sailboat to the canvas according to a marginal probability
function addSailboats() {
    var sailboatProbability = 0.008;
    if (random(0, 1) < sailboatProbability) {
    	sailboats.push(drawSailboats(width));
    }
}

// Updates the position of the sailboat with every frame
function moveSailboats() {
	this.x += this.speed;
}

// Draws the sailboats
function displaySailboats() {
    noStroke();
	push();
	translate(0, 220);
	
	fill(190, 115, 75);
    rect(width / 2 + this.x - 5, height / 2 - 100, 5, 100);

	fill(230, 225, 225);
    quad(width / 2 + this.x - 60, height / 2 - 30, 
    	width / 2 + this.x + 50, height / 2 - 30, 
    	width / 2 + this.x + 30, height / 2,
    	width / 2 + this.x - 40, height / 2);

	fill(230, 85, 60);
	triangle(width / 2 + this.x, height / 2 - 60, 
		width / 2 + this.x, height / 2 - 150, 
		width / 2 + this.x - 60, height / 2 - 40);
	
	fill(225, 120, 110);
    triangle(width / 2 + this.x, height / 2 - 60, 
		width / 2 + this.x, height / 2 - 150, 
		width / 2 + this.x + 40, height / 2 - 60);
	pop(); 
} 

function drawSailboats(birthLocationX, birthLocationY) {
	var boat = {x: birthLocationX,
	    speed: -1,
	    r: random(0.1, 0.3),
	    move: moveSailboats,
	    display: displaySailboats,
	    }
	return boat;
}

For this week’s assignment, I decided to depict some boats sailing across the water. When I was a kid, I would sit by the pier and watch junk boats and ferries glide across the harbour, so this scene really resonated with me. This project was a little challenging for me, but I challenged myself to experiment with Perlin noise, and create a landscape that changes over time (beyond the immediate shifting waves and number of boats). If I had more time, I would try to space the boats out a bit more, so that they don’t overlap, and also add clouds.