sijings-project10- Generative Landscape

sijings_ GenerativeLandscape

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//GenerativeLandscape

var frames = [];
var frameeys=[];
var humans=[];
var cakes = [];
var frames2 = [];
var r=220;


function setup() {
    createCanvas(480, 240);
    var x=width/2;
    var y=height/2;
    var x1;
    var y1;
    
    // create an initial collection of humans
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        humans[i] = makeHuman(rx);
    }

    for (var i2 = 0; i2 < 5; i2++){
        var rx2 = random(0,5);
        cakes[i2] = makeCake(rx2);
    }
    frameRate(10);


}

function preload(){
    var filenames = [];
    filenames[0] = "https://i.imgur.com/SqI6peg.png";
    filenames[1] = "https://i.imgur.com/045MUOm.png";
    filenames[2] = "https://i.imgur.com/fQHcLAX.png";
    filenames[3] = "https://i.imgur.com/8xnKXdV.png";
    filenames[4] = "https://i.imgur.com/RXbcttI.png";
    
    for (i=0; i<filenames.length; i++){//create a new arrary for humans
        frames.push(loadImage(filenames[i]));
    }

    frames2.push(loadImage("https://i.imgur.com/4Li0MwV.png"));
    frames2.push(loadImage("https://i.imgur.com/DPquy2W.png"));
    var filenames2 = [];
    filenames2[0]="https://i.imgur.com/eKURFcs.png";
    filenames2[1]="https://i.imgur.com/6khWp0b.png";
    filenames2[2]="https://i.imgur.com/ftnXNpy.png";
    filenames2[3]="https://i.imgur.com/GUpBr3X.png";
    for (i=0; i<filenames2.length; i++){
        frameeys.push(loadImage(filenames2[i]));//create a new arrary for eyes
    }
}


function draw() {
    background(222,212,212); 
    fill(206,119,44);
    angleMode(DEGREES);
    push();
    noStroke();
    arc(width/2, -40, 390, 390, 0, 180,90);
    pop();
    for (var i2=0; i2<18; i2++){//for drawing the sound's light rays
        x=width/2+sin((360/18)*i2)*r;
        y=-10+cos((360/18)*i2)*r;
        x1=width/2+sin((360/18)*i2)*(r-20);
        y1=-10+cos((360/18)*i2)*(r-20);
        stroke(157,82,32);
        strokeWeight(6);
        line(x, y, x1, y1);
    }
    push();
    scale(0.5,0.5);
    translate(-60,0);
    image(frameeys[frameCount%4], width/2+30, -30);//for the eyes animation
    pop();
    push();
    addNewCake();//call these functions in setup so it is actually get called
    updateHumansandCakes();
    removecakeandhuman();
    addNewHuman(); 
    pop();

    
}


function updateHumansandCakes(){
    // Update the building's positions, and display them.
    for (var i = 0; i < humans.length; i++){
        humans[i].move();
        humans[i].display();
    }
    for (var i2 = 0; i2 < cakes.length; i2++){
        cakes[i2].move2();
        cakes[i2].display2();
    }
}


function removecakeandhuman(){//to remove the cakes and humans which are off the canvas
    var lakesToKeep = [];
    for (var i2 = 0; i2 < cakes.length; i2++){
        if (cakes[i2].x2 + cakes[i2].breadth2 > 0) {
            lakesToKeep.push(cakes[i2]);
        }
    }
    cakes = lakesToKeep; 
    var buildingsToKeep = [];
    for (var i = 0; i < humans.length; i++){
        if (humans[i].x1 + humans[i].breadth > 0) {
            buildingsToKeep.push(humans[i]);
        }
    }
    humans = buildingsToKeep; // remember the surviving buildings
    
}

function addNewCake(){
    var newCakeLikelihood1 = 0.01; //make possibility lower
    if (random(0,1) < newCakeLikelihood1) {
        var randompos1=-5;
        cakes.push(makeCake(randompos1));
    }
}

function addNewHuman() {
    // With a very tiny probability, add a new building to the end.
    var newHumanLikelihood = 0.6; //higher possibility
    if (random(0,1) < newHumanLikelihood) {
        var randompos=random(-5,0);
        humans.push(makeHuman(randompos));        
    }
}

//update position of building every frame
function humanMove() {
    this.x1 += this.speed1;
}
function cakeMove(){
    this.x2 += this.speed2;
}

function lakeDisplay(){
    push();
    translate(this.x2,50);//note here translate has to be inside of push so that
    scale(this.scaleS,this.scaleS);//new objects won't be added out side of the
    image(frames2[0],0,height-10);//canvas instead, they will be added inside
    translate(-650,300);
    image(frames2[1],40,height-10);
    pop();

}


//reconmded to create a new object for a separate image
function makeCake(lakeLocationX){//similar as creating the object below
    var cake = {x2:lakeLocationX,
                speed2 : random(1,2.5),
                move2: cakeMove,
                breadth2: 50,
                scaleS: random(0.1,0.5),
                display2 : lakeDisplay}
    return cake;
}



// display the pedestrian
function humanDisplay() {
    push();
    translate(this.x1,this.floatHeight);
    var framesC = frameCount % 5; //animating the birds
    scale(this.scaleS2,this.scaleS2);
    image(frames[framesC],0,0);// the birds will flap their wings staggered

    pop();
}

function makeHuman(birthLocationX) {//create the human object with below properties
    var pedestrian = {x1: birthLocationX,
                speed1: random(5,10),
                floatHeight: random(40,150),//for some going a little bit higer than others
                breadth: 50,
                nFloors: round(random(2,8)),
                scaleS2: random(0.05,0.15),//for some is larger than others
                move: humanMove,
                display: humanDisplay}
    return pedestrian;//remember to return the object
}

For this project, I was aiming for creating a city landscape where odd, strange things happen as well as normal people walking on the street. The inspiration comes from the idea how people sometimes walk on the street and won’t give too much attention on what’s happening around them. To achieve this idea, I created two objects, one for the pedestrian and the other for all other moving objects (b/c they have different speed and position, so I think it is easier to have them on two different objects). Some randomization here is the location, size, and speed of the individuals in the object. For example, each pedestrian is walking in a different speed. Here is the sketch for the city landscape I imagined.

For this project, I got to learn how to use object much clearly. Also, I also find that loading frames is a really useful strategy for creating cool visual elements.

Here are two screenshot for the original dimention I was working on.