hqq – secE – project 10 – generative landscape

hamza

//hamza qureshi
//hqq@cmu.edu
//section e
//project 10: generative landscapes

var bird = []; //new index to draw image of bird
var frame = 0; //frames
var aspeed = 0.0005; //speeds for various cloud layers
var bspeed = 0.0007;
var cspeed = 0.0009;
var dspeed = 0.00099;
var change = 0.007;
var bchange = 0.009;
var cchange = 0.006;
var dchange = 0.005;

function preload(){
    var birdframes = []; //each frame of bird image
    birdframes[0] = "https://i.imgur.com/bQsrqmu.png"
    birdframes[1] = "https://i.imgur.com/K5dXjwK.png"
    birdframes[2] = "https://i.imgur.com/kK4kW4t.png"
    birdframes[3] = "https://i.imgur.com/K5dXjwK.png"

    for (var i = 0; i < birdframes.length; i++){
        bird.push(loadImage(birdframes[i])); //push bird frames into array
    }
}

function setup(){
    createCanvas(480,480);
    frameRate(10);
}

function draw(){
    background(220,240,225);

    noStroke(); //shades of the sky
    fill(230, 240, 225);
    rect(0,width/5,width,height);
    fill(240,240, 200);
    rect(0, width/4, width, height);
    fill(250,241,185);
    rect(0,width/3,width,height);
    fill(255,208,121); //sun
    ellipse(width/2,height/2,200,200);

    backclouds(); //functions for the cloud layers
    backmiddle();
    frontmiddle();
    frontclouds();

//bird 1
    push();
    scale(0.4);
    image(bird[frameCount%4], 800, 100);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

//bird 2
    push();
    scale(0.1);
    image(bird[frameCount%4],1400, 1400);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

//bird 3
    push();
    scale(0.2);
    image(bird[frameCount%4], 1000, 1000);
    frame += 1;
    if (frame > bird.length){
        frame = 0;
    }
    pop();

    //airplane wing
    push();
    noStroke();
    fill(255,150,150);
    triangle(360,200,420,240,370,160);
    fill(248);
    triangle(480,480,360,200,480,280);
    fill(254);
    triangle(360,200,480,280,480,210);

    //airplane window
    stroke(245);
    strokeWeight(70);
    noFill();
    rect(0,0,width,height,75,75);
    pop();

}

function backclouds(){ //back row of clouds
    push();
    noStroke();
    beginShape();
    fill(219,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*change) + (millis()*aspeed);
        var y = map(noise(k), 0,1, 190, height/2); //noise remaps change vs speed
        vertex(0, height); //to draw high and low-points in the shape
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function backmiddle(){ //repeated for middle
    push();
    noStroke();
    beginShape();
    fill(229,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*bchange) + (millis()*bspeed);
        var y = map(noise(k), 0,1, 260, height/2);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function frontmiddle(){
    push();
    noStroke();
    beginShape();
    fill(239,241,252);
    for (var x = 0; x < width; x++){
        var k = (x*cchange) + (millis()*cspeed);
        var y = map(noise(k), 0,1, 320, height/2);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

function frontclouds(){ //and repeated for end
    push();
    noStroke();
    beginShape();
    fill(249,246,249);
    for (var x = 0; x < width; x++){
        var k = (x*dchange) + (millis()*dspeed);
        var y = map(noise(k), 0,1, 500, height/3);
        vertex(0, height);
        vertex(width, height);
        vertex(x,y)
    }
    endShape();
    pop();
}

For this project, I wanted to mimic a simulation of looking out of the window on an airplane. Thus, the “landscape” is actually a multi-layered blanket of clouds that move at varying speeds depending on its distance from the airplane. To get a bit more whimsical, I used image animations to show birds somehow flying alongside the plane – maybe they’re robots?

This was a fun method of creating a scene that was just interesting to watch over time, as the varying changes create different intensities of each of the layers.