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