Project 11 – Generative Landscape

var walkImage = [];   // an array to store the images
var character;

var fgElem = [];
var mgElem = [];
var bgElem = [];
var pgElem = [];

var fg = [];
var mg = [];
var bg = [];
var pg = [];

function preload(){
    // walk cycle
    walkImage[0] = loadImage("https://imgur.com/8HlL26L");
    walkImage[1] = loadImage("https://imgur.com/VLCqhEO");
    walkImage[2] = loadImage("https://imgur.com/6rAVlb8");
    walkImage[3] = loadImage("https://imgur.com/2VRJjQ6");
    walkImage[4] = loadImage("https://imgur.com/zFCNtnG");
    walkImage[5] = loadImage("https://imgur.com/AnyR09P");
    walkImage[6] = loadImage("https://imgur.com/PMB0qDG");
    walkImage[7] = loadImage("https://imgur.com/CiQWgmP");




    //loading foreground
    fgElem[0] = loadImage("https://imgur.com/RUYNCQT");
    fgElem[1] = loadImage("https://imgur.com/UaNr8wZ");
    fgElem[2] = loadImage("https://imgur.com/LsfvMCm");
    fgElem[3] = loadImage("https://imgur.com/GRwR31R");
    fgElem[4] = loadImage("https://imgur.com/xQtPjEQ");
    fgElem[5] = loadImage("https://imgur.com/cTUW62y");
    fgElem[6] = loadImage("https://imgur.com/cY58wgx");


    //loading midground
    mgElem[0] = loadImage("https://imgur.com/lal5lq9");
    mgElem[1] = loadImage("https://imgur.com/c5fb0jp");
    mgElem[2] = loadImage("https://imgur.com/kKwofLH");
    mgElem[3] = loadImage("https://imgur.com/iN2MTZN");
    mgElem[4] = loadImage("https://imgur.com/QclBuA8");
    mgElem[5] = loadImage("https://imgur.com/IAaQ7Ta");
    mgElem[6] = loadImage("https://imgur.com/g3xh1GG");
    mgElem[7] = loadImage("https://imgur.com/LWmOUjc");
    mgElem[8] = loadImage("https://imgur.com/xSvimmS");

    //loading background
    bgElem[0]= loadImage("https://imgur.com/8MNPtj6");
    bgElem[1]= loadImage("https://imgur.com/4bjqW3c");
    bgElem[2]= loadImage("https://imgur.com/q7xaqWr");
    bgElem[3]= loadImage("https://imgur.com/gEnWbVW");
    bgElem[4]= loadImage("https://imgur.com/0yBIPM8");
    bgElem[5]= loadImage("https://imgur.com/6TYtEHn");

    //loading clouds
    pgElem[0] = loadImage("https://imgur.com/pdXo0gP");
    pgElem[1] = loadImage("https://imgur.com/ohLIq5A");
    pgElem[2] = loadImage("https://imgur.com/I9uzjJC");
    pgElem[3] = loadImage("https://imgur.com/JYXlm2v");
}


function setup() {
    createCanvas(400, 400);
    background(202, 240, 248);
    frameRate(12);
    imageMode(CENTER);
    character = makeCharacter(width/4, height*0.62, 0, 0);
    surpriseChar = makeCharacter(-width*2.5, height*0.62, -5.5, 0);

    var rand = 27;
    //loading foreground
    var x1 = random(1, width/4);
    for (var i = 0; i<rand; i++){
        var envChar = makeCharacter(x1, height*(0.63), 5.5, 0);
        envChar.imageNum = int(random(0, fgElem.length));
        x1 += random(width/(rand), (2*width)/rand);
        fg.push(envChar);
    }

     //loading midground
     var rand2 = 20;
     var x2 = random(1, width);
     for (var i = 0; i<rand2; i++){
         var envChar = makeCharacter(x2, height*(0.59), 2.5, 0);
         envChar.imageNum = int(random(0, mgElem.length));
         envChar.size = random(0.1, 0.17);
         mg.push(envChar);
         x2 += random(width/4, width/2);
     }

    //loading background
    var rand3 = 10;
    var x3 = random(1, width);
    for (var i = 0; i<rand3; i++){
        var envChar = makeCharacter(x3, height*(0.4), 1, 0);
        envChar.imageNum = int(random(0, bgElem.length));
        x3 += random(width/6, width/3);
       
        bg.push(envChar);
    }

    //loading clouds
    var rand4 = 4;
    var x4 = random(1, width*(2/3));
    for (var i = 0; i<rand4; i++){
        var y = random(height*0.05, height*0.4);
        
        var envChar = makeCharacter(x4, y, 0.2, 0);
        envChar.imageNum = int(random(0, pgElem.length));
        envChar.size = random(0.1, 0.2);
        pg.push(envChar);
        x4 += random(width/3, width/2);
    }
}


