Category: Section E

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-10

var clouds = [];
var birdStrings = [];
var birdImgs = [];
var birds = [];
var birdTalk = ["hello", "hey", "hi", "howdy", "help me", "i love bread", "thank you", "good bye", "hm"];

//preloads all illustrator bird files locally
function preload() {
    birdStrings[0] = "https://i.imgur.com/LMwUiTl.png";
    birdStrings[1] = "https://i.imgur.com/2DClEHo.png";
    birdStrings[2] = "https://i.imgur.com/LoaUSI2.png";
    birdStrings[3] = "https://i.imgur.com/yMJKBYw.png";
    birdStrings[4] = "https://i.imgur.com/jF6usAy.png";
    birdStrings[5] = "https://i.imgur.com/GPZ41QC.png";
    birdStrings[6] = "https://i.imgur.com/15jvGyQ.png";
    birdStrings[7] = "https://i.imgur.com/XcxgSGA.png";

    for (var b = 0; b < 8; b++) {
        birdImgs[b] = loadImage(birdStrings[b]);
    }
}

//creates canvas initialized with birds, clouds
function setup() {
    createCanvas(480, 360);

    //initializes three birds at set x location
    birds[0] = birdPicture(50);
    birds[1] = birdPicture(200);
    birds[2] = birdPicture(400);
    
    clouds[0] = cloudPicture(60);
    clouds[1] = cloudPicture(290);
}

function draw() {
    //sets background to be dark blue of bird
    background(81,81,122);

    //calls function that draws mountains
    mountains();
  
    //draws clouds behind first mountain    
    updateClouds();
    addNewClouds();
    
    mountains2();
    
    //draws horizon line
    noStroke();
    fill(250, 240, 240);
    rect(0, 290, width, height);
    
    //draws birds
    updateBirds();
    addNewBirds();
}

function updateClouds(){
    //change the x location of each cloud
    for(var i = 0; i < clouds.length; i++){
        clouds[i].cmove();
        clouds[i].cdraw();
    }
}

function addNewClouds(){
    //adds new clouds with same probability of a number drawn between 0 and 1.2 being less than 0.003
    var probability = 0.003;
    if(random(0,1.2) < probability) {
        clouds.push(cloudPicture(width));
    }
}

function cloudPicture(cloudX){
    var cloudPicture = {
        cx: cloudX,
        cy: random(40,140),
        velo: 0.4,
        cmove: cloudMove,
        cdraw: drawCloud,
        cwidth: random(60,130),
        cheight: random(20,30)
    }
    return cloudPicture;
}

function cloudMove() {
    this.cx -= this.velo;
}

function drawCloud(){
    noStroke();
    fill(255);
    rect(this.cx, this.cy, this.cwidth, this.cheight,30);
    rect(this.cx + this.cwidth-(this.cwidth/1.2), this.cy-this.cheight+(this.cheight/2), this.cwidth/2, this.cheight,30);
}

function updateBirds() {
    //change the x location of each of the birds
    for (var i = 0; i < birds.length; i++) {
        birds[i].bmove();
        birds[i].bdraw();
    }
}

function addNewBirds() {
    //adds new birds with same probability of a number drawn between 0 and 1.2 being less than 0.004
    var probability = 0.004;
    if (random(0, 1.2) < probability) {
        birds.push(birdPicture(width));
    }
}

function birdPicture(startX) {
    var birdPicture = {
        x: startX,
        vel: 1,
        type: floor(random(0, 7)),
        bmove: birdMove,
        bdraw: drawBird,
        speak: bTalk(),
        talkProbability: tP()
    }
    return birdPicture;
}

//coin toss equivalent
function tP() {
    var talkProb = false;
    if (random(0, 1) > 0.8) {
        return true;
    }
    return talkProb;
}

//adds velocity to x to make birds scroll horizontally
function birdMove() {
    this.x -= this.vel;
}

function drawBird() {
    //if bird is shorter, draw lower on page
    if (this.type == 0 || this.type == 1 || this.type == 4 || this.type == 5) {
        image(birdImgs[this.type], this.x, 213);

        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x + 20, 193)
        }


    }
    
    //if bird is taller, draw higher on page
    else {
        image(birdImgs[this.type], this.x - 30, 180);
        //will draw text for this bird depending on probability
        if (this.talkProbability == true) {
            fill(255);
            text(this.speak, this.x, 160);

        }

    }

}

//returns strings in birdTalk array
function bTalk() {
    return birdTalk[int(random(birdTalk.length))];
}

function mountains() {
    var terrainSpeed = 0.0002;
    var terrainDetail = 0.005;
    push();
    beginShape();
    noStroke();
    fill(190, 160, 180);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y - 90);

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

}

