Project 11: Generative Landscape

//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-11

//SpongBob walking gif source:
//https://www.deviantart.com/supermariospongebob/art/SB-Walkin-into-Monday-858782150
//SB Walkin' into Monday
//by supermariospongebob

//arrays for background flowers
var filenamesF = [];
var bgflowers = [];
var backgroundF = [];
//arrays for the character
var filenames = [];
var walkImage = [];
var character = [];

var buildings = [];
var leaves = [];
var flags = [];

function preload() {
    //load SpongeBob walk cycle images
    filenames[0] = "https://i.imgur.com/ulD5SOy.png";
    filenames[1] = "https://i.imgur.com/0cFmmhf.png";
    filenames[2] = "https://i.imgur.com/wmSWQHb.png";
    filenames[3] = "https://i.imgur.com/iYYLnPL.png";
    filenames[4] = "https://i.imgur.com/kFzcZXr.png";
    filenames[5] = "https://i.imgur.com/Ej0nUgn.png";
    filenames[6] = "https://i.imgur.com/wfR57hy.png";
    filenames[7] = "https://i.imgur.com/4TadbPD.png";
    filenames[8] = "https://i.imgur.com/BjVfWWi.png";
    filenames[9] = "https://i.imgur.com/vLUiotP.png";
    filenames[10] = "https://i.imgur.com/oA49LHr.png";
    filenames[11] = "https://i.imgur.com/A9TMzpP.png";
    filenames[12] = "https://i.imgur.com/NAPIs2c.png";
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }
    //load background flower images
    filenamesF[0] = "https://i.imgur.com/ZNmnfMU.png";
    filenamesF[1] = "https://i.imgur.com/o1z2jrZ.png";
    filenamesF[2] = "https://i.imgur.com/U4OwJMt.png";
    filenamesF[3] = "https://i.imgur.com/iACszh9.png";
    filenamesF[4] = "https://i.imgur.com/4eTqZLb.png";
    for (var i = 0; i < filenamesF.length; i++) {
        bgflowers[i] = loadImage(filenamesF[i]);
    }
    leaves.push(loadImage("https://i.imgur.com/8NFDDnM.png"));
    leaves.push(loadImage("https://i.imgur.com/CberjzQ.png"));
    flags.push(loadImage("https://i.imgur.com/2kTH6D6.png"));
}

//make SpongeBob
function makeSpongeBob(sx, sy) {
    var s = {x: sx, y: sy, 
             imageNum: 0,
             drawFunction: drawSpongeBob
         }
    return s;
}
function drawSpongeBob() {
    this.imageNum ++; //increase imageNum
    //if reaches the length (end) of the array (go over 10 images), start from 0 again
    if (this.imageNum == walkImage.length) { 
        this.imageNum = 0;
    }
    image(walkImage[this.imageNum], this.x, this.y, 130, 140); //draw the image
}

function setup() {
    createCanvas(480, 400); 
    frameRate(9);
    //store SpongBob andCoral images to the array character
    character.push(makeSpongeBob(180, 220));
    character.push(makeCoral(0));
    //store background flower images to the array makeBackground
    backgroundF.push(makeBackground(20, 50, 0));
    backgroundF.push(makeBackground(180, 30, 1));
    backgroundF.push(makeBackground(460, 30, 2));
    backgroundF.push(makeBackground(120, 180, 3));
    backgroundF.push(makeBackground(300, 180, 4));
    backgroundF.push(makeBackground(550, 100, 0));
    backgroundF.push(makeBackground(650, 30, 3));
    //store 4 types of buildings to the array buildings
    buildings.push(makeBuilding1(0));
    buildings.push(makeBuilding1(360));
    buildings.push(makeBuilding2(130));
    buildings.push(makeBuilding3(270));
    buildings.push(makeBuilding4(560));
}


