Generative Landscape

 
 

This is an assignment that use javascript to create an ink painting style graphic. The mountains and birds and rivers are randomly generated. The sky is given a gradians of grey to increase the sense pf hierarchy. The three layers of mountains are moving with different speeds, and with different steepness as well as the front river. The number of birds and the frequency of birds flying are also random.

To view the entire interactive Javascript, please click here.

 

var terrainSpeed1 = 0.0005;
var terrainSpeed2 = 0.0001;
var terrainSpeed3 = 0.0002;
var waterSpeed1 = 0.0001;
var terrainDetail1 = 0.005;
var terrainDetail2 = 0.02;
var terrainDetail3 = 0.05;
var waterDetail1 = 0.001;
var angle = 10;
var birds= [];


function setup() {
    createCanvas(400, 600);
     for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(0,height/4);
        birds[i] = makeBirds(rx,ry);
    }
    
    frameRate(10);
}
 
function draw() {

    //draw background color
    for (var i=0;i<30;i++) {
        strokeWeight(15);
        stroke(255-i);
        line(0,i*15,width,i*15);
    }
   
    //far mountains
    push();
    fill(220); 
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail3) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height/4, height*3/4);
        vertex(x, y); 
      
    }
    vertex(width, height);
    vertex(0,height);
    endShape();
    pop();

    //middle mountains
    push();
    fill(205); 
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail2) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0,1, height*3/8, height*3/4);
        vertex(x, y); 

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

    //close mountains
    push();
    fill(190); 
    beginShape(); 
    noStroke();
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(x, y); 

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

    //river
    noFill(); 
    beginShape(); 
    strokeWeight(1);
    stroke(255);
    //stroke(134,179,194);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);
        vertex(x, y);


    }
    endShape();
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+10);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+20);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+30);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+40);   
    }
    endShape();
     beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0,1, height*8/9, height);     
        vertex(x, y+50);   
    }
    endShape();

    updateAndDisplaybirds();
    removebirds();
    addbirds(); 
    //makeBoat(mouseX,random(520,525));

    push();
    translate(mouseX, random(500,505));
    noStroke();
    fill(255);
    beginShape();
    vertex(-20,-15);
    vertex(20,-15);
    vertex(10,0);
    vertex(-10,0);
    endShape();
    pop();
}


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

function removebirds(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    //birds = birdsToKeep; // remember the surviving birds
}

function addbirds() {
    // With a very tiny probability, add a new bird to the end.
    var newBirdLikelihood = 0.005; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBirds(width,random(0, height/2)));
    }
}

function birdsMove() {
    this.x += this.speed;
    this.y += random(-this.speed,this.speed);
}

function birdsDisplay() {
    translate(this.x,this.y);
    noStroke();
    fill(100);

    //body
    ellipse(0,0,20,10);

    //head
    triangle(-5,3,-15,0,-5,-3);

    //tail
    beginShape();
    vertex(8,-2);
    vertex(14,-3);
    vertex(14,3);
    vertex(8,2);
    endShape();

    //wings
    beginShape();
    vertex(-5,0);
    vertex(0,-10);
    vertex(12,-12);
    vertex(3,0);
    endShape();

}

function makeBirds(birthLocationX,birthLocationY) {
    var birds = {x: birthLocationX,
              y : birthLocationY,
                speed: -random(.5,1),
                move: birdsMove,
                display: birdsDisplay}
    return birds;
}