function mountains2() {
    var terrainSpeed = 0.0004;
    var terrainDetail = 0.003;
    push();
    beginShape();
    noStroke();
    fill(140,120,150);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);

        vertex(x, y-40);

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

}

For this project, I decided to do a landscape with birds, as I had done a lot of projects with birds previously.

Rather than create the birds through coding, I decided to use illustrator in order to create vectors that I could implement in the code. In order to do this, I ran a preload function that populated an array with my images uploaded to imgur.

I created two objects–birds and clouds–and populated arrays with them in order to have them appear in my environment.

 

Generative Landscape

//GyuEun Park
//15-104
//gyueunp@andrew.cmu.edu
//Project-10

var merry = [];
var drops = [];
var terrainSpeed = 0.0003;
var terrainDetail = 0.008;

function setup() {
    createCanvas(480, 240);
    frameRate(10);
//repeat snow falling 
    for (var j = 0; j < 100; j++) {
    drops[j] = new Drop();
  }
}
 
function draw() {
    background(0,123,100);
    for (var t = 0; t < drops.length; t++) {
    	drops[t].fall();
    	drops[t].show();
    }

//add terrain details, filling the horizontal side of canvas
    noStroke();
    fill(255); 
    beginShape(); 
    for (var x = 0; x < width + 5; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    vertex(width,height);
    vertex(0,height);
    endShape();

//"MERRY CHRISTMAS" text details
    updateAndDisplayMerry();
    removeMerry();
    addMerry(); 
}

//snow details 
function Drop() {
  this.x = random(width);
  this.y = random(-9, -500);
  this.z = random(0, 20);
  this.len = map(this.z, 0, 20, 10, 20);
  this.yspeed = map(this.z, 0, 50, 1, 20);

//creating functions for snow movements
  this.fall = function() {
    this.y = this.y + this.yspeed;
    var grav = map(this.z, 0, 10, 0, 0.1);
    this.yspeed = this.yspeed + grav;

    if (this.y > height) {
      this.y = random(-200, -100);
      this.yspeed = map(this.z, 0, 20, 4, 10);
    }
  }

  this.show = function() {
    var thick = map(this.z, 0, 1, 0.9, 1);
    strokeWeight(thick);
    stroke(255,random(100,200));
    line(this.x, this.y, this.x, this.y+this.len);
  }
}

function updateAndDisplayMerry(){
//update the text's positions and display 
    for (var i = 0; i < merry.length; i++){
        merry[i].move();
        merry[i].display();
    }
}

function removeMerry(){
    var merryToKeep = [];
    for (var i = 0; i < merry.length; i++){
        if (merry[i].x > 0 & merry[i] < height) {
            merryToKeep.push(merry[i]);
        }
    }
    merry = merryToKeep; 
}

function addMerry() {
    var newMerryLikelihood = 5 ; 
    if (random(0,1) < newMerryLikelihood) {
        merry.push(makeMerry(random(0,width),0));
    }
}

function merryMove() {
    this.x += this.speedx;
    this.y += this.speedy;
}

function merryDisplay() {
	var merryX = this.x;
	var merryY = this.y;
	textSize(random(0,70));
	fill(random(100,255),0,0);
	text("MERRY CHRISTMAS", merryX, merryY+random(20,100));
	fill(255);

//asterisks for small decoration 
	text("*", merryX, merryY+random(0,100));
	text("*", merryX, merryY+random(200,300));
}

function makeMerry(birthLocationX,birthLocationY) {
    var merry = {x: birthLocationX,
    			y: birthLocationY,
                speedx: -4.0,
                speedy: 1.0,
                move: merryMove,
                display: merryDisplay}
    return merry;
}

I created a Christmas-themed landscape in anticipation for the holiday. The background and the text contrast drastically in its stagnancy and chaotic motion, respectively. However, they not only complement each other in terms of the coloration, but also work together to represent Christmas. The other two elements, the terrain and snow, are similar in that they are both white, highlighting the objects of complementary colors. Yet, the terrain travels horizontally, while snow is falling in a vertical motion. I’m wishing for a white Christmas ♥

sketch:

.

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-10
var buildings = [];
var persons = [];

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

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


function draw() {
    background(200);

    displayStatusString();
    displayHorizon();

    updateAndDisplayBuildings();
    updateAndDisplayPersons();
    print(persons.length);
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability();
    removePersonsThatHaveSlippedOutOfView();
    addNewPersonsWithSomeRandomProbability();
}


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

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


function removeBuildingsThatHaveSlippedOutOfView(){
    // 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 buildings
    // 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 buildings
    // we want to keep into a new array.
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}

function removePersonsThatHaveSlippedOutOfView(){

    var personsToKeep = [];
    for (var i = 0; i < persons.length; i++){
        if (persons[i].x + persons[i].thick > 0) {
            personsToKeep.push(persons[i]);
        }
    }
    persons = personsToKeep; // remember the surviving people (tragic)
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007;
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}

function addNewPersonsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newPersonLikelihood = 0.007;
    if (random(0,1) < newPersonLikelihood) {
        persons.push(makePerson(width));
    }
}


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

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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var roofHeight = random(8,20);
    var bHeight = (this.nFloors * floorHeight)/2;
    fill(35, 28, 64);
    noStroke();
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    triangle(-20, -bHeight,this.breadth/2,(bHeight)-height,this.breadth+20,-bHeight);

    pop();
}

