Coding Challenge #130.1: Drawing with Fourier Transform and Epicycles

Other Parts of this Challenge:

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Introducing today's topic: a Fourier transform drawing machine
1:29 Fourier transform algorithm
3:08 Signal processing
5:49 Make a signal array
12:09 Euler's formula
15:34 Write the discrete Fourier transform function
21:50 What do we need for a circular epicycle?
22:47 Calculate the amplitude, frequency, and phase
26:30 Calculate amount of time to move per frame of animation
29:44 Draw an arbitrary path for both x and y
31:07 Write an epiCycles() function
34:30 Have epiCycles() return a vector with an x and y
38:59 Grab the path of the Coding Train logo
41:38 Render the epiCycles by order of amplitude
43:57 Conclusion and next steps

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#fouriertransformsquarewave #discretefouriertransform #epicyclesdrawing #javascript #p5js

[jonnynik]

So basically you've created the most complicated etch-a-sketch of all time

[Invalid]

You are the best coding teacher ever!
Keep up the math related codes.

[DirtySocrates]

Jesus this is insane! I remember having to draw a image with piecewise functions in 10th grade and thought that was impressive.

[CalculusPhysics]

i love how well you can explain topics, especially complex topics such as Fourier Transform! you’re definitely able to explain them in a really simple, but effective manner. great video as always!

[michaelkotthaus]

Yeah, this "Fourier machine" is really great! - And it's so inspiring how Dan explains the development of it.

[onetzaid]

"Lets make an array, called "y" and this is signals"

how about naming it "signals"?

[martinskodacek]

I'm watching Daniel's channel since about 50k subs, every time he creates some amazing project, but this is maybe the most amazing thing I've ever seen here :D I heard about FT long time ago, but I've never been interested until now. Great job ;)

[olegil]

This is an awesome way to learn about the discrete fourier transform and fourier series. Even knowing a LOT about fourier transforms as applied to both sound and electronic signals, seeing the DFT used to draw a friggin train blew my mind.

[pozzer]

Congratulations. The best video of all time. It encapsulates all necessary videos and sites on the internet related to fourier transform and fourier series so anyone with basic knowledge on math can understand and implement a fourier transform. It is simply amazing. I've spent many years of my life trying to understand it and now it it seams so easy.

[f.osborn]

This is the coolest explanation of Fourier transformation I’ve ever seen!

[ankitrai]

Although this video's sophistication only adds to its glory, I miss the time when your videos used to be based on p5.js and were so simple that I would start coding straight away!

[tfrangel]

Hey Daniel! I'm a huge fan of your channel, and I always learn a lot from your videos. Although I do not do JavaScript or p5.js, by going through the algorithm step-by-step one can build and expand on the code in any modern language. More importantly, one can not only replicate the code, but also understand it! Combining math, code and graphics is so much fun! In fact, I've been interested in Fourier since ever, but the standard math has always daunting to me, a biologist without strong background in math. Your recent videos on FT are not only amusing, but also expanded the horizon of possibilities in my research. Keep up the GREAT work! Best!

[trumanknight]

I love that you shout out other channels and give credit to the inspiration of the video where it is due.

Always love your videos keep up the great work

[narveeviolet]

FFT must means FULL of FRUSTRATING TRANSFORMATION. i had to watch more videos about fourier transform to catch up your 1 hour video. and more time to ponder. but only got glimpse of it. I only could start actual coding after i stop to try understand everything mathmatically. it was shame but when I finally reconstructed a straight line with x, y sin waves in my own code I am so satisfied. all my struggle was not in vain. thank you!

[musondasalimu]

I took computer graphics course in my third year of cs study and all I can say is you've done some amazing

[Thepantino]

What a beautiful challenge...it's fanstastic...unbelivable to see!

[tcholly]

When I saw this you gave me an idea, I took your code, and I added something with python.
I made something like paint in black and white, and what you draw (if you refresh the page) it get drawn eith your machine.
it's all a mix of phyton and javascript.
But then I saw your other video where you did that but better :-(
I'm still happy of my result
Thank you for giving me fantastic ideas every time I watch one of your video

[kevnar]

Shiffman was a mad scientist in a past life. Lucky for us, he's on the side of good this time around.

[NatetheAceOfficial]

Don't joke about imaginary numbers Daniel! This is VERY serious business.

[bapolino]

Im so glad that you uploud new videos! There was a little break that made me worry