Fern Generator

% Remco Bloemen % 2014-02-27

Spend this evening playing with the Processing digital art development environment and it’s javascript export plugin Processing.js. Starting with the Tree example I created the following Lindenmayer system:

Your browser does not support the canvas tag.

Examples

Try to find the points that produce these:

Source code

And of course, here is the full source code to hack on tree.pde:

float theta;
float gamma;
int oldMouseX;
int oldMouseY;
float detail;
int counter;

void setup()
{
	size(560, 360);
	detail = 5;
}

void draw()
{
	background(0);
	frameRate(30);
	stroke(40);
	float a = -50 + (mouseX / (float) width) * 100f;
	float b = -5 + (mouseY/ (float) height) * 100f;
	theta = radians(b);
	gamma = radians(a);
	if(mouseX == oldMouseX && mouseY == oldMouseY) {
		counter++;
		if(counter == 10) {
		counter = 0;
		if(detail >= 1)
			detail = detail - 1;
		if(detail < 0.5)
			detail = 0.5;
		}
	} else {
		detail = 5;
	}
	oldMouseX = mouseX;
	oldMouseY = mouseY;
	translate(width/2,height);
	strokeWeight(12);
	line(0,0,0,-120);
	translate(0,-120);
	branch(120);
}

void branch(float h)
{
	h *= 0.66;
	rotate(gamma);
	if (h > detail) {
		pushMatrix();
		rotate(theta);
		stroke(255 - 2.5 * h);
		strokeWeight(h / 10);
		if(h < 5)
			strokeWeight(.5);
		line(0, 0, 0, -h);
		translate(0, -h);
		branch(h);
		popMatrix();
		pushMatrix();
		rotate(-theta);
		stroke(255 - 2.5 * h);
		strokeWeight(h / 10);
		line(0, 0, 0, -h);
		translate(0, -h);
		branch(h);
		popMatrix();
	}
}