function personDisplay() {
    var headSize = 15;
    var bodyheight = this.tall;
    var bodythick = this.thick;
    var headCenter = bodyheight+headSize/2;
    var bodyCenter = bodyheight/2;
    fill(198, 28, 64,90);
    noStroke();
    push();
    translate(this.x,this.y);
    ellipseMode(CENTER);
    ellipse(0,-bodyCenter,bodythick,bodyheight);
    ellipse(0,-headCenter,headSize,headSize);
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 15,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

function makePerson(birthLocationX){
  var person = {x: birthLocationX,
              y:height-50,
              tall: random(30,60),
              thick: random(15,40),
              speed: -1.0,
              eyeballs: random(1,4),
              move: personMove,
              display: personDisplay}
  return person;
}

function displayHorizon(){

  noStroke();

  var green = color(198, 28, 64);
  var yellow = color(229, 199, 31);

  var gradientSteps = 20;//how detailed will the gradient be
  var gradientStripWidth = width/gradientSteps;//compute how many strips of the same width to fill the sketch

  for(var i = 0; i < gradientSteps; i++){//for each gradient strip
    var t = map(i,0,gradientSteps,0.0,1.0);//compute i mapped from 0-gradientSteps to 0.0->1.0
    //this value will plug into lerpColor which does the color interpolation
    var interpolatedColor = lerpColor(green,yellow,t);
    //finally, use the color and draw some boxes
    fill(interpolatedColor);
    rect(0,i*gradientStripWidth,height,gradientStripWidth);
  }

    fill(35, 28, 64);
    rectMode(CORNER);
    rect(0,height-50,width,height-50)
}


function displayStatusString(){
    noStroke();
    fill(0);
    var statusString = "# Buildings = " + buildings.length;
    text(statusString, 5,20);
}

I wanted to make a haunted forest because I’m sad halloween has ended. The trees are sparse and skinny because they are based on the trees I remember in a certain forest in Oregon. I decided to make the ghosts a a transparent version of the red in the sky instead of white (which most people default to) bc it has better visual harmony.

sketch

//JooHee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-10

var animals = [];
var mountainSpeed1 = 0.00005;
var mountainDetail1 = 0.005;
var mountainSpeed2 = 0.0001;
var mountainDetail2 = 0.003;
var mountainSpeed3 = 0.0002;
var mountainDetail3 = 0.001;

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

    //creates 5 animals at start
    for (var i = 0; i < 5; i++){
        var rx = random(width);
        animals[i] = makeAnimals(rx);
    }

    frameRate(30);
}


function draw() {
    background(210, 240, 255); 

    makeMountains();
    makeOasis();
    updateAndDisplayAnimals();
    removeAnimals();
    addNewRandomAnimals(); 

}

