Category: Uncategorized

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.

Supawat’s Portrait

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Hallow-Eve: Recusively generate a forest of Sakura.
// Using a Lindenmayer system, each plant grows towards the sun.

var terrainSpeed = 0.0005;
var terrainDetail = 0.005;


var w = 480;
var h = 480;
var x_create = w + 50;

// Global Variable
var PLANT;
var PLANTS = [];
var segment_l = h * .1;
var r = h * .05 * .5;
var common_ratio = .618033 //Golden Ratio
var food;

// Recursively generates a plant model
var max_i = 5; // Max iteration depth
var cur_i = 0;
var DRAW_i = 0; // DRAW's iteration depth

///// MODEL /////
// Creates the sun for plants to grow towards
function food_create(x = w / 2, y = -h * 2) {
	this.x = x;
	this.y = y;
}

// Creates plants node. Nodes that have .child are branches,
// and nodes without .child are leaves.
function create_plant_node(x, y) {
	this.x = x;
	this.y = y;
	this.x0 = this.x;
	this.y0 = this.y;
	this.child = [];
	this.x1 = null;
	this.y1 = null;
}

// Grows plant by making plant seek sunlight
function grow(plant, cur_i) {
	// Using the golden ratio, plant's branch size is a geometric sequence
	l = segment_l * (common_ratio ** (cur_i))
		// Randomly generate the next node via reducing
		// distance from plant ro sun
	do {
		angleMode(DEGREES);
		if (cur_i == 0) {
			angle = 5;
			theta = random(-90 - angle, -90 + angle);
		} else {
			theta = random(0, 360);
		}
		plant.x1 = plant.x0 + (l * cos(theta));
		plant.y1 = plant.y0 + (l * sin(theta));
		d_new = dist(plant.x1, plant.y1, food.x, food.y)
		d_old = dist(plant.x0, plant.y0, food.x, food.y)
	}
	// Keep generating until the new distance is less than the current one
	while (d_new > d_old)
	plant.child = [];
	// Randomly decide how many children(branches) a node should have
	for (var x = 0; x < random(1, 4); x++) {
		plant.child.push(new create_plant_node(plant.x1, plant.y1));
	}
}

// Recursively generates plant
function generate_plant(PLANT, cur_i, max_i) {
	// Break Base
	if (cur_i == max_i) {
		return
		// Continue case
	} else {
		grow(PLANT, cur_i);
		cur_i++;
		for (i in PLANT.child) {
			generate_plant(PLANT.child[i], cur_i, max_i)
		}
	}
}

///// DRAW /////
// Recursively draws plant
function draw_PLANT(plant, DRAW_i) {
	DRAW_i++; // Increases DRAW's Depth counter
	stroke(255 * .3)
	strokeCap(SQUARE);
	strokeWeight((h * .0125) * (common_ratio ** DRAW_i))
		// Break case: Flowers
		// If node has no children; draw leaf.


	// print(plant);
	if (plant.child == []) {
		fill(255, 255, 255);
		ellipse(plant.x, plant.y, (2 / 600) * w, (2 / 600) * w);
		return
	} // If node has chldren; draw branches
	else {
		r = r ** common_ratio;
		if (plant.child.length != 0) {
			for (i in plant.child) {
				line(plant.x, plant.y,
					plant.child[i].x, plant.child[i].y)
				draw_PLANT(plant.child[i], DRAW_i);
			}
		}
	}
}

///// SETUP /////
function setup() {
	createCanvas(w, h);
	background("#ff9900");
	food = new food_create();

	// Row Cols Controller
	num_tree = 3;
	num_row = 4;
	y_pos = 0;

	// Translates Row and Col of Trees
	// Rows
	y_pos = w * .75;

	PLANT = new create_plant_node(x_create, y_pos);
	generate_plant(PLANT, cur_i, max_i);
	PLANTS.push(PLANT);
}

// Recursively move each node of tree
function tree_move(tree) {
	D = -1;
	tree.x += D;
	tree.x0 += D;
	tree.x1 += D;

	// Break
	if (tree.child == []) {
		return
	} else {
		// Recurse
		for (i in tree.child) {
			tree_move(tree.child[i]);
		}
	}
}

// To reduce system overload
function kill_plant() {
	if (PLANTS.length > 5) {
		PLANTS.shift();
	}
}


var time = 1;
function draw() {
	time += 1
	background("#ff9900");
	kill_plant();

	// Represent and move trees
	for (index in PLANTS) {
		tree_move(PLANTS[index])
		draw_PLANT(PLANTS[index], DRAW_i);
	}
	
	// Create new tree every modulo time
	if (time % 160 == 0) {
		PLANT = new create_plant_node(x_create, y_pos);
		generate_plant(PLANT, cur_i, max_i);
		PLANT.time = time;
		PLANTS.push(PLANT);
	}
	// Draw Floor
	fill(255 * .3);
	rect(0, h * .75, w, h);
}

The most difficult part of this project was to get each node of the tree to move. Recursively creating the tree was easy because I had already done it before, but doing a DOF search for each node and moving it along was a challenge because it was hard to keep track of variables. I also didn’t expect recursive trees to be so computationally expensive to make, therefore I can only limit it to a few moving ones.