Month: November 2017

Generative Landscape

var angle = 0; //initial angle
var trees = [];
var bwTrees = 0;
var hillSpeed;

function setup() {
    createCanvas(480, 320);
    frameRate(10);
    hillSpeed = random(0.0001, 0.0005); 
    
    for (var i = 0; i < 10; i++){ //display 10 trees at the beginning
        var rx = random(width);
        trees[i] = makeTree(rx);
    }
}

function draw() {
    background(202, 244, 235);
    drawHill(); 
    drawTree();
    addTree();
}


function drawHill() {
    beginShape();
    stroke(252, 242, 40);
    for (var x = 0; x < width; x++) {
        
        var y = 90 + sin(angle) * 30; //used sin graph shape
        line(width - x, y, width - x, height);
        angle = angle + PI/121; //increment of angle
    }
    endShape();
    
    stroke(255, 210, 200);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = x * 0.003 + (millis() * hillSpeed);
        var y = map(noise(t), 0, 0.8, 0, height);
        line(x, y, x, height);
    }
    endShape();
    
    beginShape();
    stroke(24, 44, 160);
    for (var x = 0; x < width; x++) {
        var y = 240 + sin(angle) * 30; //used sin graph shape
        line(width - x, y, width - x, height);
        angle = angle + PI/240; //increment of angle
    }
    endShape();
}

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

function makeTree(x) {
    var tree = {
        birth: x,
        size: random(20, 60),
        speed: -2.0,
        move: TreeMove,
        display: TreeDisplay,
        height: random(30, 60),
        color: [255, 62, 54]
    }
    
    return tree;
}

function TreeMove() {
    this.birth += this.speed;
}

function TreeDisplay() {
    var treeHeight = 50; 
    fill(this.color); 
    noStroke();
    push();
    translate(this.birth, height - this.height);
    ellipse(0, 0, this.size, this.size);
    stroke(255);
    strokeWeight(2);
    line(0, 0, 0, this.height);
    line(0, this.size/5, this.size/6, this.size/20);
    if (this.size > 30) {
        line(0, this.size/3, -this.size/6, this.size/6);
    }
    pop();
}

function addTree() {
    var newTree = 0.85; //percentage
    if (random(0,1) > newTree) {
        bwTrees = bwTrees + 1;
        if (bwTrees == 4) { // it controls distance between. Two trees are not too close to each other
            trees.push(makeTree(width)); //add a tree
            bwTrees = 0; //reset
        }
    }

}

This landscape consists of 3 layers of hills and trees. For 3 layers of hills, Perlin noise and sin graph were utilized as disciplines to depict the shape of hills. Trees are executed with a javascript object and have random sizes and heights. I added more branch based on the size of the tree. It is really fun to keep watching how it continuously changes and create different landscape be each second. Here is one of the nice screenshots below. Also, for color combination, I try not to use typical green colors of hill and tree. I rather explore more experimental colors for this landscape. I think people can clearly see that they are hill/mountain and trees even if it is not with the typical green colors.

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-10
*/

var buildings = [];
var bgroundpic = ["http://i.imgur.com/CSDbcLh.jpg"];
var peopleLinks = [
    "https://i.imgur.com/skan1Dj.png",
    "https://i.imgur.com/0U2pZMm.png",
    "https://i.imgur.com/ImJcxpz.png",
    "https://i.imgur.com/Rn3TxL7.png",
    "https://i.imgur.com/Ei7SzTG.png",
    "https://i.imgur.com/GTNpulP.png",
    "https://i.imgur.com/nn3qkQ7.png",
    "https://i.imgur.com/ue5JB8v.png",
    "https://i.imgur.com/mCbm0jb.png",
    "https://i.imgur.com/ZumluD7.png",
    "https://i.imgur.com/LuoUZNc.png",
    "https://i.imgur.com/Jv4Nw6g.png"];

var peoplepics = [];

//--------------------------------

function preload() {
    bground = loadImage(bgroundpic[0]);
    //preload photos from links
    for (i=0; i<peopleLinks.length; i++) {
        peoplepics.push(loadImage(peopleLinks[i]));
    }
}

//--------------------------------

function setup() {
    createCanvas(400, 400); 
    //randomize people order
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }
    frameRate(10);
}

//--------------------------------

function draw() {
    background(0); 

    image(bground,0, 0, width,height-height/7);

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    //draw escalator platform
    fill(color(243,245,241));
    noStroke();
    rect(50,370,300,10);

    //draw railings
    strokeWeight(6);
    stroke(color(112,168,166));
    noFill();
    rect(30, 326, 340, 55, 40, 365, 30, 355);
    noStroke();

}

//--------------------------------

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 removeBuildingsThatHaveSlippedOutOfView(){
    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 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));
    }
}

//--------------------------------

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

//--------------------------------

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    image(peoplepics[this.type],0, -bHeight+24, this.breadth,bHeight);
    pop();
}

//--------------------------------

//define type as random to randomize people in flow
function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 90,
                speed: -3.0,
                nFloors: 8,
                type: floor(random(12)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}

For this project, I wanted to recreate the scene of a moving sidewalk and passengers at an airport — through the use of a simple background, a silhouette of the sidewalk and found images of people. This was one of the first inspirations I had from seeing the reference material of the slow-paced horizontal movement. I went with a simple color palette with cooler hues to create consistency between the black, shades of blue in contrast with the color variety of people. I thought the most difficult part of implementation was shuffling the images randomly and getting them to display correctly in sync with motion.