function draw() {
    background(190, 225, 230);
    push();
    noStroke();
    
    ellipseMode(CENTER);
    fill(246, 241, 209, 90);
    circle(width*0.75, height*0.17, width*0.27);
    
    fill(244, 222, 44, 70);
    circle(width*0.75, height*0.17, width*0.22);
    fill(244, 222, 44, 120);
    circle(width*0.75, height*0.17, width*0.17);
    fill(243, 222, 44);
    circle(width*0.75, height*0.17, width*0.12);
    pop();

    updateArray(pg, pgElem);
    for (var i = 0; i<pg.length; i++){
        pg[i].drawFunction(pgElem); 
        pg[i].moveFunction(pgElem);
        
    }  

    updateArray(bg, bgElem);
    for (var i = 0; i < bg.length; i++){
        bg[i].drawFunction(bgElem);
        bg[i].moveFunction(bgElem);
    }

    surpriseChar.drawFunction(walkImage);
    surpriseChar.stepFunction(walkImage);
    surpriseChar.moveFunction();
    


    updateArray(mg, mgElem);
    for (var i = 0; i < mg.length; i++){
        mg[i].drawFunction(mgElem);   
        mg[i].moveFunction(mgElem);
        
    }

    character.drawFunction(walkImage);
    character.stepFunction(walkImage);
    

    updateArray(fg, fgElem);
    for (var i = 0; i<fg.length; i++){
        fg[i].drawFunction(fgElem); 
        fg[i].moveFunction(fgElem);
        
    }  

    push();
    noStroke();
    fill(226, 208, 180);
    rect(0, height*0.74, width, height);
    pop();
}


// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
    var c = {x: cx, y: cy, dx: cdx, dy: cdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter,
             moveFunction: moveCharacter
         }
    return c;
}

function stepCharacter(images){
    this.imageNum ++;
    this.imageNum = this.imageNum % images.length;
}

function moveCharacter(){
    this.x -= this.dx;
    if (this == surpriseChar & this.x > 200){
        this.x = -width;
    }
}

function drawCharacter(images){
    if (images == fgElem){
        push();
        translate(this.x, this.y);
        scale(0.1);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else if (images == bgElem){
        push();
        translate(this.x, this.y);
        scale(0.19);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else if (images == mgElem){
        push();
        translate(this.x, this.y);
        scale(0.18);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else if (images == pgElem){
        push();
        translate(this.x, this.y);
        scale(this.size);
        image(images[this.imageNum], this.x, this.y);
        pop();
    } else {
        if (this == surpriseChar){
            push();
            scale(-1, 1);
            image(images[this.imageNum], this.x, this.y);
            pop();
        } else {
            image(images[this.imageNum], this.x, this.y);
        }
    }
}

function updateArray(array, source){
    for (var i = 0; i < array.length; i++){
        elem = array[i];
        if ((source == fgElem & elem.x < -10)||
            (source != fgElem && elem.x < -100)){
            elem.x = width + random(width/4, width);
            elem.imageNum = int(random(0, source.length));
        }
    }
}