Click to drop a seed that grows into a tree

GenerativeTree.js

//TODO:
// Fix leaves so that they are actually on the tree.
// Right now leaves blow in the wind

var WIDTH = 500;
var HEIGHT = 600;

function setup() {
	createCanvas(WIDTH,HEIGHT);
	smooth();
}


// var seedlings = [];
var seedlings;
var plants = [];
var leaves = [];

function draw() {
	background(240);
	// Multiple Seedlings
	// if this.planted is true, stop redrawing. just have a static object
	// for (var i = 0; i < seedlings.length; i++){
	// 	seedlings[i].update();
	// 	seedlings[i].draw();
	// }
	// Single Seedling
	if (seedlings != null){
		seedlings.update();
		seedlings.draw();
	}
	// stroke();
	for(var x = 0; x < plants.length; x++){
		plants[x].draw();
	}
}

var leafLengthRatio = .5;
var leafWidthRatio = .3;

function createLeaf(x1, y1, x2, y2){
	var distance = sqrt(sq(x2-x1)+sq(y2-y1));
	var leafLength = distance * leafLengthRatio;
	var leafWidth = distance * leafWidthRatio;
	var r = sqrt(sq(leafLength)+sq(leafWidth));
	var initialAngle = atan((y2-y1)/(x2-x1));
	// Trying Polar Coordinates
	var addAngle = atan(leafLengthRatio/leafWidthRatio);
	var angle = initialAngle + addAngle;
	var dx = r * cos(angle);
	var dy = r * sin(angle);
	var oppAngle = initialAngle - addAngle;
	var oppdx = r * cos(oppAngle);
	var oppdy = r * sin(oppAngle);
	// Debugging
	// console.log("Initial Angle:" + initialAngle);
	// console.log("addAngle: " + addAngle);
	// console.log("Angle: " + angle);
	// console.log("oppAngle: " + oppAngle);
	// Leaf Design
	if (x2 - x1 >= 0){
		beginShape();
			// point(x1+oppdx,y1+oppdy);
			// point(x1+dx,y1+dy);
			vertex(x1, y1);
			quadraticVertex(x1+dx,y1+dy , x2, y2);
			quadraticVertex(x1+oppdx,y1+oppdy , x1, y1);
		endShape();
	} else {
		beginShape();
			// point(x1+oppdx,y1+oppdy);
			// point(x1+dx,y1+dy);
			vertex(x1, y1);
			quadraticVertex(x1-dx,y1-dy , x2, y2);
			quadraticVertex(x1-oppdx,y1-oppdy , x1, y1);
		endShape();
	}
}

function mouseClicked(){
	// seedlings.push(new Seedling(mouseX,mouseY));
	seedlings = new Seedling(mouseX, mouseY);
	plants = [];
}

// Leaf colors
// 30, 147, 45
// 77, 168, 59
// 112, 141, 19
// 130, 212, 53

var colors = [[30,147,45], [77,168,59], [112,141,19], [130,212,53]];

function Leaf(x1, y1, distance, angle){
	this.length = random(15,30);
	this.perpendicularAngle = -1/angle;
	this.distance = random(0,distance);
	this.dx = this.distance * cos(angle);
	this.dy = this.distance * sin(angle);
	this.x1 = x1 + this.dx;
	this.y1 = y1 + this.dy ;
	this.x2 = this.x1 + this.length * cos(this.perpendicularAngle);
	this.y2 = this.y1 + this.length * sin(this.perpendicularAngle);
	this.color = colors[0];
	this.r = this.color[0];
	this.g = this.color[1];
	this.b = this.color[2];

	this.makeLeaf = function(){
		// console.log([this.r,this.g,this.b]);
		strokeWeight(0);
		fill(this.r,this.g,this.b);
		console.log([this.x1, this.y1, this.x2, this.y2])
		createLeaf(this.x1, this.y1, this.x2, this.y2);
	}

}

function Seedling(mouseX, mouseY){
	this.x = mouseX;
	this.y = mouseY;
	this.dx = 1;
	this.dy = 1;
	this.r = 66;
	this.g = 244;
	this.b = 137;
	this.increaseColor = true;
	this.color = color(this.r, this.g, this.b);
	this.planted = false;
	this.draw = function() {
		this.smoothColorFade();
		fill(this.color);
		strokeWeight(0);
		ellipse(this.x, this.y, 20, 20);
	};
	this.smoothColorFade = function(){
		if(this.increaseColor && this.r < 205 && this.b < 220){
			this.r += 3.475; // 40 steps from 66 to 205
			this.b += 2.075; // 10 steps from 137 to 220
			console.log("increasing");
		} else if (this.increaseColor) {
			this.increaseColor = false;
			console.log("switch down");
		} else if (!this.increaseColor && this.r > 66 && this.b > 137){
			this.r -= 3.475;
			this.b -= 2.075;
			console.log("decreasing");
		} else {
			this.increaseColor = true;
			console.log("switch up");
		}
		this.color =  color(this.r, this.g, this.b);
	}
	this.startedGrowing = function(){
		return this.planted;
	}
	this.update = function() {
		if(!this.planted){
			var changeDirection = random(0,255);
			if (changeDirection < 10){
				this.dx = this.dx*-1;
			}
			if (this.x + this.dx >= WIDTH){
				this.x = this.x + this.dx - WIDTH;
			} else if (this.x + this.dx <= 0){
				this.x = this.x + this.dx + WIDTH;
			} else {
				this.x = this.x + this.dx;
			}
			this.x = this.x + this.dx;
			if (this.y + this.dy > HEIGHT){
				this.planted = true;
				plants.push(new Plant(this.x, this.y, 1));
				console.log("planted");
			} else {
				this.y = this.y + this.dy;
			}
		}
	};
}

var numChildren = 3;
var maxLevels = 3;
var GROWTHSTEPS = 100;
// Need to figure out to generate plant
function Plant(x, y, level) {
	this.level = level;
	this.children = [];
	// each leaf is an object
	// Stores x1,y1,x2,y2
	this.leaves = [];
	this.numLeafs;
	this.grown = false;
	this.x = x;
	this.y = y;
	this.endX = this.x + (sq(this.level) * (random(-8, 8)));
	this.endY = this.y - (this.level * (random(25,60)));
	this.angle = atan((this.endX - this.x)/(this.endY-this.y));
	this.distance = sqrt(sq(this.endX-this.x)+sq(this.endY-this.y));

	// this.step = 1;

	this.color = color(145,35,35);
	this.draw = function(){
		fill(this.color);
		strokeWeight(7 - 2 * this.level);
		// if (this.step < GROWTHSTEPS){
		// 	line(this.x, this.y, this.endX/(GROWTHSTEPS - this.step), this.endY/(GROWTHSTEPS - this.step));
		// 	this.step++;
		// } else {
		line(this.x, this.y, this.endX, this.endY);
		if (this.level != 1 && !this.grown){
			this.numLeafs = random(1,3);
			for (var i = 0; i < this.numLeafs; i++){
				this.leaves.push(new Leaf(this.x, this.y, this.distance, this.angle));
			}
			this.grown = true;
		}
		for (var x = 0; x < this.numLeafs; x++){
			this.leaves[x].makeLeaf();
		}
		if (this.level <= maxLevels){
			for (var i = 0; i < numChildren; i++){
				this.children.push(new Plant(this.endX, this.endY, this.level + 1))
			}
			for (var x = 0; x < numChildren; x++){
				this.children[x].draw();
			}
		}
		// }
	}
}