Jonathan Liang – Project 10 – Generative Landscape

sketch

//Jonathan Liang
//jliang2
//section A

var buildings = [];
var lamppost = [];
var tDetail = 0.01;
var tSpeed = 0.0004;
var frames = []; // An array to store the images
var x = 0; //variable to draw image from array
var rexX;  // The X location of the character
var rexY;  // The Y location of the character
var exampleImgOnly;

function preload() {
	var filenames = [];
	filenames[0] = "https://i.imgur.com/pUQqpVN.png";
	filenames[1] = "https://i.imgur.com/075wwQz.png";
	filenames[2] = "https://i.imgur.com/8aFEl6F.png";

	for (var i = 0; i < filenames.length; i++) {
		frames[i] = loadImage(filenames[i]);
	}
	exampleImgOnly = loadImage("https://i.imgur.com/pUQqpVN.png");
}


function setup() {
    createCanvas(480, 400);

    //initial buildings
    for (var i = 0; i < 11; i++) {
    	var ranx = random(width);
    	buildings[i] = makeBuilding(ranx);
    }
    rexX = 150; 
    rexY = 215; 
    frameRate(10);
    
   
}

function draw() {
	background(255);
	//generate line paper
	for(var y = 0; y < height; y += 10) {
		stroke(200);
		noFill();
		line(0, y, width, y);
	}
	displayHorizon();
	makeMountain();

	//draw objects
	//buildings
	updateAndDisplayBuildings();
	removeBuildings();
	addNewBuilding();
	//trex
	image(frames[x], rexX, rexY, 150, 150);
		x += 1;
		if (x > 2) {
			x = 0;
		}
	
}

function makeMountain() {
	//generates terrain
	stroke(0);
	strokeWeight(2);
	noFill();
	beginShape();
	for (var x1 = 0; x1 < width; x1++) {
		var t1 = (x1 * tDetail) + (millis() * tSpeed);
		var y1 = map(noise(t1), 0, 1, 0, height);
		vertex(x1, y1 - 20);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}

function updateAndDisplayBuildings() {
	//update and display building position 
	for (var i = 0; i < buildings.length; i++) {
		buildings[i].move();
		buildings[i].display();
	}
}

function removeBuildings() {
	//remove buildings that have gone out of view
	var keepBuildings = [];
	for (var i = 0; i < buildings.length; i++) {
		if (buildings[i].x + buildings[i].breadth > 0) {
			keepBuildings.push(buildings[i]);
		}
	}
	buildings = keepBuildings //remember remaining buildings
}

function addNewBuilding() {
	//with very little probability, add new building
	var newBuildingLikelihood = 0.02;
	if (random(0, 1) < newBuildingLikelihood) {
		buildings.push(makeBuilding(width));
	}
}

// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}

//drawing building and windows
function buildingDisplay() {
	//building
	var floorHeight = 20;
	var bHeight = this.nFloors * floorHeight;
	noFill();
	strokeWeight(2);
	stroke(0);
	push();
	translate(this.x, height - 50);
	rect(0, -bHeight, this.breadth, bHeight);
	//windows
	var wGap = this.breadth / 16;
	var xW = this.breadth / 16;
	for (var w = 0; w < 5; w++) {
		for (var i = 0; i < this.nFloors; i++) {
			fill('yellow');
			strokeWeight(1);
			stroke(0);
			rect(xW, -15 - (i * floorHeight), wGap * 2, 10);
		}
		xW += wGap * 3;
	}
	pop();
}

function makeBuilding(birthLocationX) {
	var bldg = {x: birthLocationX,
				breadth: 50,
				speed: -5.0,
				nFloors: round(random(3, 12)),
				move: buildingMove,
				display: buildingDisplay}
	return bldg;
}



//draw the ground
function displayHorizon() {
	stroke(0);
	strokeWeight(4);
	noFill();
	line(0, height - 50, width, height - 50);
}

It all starts with an idea, but you can never tell where an idea can end up. Because ideas spread, they change, they grow, they connect us with the world. And in a fast-moving world, where good news moves at the speed of time and bad news isn’t always what is seems. Because when push comes to shove, we all deserve a second chance, to score.

My project is heavily based on doodles I used to do throughout my elementary to high school days. I used to like to draw mountains, buildings, tanks, aliens, and dinosaurs blowing up stuff. I chose to add lines to the background to reflect that lined paper quality and made everything noFill to show that it was just a pen doodle.