Month: November 2022

/* Evan Stuhlfire 
 * estuhlfi@andrew.cmu.edu section B
 * project-11-generative landscape */

var hills = [];
var trees = [];
var chickArray = [];
var imgArray = [];
var farm = [];
var barnImg;
var cowImg;
var planeObj;
var flyingPlane = false;

var scrollSpeed = 5;

function preload(){
    // preload images

    // URLs to imgur walking chick
    // Chick image licensed from Adobe stock images
    var filenames = [];
    filenames[0] = "https://i.imgur.com/kjBGzBF.png";
    filenames[1] = "https://i.imgur.com/hxvbkWZ.png";
    filenames[2] = "https://i.imgur.com/53MK7g1.png";
    filenames[3] = "https://i.imgur.com/6nrYJCw.png";
    filenames[4] = "https://i.imgur.com/XmPcBDa.png";
    filenames[5] = "https://i.imgur.com/3OusOsv.png";

    for (var i = 0; i < filenames.length; i++) {
        imgArray[i] = loadImage(filenames[i]);

    barnImg = loadImage("https://i.imgur.com/inS5Xdt.png");
    cowImg = loadImage("https://i.imgur.com/8XjQyMt.png");

    }
}

// methods
function stepChick() {
    // update the chick image to animate
    if(this.imgNum < chickArray.length - 2) {
        // increment to next image
        this.imgNum++;
    } else {
        // if at end of array reset to beginning
        this.imgNum = 0; 
    }
}

function drawChick() {
    // draw image
    image(imgArray[this.imgNum], this.x, this.y, 50, 50);
}

function drawOneHill() {
    // draw hill
    fill(this.c);
    stroke(0, 150, 0);
    strokeWeight(1);
    ellipse(this.x, this.y, this.w, this.hi);

    this.x -= this.s; // decrement by speed
}

function drawTree() {
    // draw trunk
    stroke(77, 38, 0);
    strokeWeight(3);
    line(this.x, this.y, this.x, this.y + (this.h * .8));
    line(this.x, this.y + this.h * .5, this.x + this.w * .2, 
        this.y + this.h * .2);
    line(this.x, this.y + this.h * .7, this.x - this.w * .1, 
        this.y + this.h * .1);

    // draw leaves
    fill(this.c);
    stroke(0, 100, 0);
    strokeWeight(1);
    ellipse(this.x, this.y, this.w, this.h);

    this.x -= this.speed; // decrement by speed
}

// object constructor functions
function newChick(cx, cy) {
    // constructor to make a chick
    var c = {x: cx, y: cy,
            imgNum: 0,
            stepFunction: stepChick,
            drawFunction: drawChick
        }
    return c;
}

function newHill(hx, hy, hw, hhi, hc, hs) {
    // create new hill at x, y with diameter d
    var h = {x: hx, y: hy, w: hw, hi: hhi, 
            c: hc, s: hs,
            drawFunction: drawOneHill
        };
    return h;
}

function newTree(tx, ty, tw, th, tc, ts) {
    // create new tree at x, y of height th, color tc
    // tree width = tw, tree speed = ts
    var t = {x: tx, y: ty, w: tw, h: th, c: tc, 
            speed: ts,
            drawFunction: drawTree
        };
    return t;
}

function newFarm(fx, fy, fi, fw, fh, fb) {
    // create new farm img at x, y
    // use farm image fi
    var f = {x: fx, y: fy, img: fi,
            w: fw, h: fh,
            speed: scrollSpeed,
            barn: fb
        };
    return f;
}

function newPlane(px, py, pdx, pdy) {
    // create plane object
    var p = {x: px, y: py, dx: pdx, dy: pdy};
    return p;
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    imageMode(CENTER);

    // loop to create chick images
    for(var i = 0; i < imgArray.length; i++) {
        chickArray[i] = newChick(width/2, height * .7);
    }

    var onCanvas = true;
    // generate initial hills
    var numHills = floor(random(15, 20));
    // onCanvas = true for first set of hills to draw on canvas
    generateHills(onCanvas, numHills); 

    // create a farm
    generateFarm();

    // generate initial trees
    var numTrees = floor(random(1, 10));
    // onCanvas = true trees drawn on canvas
    generateTrees(onCanvas, numTrees, 1);
    generateTrees(onCanvas, numTrees, 2);
    generateTrees(onCanvas, numTrees, 3);
}

function draw() {
    // call all the parts of the scrolling background
    background(153, 179, 255);
    drawSun();
    // draw hills
    drawHills();
    removeHills();
    createNewHills();

    foreground();
    
    // draw farm elements, barns and cows
    drawFarm();
    removeFarm();
    createNewFarm();

    // draw trees
    drawTrees();
    removeTrees();
    createNewTrees(1);
    createNewTrees(2);
    createNewTrees(3);

    // animate the little chick
    drawLittleChick();

    // draw plane
    createPlane();
    drawPlane();
}

