Coding Challenge

In this coding challenge, I implement the Discrete Fourier Transform algorithm in JavaScript and render a drawing using epicycles derived from the transform. Code: https://thecodingtrain.com/challenges...

p5.js Web Editor Sketches:
🕹️ Fourier Transform: https://editor.p5js.org/codingtrain/s...
🕹️ Fourier Transform - user-drawn path: https://editor.p5js.org/codingtrain/s...
🕹️ Fourier Transform - complex numbers: https://editor.p5js.org/codingtrain/s...
🕹️ Fourier Transform - user-drawn path with complex numbers: https://editor.p5js.org/codingtrain/s...

Other Parts of this Challenge:
📺 Part 2:    • Coding Challenge 130: Fourier Transform Us...  
📺 Part 3:    • Coding Challenge 130: Fourier Transform Dr...  

🎥 Previous video:    • Coding Challenge #129: Koch Fractal Snowflake  
🎥 Next video:    • Coding Challenge 131: Bouncing DVD Logo  
🎥 All videos:    • Coding Challenges  

References:
🚂 Coding Train Logo:   / 1079437780466520065  
💾 p5.FFT: https://p5js.org/reference/#/p5.FFT
💾 FFT on Algorithm Archive: https://www.algorithm-archive.org/con...
🗄 Discrete Fourier transform on Wikipedia: https://en.wikipedia.org/wiki/Discret...
🗄 Complex Number on Wikipedia: https://en.wikipedia.org/wiki/Complex...

Videos:
🎥 But what is the Fourier Transform? A visual introduction:    • But what is the Fourier Transform?  A visu...  
🎥 Fourier Analysis For The Rest Of Us:    • Fourier Analysis For The Rest Of Us  
🎥 Epicycles, complex Fourier series and Homer Simpson's orbit:    • Epicycles, complex Fourier series and Home...  
🔴 Code Train Live 165:    • Coding Train Live 165: Drawing with Fourie...  

Related Coding Challenges:
🚂 #125 Fourier Series:    • Coding Challenge 125: Fourier Series  

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

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-o...

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...

#fouriertransformsquarewave #discretefouriertransform #epicyclesdrawing #javascript #p5js