Catherine Coyle – Project 10

sketch

// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project 10 - generative landscape


var startingTrees = 10;
var trees = [];
var fog = [];
var fireflies = [];
var birds = [];
var frameC = 1;

function setup() {
    createCanvas(480, 300);
    for (var i = 0; i < startingTrees; i++) {
    	var newTree = makeTree(random(width));
    	// this little chunk of code minimizes the chances of trees overlapping each other
    	for (var j = 0; j < trees.length; j++) {
    		while (((newTree.x > trees[j].x) & (newTree.x < trees[j].x + (trees[j].proximity * 30))) ||
    				((newTree.x + (newTree.proximity * 30) > trees[j].x) && 
    				(newTree.x + (newTree.proximity * 30) < trees[j].x + (trees[j].proximity * 30)))) {
    					newTree = makeTree(random(width));
    		}
    	}
    	trees.push(newTree);
    }
    // generating all the fog clouds and fireflies to start
    for (var i = 0; i < 5; i++) {
    	var newCloud = makeCloud(random(width));
    	fog.push(newCloud);
    }
    for (var i = 0; i < 20; i++) {
    	var newFly = makeFirefly(random(width));
    	fireflies.push(newFly);
    }
}

function draw() {
	// moon and horizon line
	background(76, 93, 99);
	noStroke();
	fill(43, 61, 56);
	rect(0, 100, width, 200)
	fill(255, 253, 237);
	ellipse(width / 2, 0, 70, 70);
	// drawing all my objects each frame
	for (var i = 0; i < birds.length; i++) {
		birds[i].draw();
		birds[i].move();
	}
	for (var i = 0; i < trees.length; i++) {
		trees[i].draw();
		trees[i].move();
	}
	for (var i = 0; i < fireflies.length; i++) {
		fireflies[i].draw();
		fireflies[i].move();
	}
	for (var i = 0; i < fog.length; i++) {
		fog[i].draw();
		fog[i].move();
	}
	// occasionally adding new objects
	// making them dependent on frameC affects the distance apart they will be from each other
	if ((frameC % 30 == 0) & (random(1) < .5)) {
		newTree = makeTree(width);
		trees.push(newTree);
	}
	if ((frameC % 100 == 0) & (random(1) < .5)) {
		newCloud = makeCloud(width);
		fog.push(newCloud);
	}
	if ((frameC % 5 == 0) & (random(1) < .5)) {
		newFly = makeFirefly(width);
		fireflies.push(newFly);
	}
	// want the birds flying by to be kind of rare
	if (random(1) < .008) {
		newBird = makeBird();
		birds.push(newBird);
	}
	frameC++;
	// removing elements that have passed (so list doesnt get too long)
	removeOldTrees();
	removeOldClouds();
	removeOldFlies();
}

// most code below here is straightforward

// each element has its own object and unique properties

function makeTree(startingPt) {
	var tree = {
		x: startingPt,
		proximity: random(1/3, 1),
		draw: drawTree,
		move: moveTree
	}
	return tree;
}

function makeCloud(startingPt) {
	var cloud = {
		x: startingPt,
		visibility: random(1),
		cloudW: random(80, 300),
		elevation: random(50),
		draw: drawCloud,
		move: moveCloud,
	}
	return cloud;
}

function makeFirefly(startingPt) {
	var firefly = {
		x: startingPt,
		y: random(height),
		velX: random(-2, 1.5),
		velY: random(-2, 2),
		sizeF: random(10),
		draw: drawFirefly,
		move: moveFirefly
	}
	return firefly;
}

function makeBird() {
	var bird = {
		x: width,
		y: random(80),
		draw: drawBird,
		move: moveBird,
	}
	return bird;
}

function drawBird() {
	fill(0);
	triangle(this.x, this.y, this.x + 20, this.y - 10, this.x + 20, this.y + 10);
}

function moveBird() {
	this.x -= 5;
}

function drawFirefly() {
	fill(226, 220, 145, 60);
	ellipse(this.x, this.y, this.sizeF * 1.5, this.sizeF * 1.5);
	fill(226, 220, 145);
	ellipse(this.x, this.y, this.sizeF, this.sizeF);
}

function moveFirefly() {
	this.x -= 1.5;
	this.x += this.velX;
	this.y += this.velY;
}

function drawCloud() {
	fill(255, this.visibility * 100);
	rect(this.x, height - this.cloudW / 2 - this.elevation, this.cloudW, this.cloudW / 2);
}

function moveCloud() {
	this.x -= .5;
}

function drawTree() {
	fill(10 + 70 * this.proximity, 30, 55);
	rect(this.x, 0, 30 * this.proximity, height * this.proximity);
}

function moveTree() {
	this.x -= 1;
}


// these 'remove' functions work by looping through the objects
// and getting rid of whats offscreen
function removeOldTrees() {
	for (var i = 0; i < trees.length; i++) {
		if (trees[i].x + 30 * trees[i].proximity < 0) {
			trees.splice(i, 1);
		}
	}
}

function removeOldClouds() {
	for (var i = 0; i < fog.length; i++) {
		if (fog[i].x + fog[i].cloudW < 0) {
			fog.splice(i, 1);
		}
	}
}

function removeOldFlies() {
	for (var i = 0; i < fireflies.length; i++) {
		if ((fireflies[i].x + fireflies[i].sizeF / 2 < 0) ||
			(fireflies[i].y + fireflies[i].sizeF / 2 < 0) ||
			(fireflies[i].y + fireflies[i].sizeF / 2 > height)) {
			fireflies.splice(i, 1);
		}
	}
}

This project was really fun! I’m in the Halloween/fall mood so I wanted to do something kind of dark and decided to go with a forest landscape.

The trees look simple but were probably the most complex part of the project. I wanted to give a feeling of depth so the further trees are smaller and darker in color. However, this made it look really bad when the trees were first initially generated because some would overlap and look really weird so I tried my best to avoid that in setup. The  fireflies were pretty easy to do but I think they might be my favorite part of the project because they’re just nice to look at.