Coding Challenge #130.1: Drawing with Fourier Transform and Epicycles

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