function makeMountains() {
    //first farthest mountain
    noStroke();
    fill(125, 185, 130);
    beginShape(); 
    for (var m1 = 0; m1 < width; m1++) {
        var mountainOneSpeed = (m1 * mountainDetail1) + (millis() * mountainSpeed1);
        var mountainPeaksOne = map(noise(mountainOneSpeed), 0, 1, width/2, height/4);
        vertex(m1, mountainPeaksOne); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //second mountain
    fill(155, 215, 140);
    beginShape(); 
    for (var m2 = 0; m2 < width; m2++) {
        var mountainTwoSpeed = (m2 * mountainDetail2) + (millis() * mountainSpeed2);
        var mountainPeaksTwo = map(noise(mountainTwoSpeed), 0, 1, width/2 + 10, height/4 + 30);
        vertex(m2, mountainPeaksTwo); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

    //third closest mountain
    fill(185, 245, 150);
    beginShape(); 
    for (var m3 = 0; m3 < width; m3++) {
        var mountainThreeSpeed = (m3 * mountainDetail3) + (millis() * mountainSpeed3);
        var mountainPeaksThree = map(noise(mountainThreeSpeed), 0, 1, width/2 + 20, height/4 + 60);
        vertex(m3, mountainPeaksThree); 
    }

    vertex(width,height);
    vertex(0, height);
    endShape();

}


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


function removeAnimals(){
    var animalsToKeep = [];
    for (var i = 0; i < animals.length; i++){
        if (animals[i].x + animals[i].breadth > 0) {
            animalsToKeep.push(animals[i]);
        }
    }
    animals = animalsToKeep;
}


function addNewRandomAnimals() {

    var newAnimals = 0.009; 
    if (random(0,1) < newAnimals) {
        animals.push(makeAnimals(width));
    }
}

function animalsMove() {
    this.x += this.speed;
}
    
function animalsDisplay() {
    noStroke(); 
    push();
    translate(this.x, height - height/4);
    //shadow of animals
    fill(100, 100, 100, 60);
    ellipse(this.size/4, this.size*3/4, 150, 30);
    //the butts of the animals
    fill(this.color); 
    ellipse(0, 0, this.size, this.size);
    ellipse(this.size/2, 0, this.size, this.size);
    //the tails of the animals
    fill(50);
    ellipse(this.size/4, -this.size/2+this.size/4, this.size/8, this.size/4);
    //the legs of the animals
    fill(this.color);
    quad(-this.size/4-5, 0, -this.size/8-5, this.size*3/4, this.size/8-5, this.size*3/4, this.size/4-5, 0);
    quad(this.size/2-(this.size/4-5), 0, this.size/2-(this.size/8), this.size*3/4, this.size/2+(this.size/8), this.size*3/4, this.size/2+(this.size/4+5), 0);
    pop();
}


function makeAnimals(birth) {
    var ANIMALS = {
                x: birth,
                breadth: 50,
                size: 100,
                speed: -7.0,
                move: animalsMove,
                display: animalsDisplay,
                color: [random(50, 255), random(50, 255), random(50, 255)]
            }

    return ANIMALS;
}

function makeOasis() {
    fill(120, 170, 245);
    rect(0, height/2+80, width, 100);

}

I got inspiration for this project from the Lion King, where the animals drink from a pond or lake. I wanted to use this project to show animals drinking from a lake as well while the background (mountains) is moving. There are three mountains that vary in color to show depth and there are animals in the foreground drinking from the water. This is the picture that gave me the inspiration from the movie.

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Assignment 10 - Generative Landscape
var terrainSpeed = 0.00015;
var terrainDetail = 0.001;
var parasol = [];
var cBlue = (115,151,232);
var cWhite = (234,238,247);
var x;
var y;
var location;


function preload(){
    imgParasol = loadImage("https://i.imgur.com/9wvs2bI.png");
    airplane = loadImage("https://i.imgur.com/M6sAe2x.png");
    airplane2 = loadImage("https://i.imgur.com/5j9Uq5v.png");
}

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

function addParasols(){
    var a = random(1);
    if (a < 0.03){
        parasol.push(makeParasols(width));
        parasol.push(makeParasols(height));
    }
}

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


function makeParasols(pointX){
    var parasol1 = {x: pointX,
        number: floor(random(1,3)),
        speed: 0.001,
        height: random(0,50), 
        move: moveParasols,
        display: displayParasols}
    return parasol1;
}

function oceanTerrain(){
    //ocean layer-1
    noStroke();
    fill(77,124,191);
    beginShape();
    for (var x = 0; x < width; x++){
       var t = (x * terrainDetail) + (millis() * terrainSpeed);
       var y = map(noise(t), 0, 1, 0, height - 30);
        vertex(x,y);
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);

    //ocean layer-2
    noStroke();
    fill(77,124,191,120);
    for (var x = 0; x < width; x ++){
        var t = (x* terrainDetail * 2) + (millis() * terrainSpeed);
        var y = map(noise(t/2), 0, 1, 10, height - 50);
        vertex(x,y);    
    }
    curveVertex(width, height);
    curveVertex(0,width);
    endShape(CLOSE);
}

function displayParasols(){
    push();
    translate(this.x, this.height);
    for (var i = 0; i < this.number; i++){
        image(imgParasol, random(0, width),random(30,90));
    }
    pop();
}

function setup() {
    createCanvas(480,300);
    for(var i = 0; i < 5; i ++){
        location = random(width);
        parasol[i] = makeParasols(location);
    }
    frameRate(10);
}

function draw() {
    background(228,211,207);
   
    updateParasols();
    addParasols();
    displayParasols();
    moveParasols();
    makeParasols();
    oceanTerrain();

    image(airplane2, mouseX - 80, mouseY - 50);
    push();
    tint(255,128);
    image(airplane, mouseX + 50, mouseY - 150);
    pop();

}   

For project 10, I aimed to create a bird-eye-view landscape of a beach. Using the given terrain code, I manipulated it and lower the amount of noise so it resembles the smooth curves of the waves instead of pointy and rough terrain of mountains that the code was originally intended for. I added parasols as the elements to show the panning of the “camera”. I also added in airplane and its shadow just as a fun element users could play around by using their mouse.