sketch
/* 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);
}