function draw() {
    background(87,157,231); 
    //draw background flowers
    for (i = 0; i < backgroundF.length; i++) {
        backgroundF[i].update();
        backgroundF[i].display();  
    } 
    //draw the grounds and horizon lines
    fill(235,233,218);
    noStroke();
    rect(0, height*2/3, width, height/3);
    fill(80);
    rect(0, height*3/4, width, height/4);
    stroke(0);
    strokeWeight(0.7);
    line(0, height*3/4, width, height*3/4);
    line(0, height*2/3, width, height*2/3)
    //draw the buildings
    for (i = 0; i < 5; i ++) {
        buildings[i].update();
        buildings[i].drawFunction();
    }
    character[0].drawFunction(); //draw SpongBob
    character[1].drawFunction(); //draw corals
}

//make background flowers
function makeBackground(bgx, bgy, idx) {
    var bg = {x: bgx, y: bgy, index: idx, speed: -3,
                size: random(100, 180), //random starting size
                dsize: random(-6,6), //random decrease or increase size every update
                update: bgFlowerUpdate,
                display: bgFlowerDisplay
            }
    return bg;  
}
function bgFlowerUpdate() {
    this.x += this.speed; //move to the left with speed -3
    this.size += this.dsize; //increase or decrease size by dsize
    if (this.x < -width/2) { //if out of the canvas
        this.x = width; //start from the right side again
        this.size = random(80, 100); //start with random size
        this.size += this.dsize;
    }
    if (this.size >= 200 || this.size <= 30) { //if size reaches the limit 30 or 200
        this.dsize = -this.dsize; //inverse the size change direction
    }
}
function bgFlowerDisplay() {
    image(bgflowers[this.index], this.x, this.y, this.size, this.size); 
}

