My Background in Web Development

Before diving deeper, it's essential to provide some context regarding my background in web development. I am still learning the ropes of this field, but I have managed to complete several advanced projects in a relatively short time, largely due to my passion for problem-solving.

My blog runs on WordPress, which means I have invested considerable time learning custom WordPress development along with PHP and JavaScript. Given this foundation, one might assume that creating animated recursion would be straightforward. However, I quickly learned that mastering animation is crucial for such projects—this was my first foray into working with animations, and it did not go smoothly.

Animated Recursion with p5.js

Initially, I utilized a library called Turtle in Python, which simplifies graphics rendering. For the web version, I decided to use p5.js, a popular open-source graphics library that is reputed to be beginner-friendly. Confident in my choice, I immediately began transferring my Python code to this new library. My first obstacle was simply animating "something."

I soon discovered that p5.js calculates geometries based on input and renders them directly; it does not pre-compute anything, resulting in only static outputs. This realization led me to devise a time-based rendering algorithm to animate geometric drawings. After grappling with the coordinate system for a few hours, I succeeded in animating a single line. Once the animation concluded, I cleverly replaced it with a completed render—a trick that would go unnoticed by users. This felt like a significant victory.

Unfortunately, I struggled to animate anything beyond that single line. After investing many more hours, I recognized a fundamental flaw in my approach.

Animations Are Asynchronous, Recursion Is Synchronous

The challenge arose from the fact that p5.js operates at 60 frames per second (by default). This means that the code, including my animation algorithm, executes 60 times a second, embodying asynchronous code principles in web development. An asynchronous line of code does not wait for its predecessor to finish; it executes as soon as the call stack allows.

However, my animation algorithm was not a regular one; it was recursive. In a recursive algorithm, each line must execute only after the previous line completes. Thus, combining recursion with animation is inherently problematic. So, how could I successfully animate recursion?

Web Development Insights from Game Development

After much contemplation, I sought insights from others who had encountered similar issues. To my surprise, I found that this problem is commonplace in video game development. The solution lay in the realization that my recursion algorithm is not infinite; it is finite, with a clearly defined base case. For more detailed insights, refer to my essay on how recursion functions.

This understanding allowed me to pre-compute my entire recursive algorithm in advance and store each animation state as an object.

By asynchronously calling these objects in my p5.js animation algorithm as they became available, I effectively developed two distinct algorithms:

1. One to pre-compute my recursive algorithm.
2. Another to animate the pre-computed states.

With this framework established, one might think my work was done. However, I had more tasks ahead.

Final Touches for Animated Recursion

If I were the sole user of this web application, I could consider it complete. However, I needed to ensure it functioned seamlessly across various devices, including smartphones, tablets, laptops, and monitors. This required computing the canvas size according to the screen dimensions and adjusting geometry sizes accordingly. To enhance user experience, I added several features:

1. Increased animation speeds for higher iterations.
2. Thinner pen strokes for higher iterations.
3. A "black" leading line to mimic the Turtle graphics from Python.

The end result was quite satisfying. If you're interested in experimenting with this model, you can access it here. While I don't claim to be an expert, I hope my experiences provide valuable insights.

I am currently exploring more intriguing recursive web applications. If this topic intrigues you, stay tuned for future updates. For those interested in the hassle-free Python version of the recursion algorithm, you can find it here.

A comprehensive overview of my work to date can be found here. Enjoy!

If you wish to support my future projects, consider contributing on Patreon.

You can read the original essay here.