Coding Challenge 130: Fourier Transform User Drawing

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 1 - Drawing with Fourier Transform and Epicycles :    • Coding Challenge #130.1: Drawing with Four...  
📺 Part 3 - Complex Numbers:    • 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 Fourier Transform and Epicycles Part 2 - render a user-drawn path
1:20 Create a state variable
2:18 When the mouse is pressed, set the state as "user"
4:18 Render points while the user is drawing
6:48 Reset variables
7:38 Fix offset
8:38 Up next: have the inputs be complex numbers

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