Month: November 2018

sketch

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-10-Generative Lanscape
*/

var boats = [];
var clouds = [];
var terrainDetail = 0.001; // small waves
var terrainSpeed = 0.0005;


function setup() {
    createCanvas(400, 200);
    noStroke();
    
    for (var i = 0; i < 5; i++) {
      // populate arrays
      var boatX = random(width);
      var boatY = random(height / 2, height - 20);
      boats[i] = makeBoat(boatX, boatY);

      var cloudX = random(width);
      var cloudY = random(0, height / 3);
      clouds[i] = makeCloud(cloudX, cloudY);
    }
}

function draw() {
    background(210, 235, 250);

    // sun
    fill('Gold');
    ellipse(350, 20, 20, 20);

    // ocean
    fill(180, 215, 230);
    rect(0, height / 2, width, height);

    // top current
    stroke(170, 205, 220);
    beginShape();
    for (var w = 0; w < width; w++) {
        var t = (w * terrainDetail) + (millis() * terrainSpeed);
        var Y = map(noise(t), 0, 1, height / 2, height);
        vertex(w, Y);
    }
    endShape();
    // bottom current
    stroke(170, 205, 220);
    beginShape();
    for (var w = 0; w < width; w++) {
        var t = (w * terrainDetail) + (millis() * terrainSpeed);
        var Y = map(noise(t), 0, 1, height / 2 + 20, height);
        vertex(w, Y);
        vertex(w, Y+10);
    }
    endShape();

    // draw boats
    for (var j = 0; j < boats.length; j++) {
        boats[j].draw();
        boats[j].move();
    }

    // draw clouds
    for (var k = 0; k < clouds.length; k++) {
        clouds[k].draw();
        clouds[k].move();
    }

}

// boats
function drawBoat() {
    // mast
    var mastX = this.xPos + (this.rWidth * 2 / 3);
    stroke(10, 30, 20);
    strokeWeight(3);
    line(mastX, this.yPos - 3 * this.rHeight, mastX, this.yPos);

    // boat
    noStroke();
    fill('LightSalmon');
    quad(this.xPos, this.yPos, this.xPos + this.rWidth, this.yPos, 
        this.xPos + this.rWidth - this.xOff, this.yPos + this.rHeight, this.xPos + this.xOff, this.yPos + this.rHeight);

    // sail
    noStroke();
    fill(255, 245, 238);
    triangle(mastX, this.yPos - 5, mastX - this.rSail, this.yPos - 5, mastX, this.yPos - 4 * this.rHeight);
    triangle(mastX, this.yPos - 5, mastX + this.rSail / 2, this.yPos - 5, mastX, this.yPos - 4 * this.rHeight);

}

function moveBoat() {
    this.xPos += this.speed;
     //if boat reaches right side, restart at left; randomize speed, width, height, offset
    if (this.xPos > width) { 
        this.xPos = 0;
        this.xOff = random(5, 15); 
        this.rWidth = random(40, 60);
        this.rHeight = random(8, 12);
        this.speed = random(0.1, 0.5);
    }

}

function makeBoat(x, y) {
    var boat = { xPos: x,
                yPos: y,
                xOff: random(5, 10), // offset of trapezoid
                rSail: random (10, 20),
                rWidth: random(30, 50),
                rHeight: random(8, 12),
                speed: random(0.1, 0.5),
                draw: drawBoat,
                move: moveBoat}
    return boat;
}

// clouds
function drawCloud(x, y) {
    fill(240, 245, 250, 120);
    ellipse(this.xPos, this.yPos, this.rWidth, this.rWidth);
    ellipse(this.xPos + this.rWidth/2, this.yPos, this.rWidth * 2, this.rWidth * 2);
    ellipse(this.xPos + this.rWidth, this.yPos, this.rWidth, this.rWidth);

}

function moveCloud() {
    this.xPos += this.speed;
    //if cloud reaches right side, restart at left; randomize speed
    if (this.xPos > width) {
        this.xPos = 0;
        this.speed = random(0.1, 0.4);
    }
}

function makeCloud(x, y) {
    var cloud = { xPos: x,
                yPos: y,
                rWidth: random(10, 20),
                speed: random(0.05, 0.3),
                draw: drawCloud,
                move: moveCloud}
    return cloud;
}

I wanted to create a calm, cute landscape that wasn’t exactly too urban, so when I asked my roommate and she offered the suggestion of beaches, I thought of an ocean populated by little boats. I struggled with implementing objects, because this was the first time I had to code it personally instead of just editing certain elements, but doing this really helped me understand objects better.

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.