title
Coding Challenge 125: Fourier Series
description
In this coding challenge, I visualize a Fourier series for a square wave in JavaScript with p5.js. Code: https://thecodingtrain.com/challenges/125-fourier-series
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/SJ02W1OgV
đĨ Previous video: https://youtu.be/mhjuuHl6qHM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/-OL_sw2MiYw?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Fourier Series: https://en.wikipedia.org/wiki/Fourier_series
đ Purrier Series (Meow) and Making Images Speak: http://bilimneguzellan.net/purrier-series-meow-and-making-images-speak/
đ An Interactive Guide To The Fourier Transform by Better Explained: https://betterexplained.com/articles/an-interactive-guide-to-the-fourier-transform/
Videos:
đĨ What is a Fourier Series?: https://youtu.be/ds0cmAV-Yek
đĨ But what is the Fourier Transform? A visual introduction: https://youtu.be/spUNpyF58BY
đ Polar Coordinates: https://www.youtube.com/watch?v=O5wjXoFrau4
đ´ Coding Train Live 163: https://youtu.be/pKyU92cza0Y?t=2390s
Related Coding Challenges:
đ #61 Fractal Spirograph: https://youtu.be/0dwJ-bkJwDI
đ #130 Drawing with Fourier Transform and Epicycles: https://youtu.be/MY4luNgGfms
Timestamps:
00:00 Welcome! Some resources on the Fourier Series
02:44 Explain! What is a Fourier Series?
07:00 Code! Create a dot spinning around a circle!
11:41 Code! Draw the wave path of the dot!
14:41 Oops! Invert the order of the wave!
16:16 Code! Add multiple circle waves!
23:50 Code! Draw the Fourier series!
25:30 Code! Add slider for number of circles!
27:39 Suggestions
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
đ Website: http://thecodingtrain.com/
đž Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
đŠ Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
đĄ GitHub: https://github.com/CodingTrain
đŦ Discord: https://thecodingtrain.com/discord
đ Membership: http://youtube.com/thecodingtrain/join
đ Store: https://standard.tv/codingtrain
đī¸ Twitter: https://twitter.com/thecodingtrain
đ¸ Instagram: https://www.instagram.com/the.coding.train/
đĨ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
đ 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-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new
#fourier #maths #javascript #p5js
detail
{'title': 'Coding Challenge 125: Fourier Series', 'heatmap': [{'end': 502.045, 'start': 463.308, 'weight': 0.886}, {'end': 608.432, 'start': 565.238, 'weight': 1}, {'end': 796.162, 'start': 773.404, 'weight': 0.938}, {'end': 1345.511, 'start': 1313.042, 'weight': 0.905}, {'end': 1384.144, 'start': 1345.891, 'weight': 0.764}], 'summary': 'This coding challenge delves into programming a fourier series in javascript using the p5.js library, discussing its relevance in coding, visualizing wave patterns, implementing polar to cartesian coordinate transformation, and creating fractal spirograph patterns for analyzing oscillating circles.', 'chapters': [{'end': 40.681, 'segs': [{'end': 40.681, 'src': 'embed', 'start': 1.358, 'weight': 0, 'content': [{'end': 5.061, 'text': 'Hello Welcome to a coding challenge, Fourier series.', 'start': 1.358, 'duration': 3.703}, {'end': 10.806, 'text': 'So what I am going to program in JavaScript using the p5.js library is exactly this.', 'start': 5.161, 'duration': 5.645}, {'end': 14.109, 'text': "This is what's known as a Fourier series.", 'start': 11.287, 'duration': 2.822}, {'end': 21.995, 'text': 'It is a series of wave patterns that, when summed up together, approximate some other function.', 'start': 14.469, 'duration': 7.526}, {'end': 24.394, 'text': 'What does that even mean?', 'start': 23.234, 'duration': 1.16}, {'end': 32.458, 'text': "So, first of all, I'm going to show you some resources, the things that got me thinking about this topic and wanting to make this coding challenge.", 'start': 24.815, 'duration': 7.643}, {'end': 36.999, 'text': 'And you probably should, if you want, stop this video and go look at these other resources.', 'start': 32.718, 'duration': 4.281}, {'end': 40.681, 'text': "And then you can come back if you want, or maybe you're just off doing something else.", 'start': 37.079, 'duration': 3.602}], 'summary': 'Coding challenge in javascript using p5.js library to create fourier series wave patterns.', 'duration': 39.323, 'max_score': 1.358, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1358.jpg'}], 'start': 1.358, 'title': 'Coding challenge: fourier series', 'summary': 'Explores programming a fourier series in javascript using the p5.js library, explaining the concept of a fourier series as a series of wave patterns that approximate some other function, and suggests resources for further understanding.', 'chapters': [{'end': 40.681, 'start': 1.358, 'title': 'Coding challenge: fourier series', 'summary': 'Explores programming a fourier series in javascript using the p5.js library, explaining the concept of a fourier series as a series of wave patterns that approximate some other function, and suggests resources for further understanding.', 'duration': 39.323, 'highlights': ['The chapter introduces the coding challenge of programming a Fourier series in JavaScript using the p5.js library.', 'It explains Fourier series as a series of wave patterns that approximate some other function.', 'The chapter suggests additional resources for further understanding of the topic.']}], 'duration': 39.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1358.jpg', 'highlights': ['The chapter introduces the coding challenge of programming a Fourier series in JavaScript using the p5.js library.', 'It explains Fourier series as a series of wave patterns that approximate some other function.', 'The chapter suggests additional resources for further understanding of the topic.']}, {'end': 323.18, 'segs': [{'end': 114.343, 'src': 'embed', 'start': 62.377, 'weight': 0, 'content': [{'end': 66.481, 'text': "You've probably, if you've done any coding and programming, you've probably heard these terms before.", 'start': 62.377, 'duration': 4.104}, {'end': 69.564, 'text': 'FFT, Fast Fourier Transform.', 'start': 67.082, 'duration': 2.482}, {'end': 74.207, 'text': "It's usually referenced in the context of analyzing sound.", 'start': 69.624, 'duration': 4.583}, {'end': 85.451, 'text': "And so Smarter Every Day's video was a collaboration worked with a Turkish researcher on this website.", 'start': 75.528, 'duration': 9.923}, {'end': 87.191, 'text': "here I'm not going to attempt to pronounce it.", 'start': 85.451, 'duration': 1.74}, {'end': 89.432, 'text': 'I will bilimizguzlan.net.', 'start': 87.191, 'duration': 2.241}, {'end': 92.773, 'text': 'I encourage you to check out and read this whole article.', 'start': 90.192, 'duration': 2.581}, {'end': 98.676, 'text': 'but this is a visualization, again, of exactly what I want to do.', 'start': 93.793, 'duration': 4.883}, {'end': 105.079, 'text': 'a series of wave patterns Visualized as a path along a circle.', 'start': 98.676, 'duration': 6.403}, {'end': 114.343, 'text': 'periodic functions sum together to approximate a square wave, and if we can make this happen in JavaScript,', 'start': 105.079, 'duration': 9.264}], 'summary': 'Fft, fast fourier transform used in sound analysis. collaboration with turkish researcher on bilimizguzlan.net for visualization.', 'duration': 51.966, 'max_score': 62.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA62377.jpg'}, {'end': 218.263, 'src': 'embed', 'start': 191.463, 'weight': 3, 'content': [{'end': 197.43, 'text': 'And I could think of that as like the time it takes for this circle, this dot, to go all the way around the circle.', 'start': 191.463, 'duration': 5.967}, {'end': 204.497, 'text': 'So frequency is like how many cycles of the wave per unit of time, like per second or per frame.', 'start': 197.65, 'duration': 6.847}, {'end': 206.199, 'text': "There's also amplitude.", 'start': 205.138, 'duration': 1.061}, {'end': 210.655, 'text': 'Amplitude is the height of the sine wave.', 'start': 207.671, 'duration': 2.984}, {'end': 214.919, 'text': 'How much distance between the very top and the very bottom.', 'start': 211.075, 'duration': 3.844}, {'end': 218.263, 'text': 'And so a sound can be represented as a sine wave.', 'start': 215.4, 'duration': 2.863}], 'summary': 'Frequency measures cycles per unit time, amplitude is wave height.', 'duration': 26.8, 'max_score': 191.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA191463.jpg'}, {'end': 287.219, 'src': 'embed', 'start': 260.752, 'weight': 4, 'content': [{'end': 269.555, 'text': 'The idea of the Fourier transform is can we go, I could have these two waves, I could add them together and get this pattern.', 'start': 260.752, 'duration': 8.803}, {'end': 271.932, 'text': 'Could I go in reverse?', 'start': 270.711, 'duration': 1.221}, {'end': 280.135, 'text': "If I'm listening to a sound like this, could I pull out all of the waves, the sounds, the frequencies that make up that?", 'start': 272.452, 'duration': 7.683}, {'end': 282.016, 'text': "That's like pitch detection.", 'start': 280.416, 'duration': 1.6}, {'end': 287.219, 'text': 'Or if I wanted to then filter out a very high-pitched sound.', 'start': 282.417, 'duration': 4.802}], 'summary': 'The fourier transform can decompose a sound into its constituent waves and frequencies, enabling tasks like pitch detection and sound filtering.', 'duration': 26.467, 'max_score': 260.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA260752.jpg'}], 'start': 41.661, 'title': 'Fourier series and transform', 'summary': "Discusses the relevance of fourier series and transform in coding and programming, particularly fft for analyzing sound. it visualizes wave patterns as a path along a circle and aims to achieve a specific wave pattern in javascript. it references smarter every day's video collaboration with a turkish researcher and an article on betterexplained.com, highlighting sine waves, frequency, amplitude, and the concept of additive wave patterns, as well as the idea of fourier transform in reverse for pitch detection and sound filtering.", 'chapters': [{'end': 89.432, 'start': 41.661, 'title': 'Understanding fourier series and transform', 'summary': "Discusses the relevance of fourier series and transform in coding and programming, particularly fft for analyzing sound, and references smarter every day's video collaboration with a turkish researcher.", 'duration': 47.771, 'highlights': ['The Fast Fourier Transform (FFT) is commonly used in coding and programming, particularly in the context of analyzing sound.', "Smarter Every Day's video collaborated with a Turkish researcher to discuss Fourier Series and Transform."]}, {'end': 323.18, 'start': 90.192, 'title': 'Fourier transform visualized', 'summary': 'Discusses the visualization of wave patterns as a path along a circle and the concept of fourier transform, aiming to achieve a specific wave pattern in javascript and referencing an article on betterexplained.com, highlighting the explanation of sine waves, frequency, amplitude, and the concept of additive wave patterns. it also touches on the idea of fourier transform in reverse, resembling pitch detection and sound filtering.', 'duration': 232.988, 'highlights': ['The visualization of wave patterns as a path along a circle and the concept of Fourier transform. The chapter discusses the visualization of wave patterns as a path along a circle and the concept of Fourier transform, aiming to achieve a specific wave pattern in JavaScript and referencing an article on betterexplained.com.', 'Explanation of sine waves, frequency, and amplitude. The explanation of sine waves, frequency, and amplitude is provided, with the frequency defined as how often a sine wave repeats and the amplitude as the height of the sine wave.', 'The concept of additive wave patterns and the idea of Fourier transform in reverse. The concept of additive wave patterns is discussed, along with the idea of Fourier transform in reverse, resembling pitch detection and sound filtering.']}], 'duration': 281.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA41661.jpg', 'highlights': ['The Fast Fourier Transform (FFT) is commonly used in coding and programming, particularly in the context of analyzing sound.', "Smarter Every Day's video collaborated with a Turkish researcher to discuss Fourier Series and Transform.", 'The visualization of wave patterns as a path along a circle and the concept of Fourier transform, aiming to achieve a specific wave pattern in JavaScript and referencing an article on betterexplained.com.', 'Explanation of sine waves, frequency, and amplitude, with frequency defined as how often a sine wave repeats and amplitude as the height of the sine wave.', 'The concept of additive wave patterns and the idea of Fourier transform in reverse, resembling pitch detection and sound filtering.']}, {'end': 620.052, 'segs': [{'end': 393.972, 'src': 'embed', 'start': 323.82, 'weight': 0, 'content': [{'end': 331.767, 'text': 'Well, if I could do a Fourier transform, I could take the mixed smoothie and go in reverse and find out all the ingredients.', 'start': 323.82, 'duration': 7.947}, {'end': 332.827, 'text': "That's the idea.", 'start': 332.047, 'duration': 0.78}, {'end': 335.069, 'text': "So that's the idea of a Fourier transform.", 'start': 333.148, 'duration': 1.921}, {'end': 336.49, 'text': "That's conceptually what it is.", 'start': 335.369, 'duration': 1.121}, {'end': 342.415, 'text': "Now, what I want to do in this video is I'm not going to worry about figuring any of this out.", 'start': 336.57, 'duration': 5.845}, {'end': 345.698, 'text': 'Now I understand what it is, what it can be used for.', 'start': 342.695, 'duration': 3.003}, {'end': 352.944, 'text': 'I have this goal eventually of using a Fourier series to draw any arbitrary path.', 'start': 345.718, 'duration': 7.226}, {'end': 360.066, 'text': "But one way to get started with that is exactly what's demonstrated here on this website,", 'start': 353.664, 'duration': 6.402}, {'end': 366.608, 'text': 'which is what waves do you need to add up together to end up with a square wave?', 'start': 360.066, 'duration': 6.542}, {'end': 369.369, 'text': 'And you can see here this is actually a really nice visualization.', 'start': 366.869, 'duration': 2.5}, {'end': 377.052, 'text': 'As you have more and more iterations of the Fourier series, how it converges even closer and closer to the square wave.', 'start': 369.89, 'duration': 7.162}, {'end': 381.133, 'text': 'I can also just go here to Wikipedia and find this again.', 'start': 377.452, 'duration': 3.681}, {'end': 382.534, 'text': 'So this is the clue.', 'start': 381.393, 'duration': 1.141}, {'end': 391.872, 'text': "So there's this idea in a Fourier series of Fourier coefficients and some kind of like iterative thing, of like n and n plus one and n plus two,", 'start': 383.789, 'duration': 8.083}, {'end': 393.972, 'text': 'and we can actually see a nice clue to that in here.', 'start': 391.872, 'duration': 2.1}], 'summary': 'Understanding fourier transform and series for wave visualization and analysis.', 'duration': 70.152, 'max_score': 323.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA323820.jpg'}, {'end': 520.734, 'src': 'heatmap', 'start': 463.308, 'weight': 3, 'content': [{'end': 472.216, 'text': "and then I'm going to say ellipse at zero zero with that radius times two because the ellipse function expects a diameter, radius is half that.", 'start': 463.308, 'duration': 8.908}, {'end': 478.421, 'text': "I'm going to make this white, so I'm going to say stroke 255.", 'start': 472.576, 'duration': 5.845}, {'end': 482.505, 'text': "Somebody told me how to get rid of that autocomplete and I still haven't done it, and no fill.", 'start': 478.421, 'duration': 4.084}, {'end': 485.808, 'text': "So when I go back to the browser and refresh it, I've got a nice circle there.", 'start': 482.925, 'duration': 2.883}, {'end': 487.069, 'text': "Let's make it a little bigger.", 'start': 486.328, 'duration': 0.741}, {'end': 495.182, 'text': 'All right, so now what I want to do is how can I have that dot traveling around the circle? Let me have the dot traveling around the circle.', 'start': 489.039, 'duration': 6.143}, {'end': 502.045, 'text': 'So the way that I would do that is I would use a polar to Cartesian coordinate transformation.', 'start': 495.802, 'duration': 6.243}, {'end': 505.067, 'text': 'And I certainly have a video that talks about how to do that.', 'start': 502.525, 'duration': 2.542}, {'end': 511.108, 'text': "but what I'm talking about here is if this is the radius and this is the angle which is really in my program,", 'start': 505.067, 'duration': 6.041}, {'end': 520.734, 'text': 'the time how far over in x and how far over in y can be calculated, how far up in y can be calculated based on trigonometry.', 'start': 511.108, 'duration': 9.626}], 'summary': 'Using javascript to draw and animate a circle with a dot traveling around it.', 'duration': 24.932, 'max_score': 463.308, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA463308.jpg'}, {'end': 608.432, 'src': 'heatmap', 'start': 565.238, 'weight': 1, 'content': [{'end': 572.64, 'text': "So we're going to say ellipse x, y, we're just going to make it smaller, like eight pixels, and let's also say fill 255.", 'start': 565.238, 'duration': 7.402}, {'end': 574.841, 'text': 'Oh my god, this is making me crazy.', 'start': 572.64, 'duration': 2.201}, {'end': 576.481, 'text': 'And here we go.', 'start': 575.921, 'duration': 0.56}, {'end': 584.824, 'text': "Look at that, there's that circle moving, right? That circle is moving and maybe it makes sense to also draw a line from 0, 0 to x, y.", 'start': 577.382, 'duration': 7.442}, {'end': 595.08, 'text': "And now I've got this, and I want it to move a little bit faster, and honestly, I'd like it to go the other direction.", 'start': 589.795, 'duration': 5.285}, {'end': 597.142, 'text': "I'm not sure, I should actually check.", 'start': 595.961, 'duration': 1.181}, {'end': 601.846, 'text': "What is it doing? If I want to recreate exactly what's here, yeah, it's moving the other direction.", 'start': 597.182, 'duration': 4.664}, {'end': 603.147, 'text': "So I've got the beginnings of this.", 'start': 601.866, 'duration': 1.281}, {'end': 608.432, 'text': "Now I haven't worried about the number four here, and the fact that I've got the angle divided by pi, but we'll get there.", 'start': 603.627, 'duration': 4.805}], 'summary': 'Programmer adjusts circle size and movement, expresses frustration, and plans future steps.', 'duration': 43.194, 'max_score': 565.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA565238.jpg'}], 'start': 323.82, 'title': 'Understanding fourier transform and series and polar to cartesian coordinate transformation', 'summary': 'Covers the concept, applications, and visualization of fourier transform and series, along with implementing drawing an arbitrary path. it also discusses transforming polar coordinates to cartesian coordinates, using trigonometry to calculate x and y values, and visualizing the movement of a circle in a coding program.', 'chapters': [{'end': 495.182, 'start': 323.82, 'title': 'Understanding fourier transform and series', 'summary': 'Discusses the concept of fourier transform and series, its applications, and the visualization of the convergence of fourier series to a square wave, along with the implementation of drawing an arbitrary path using fourier series.', 'duration': 171.362, 'highlights': ['The concept of Fourier transform is explained as a method to reverse the process and find the ingredients of a mixed smoothie, providing a conceptual understanding of the transform.', 'The visualization of the convergence of Fourier series to a square wave is demonstrated, showing how more iterations result in closer convergence.', 'The implementation of drawing an arbitrary path using Fourier series is discussed, including the use of circles rotating at specific periods and amplitudes to achieve the desired path.', 'The process of coding the implementation of drawing an arbitrary path using Fourier series is detailed, including defining variables for time, drawing circles, and having a dot travel around the circle for visualization.']}, {'end': 620.052, 'start': 495.802, 'title': 'Polar to cartesian coordinate transformation', 'summary': 'Discusses transforming polar coordinates to cartesian coordinates, using trigonometry to calculate x and y values, and visualizing the movement of a circle in a coding program.', 'duration': 124.25, 'highlights': ['The process of transforming polar coordinates to Cartesian coordinates by using trigonometry to calculate x and y values is explained, providing a helpful visualization for the movement of a circle in a coding program.', 'The method of calculating x and y values using trigonometry, specifically using the radius times cosine of the angle for x value and radius times sine of the angle for y value, is detailed.', 'The visualization of a moving circle and the adjustment of its speed and direction are mentioned as part of the demonstration in the coding program.', 'The mention of fixing an autocomplete issue in Visual Studio Code and expressing gratitude to a contributor are briefly discussed in the transcript.']}], 'duration': 296.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA323820.jpg', 'highlights': ['The implementation of drawing an arbitrary path using Fourier series is discussed, including the use of circles rotating at specific periods and amplitudes to achieve the desired path.', 'The visualization of the convergence of Fourier series to a square wave is demonstrated, showing how more iterations result in closer convergence.', 'The concept of Fourier transform is explained as a method to reverse the process and find the ingredients of a mixed smoothie, providing a conceptual understanding of the transform.', 'The process of transforming polar coordinates to Cartesian coordinates by using trigonometry to calculate x and y values is explained, providing a helpful visualization for the movement of a circle in a coding program.']}, {'end': 981.942, 'segs': [{'end': 696.23, 'src': 'embed', 'start': 639.469, 'weight': 0, 'content': [{'end': 642.732, 'text': 'versus the Fourier transform, which is for aperiodic signals.', 'start': 639.469, 'duration': 3.263}, {'end': 649.418, 'text': 'Another way of thinking about that is to represent any general nonperiodic function.', 'start': 644.193, 'duration': 5.225}, {'end': 652.981, 'text': 'So hopefully, as I get further down this road, I will come back to this.', 'start': 649.458, 'duration': 3.523}, {'end': 661.204, 'text': 'And also in the chat Smarter Every Day writes Fourier transform is for swapping between frequency domain and time domain,', 'start': 654.481, 'duration': 6.723}, {'end': 663.225, 'text': 'which is also a really nice way of putting it.', 'start': 661.204, 'duration': 2.021}, {'end': 675.99, 'text': 'OK, but what I am doing in this video is implementing the Fourier series, the periodic series that add up together to the square wave pattern.', 'start': 664.085, 'duration': 11.905}, {'end': 677.722, 'text': 'OK So here we go.', 'start': 676.19, 'duration': 1.532}, {'end': 679.743, 'text': 'So I have success step one.', 'start': 677.782, 'duration': 1.961}, {'end': 682.144, 'text': 'I have my circle passing around.', 'start': 680.103, 'duration': 2.041}, {'end': 696.23, 'text': "And you know what? I think that I probably should, I think that I probably should not put this, I'm going to have this not go the correct direction.", 'start': 682.684, 'duration': 13.546}], 'summary': 'The transcript discusses implementing the fourier series for a periodic square wave pattern.', 'duration': 56.761, 'max_score': 639.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA639469.jpg'}, {'end': 796.162, 'src': 'heatmap', 'start': 773.404, 'weight': 0.938, 'content': [{'end': 784.099, 'text': "So all I'm doing here is saying, let's just draw all of those height values, those y values, from kind of x equals zero to as many of them as I get.", 'start': 773.404, 'duration': 10.695}, {'end': 787.28, 'text': "So if I do this, you're going to see, look at that.", 'start': 784.439, 'duration': 2.841}, {'end': 788.94, 'text': "There's that wave pattern going.", 'start': 787.36, 'duration': 1.58}, {'end': 790.981, 'text': 'All of those points are moving up and down.', 'start': 789.32, 'duration': 1.661}, {'end': 796.162, 'text': 'And you can see how the height of that wave is the same as the thing passing around.', 'start': 791.161, 'duration': 5.001}], 'summary': 'Plotting wave pattern with varying height values', 'duration': 22.758, 'max_score': 773.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA773404.jpg'}, {'end': 927.907, 'src': 'embed', 'start': 900.951, 'weight': 3, 'content': [{'end': 904.053, 'text': "I actually don't want to, I'm appending to the end of the array.", 'start': 900.951, 'duration': 3.102}, {'end': 907.776, 'text': "So every new value I'm appending to the end, I want to add it to the beginning.", 'start': 904.293, 'duration': 3.483}, {'end': 914.459, 'text': 'So instead of using push, there we go, instead of using push, I want to use unshift.', 'start': 907.816, 'duration': 6.643}, {'end': 916.76, 'text': 'So unshift is a JavaScript function.', 'start': 915.119, 'duration': 1.641}, {'end': 917.701, 'text': "It's a weird name for it.", 'start': 916.78, 'duration': 0.921}, {'end': 920.243, 'text': 'But push just adds this thing to the end of the array.', 'start': 917.941, 'duration': 2.302}, {'end': 921.263, 'text': 'I want to add it to the beginning.', 'start': 920.263, 'duration': 1}, {'end': 923.004, 'text': 'Well, that was a mistake.', 'start': 921.643, 'duration': 1.361}, {'end': 925.566, 'text': 'There we go.', 'start': 924.805, 'duration': 0.761}, {'end': 926.707, 'text': "This is what I'm looking for.", 'start': 925.626, 'duration': 1.081}, {'end': 927.907, 'text': 'There we go.', 'start': 927.387, 'duration': 0.52}], 'summary': 'Switch from using push to unshift in javascript for adding new values to the beginning of an array.', 'duration': 26.956, 'max_score': 900.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA900951.jpg'}], 'start': 620.052, 'title': 'Fourier series and transform', 'summary': 'Explains the difference between fourier series and fourier transform, highlighting that fourier series is for periodic signals while fourier transform is for aperiodic signals. it also discusses implementing fourier series to create a square wave pattern and optimizing array length for efficient performance.', 'chapters': [{'end': 663.225, 'start': 620.052, 'title': 'Difference between fourier series and fourier transform', 'summary': 'Explains the difference between fourier series and fourier transform, highlighting that fourier series is for periodic signals like creating a square wave, while fourier transform is for aperiodic signals and represents nonperiodic functions. it also mentions the utility of fourier transform in swapping between frequency domain and time domain.', 'duration': 43.173, 'highlights': ['The Fourier series is for periodic signals, such as creating a square wave, while the Fourier transform is for aperiodic signals, representing any general nonperiodic function.', 'Fourier transform is for swapping between frequency domain and time domain, providing a useful way to understand signal representation.']}, {'end': 981.942, 'start': 664.085, 'title': 'Implementing fourier series for wave pattern', 'summary': 'Discusses the implementation of the fourier series to create a square wave pattern using periodic series and two-dimensional oscillations, with a focus on manipulating the resulting wave pattern and optimizing the array length for efficient performance.', 'duration': 317.857, 'highlights': ['The implementation of Fourier series to create a square wave pattern using periodic series and two-dimensional oscillations The chapter discusses how to use Fourier series to generate a square wave pattern by adding up periodic series and utilizing two-dimensional oscillations in X and Y dimensions.', "Manipulating the resulting wave pattern by adjusting the array length and utilizing JavaScript functions such as 'push' and 'unshift' The process involves manipulating the resulting wave pattern by adjusting the array length using JavaScript functions like 'push' and 'unshift' to add and remove elements from the array.", "Optimizing the array length for efficient performance by using 'pop' to remove unnecessary elements The chapter discusses the optimization of array length for efficient performance by utilizing the 'pop' function to remove unnecessary elements when the array length exceeds a certain threshold."]}], 'duration': 361.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA620052.jpg', 'highlights': ['The Fourier series is for periodic signals, such as creating a square wave, while the Fourier transform is for aperiodic signals, representing any general nonperiodic function.', 'Fourier transform is for swapping between frequency domain and time domain, providing a useful way to understand signal representation.', 'The implementation of Fourier series to create a square wave pattern using periodic series and two-dimensional oscillations.', "Manipulating the resulting wave pattern by adjusting the array length and utilizing JavaScript functions such as 'push' and 'unshift'.", "Optimizing the array length for efficient performance by using 'pop' to remove unnecessary elements."]}, {'end': 1716.489, 'segs': [{'end': 1027.367, 'src': 'embed', 'start': 1001.72, 'weight': 0, 'content': [{'end': 1010.245, 'text': 'How am I going to add up these circles and continue this path of XY along them, with all of these points rotating and spinning? And guess what?', 'start': 1001.72, 'duration': 8.525}, {'end': 1011.946, 'text': "I've actually done this before.", 'start': 1010.726, 'duration': 1.22}, {'end': 1013.407, 'text': "I'm just remembering now.", 'start': 1011.966, 'duration': 1.441}, {'end': 1018.884, 'text': "I have a video on the fractal spirograph Let's see if this comes up.", 'start': 1014.007, 'duration': 4.877}, {'end': 1021.125, 'text': 'Yeah, the fractal spirograph.', 'start': 1019.524, 'duration': 1.601}, {'end': 1027.367, 'text': 'I actually did this already in the fractal spirograph, which was this way of doing exactly this to create a fractal pattern.', 'start': 1021.125, 'duration': 6.242}], 'summary': 'The speaker recalls creating a fractal spirograph video, demonstrating a method to generate a fractal pattern.', 'duration': 25.647, 'max_score': 1001.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1001720.jpg'}, {'end': 1101.203, 'src': 'embed', 'start': 1078.658, 'weight': 1, 'content': [{'end': 1088.86, 'text': 'but I can start to use this particular series to understand the ratio of the radii and the frequencies between these different oscillating circles.', 'start': 1078.658, 'duration': 10.202}, {'end': 1101.203, 'text': "Okay, so let's say, what if I, what I do is I say four divided by pi times cosine of, what was it again? One times time.", 'start': 1089.241, 'duration': 11.962}], 'summary': 'Analyzing the ratio of radii and frequencies between oscillating circles using mathematical expressions.', 'duration': 22.545, 'max_score': 1078.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1078658.jpg'}, {'end': 1345.511, 'src': 'heatmap', 'start': 1313.042, 'weight': 0.905, 'content': [{'end': 1315.686, 'text': "And I'm going to take this out for a second.", 'start': 1313.042, 'duration': 2.644}, {'end': 1319.906, 'text': "and then I've got to go back here, and there we go.", 'start': 1317.304, 'duration': 2.602}, {'end': 1321.147, 'text': 'Okay, so something is wrong.', 'start': 1319.946, 'duration': 1.201}, {'end': 1326.733, 'text': "I kind of got things close, like look at this interesting, weird, crazy pattern that I've got.", 'start': 1321.167, 'duration': 5.566}, {'end': 1338.003, 'text': 'Okay, so the line should not be going from, so I should be actually keeping track of previous x is x, and previous y is y.', 'start': 1327.353, 'duration': 10.65}, {'end': 1345.511, 'text': "So I'm going to take out the wave for a second, because I'm going to have to change what I'm doing here.", 'start': 1341.229, 'duration': 4.282}], 'summary': 'A technical issue with a wave pattern, needing to track x and y coordinates.', 'duration': 32.469, 'max_score': 1313.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1313042.jpg'}, {'end': 1384.144, 'src': 'heatmap', 'start': 1345.891, 'weight': 0.764, 'content': [{'end': 1351.074, 'text': "And then I'm going to just say, previous x equals x.", 'start': 1345.891, 'duration': 5.183}, {'end': 1351.314, 'text': 'Oh, no.', 'start': 1351.074, 'duration': 0.24}, {'end': 1357.917, 'text': 'And then previous x equals x, previous y equals y.', 'start': 1351.954, 'duration': 5.963}, {'end': 1360.238, 'text': 'And then the line is going from those.', 'start': 1357.917, 'duration': 2.321}, {'end': 1362.839, 'text': "It's not always going from 0, 0.", 'start': 1360.879, 'duration': 1.96}, {'end': 1365.421, 'text': "It's going from the previous x, y.", 'start': 1362.84, 'duration': 2.581}, {'end': 1366.481, 'text': "So now that's right.", 'start': 1365.421, 'duration': 1.06}, {'end': 1368.782, 'text': 'The other circle also needs.', 'start': 1367.162, 'duration': 1.62}, {'end': 1375.081, 'text': 'to have its center be at previous x, previous y.', 'start': 1370.239, 'duration': 4.842}, {'end': 1376.521, 'text': 'And there we go.', 'start': 1375.081, 'duration': 1.44}, {'end': 1377.882, 'text': 'So now I have this.', 'start': 1376.961, 'duration': 0.921}, {'end': 1384.144, 'text': 'I have this circle spinning around this circle spinning around this circle.', 'start': 1379.642, 'duration': 4.502}], 'summary': 'Describing the positioning of circles based on previous coordinates.', 'duration': 38.253, 'max_score': 1345.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1345891.jpg'}, {'end': 1685.002, 'src': 'embed', 'start': 1659.7, 'weight': 2, 'content': [{'end': 1665.443, 'text': 'Thank you for watching this coding challenge visualization of the Fourier series for making a square wave.', 'start': 1659.7, 'duration': 5.743}, {'end': 1673.03, 'text': "Check this video's description for a link to the Coding Train webpage with this challenge on the code for it and then,", 'start': 1666.744, 'duration': 6.286}, {'end': 1675.813, 'text': 'if you make your own variation of this, please share it with me.', 'start': 1673.03, 'duration': 2.783}, {'end': 1676.794, 'text': 'you can contribute it right there.', 'start': 1675.813, 'duration': 0.981}, {'end': 1677.935, 'text': 'So what are some things you might do?', 'start': 1676.814, 'duration': 1.121}, {'end': 1681.839, 'text': "Number one is why don't you try doing this sawtooth wave?", 'start': 1678.235, 'duration': 3.604}, {'end': 1685.002, 'text': 'Could you take the code that I wrote and make it do this?', 'start': 1682.079, 'duration': 2.923}], 'summary': 'Visualization of fourier series for square wave. challenge to try sawtooth wave.', 'duration': 25.302, 'max_score': 1659.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA1659700.jpg'}], 'start': 981.962, 'title': 'Creating fractal spirograph patterns and understanding fourier series', 'summary': 'Explores the creation of fractal spirograph patterns using circles and points and understanding fourier series to analyze oscillating circles, with detailed coding examples and visualizations.', 'chapters': [{'end': 1042.531, 'start': 981.962, 'title': 'Exploring fractal spirograph patterns', 'summary': 'Discusses the process of creating fractal spirograph patterns using circles and points, reflecting on past experiences and considering the need for formalizing functions.', 'duration': 60.569, 'highlights': ["I have a video on the fractal spirograph Let's see if this comes up. Yeah, the fractal spirograph.", 'I actually did this already in the fractal spirograph, which was this way of doing exactly this to create a fractal pattern.', 'I think I need to think a bit more formally about these functions.', 'How am I going to add up these circles and continue this path of XY along them, with all of these points rotating and spinning?', 'I mean this was hopefully all somewhat exciting, but to me, how do I suddenly go from I have one circle with a point around it to another circle.']}, {'end': 1716.489, 'start': 1042.83, 'title': 'Understanding fourier series for square wave', 'summary': 'Discusses the use of fourier series to understand the ratio of radii and frequencies between oscillating circles, with detailed coding examples and visualizations, culminating in a visualization of the fourier series for a square wave, demonstrating interactivity and potential variations.', 'duration': 673.659, 'highlights': ['The chapter discusses the use of Fourier series to understand the ratio of radii and frequencies between oscillating circles The speaker explores the application of Fourier series to comprehend the ratios of radii and frequencies between oscillating circles, providing insights into the mathematical principles involved.', 'Culminating in a visualization of the Fourier series for a square wave, demonstrating interactivity and potential variations The chapter concludes with a detailed visualization of the Fourier series for a square wave, showcasing interactivity through the use of a slider to control the iterations of the Fourier series and encourages viewers to explore potential variations and interactivity.', 'Detailed coding examples and visualizations Throughout the discussion, the speaker provides detailed coding examples and visualizations to illustrate the concepts and practical implementation of the Fourier series.']}], 'duration': 734.527, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Mm2eYfj0SgA/pics/Mm2eYfj0SgA981962.jpg', 'highlights': ['The chapter explores the creation of fractal spirograph patterns using circles and points.', 'The speaker discusses the use of Fourier series to understand the ratio of radii and frequencies between oscillating circles.', 'Detailed coding examples and visualizations are provided to illustrate the concepts and practical implementation of the Fourier series.', 'The chapter concludes with a visualization of the Fourier series for a square wave, showcasing interactivity through the use of a slider to control the iterations of the Fourier series.']}], 'highlights': ['The chapter introduces the coding challenge of programming a Fourier series in JavaScript using the p5.js library.', 'The implementation of drawing an arbitrary path using Fourier series is discussed, including the use of circles rotating at specific periods and amplitudes to achieve the desired path.', 'The visualization of the convergence of Fourier series to a square wave is demonstrated, showing how more iterations result in closer convergence.', 'The chapter explores the creation of fractal spirograph patterns using circles and points.', 'The Fast Fourier Transform (FFT) is commonly used in coding and programming, particularly in the context of analyzing sound.', 'The concept of Fourier transform is explained as a method to reverse the process and find the ingredients of a mixed smoothie, providing a conceptual understanding of the transform.', 'The Fourier series is for periodic signals, such as creating a square wave, while the Fourier transform is for aperiodic signals, representing any general nonperiodic function.', 'Detailed coding examples and visualizations are provided to illustrate the concepts and practical implementation of the Fourier series.', 'The chapter concludes with a visualization of the Fourier series for a square wave, showcasing interactivity through the use of a slider to control the iterations of the Fourier series.', 'The visualization of wave patterns as a path along a circle and the concept of Fourier transform, aiming to achieve a specific wave pattern in JavaScript and referencing an article on betterexplained.com.']}