Войти
  • 333901Просмотров
  • 6 лет назадОпубликованоThe Coding Train

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: Web Editor Sketches: 🕹️ Fourier Transform: 🕹️ Fourier Transform - user-drawn path: 🕹️ Fourier Transform - complex numbers: 🕹️ Fourier Transform - user-drawn path with complex numbers: Other Parts of this Challenge: 📺 Part 2: 📺 Part 3: 🎥 Previous video: 🎥 Next video: 🎥 All videos: References: 🚂 Coding Train Logo: 💾 : #/ 💾 FFT on Algorithm Archive: 🗄 Discrete Fourier transform on Wikipedia: 🗄 Complex Number on Wikipedia: Videos: 🎥 But what is the Fourier Transform? A visual introduction: 🎥 Fourier Analysis For The Rest Of Us: 🎥 Epicycles, complex Fourier series and Homer Simpson's orbit: 🔴 Code Train Live 165: Related Coding Challenges: 🚂 #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: 👾 Share Your Creation! 🚩 Suggest Topics: 💡 GitHub: 💬 Discord: 💖 Membership: 🛒 Store: 🖋️ Twitter: 📸 Instagram: 🎥 Coding Challenges: 🎥 Intro to Programming: 🔗 : 🔗 Web Editor: 🔗 Processing: 📄 Code of Conduct: This description was auto-generated. If you see a problem, please open an issue: #fouriertransformsquarewave #discretefouriertransform #epicyclesdrawing #javascript #p5js