function drawSun() {
    // draw stationary sun
    fill(255, 255, 77, 200);
    stroke(255, 255, 26);
    strokeWeight(1);
    ellipse(width * .85, height * .1, 50, 50);
}

function foreground(){
    // draw grass
    fill(0, 153, 51);
    noStroke();
    rect(0, height/3, width, height);
    // draw path
    stroke(153, 102, 51);
    strokeWeight(20);
    line(0, height * .75, width, height * .75);
    // draw pebbles
    // generate differnt shades of tan
    stroke(random(210, 250), random(125, 220), random(85, 220));
    strokeWeight(3);
    var y = floor(random(height * .75 - 10, height * .75 + 10));
    var x = floor(random(0, width));
    point(x, y);
}

function drawLittleChick() {
    // loop through chick array call step and draw methods
    for(var i = 0; i < chickArray.length; i++) {
        var currentChick = chickArray[i];
        currentChick.stepFunction();
        currentChick.drawFunction();
    }
}

function createPlane() {
    // probability of a plane
    var newPlaneLikely = .0008;
    if(random(0, 1) < newPlaneLikely & !flyingPlane) {
        var y = floor(random(40, 100));
        var x = 0;
        var dx = random(2, 5);
        var dy = random(.1, .8);
        planeObj = newPlane(x, y, dx, dy);
        flyingPlane = true;
    }
}

function drawPlane() {
    if(flyingPlane) {
        stroke(230, 255, 255);
        strokeWeight(3);
        line(planeObj.x, planeObj.y, planeObj.x + 30, planeObj.y - 2);
        // draw wings
        strokeWeight(1);
        line(planeObj.x + 18, planeObj.y - 2, planeObj.x + 3, 
            planeObj.y + 5);
        line(planeObj.x + 18, planeObj.y - 1, planeObj.x + 20, 
            planeObj.y - 10);
        // draw tail
        line(planeObj.x, planeObj.y, planeObj.x - 3, planeObj.y -8);

        planeObj.x += planeObj.dx;
        planeObj.y -= planeObj.dy; 

        if(planeObj.x > width || planeObj.y < 0) {
            flyingPlane = false;
        }
    }

}

function createNewHills() {
    // probability of a hill
    var newHillLikely = .07;
    if(random(0, 1) < newHillLikely) {
        var numHills = floor(random(5, 12));
        var onCanvas = false;
        generateHills(onCanvas, numHills);
    }
}

function removeHills() {
    // if array has more items and hills have scrolled off screen
    var keep = [];

    if(hills.length >= 0) {
        for(var i = 0; i < hills.length; i++) {
            if(hills[i].x + hills[i].w/2 > 0) {
                keep.push(hills[i]);
            }
        }
        hills = keep;
    }
}

function drawHills() {
    // draw hills on canvas
    for(var i = 0; i < hills.length; i++) {
        var h = hills[i];
        h.drawFunction();
    }
}

function generateHills(onCanvas, num) {
    // if onCanvas = true then generate first set of hills
    // on canvas, otherwise generate off canvas

    // generate num number of new hills
    for(var i = 0; i < num; i++) {
        // generate hill color
        var g = floor(random(50, 230));
        var c = color(80, g, 0);

        // generate x, y, width, and height of hill
        var y = random(height/2.6, height/2);
        var w = random(100, width);
        var h = random(150, 250);

        if(onCanvas) {
            // generate hills on canvas
            var x = random(-w, width + w * 3);
            var w = random(width/2, width);
        } else {
            // generate hills off canvas
            var x = random(width + (w * 1.5), width * 3); 
        }

        var hill = newHill(x, y, w, h, c, 5);
        hills.push(hill);
    }
}

function createNewFarm(){
    // probability of a farm
    var newFarmLikely = .01;
    if(random(0, 1) < newFarmLikely) {
        generateFarm();
    }
}

function removeFarm() {
    // if array has more items and farms have scrolled off screen
    var keep = [];

    if(farm.length >= 0) {
        for(var i = 0; i < farm.length; i++) {
            if(farm[i].x + farm[i].w > 0) {
                keep.push(farm[i]);
            }
        }
        farm = keep;
    }
}

