rmanagad-project10

sketch

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-10


var mountain = [];
var mountainLinks = [
	"https://i.imgur.com/U4n2NMc.png",
	"https://i.imgur.com/OwkMkiT.png"]
var mountainAssets = [];

var tree = [];
var treeLinks = [
	"https://i.imgur.com/4b5pxqM.png",
	"https://i.imgur.com/1YjM5m7.png",
	"https://i.imgur.com/7sXiAyN.png"]
var treeAssets = [];

function preload() { //made assets in Adobe Illustrator to transfer over.

	//mountainloop
	for (var i = 0; i < mountainLinks.length; i++) {
		mountainAssets[i] = loadImage(mountainLinks[i]);
	}
	for (var i = 0; i < treeLinks.length; i++) {
		treeAssets[i] = loadImage(treeLinks[i]);
	}
} 

function setup() {
    createCanvas(480, 240); 
    frameRate(60);
    mountain[0] = mountainComponents(200);

    tree[0] = treeComponents(150);

}


function draw() {
    background(255); 

    //actual background
    stroke(0);
    fill(51, 46, 42);
    rect(0,0, width, height);

    //draw mountains
   	newMountains();
   	randomizeMountains();


   	//draws hills in the background
   	drawHills();

   	//drawing the ground
   	noStroke();
   	fill(238);
   	rect(0, 170, width, 70);

   	//setting mountains in an initial location.
    
    //draws bushes
   	newTrees();
   	randomizeTrees();


}

/////////////////////////////////

function drawHills(){ //midground hills for introduction of color.
	var terrainSpeed = 0.0006;
    var terrainDetail = 0.005;

    push();
    beginShape();
    noStroke();
    fill(186, 219, 217);
    vertex(0, 300);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height)
        vertex(x, y - 10);

    }
    vertex(width, height);
    endShape();
    pop();
}



///////////////////// TREES

function newTrees() {
	//keeps the trees moving along the x-axis
	for (var i = 0; i < tree.length; i++) {
		tree[i].tMove();
		tree[i].tPlace();
	}
}

function treePlace() { //draws the trees
	image(treeAssets[this.nFloor], this.x, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	image(treeAssets[this.nFloor], this.x+300, this.y-40, treeAssets[this.nFloor].width/13, treeAssets[this.nFloor].height/13);
	fill(255);
}

function treeMove() {
	this.x -= this.speed
}

function randomizeTrees() {
	var chance = 0.002 //places in more trees into the array.
	if (random(0, 1) < chance) {
		tree.push(treeComponents(width));
	}
}

function treeComponents(originX) {
	var treeComponents = {
		x: originX,
		y: random(135, 140),
		cwidth: random(30, 50),
		cheight: random(30, 50),
		speed: 1,
		nFloor: floor(random(0,3)),
		tMove: treeMove,
		tPlace: treePlace
	}
	return treeComponents;
}

///////////// MOUNTAINS 

function newMountains() {
	//keeps the mountains moving along the x-axis
	for (var i = 0; i < mountain.length; i++) {
		mountain[i].mMove();
		mountain[i].mPlace();
	}
}

function mountainPlace() { //draws the mountains
	image(mountainAssets[this.nFloors], this.xx -100, this.yy-130, mountainAssets[this.nFloors].width/10, mountainAssets[this.nFloors].height/10);
	fill(255);
}

function mountainMove() {
	this.xx -= this.speedy
}

function randomizeMountains() {
	var chance = 0.002 //places in more mountains into the array.
	if (random(0, 1) < chance) {
		mountain.push(mountainComponents(width));
	}
}

function mountainComponents(originXX) {
	var mountainComponents = {
		xx: originXX,
		yy: random(130, 140),
		speedy: 0.5,
		nFloors: floor(random(0,1)),
		mMove: mountainMove,
		mPlace: mountainPlace
	}
	return mountainComponents;
}

 

I took inspiration for this landscape by a project I was working on in Illustrator. With that being said, many of the assets were created first in Illustrator and loaded into my program. I had the most challenge with debugging this code and scaling images correctly — minor issues kept me from moving forward with actually drawing the program out.