Fern
to generate a new and unique variation
Every variart piece is open source, you can see exactly how it is drawn from the code.
// adapted from https://raw.githubusercontent.com/odewahn/codebox_recursion_examples/master/plant.pde
var branches = 3; // Number of branches per line
var depth = 6; // Recursive depth
var minAngle = 15.0; // Minimum angle for new branch
var maxAngle = 20.0; // Maximum angle for new branch
var minLength = 0.30; // Minimum length of new branch, as a pct of current length
var maxLength = 0.80; // Maximum length of new branch, as a pct of current length
var foregroundColor = '#E8F2D8';
var backgroundColor = '#798C32';
function Vector(x, y, r, theta) {
this.x = x;
this.y = y;
this.r = r;
this.theta = theta;
}
Vector.prototype.getEndPointX = function() {
return this.x + this.r * Math.cos(this.theta / 57.3);
}
Vector.prototype.getEndPointY = function() {
return this.y + this.r * Math.sin(this.theta / 57.3);
}
function fractal(v, n) {
if (n > 0) {
var dir = 1; // control alternating direction of the branch
s.line(v.x, v.y, v.getEndPointX(), v.getEndPointY()).attr({stroke: foregroundColor});
for (var i = 0; i < branches; i++) {
// Create a random vector based on the current one
var r = new Vector(v.x, v.y, v.r, v.theta);
r.r = getRandomInt(v.r * minLength, v.r * maxLength); // select a random length
r.x = r.getEndPointX(); // shift the x-origin
r.y = r.getEndPointY(); // shift the y-origin
r.theta += dir * getRandomInt(minAngle, maxAngle); // shift the angle a bit
dir = dir * -1; // alternate branch direction
fractal(r, n - 1); // recurse
}
}
}
s.rect(0, 0, width, height).attr({fill: backgroundColor});
var seed = new Vector(0, 0, 225, 45);
fractal(seed, depth);
Copyright © 2014–2025 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io