An application of the Fourier series to recreate a drawing with rotating circles. See this video for an explanation of the math (requires calculus).
An old project, supposed to be for application into AP Computer Science A.
I've always loved to watch 3blue1brown. One day two years ago, during my freshman year (of high school), I watched a certain video of his (probably for at least the second time) and felt inspired enough to try to recreate the circle drawings shown in the video.
This project brought me back to a Coding Train video (or perhaps two) I had seen a year or so prior to that, back in seventh or eighth grade when I was very interested in both computer science and math, but I stress that I did not rewatch these videos while writing the code for this website; unlike some other projects (I'm looking at you), the code for this one was entirely my own.
I was drawn back to this topic because of the beauty of the central mathematical idea in it, this one elegant integral:
This app allows the user to input a continuous path by drawing on a canvas. Any disconnected segments will be joined together in the path, but because of the lack of data, it is recommended that the user draw continuously rather than inputting discrete points.
After a path is completed, the user should press the "begin drawing" button or hit the ENTER key. The app will calculate numerically the integral found above to find constants vectors, though with different indices, and use these to determine the starting angles and magnitudes of the radii in each circle. The radii will start rotating at a constant rate determined by their index, and their sum will trace out the inputted drawing path, or at least an approximation of it.
To change the accuracy of the approximation, the user may adjust the slider found under the canvas, which will update in real time the number of circles used to trace out the path. By default this value is set to 200, but the user may update it to be anywhere between 4 and 300. More circles may lag slower devices (I tried this site on my phone and anything above around 40 tended to lag, but my computer can get to 300 without lagging at all).
-
Admittedly, this site is not very pretty. The point was however to show the beauty of the math itself rather than the drawing app necessarily. I didn't intend this to be much more than just a casual project I could spend a bit of time thinking about while bored in my Algebra II class (while I probably did not think about this much in that class, I was still bored and led into learning a bit of calculus, which this is, so it's still somewhat accurate), and so as a result the design and execution are not as well done as they could be. I was pleased, however, to find upon revisiting this now (early junior year) that I did do a nice job of commenting up my code (thanks, past self!).
-
For this project, I did use a library called p5.js, which is itself based on the Processing Java environment. This allowed me to focus more on the math and less on the setup or retrieval of inputs from the canvas, as I would not find those as interesting to deal with (and I code only as a hobby). I got used to p5.js when I first learned how to code in third grade on Khan Academy (which uses the p5.js library as a base), and it's been a helpful tool since.
-
This repository contains a lot of files, but most of them do not contain much content. Heroku* is the way I learned to host websites, and it's helpful for hosting a server. However, this project doesn't specifically need a dynamic server, so most of the files are just formalities. I set up baseline NodeJS and HTML files so that I could focus on making the single page interactive with JavaScript. The real app content — all of my dealing with inputs, calculations, and displays — can be found in main.js, as at the time I did not care much to split this into multiple files.
* Heroku has since removed its free tier, so I switched this project over to Railway instead. The new link has been added to this GitHub page.