![\"Animated](\"\/user\/pages\/02.blog\/animating-a-tree-fractal\/_tree.gif?decoding=auto&fetchpriority=auto\")
<\/p>\nThis article walks through the code used to animate a tree fractal.<\/p>\n\n
I really enjoy fractals and for the longest time I've been meaning to draw the classical tree fractal that starts with the main trunk which then successively splits into two branches, that themselves can be seen as the full tree.<\/p>\n
Today I quickly put together the code to do this and then I animated the rotation of the tree to make sure it's easy to see the self-similarity of the tree.<\/p>\n
This is the animated GIF that I produced:<\/p>\n
<\/p>\n
To draw the tree I wrote a recursive function (obviously!) that draws a trunk and then recursively draws the remainder of the tree.\nTo “recursively draw the remainder of the tree” I needed to compute the two trunks that stem from the trunk I just drew, so to do that I:<\/p>\n
The recursive function looks like this:<\/p>\n
def tree(screen, start, to, depth=0):\n if depth >= 15:\n return\n sx, sy = start\n tx, ty = to\n pygame.draw.line(\n screen,\n BLACK,\n (WIDTH \/\/ 2 + sx, HEIGHT \/\/ 2 - sy),\n (WIDTH \/\/ 2 + tx, HEIGHT \/\/ 2 - ty),\n 1,\n )\n direction = np.array([[tx - sx], [ty - sy]])\n for angle in [pi \/ 3, -pi \/ 3]:\n rot = np.array(\n [\n [cos(angle), -sin(angle)],\n [sin(angle), cos(angle)],\n ]\n )\n new_direction = ((rot @ ((direction) \/ 1.7))).reshape((2,))\n tree(screen, to, to + new_direction, depth + 1)<\/code><\/pre>\nOne important thing that I ended up doing, and that explains the weird calculations inside the call to pygame.draw.line<\/code>, is that I decided to do all calculations as if the coordinate system were the standard one from maths class: the origin is at the centre of the pygame window and the values of the coordinate y increase by going up, not by going down.\nThen, I need to convert from this sytem to the pygame system right before drawing, which is why I add (WIDTH \/\/ 2, HEIGHT \/\/ 2)<\/code> to the points we're drawing and then for the y coordinate I need to use the symmetric value (-y<\/code> instead of y<\/code>) to compensate for the fact that the y axis is flipped.<\/p>\nThe full script to draw the tree looks like this:<\/p>\n
from math import sin, cos, pi\nimport sys\n\nimport numpy as np\nimport pygame\nimport pygame.locals\n\nWIDTH, HEIGHT = 600, 400\n\nWHITE = (255, 255, 255)\nBLACK = (0, 0, 0)\n\nscreen = pygame.display.set_mode((WIDTH, HEIGHT))\n\ndef tree(screen, start, to, depth=0):\n ...\n\ndef main() -> None:\n screen.fill(WHITE)\n tree(screen, np.array((0, -200)), np.array((0, 0)))\n pygame.display.flip()\n pygame.image.save(screen, \"tree.png\")\n\n while True:\n for event in pygame.event.get():\n if event.type == pygame.locals.QUIT:\n pygame.quit()\n sys.exit(0)\n\nif __name__ == \"__main__\":\n main()<\/code><\/pre>\nAnimating the tree<\/a><\/h2>\nTo make it easier to animate the tree I first started by splitting the function tree<\/code> in two:<\/p>\n- a...<\/li><\/ol>","summary":"This article walks through the code used to animate a tree fractal.","date_modified":"2025-07-23T16:49:02+02:00","tags":["fractals","mathematics","programming","pygame","python","recursion","visualisation"],"image":"\/user\/pages\/02.blog\/animating-a-tree-fractal\/thumbnail.webp"},{"title":"(More) Animations from first principles","date_published":"2023-09-08T12:00:00+02:00","id":"https:\/\/mathspp.com\/blog\/more-animations-from-first-principles-in-5-minutes","url":"https:\/\/mathspp.com\/blog\/more-animations-from-first-principles-in-5-minutes","content_html":"
Create a zooming animation from first principles in Python. In 5 minutes. Kind of.<\/p>\n\n