Drawing with Mr. Fourier and Typescript

What if we connect a couple of rotating sticks together and trace the shape they make? We can get something like this.

The most interesting part about this is if we get enough sticks we can draw anything we want!

You can try it yourself here. Just …


This content originally appeared on DEV Community and was authored by NordicBeaver

What if we connect a couple of rotating sticks together and trace the shape they make? We can get something like this.

Rotating Sticks

The most interesting part about this is if we get enough sticks we can draw anything we want!

You can try it yourself here. Just draw a closed (that's pretty important) shape and press 'Start'.

This is based on a thing caller Fourier Transform. Basically, every complex function on a set interval can be represented as an infinite sum of exponents:

f(t)=∑n=−inf⁡inf⁡cnen2πit,0≤t≤1 f(t) = \sum_{n=-\inf}^{\inf}c_n e^{n 2 \pi i t}, 0 \le t \le 1 f(t)=n=−inf∑inf​cn​en2πit,0≤t≤1

Where

cn=∫01f(t)e−n2πit c_n = \int_0^1 f(t) e^{-n 2 \pi i t} cn​=∫01​f(t)e−n2πit

But if we look closer we may notice that every element of that sum is actually a rotating vector Cn. So if we manage to represent a shape as a complex function, we could find these vectors (maybe not all, since there is infinite number of them, but we don't need all) and that would mean drawing the shape just by rotating those vectors!

I made a video where I tried to explain this in more detail and code it in TypeScript.

Enjoy!


This content originally appeared on DEV Community and was authored by NordicBeaver


Print Share Comment Cite Upload Translate Updates
APA

NordicBeaver | Sciencx (2021-11-24T15:06:59+00:00) Drawing with Mr. Fourier and Typescript. Retrieved from https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/

MLA
" » Drawing with Mr. Fourier and Typescript." NordicBeaver | Sciencx - Wednesday November 24, 2021, https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/
HARVARD
NordicBeaver | Sciencx Wednesday November 24, 2021 » Drawing with Mr. Fourier and Typescript., viewed ,<https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/>
VANCOUVER
NordicBeaver | Sciencx - » Drawing with Mr. Fourier and Typescript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/
CHICAGO
" » Drawing with Mr. Fourier and Typescript." NordicBeaver | Sciencx - Accessed . https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/
IEEE
" » Drawing with Mr. Fourier and Typescript." NordicBeaver | Sciencx [Online]. Available: https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/. [Accessed: ]
rf:citation
» Drawing with Mr. Fourier and Typescript | NordicBeaver | Sciencx | https://www.scien.cx/2021/11/24/drawing-with-mr-fourier-and-typescript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts