My take on the Pythagoras Tree.
- Symmetry is used to lerp the angle to PI/4 at branches
- AngleMod and AngleTest can be used to swap the left- and right-angle at certain depths.
Pythagoras Tree (variation)
Pythagoras Tree (variation)
Pythagoras Tree (variation)
#fractal #pythagor
Log in to post a comment.
const turtle = new Leonardo();
const rotAngle = 1.07; // min=0, max=1.57, step=0.001
const aspect = 3.5; // min=.5, max=10, step=0.001
const size = 10; // tree will be transformed to fit inside the bounding box of the canvas
const symmetry = 0.6; // min=0, max=1, step=0.001
const cutOffSize = 0.125; // min=0, max=0.5, step=0.001
const drawMode = 0; // min=0, max=1, step=1 (Outline, Boxes)
const angleModulo = 3; // min=0, max=3, step=1 (Regular, Coniferous, Semi-Coniferous, Irregular)
const tension = 1; // min=0, max=1, step=0.001
turtle.tension = tension;
const [angleMod, angleTest] = angleModulo == 0 ? [0,0] : angleModulo == 1 ? [2, 0] : angleModulo == 2 ? [4, 1] : [5, 1];
const root = new PythagorasTree(size, aspect, rotAngle, symmetry, cutOffSize, angleMod, angleTest);
// find scale and offset to transform tree inside bounding box of canvas
const scale = 180 / Math.max(root.max[0]-root.min[0], root.max[1]-root.min[1]);
const offset = [-(root.max[0]+root.min[0])/2, -(root.max[1]+root.min[1])/2];
const t = (p) => [(p[0]+offset[0])*scale, (p[1]+offset[1])*scale];
// We use a 'leonardo', so we have to move to warm up at the start point of the curve
turtle.jump(t(root.corners[0]));
turtle.goto(t(root.corners[0]));
const stack = [root];
function walk(i) {
const node = stack.pop();
const corners = node.corners;
if (!node.rightSide) {
node.rightSide = true;
if (drawMode == 1) { // box
turtle.penup();
for (let j=0; j<7; j++) {
turtle.goto(t(node.corners[j % 4]));
turtle.pendown();
}
} else { // outline
stack.push(node); // push node so we can draw left side when childs are all done
turtle.goto(t(corners[1]));
}
if (node.left || node.right) {
if (node.right) stack.push(node.right);
if (node.left) stack.push(node.left);
} else if (drawMode == 0) { // outline, draw top of node
turtle.goto(t(corners[2]));
}
} else if (drawMode == 0) { // outline, draw left side
turtle.goto(t(corners[3]));
}
return stack.length > 0 ? true : turtle.goto(t(root.corners[3])); // cool down of leonardo at last walk
}
////////////////////////////////////////////////////////////////
// Pythagoras Tree code - Created by Reinder Nijhoff 2022
//
// A really simple implementation. If you want a more scalable
// solution, it is probably better to use a stack based approach.
//
// https://turtletoy.net/turtle/da47b4247b
////////////////////////////////////////////////////////////////
function PythagorasTree(size, aspect, rotAngle, symmetry, cutOffSize, angleMod = 0, angleTest = 0, maxDepth = 19) {
const scl2 = (a,b) => [a[0]*b, a[1]*b];
const add2 = (a,b) => [a[0]+b[0], a[1]+b[1]];
const rot2 = (a) => [Math.cos(a), -Math.sin(a), Math.sin(a), Math.cos(a)];
const trans2 = (m,a) => [m[0]*a[0]+m[2]*a[1], m[1]*a[0]+m[3]*a[1]];
const lerp = (a,b,t) => a * (1 - t) + b * t;
class Node {
constructor ( angle, size, depth = 0, center = [0,0] ) {
this.angle = angle;
this.size = size;
this.center = center;
this.depth = depth;
this.max = [-1e5, -1e5];
this.min = [ 1e5, 1e5];
this.left = undefined;
this.right = undefined;
this.bbox(...this.corners);
if (depth < maxDepth) {
let leftAngle = depth % angleMod > angleTest ? rotAngle : Math.PI / 2 - rotAngle;
leftAngle = lerp(leftAngle, Math.PI / 4, symmetry * depth / maxDepth);
const rightAngle = Math.PI / 2 - leftAngle;
const leftWidth = Math.cos(leftAngle) * size;
if (leftWidth > cutOffSize) {
this.left = new Node( angle - leftAngle, leftWidth, depth + 1,
add2(this.corners[1], trans2(rot2(angle - leftAngle), [leftWidth, aspect * leftWidth])));
this.bbox(this.left.min, this.left.max);
}
const rightWidth = Math.cos(rightAngle) * size;
if (rightWidth > cutOffSize) {
this.right = new Node( angle + rightAngle, rightWidth, depth + 1,
add2(this.corners[2], trans2(rot2(angle + rightAngle), [-rightWidth, aspect * rightWidth])));
this.bbox(this.right.min, this.right.max);
}
}
}
get corners() {
const up = [ Math.sin(this.angle)*this.size*aspect, Math.cos(this.angle)*this.size*aspect];
const right = [ Math.cos(this.angle)*this.size, -Math.sin(this.angle)*this.size];
return [[-1,-1],[1,-1], [1,1], [-1,1]].map(c => add2(add2(this.center, scl2(up, c[0])), scl2(right, c[1])));
}
bbox(...points) {
points.forEach( p => {
this.max[0] = Math.max(this.max[0], p[0]), this.max[1] = Math.max(this.max[1], p[1]);
this.min[0] = Math.min(this.min[0], p[0]), this.min[1] = Math.min(this.min[1], p[1]);
});
}
}
return new Node(Math.PI, size);
}
////////////////////////////////////////////////////////////////
// Catmull-Rom Splines utility code. Created by Reinder Nijhoff 2022
// https://turtletoy.net/turtle/01e218e32f
// https://qroph.github.io/2018/07/30/smooth-paths-using-catmull-rom-splines.html
////////////////////////////////////////////////////////////////
function Leonardo(x, y) {
function scl2(a,b) { return [a[0]*b, a[1]*b]; }
function add2(a,b) { return [a[0]+b[0], a[1]+b[1]]; }
function sub2(a,b) { return [a[0]-b[0], a[1]-b[1]]; }
function len2(a) { return Math.sqrt(a[0]**2 + a[1]**2); }
function dist2(a, b) { return len2(sub2(a,b)); }
class Leonardo extends Turtle {
constructor(x, y) {
super(x, y);
this.alpha = 0;
this.tension = 0;
}
goto(x, y) {
const p = Array.isArray(x) ? [...x] : [x, y];
this.path = this.path ? this.path : [];
this.path.push(p);
if (this.isdown() && this.path.length >= 4) {
this.path = this.path.slice(-4);
this.catmullRomSpline(...this.path);
} else if (!this.isdown()) {
this.path = [p];
}
}
catmullRomSpline(p0, p1, p2, p3) {
const subdiv = dist2(p1, p2)|0 + 8;
const t01 = Math.pow(dist2(p0, p1), this.alpha);
const t12 = Math.pow(dist2(p1, p2), this.alpha);
const t23 = Math.pow(dist2(p2, p3), this.alpha);
const m1 = scl2( add2(sub2(p2, p1), scl2( sub2(scl2( sub2(p1, p0), 1 / t01), scl2( sub2(p2, p0), 1 / (t01 + t12))), t12)), 1 - this.tension);
const m2 = scl2( add2(sub2(p2, p1), scl2( sub2(scl2( sub2(p3, p2), 1 / t23), scl2( sub2(p3, p1), 1 / (t12 + t23))), t12)), 1 - this.tension);
const a = add2( add2( scl2(sub2(p1, p2), 2), m1), m2);
const b = sub2( sub2( sub2( scl2(sub2(p1, p2), -3), m1), m1), m2);
if (this.isdown() && (this.x() != p1[0] || this.y() != p1[1])) {
this.penup();
super.goto(p1);
this.pendown();
}
for (let i=0; i<subdiv; i++) {
const t = i/subdiv;
super.goto(add2( add2( add2 ( scl2(a, t * t * t), scl2(b, t * t)), scl2(m1, t)), p1));
}
super.goto(p2);
}
}
return new Leonardo(x,y);
}