//Squidward Tentacles' house
function makeBuilding1(bx) { //startX is the starting X of the building
    var bg = {startX: bx, speed: -6,
              r: random(40, 150), g: random(70, 200), b: random(200, 255), //random color in cool tone
              update: updateBuilding1,
              drawFunction: drawBuilding1
            }
    return bg;
}
function drawBuilding1() {
    //structure
    var x1 = 100; var y1 = 140;
    var x2 = 150; 
    var x3 = 165; var y2 = 285;
    var x4 = 85; 
    fill(this.r+20, this.g+20, this.b+20);
    rect(this.startX+80, 180, 90, 45);
    fill(this.r, this.g, this.b);
    quad(this.startX+x1, y1, this.startX+x2, y1, this.startX+x3, y2, this.startX+x4, y2);
    fill(this.r-20, this.g-20, this.b-20);
    rect(this.startX+103, 169, 44, 11);
    quad(this.startX+120, 180, this.startX+130, 180, this.startX+138, 235, this.startX+112, 235);
    //windows
    fill(171,174,191);
    ellipse(this.startX+109, 190, 19, 20);
    ellipse(this.startX+141, 190, 19, 20);
    if (frameCount % 5 == 0) { //blink every 5 frames
        fill(21,144,177); 
    } else {
        fill(255, 250, 112);
    }
    ellipse(this.startX+109, 190, 0.6*19, 0.6*20);
    ellipse(this.startX+141, 190, 0.6*19, 0.6*20);
    //door
    fill(132, 114, 85);
    arc(this.startX+125, 255, 26, 26, PI, PI*2, OPEN);
    noStroke();
    rect(this.startX+125-13, 255, 26, 30);
    stroke(0);
    line(this.startX+125-13, 255, this.startX+125-13, 255+30);
    line(this.startX+125+13, 255, this.startX+125+13, 255+30);
    line(this.startX+125-13, 255+30, this.startX+125+13, 255+30);

}
function updateBuilding1() {
    this.startX += this.speed;
    if (this.startX < -width/3) { //if out of the canvas
        this.startX = width; //start from the right side again
    }

}
//SpongeBob's house
function makeBuilding2(bx) {
    var bg = {startX: bx, speed: -6,
              r: random(240,255), g: random(140,210), b: random(10,45), //random orange/yellow
              update: updateBuilding2,
              drawFunction: drawBuilding2
            }
    return bg;
}
function drawBuilding2() {
    fill(46, 144, 11);
    image(leaves[0], this.startX+16, 76, 200, 230); //draw leaves  
    //pineapple structure
    fill(this.r, this.g, this.b);
    arc(this.startX+125, 245.5, 100, 130, PI*3/4, PI*9/4, CHORD);
    //windows
    fill(171,174,191);
    ellipse(this.startX+109, 210, 19, 20);
    ellipse(this.startX+155, 265, 19, 20);
    if (frameCount % 8 == 0) { //blinks every 8 frames
        fill(255, 250, 112);
    } else {
        fill(21,144,177);
    }
    ellipse(this.startX+109, 210, 0.6*19, 0.6*20);
    ellipse(this.startX+155, 265, 0.6*19, 0.6*20);
    //door
    fill(171,174,191);
    strokeWeight(0.5);
    arc(this.startX+125, 260, 26, 26, PI, PI*2, OPEN);
    noStroke();
    rect(this.startX+125-13, 260, 26, 25);
    stroke(0);
    strokeWeight(0.5);
    line(this.startX+125-13, 260, this.startX+125-13, 260+25);
    line(this.startX+125+13, 260, this.startX+125+13, 260+25);
    line(this.startX+125-13, 260+25, this.startX+125+13, 260+25);
    fill(76,89,121);
    arc(this.startX+125, 260, 18, 18, PI, PI*2, OPEN);
    noStroke();
    rect(this.startX+125-9, 260, 18, 25);
    stroke(0);
    strokeWeight(0.5);
    line(this.startX+125-9, 260, this.startX+125-9, 260+25);
    line(this.startX+125+9, 260, this.startX+125+9, 260+25);
    line(this.startX+125-9, 260+25, this.startX+125+9, 260+25);
}
function updateBuilding2() {
    this.startX += this.speed;
    if (this.startX < -width/3) {
        this.startX = width;
    }

}
//Patrick Star's house
function makeBuilding3(bx) {
    var bg = {startX: bx, speed: -6,
              r: random(150,255), g: 80, b: 80, //random shades of red
              update: updateBuilding3,
              drawFunction: drawBuilding3
            }
    return bg;
}
function drawBuilding3() {
    //decoration
    strokeWeight(0.3)
    fill(248,228,156);
    rect(this.startX+125-1.5, 248, 3, 30);
    rect(this.startX+125-8, 245, 16, 3);
    //structure
    strokeWeight(0.6);
    fill(this.r, this.g, this.b);
    arc(this.startX+125, 285, 60, 60, PI, PI*2, CHORD);
}
function updateBuilding3() {
    this.startX += this.speed;
    if (this.startX < -width/2) {
        this.startX = width;
    }
}
//Krusty Krab Restaurant
function makeBuilding4(bx) {
    var bg = {startX: bx, speed: -6,
              update: updateBuilding4,
              drawFunction: drawBuilding4
            }
    return bg;
}
function drawBuilding4() {
    fill(115,95,42);
    rect(this.startX, 222, 105, 63);
    //glass windows and door
    fill(109,165,244);
    rect(this.startX, 252, 105, 33);
    //wooden structures
    fill(115,95,42);
    rect(this.startX, 215, 12, 70);
    rect(this.startX+105, 215, 12, 70);
    fill(94,74,29);
    line(this.startX-5+63, 252, this.startX-5+63, 285)
    rect(this.startX-5, 273, 40, 12);
    rect(this.startX+80, 273, 41, 12);
    rect(this.startX-5+40, 252, 40, 5);
    rect(this.startX-5+40, 252, 10, 33);
    rect(this.startX+71, 252, 11, 33);
    //load flags
    image(flags[0], this.startX+11.5, 232, 94, 20); 
}
function updateBuilding4() {
    this.startX += this.speed;
    if (this.startX < -width/3) {
        this.startX = width;
    }

}
//corals
function makeCoral(cx) {
    var s = {startX: cx, speed: -10,
             drawFunction: drawCoral
         }
    return s;
}
function drawCoral() {
    image(leaves[1], this.startX+100, 320, 60, 120); //smaller coral
    image(leaves[1], this.startX+200, 280, 100, 200); //bigger coral
    this.startX += this.speed;
    if (this.startX < -width) {
        this.startX = width*1.2;
    }
}