A one-minute painted explainer of what this block builder actually runs, followed by the ideas behind it and where to read more.
This builder turns a tiny program into a tree. You stack command blocks like Forward fifty, Branch and Recurse, and a chalk turtle follows them. The default procedure is only seven blocks. Draw forward, open a branch, turn left forty-five degrees, recurse, close the branch, turn right forty-five, and recurse again. Recurse means: run this whole procedure again, from wherever the turtle stands. Branch saves that spot, so the turtle can jump back to it afterwards. The depth slider is what stops it. Each call draws one segment and starts two more, so depth four draws fifteen segments ending in eight tips. Every extra level doubles the tips. Because the turns add up and every segment stays fifty units long, the branches curl back inward instead of spreading out. At depth five, two lines land exactly on top of each other. That's abstraction: one named idea, reused at every scale. Drag in your own blocks, change the depth, and watch the shape change.
The default procedure contains two Recurse blocks, so every call that is still under the depth limit draws one 50-unit segment and spawns two more calls. Depth d therefore draws 2^d − 1 segments with 2^(d−1) tips: 1, 3, 7, 15, 31 and 63 segments for depths 1 to 6.
Branch pushes the turtle's position and heading; End Branch pops them back. Only the first Recurse is wrapped in a branch. The second one simply continues from wherever the turtle ended up, after turning right 45°.
Turns accumulate down the tree and segments never shrink, so by the third level branches point sideways and then downward. At depth 5 one segment is drawn twice on the same spot, and at depth 6 the drawing reaches below its own starting point. Classic fractal trees shrink each level and use smaller angles.
The blocks are a turtle-graphics language in the spirit of Logo; push/pop branching is the same trick L-systems use to model plant growth.
Naming the whole procedure and calling it from inside itself lets seven blocks describe hundreds of lines, which is the core idea of procedural abstraction.
Background on the forward/turn drawing model, from Logo onward.
How bracketed push/pop commands draw branching plants.
Base cases, recursive calls and call trees.
The drawing-state stack the tool's Branch block uses.
Counts in the video come from running this page's own drawing code with its default seven-block procedure.
How can the same short sequence produce more drawing steps at a greater depth?
Drag primitives into the procedure, reorder them, and change the depth to redraw the canvas. Recurse calls the whole procedure again; the depth check stops further calls. Branch and End Branch save and restore drawing state so later commands can return to an earlier position and orientation.
Forward 50 is a drawing-space instruction; fitting the picture can scale its visible length. This is a small custom command interpreter, not a general Scheme evaluator. Rearranging Branch/End Branch can leave an unbalanced graphics-state stack. Reset empties the procedure instead of restoring the default example, and Export PNG saves the canvas rather than an editable procedure file.
Keep the seven default blocks and move Recursion Depth from 4 to 1. At depth 1 the outer procedure runs once, drawing one Forward segment; both Recurse calls stop immediately. At depth 4 the two recursive calls produce 1 + 2 + 4 + 8 = 15 procedure executions and 15 Forward segments. Overlapping segments may not look like fifteen separate lines.
The implementation returns whenever the current depth is at least the selected maximum. That is its base case. Each Recurse command otherwise starts the procedure at the next depth. Removing both Recurse blocks makes the depth slider irrelevant to the number of procedure executions. MDN explains the distinction between a stopping base case and a recursive case. MDN: recursion and base cases
Branch maps to p5.js push(), and End Branch maps to pop(). These save and restore transforms and drawing styles. Keep them paired, with the opening Branch before its End Branch. A Recurse block does not automatically restore the caller’s drawing transform, so command order and explicit branch pairing affect the resulting shape; increasing depth alone does not guarantee a symmetric tree. p5.js: saving and restoring drawing state
Explains self-calls and the condition that ends recursion.
Documents paired push/pop behavior for styles and transformations.