function generateFarm() {
    // create cows on farm
    var isBarn = false
    var numCows = floor(random(10, 30));
    for(var i = 0; i < numCows; i++) {
        // create a cow object and add it to the farm
        // array for each cow
        var x = random(width, width * 4);
        var y = random(height/2.2, height/3.5);

        if(y < height/2.7) {
            // make cows smaaller, they are further away
            var w = random(10, 15);
            var h = random(10, 15);
        } else {
            // make cows bigger, they are closer
            var w = random(25, 30);
            var h = random(25, 30);
        }

        var c = newFarm(x, y, cowImg, w, h, isBarn);
        farm.push(c);
    }

    // randomly generate barn variables
    var x = random(width + w, width * 2);
    var y = random(height/2.6, height/3.7);

    // if barn is further away, draw it smaller
    if(y < height/3.2) {
        var w = random(20, 40);
        var h = random(20, 40);
    } else {
        // close and bigger
        var w = random(60, 90);
        var h = random(50, 70);
    }

    isBarn = true;
    var f = newFarm(x, y, barnImg, w, h, isBarn);
    farm.push(f);
}

function drawFarm() {
    // draw farm on canvas
    var barnArray = [];
    if(farm.length > 0) {
        for(var i = 0; i < farm.length; i++) {
            var f = farm[i];
            if(f.barn) {
                barnArray.push(f);
            } else {
                // draw cows behind barns
                image(f.img, f.x, f.y, 
                    f.w, f.h);
                f.x -= f.speed; 
            }
        }
        // draw barns in their own layer on top of cows
        for(var i = 0; i < barnArray.length; i++) {
            var b = barnArray[i];
            image(b.img, b.x, b.y, b.w, b.h);
            b.x -= b.speed;
        }
        barnArray = [];
    }
}

function createNewTrees(layer) {
    var newTreeLikely = .012;
    var numTrees = floor(random(2, 4));
    // send false to generate off canvas
    var onCanvas = false;

    if(random(0, 1) < newTreeLikely) {
        generateTrees(onCanvas, numTrees, layer);
    }
}

function removeTrees() {
    // if array has more items and trees have scrolled off screen
    var keep = [];
    if(trees.length >= 0) {
        for(var i = 0; i < trees.length; i++) {
            if(trees[i].x + trees[i].w > 0) {
                keep.push(trees[i]);
            }
        }
        trees = keep;
    }
}

function drawTrees() {
    // draw trees on canvas
    if(trees.length >= 0) {
        for(var i = 0; i < trees.length; i++) {
            var t = trees[i];
            t.drawFunction();
        }
    }
}

function generateTrees(start, num, layer) {
    // if start = true then generate first set of trees
    // on canvas, otherwise generate off canvas

    // generate num number of new trees
    for(var i = 0; i < num; i++) {
        // generate tree color
        var r = floor(random(70, 100));
        var g = floor(random(80, 255));
        var b = floor(random(80, 120));
        if(layer == 1) {
            var c = color(r, g, b, 190); 
            // create big trees in background
            bigTrees(start, c);
        } else if(layer == 2) {
            r = floor(random(0, 150));
            g = floor(random(50, 150));
            b = floor(random(250, 255));
            var c = color(r, g, b, 190);
            // create little trees in midground
            littleTrees(start, c);
        } else {
            r = floor(random(250, 255));
            g = floor(random(30, 150));
            b = floor(random(80, 255));
            var c = color(r, g, b, 200);
            // create shrubs in foreground
            shrubs(start, c);
        }
    }
}

function bigTrees(start, c) {
    // generate x, y, width, and height of trees
    var w = random(50, 70);
    var h = random(40, 70); 

    var y = random(height/2.6, height/2.8);

    if(start) {
        // generate trees on canvas
        var x = random(5, width); 
    } else {
        // generate trees off canvas
        var x = random(width + w/2, width * 3); 
    }

    // create tree and add to array
    var tree = newTree(x, y, w, h, c, 5);
    trees.push(tree);
}

function littleTrees(start, c) {
    // generate x, y, width, and height of trees
    var w = random(30, 40);
    var h = random(15, 40); 

    var y = random(height/1.7, height/2);

    if(start) {
        // generate trees on canvas
        var x = random(5, width); 
    } else {
        // generate trees off canvas
        var x = random(width + w/2, width * 2); 
    }

    // create tree and add to array
    var tree = newTree(x, y, w, h, c, 5);
    trees.push(tree);
}

function shrubs(start, c) {
    // generate x, y, width, and height of trees
    var w = random(20, 40);
    var h = random(15, 20); 

    var y = random(height/1.1, height/1.3);

    if(start) {
        // generate trees on canvas
        var x = random(5, width); 
    } else {
        // generate trees off canvas
        var x = random(width + w/2, width * 3); 
    }

    // create tree and add to array
    var tree = newTree(x, y, w, h, c, 5);
    trees.push(tree);
}