Coding Challenge 125: Fourier Series

Подписаться 1,7 млн

Просмотров 585 тыс.

50% 1

In this coding challenge, I visualize a Fourier series for a square wave in JavaScript with p5.js. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge 124: ...
🎥 Next video: • Coding Challenge #126:...
🎥 All videos: • Coding Challenges
References:
🗄 Fourier Series: en.wikipedia.org/wiki/Fourier...
📄 Purrier Series (Meow) and Making Images Speak: bilimneguzellan.net/purrier-se...
📄 An Interactive Guide To The Fourier Transform by Better Explained: betterexplained.com/articles/...
Videos:
🎥 What is a Fourier Series?: • What is a Fourier Seri...
🎥 But what is the Fourier Transform? A visual introduction: • But what is the Fourie...
🚂 Polar Coordinates: • 3.4 Polar Coordinates ...
🔴 Coding Train Live 163: • Coding Train Live 163:...
Related Coding Challenges:
🚂 #61 Fractal Spirograph: • Coding Challenge #61: ...
🚂 #130 Drawing with Fourier Transform and Epicycles: • Coding Challenge #130....
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: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#fourier #maths #javascript #p5js

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 510

@vigneshwarm 5 лет назад

3blue1brown recommended this video for his Fourier transform video

@akremhadji7326 5 лет назад

I've just watched it, it was amazing !!!

@FilthyManatee 5 лет назад

I just watched his video, then I tried coding my own Fourier series. Figured I would come on here and see what I did wrong.

@akremhadji7326 5 лет назад

@@FilthyManatee In this video the Fourier series is developed in JavaScript language to be run on a normal web browser. If you want more advanced tools to work with such series you can use mathematical software (Matlab, Maple, Octave ..) they have many dedicated methods to be implemented easily. If you want to do things the hard way ;) you can download the code of the presented script in this video and try to modify the coefficients or change other parameters.

@FilthyManatee 5 лет назад

@@akremhadji7326 I wrote mine in the hard/fun way (javascript/canvas) already. I did it very differently than what was shown here, but was still able to learn a thing or two watching this video. It gave me a few things to think about and change in my code. I went right into the chain of alternating spinning vectors and drawing from the last point on the chain.

@ejejej9200 5 лет назад

I came here from 3 Blue 1 Brown. And, I am so happy I did! This is a great channel! :)

@jonnylinford 5 лет назад

So happy to see you and Destin interact. This is the intersection of all the best content on RU-vid

@blasttrash 5 лет назад

who is destin?

@alexandermcclure6185 2 месяца назад

@@blasttrash destin is the smarter every day dude

@oscard4801 5 лет назад

I'm 11 and I'm from Mexico, and have been programming for 3 years and Coding Train is my source of inspiration and learning.

@TheCodingTrain 5 лет назад

So nice to hear! Please feel free to share anything you make 🙂

@GodofChookie 5 лет назад

it's awesome to have such a productive hobby you get enjoyment from and willingly invest your free time. especially at such a young age. keep it up

@philippg6023 5 лет назад

Awesome keep it up

@LongLe-nt8bv 5 лет назад

b0ss thats great for his age and its called a "comment", plus he just want to say thanks to Daniel

@oscard4801 5 лет назад

@@don1041 I learned Javascript, p5.js, HTML and CSS

@ibuucoksiregar9024 4 года назад

90% of my coding skill is from Coding Train. Everytime my friends ask me where i learned something, I always show them this channel. I love this channel so much❤️❤️

@carlosmorasalguero 5 лет назад

Wow, smarter every day in the coding train... Avengers is no longer the most ambitious crossover in the history of the world

@revimfadli4666 5 лет назад

Yeah who needs Rewind if they keep making quality crossovers like these

@abhishektyagi4428 5 лет назад

Fuckavengers

@AdamBechtol 5 лет назад

@sharphurt8753 5 лет назад

I'm Russian student and I want to express my huge thanks to The Coding Train channel! Thanks to you I have top marks in my school! The whole world loves you!!!

@cassandradawn780 5 лет назад

Я думал русских ент

@maximgasai1349 5 лет назад

Теперь это русский чат макс репост

@TheCodingTrain 5 лет назад

Thank you!

@sharphurt8753 5 лет назад

@@maximgasai1349 Русские везде Russians everywhere

@user-xh9pu2wj6b 5 лет назад

@@sharphurt8753 у вас в школе преподают JS? Жестко.

@x-lightsfs5681 5 лет назад

That took me -1/12 lines of code

@sujals7108 5 лет назад

Infinite lines is impossible.

@x-lightsfs5681 5 лет назад

@@sujals7108 But what if i made a code that adds a line to the js file every frame?

@sujals7108 5 лет назад

@@x-lightsfs5681 Then to make infinite lines, you would need an infinite number of frames, hence infinite time.

@poopmaster9984 5 лет назад

@@sujals7108 how bout making more line each frame? Then you'll get to infinity in no time :v

@PhoenixD 5 лет назад

@@x-lightsfs5681 cant go to infinity since memory is always limited :)

@RoGeorgeRoGeorge 5 лет назад

@3:30 What you are calling "Amplitude" is in fact the "Peak to Peak" value. The "Amplitude" will be only half of that.

@TheCodingTrain 5 лет назад

Indeed, thank you for the correction!

@CJBurkey 5 лет назад

But the coefficient (often called amplitude) is the vertical peak to peak distance of the wave.

@NoorquackerInd 4 года назад

@@CJBurkey Peak-to-Peak value isn't the coefficient or the amplitude. Peak is the absolute distance from the average of a function to either the min or max and peak-to-peak is the absolute distance from min to max. The amplitude is the peak value, and on sinusoidal functions, the peak-to-peak value is double the amplitude or peak value. This is more of the electrical engineer view of it, though

@sergey1519 3 года назад

What are you calling "peak to peak value" is in fact sometimes called "peak to peak amplitude", and what you calling "amplitude" is sometimes called "semi-amplitude". It's kinda similar situation as with "Natural numbers" - the name is ambiguous and it's better to refer to it either as "Positive integers" or "Non-negative integers" depending on what exactly you mean.

@PatrickAnimator 5 лет назад

dude...I am obsessed. you are literally one of the best teachers Ive ever experienced.

@sobanudlz 5 лет назад

*Procrastinating intensifies*

@AntonySimkin 4 года назад

Underrated comment lol

@TheFishKing64 3 года назад

hah, yeah

@unlikelysalmon786 3 года назад

hell, there are worst ways to distract yourself. programming fourier transformations is a decent way to waste your time (though time spent learning isn't wasted, I'm told)

@USAwizeguy 5 лет назад

As an EET major looking back at studying how to code, I love this! We look at wave forms all day. I am going to recreate this and show my fellow electrical engineers at work.

@SineEyed 4 года назад

Did you do it? Were they impressed, or at least mildly entertained?..

@alexandermcclure6185 2 месяца назад

please we need an update

@sirecartier7881 5 лет назад

I am a high-school student from France and I am really happy to see how great and efficient code can be with people like you!!!

@iVideo1011 5 лет назад

Just stumbled across your channel. This is the best RU-vid channel I've ever seen. So many high quality videos and such great teaching and enthusiasm. I'm just speechless!

@ianprado1488 5 лет назад

I need to more consciously appreciate the amazing, high quality content on RU-vid. We are living in a beautiful time in history

@shashik962 5 лет назад

My favourite channel... This is really great...

@dianewilliams5830 5 лет назад

Thank you. As always, you make learning so much fun. I've never been able to visualize how Fourier creates a square wave or any wave until now.

@shannonadamj 5 лет назад

Yoooo nice plugging smartereveryday. I love that channel.

@zackd41 5 лет назад

LOVE The Crossover with Smarter everyday, Been getting into coding because of you, thanks!

@sonik382 5 лет назад

Awesome, interesting and instructing. Thank you for all the effort you put in the channel!

@MrSonny6155 5 лет назад

After visualising this in the full complex form, it becomes pretty clear how higher frequencies enhance the "precision" of the wave position. I love how the whip rolls up into a tight ball with each rotation and each addition of epicycles.

@RicardoOliveiraRGB 5 лет назад

It's the first video of yours i've seen, and damn! I wish my brain could think that fast for programming crazy math stuff lol. Congrats man, you got a new fan here

@snacksy7754 4 года назад

28:28 I love that ending. *Has a good moral:* If you stumble over your words instead of trying to solve the confusion just give up, blow your flute, and say goodbye :D

@POPO-od8jb 4 года назад

Isn't it so satisfying to witness that sine waves are making rectangular wave , that ending of this video made my whole 2019 yr , and a good start of 2020 , thanks for this awesome video 🌷

@Abhishek-hy8xe 3 года назад

I love this channel and this guy and all the videos. Thank you .

@tmendoza6 2 года назад

this is so freaking fantastic! I could do this all day

@HeerdyesMahapatro 2 года назад

Fantabulous! This needs to be taught in every DSP course!

@siddhantrai7529 5 лет назад

I love the way the best and the brightest youtube channels are inspired and motivated by each other...that is a really positive environment.... Siraj,you,smarterEveryday,3 blue 1 brown..... You guys really help me and many others as well . Thank you.

@oblivionronin 4 года назад

An interesting thing that was done i think in 3blue1brown was to assign random or non-regular growing or shriking radius to the circles. Theses Fourrier series create really unique and interesting patterns, some of them event ressembing famous man made paintings.

@gloubiboulgazeblob 5 лет назад

awesome !!! The movement of all those circles radii looks so "biologic", fascinating !

@deez_gainz 5 лет назад

That refactoring song though ahah! We need 10 hour version for productive coding work!

@MACHINEBUILDER 5 лет назад

Wow awesome job it's super satisfying! :)

@HisMajesty99 5 лет назад

This was amazing, thanks for doing a video on this

@jonathanwalther 5 лет назад

Best analogy ever. Very smooth.

@Wolf-gt3kd 5 лет назад

This was really fun to watch that i didn't notice the video's lengh was 30min. Nice work really :D

@michael-gary-scott 5 лет назад

I’m actually so excited for this video

@jerryplayz101 5 лет назад

4:12 - To play a musical note, the sine wave is made of multiple sine waves. You have the note you want, but you also have some overtones.

@jegant8216 4 года назад

This is a good example of coding Fourier series, thanks.

@kavinbharathi 4 года назад

the slider part at the end is even more interesting as it gives even chaotic curve which when condensed give non continuous sine waves of different frequencies......*wow*

@maxteer2800 5 лет назад

I really appreciate the goofs and slight logic mistakes on this one, it was almost more enlightening than if he had just done the thing

@izzy31337 5 лет назад

you always release coding challenges just when im studying a specific topic

@marcinkienast1134 5 лет назад

Yeah, I'm supposed to study algorithms and time complexity proving. So... I guess I will fail the test, but I will know a bit more about FS. Totally worth it xD

@marcus_w0 5 лет назад

Right? I was recently looking into graph plotting and stumbled upon this, too. And within a week there this video. Hee's tracking my browser history.... I have to go.

@HardusHavenga 5 лет назад

Dude, you are my new hero.

@xnick_uy 5 лет назад

The end result looks like a fantastic whip. WT-TSH!!

@abhijithnair3078 5 лет назад

It's wappah

@askquestionstrythings 5 лет назад

I was anticipating your video since you mentioned doing this in the smarter everyday video comments.

@anandprakash4995 5 лет назад

This video inspired me to learn p5.js .Will be my new resolution to learn p5.js !!!

@JenishJain6 5 лет назад

What a coincidence the video was suggested to me just when I was about to start Fourier series for my exam prep.👻

@jonathangodar4239 5 лет назад

I searched on how to get the x and y values on something that had been rotated for hours. I knew that it would be something having to do with the angle and the hypotenuse, but I never found what I was looking for. I finally got the answer by some guy on Reddit this morning. Why couldn’t I have watched this video when I really needed it?

@mefuri_k 5 лет назад

You have a great taste on youtube channels you watch

@joecamroberon9322 5 лет назад

You deserve so much more attention.

@AliParlakci 5 лет назад

1:21 Website's name actually means "science is so beautiful"

@ferhatakan5056 4 года назад

dafgjkdfjaglh

@FM-kl7oc 6 месяцев назад

27:18 Kinda cool illustration of aliasing that happens when the sampling rate is not a perfect multiple of the signal frequency being sampled. After increasing it to 100, sometimes you get a big spike at the corners on the square wave, sometimes not -- this is the aliasing. Sometimes you're "lucky" to sample (draw) when the tip of the pendulums are at the very top or bottom of the corner, and you get a spike. Sometimes you're "unlucky" to sample (draw) when the tip of the pendulums are not near the top or bottom, and you get a more traditional "90 degrees corner" without the spike.

@BillyBustamante 3 года назад

Primer video que veo. Adoro!

@shamilcarela1699 5 лет назад

Great video, loved it.

@kindpotato 5 лет назад

I'm glad after a couple years of thinking about the fourier transform, I made something like what he talked about with the homer simpson being drawn,

@Apocalypsee07 5 лет назад

I like these Coding Challange videos :) trying to replicate these in python makes learning so much fun and also easier. Thank yyou!

@Brenzle Год назад

What do you use to draw in python? Turtle?

@BonsayCow 5 лет назад

Fun fact at 27:20 you can see spikes on the corners of the function and this is called the Gibbs phenomenon and you can never get rid of it, due to the discontinuity of the function that you are trying to approximate.

@bertronixtv 2 года назад

Amazing. Thank you for sharing your awesome skills.

@matthewvicendese1896 5 лет назад

I am so excited !!

@myetis1990 5 лет назад

You can translate Bilimneguzellan= Bilim+ne+ guzel +lan = Science+ what+ beautiful +guy = hey guy Science is what a beautiful thing ! for pronounciation, go to google translate, select turkish , type the "Bilim ne güzel lan" and tap the voice button :)

@muhtesemtavasap6411 5 лет назад

Oh be gördüm rahatladım. Yoksa ben yazacaktım.

@eminmerden1072 4 года назад

Iyi yetiştin

@amorphsilicon938 3 года назад

Adamsın, adam sitenin ismini okurken bunaldım...

@ataberkaslan2235 3 года назад

djfsdfsjdfjdfljdfg çok iyi okumadı mı dfghjkdfghjdfghjhjdfgkdfg

@johnnyserup5500 5 лет назад

I like your approach to explanation - really interesting - cool video

@djtygre 5 лет назад

my most favorite to date

@luisaisat 5 лет назад

thanks, yesterday i was trying this

@clementlebeau484 5 лет назад

I’d love to see a part 2!

@user-co5ob1fv1m 5 лет назад

Very very useful. Thank you so much Dan

@alajlan2012 5 лет назад

this is EPIC , would you please continue uploading like this content? especially on fourier drwaing visuals?

@TheCodingTrain 5 лет назад

yes, i'm planning to!

@bobbymcdingdong 5 лет назад

Brother, dude, friend Daniel, thank you!

@engineero4945 5 лет назад

Geniuss😭. Please teach us more !

@matthewvicendese1896 5 лет назад

You can make y = negative radius sin(time) ..... because y is upside in computer land.

@eda-un8zr 3 года назад

I'm native Turkish and i like how you pronounce the name of the website :D and great video, thank you

@anjardwisaputra1671 5 лет назад

AMAZING!!

@vladimirshitov2160 5 лет назад

Damn, I love Python and wanna use it for work. But I don't know yet how to do all these cool stuffs in Python so I learn JS because of this channel :D Thank you, that is great!

@devious5348 4 года назад

python has p5 too

@wesleycantarino4464 5 лет назад

this video made me study Fourier series again

@OonHan 5 лет назад

I needed this

@sidim.aourid9958 5 лет назад

The amplitude is from axis x to max or to min. Example if, s(t) = a sin(t), a is the amplitude. Thank you for all your videos, they are instructive and well done.

@TheCodingTrain 5 лет назад

Thanks for the correction!

@fatehaligolani7751 4 года назад

Thank you so much man

@diemirarr4728 5 лет назад

Amazing!

@iqbaltrojan 4 года назад

27:38 - 27:40 there is a time where the line is near horizontal facing right! pause and use the , (comma) and . (period/full stop) to go back/forward by 1 frame edit: press 27:38 then wait for it to go right edit 2: 27:55 also edit 3: also at 27:54 it's at a very high point (right side)

@SreenikethanI 4 года назад

hehe yeah even I noticed that, when all the circles are extended to the right, it essentially cuts the wave!!!

@The.Jaynish 4 года назад

You are the best man

@morphyngames 5 лет назад

Thanks for making the video

@easyunderstandbanglatv7080 5 лет назад

Brother me Bangladeshi your good tips my head very easy work thank you so much brother

@xnick_uy 5 лет назад

In case you are wondering, although a Fourier Series and a Fourier Transform are not the same, it is possible to devise a framework in which you can formally treat them on equal footing if you want to (you might need to look into Dirac combs and intervals of ever-increasing length). And more importantly: within the realm of numeric computation you are pretty much forced to use the *Discrete* Fourier Transform instead of the "bare" (continuous) Fourier Transform, which turns out to be essentially the same as the Fourier Series. (I'm assuming you don't make a distinction about using either trigonometric functions or complex exponential).

@TheCodingTrain 5 лет назад

Thanks for this clarification! I'm hoping to do a video on DFT next!

@aeswere 5 лет назад

I took a small hiatus from this channel but came back as I was bored, decided to follow this video (I usually watch). I changed the slider into an input box so you could input whatever number you'd like, and the circles would be added. I'm not sure if this is the best way to use an input box in this scenario but it does work. function setup() { createCanvas(960, 350); input = createInput(); input.position(5, 325); } function draw() { frameRate(30) background(0); translate(200, 200); let x = 0; let y = 0; let circles = 0; if (input.value() == 0) { circles = 1; } else { circles = input.value(); } for (let i = 0; i < circles; i++) { let prevx = x; let prevy = y; let n = i * 2 + 1; let radius = 50 * (4 / (n * PI)); x += radius * cos(n * time); y += radius * sin(n * time); stroke(255, 100); noFill(); ellipse(prevx, prevy, radius * 2); //fill(255); stroke(255); line(prevx, prevy, x, y); //ellipse(x, y, 8); }

@tomasvenegas6062 4 года назад

How did you make the html document or how did you see the code in Chrome?

@bmw123ck 5 лет назад

i come from 3b1b and i barely know coding, but i just subscribed...

@aonoymousandy7467 5 лет назад

I like your train if thought, it is very helpful

@stuartyellow1679 5 лет назад

Do you know about the Gibbs phenomenon? It dosent matter how hard you (your computer) try you will have those "peaks" at discontinuities. Only if you add up infint waves it is theroretically converging to the rectangular function. I hope my explantion makes sense :)

@smanzoli 5 лет назад

Interesting to see the fractal tree branches being produced here by the circles radiuses 23:50

@engin_karatas 5 лет назад

I like your codding challanhes.So maybe I will learn js

@yusufberkaygirgin9694 5 лет назад

page's name is "bilim ne guzel lan" and it means in english "science is what a sweet thing buddy" :D

@buddhanag4987 5 лет назад

Just awesome

@carlosagorreta5276 5 лет назад

that was impressive

@kharthigeyan 5 лет назад

Awesome 👍

@basement3301 5 лет назад

this is so much fun

@johnvonhorn2942 5 лет назад

This guy is the smartest guy in the neighborhood - the Mr Rogers of code.

@bobbyfinn8404 5 лет назад

You are amazing

@germandavidmurillasmondrag4004 5 лет назад

very nice code, ofcourse would be nice other slider for time this is the function that I made for this timeslider = createSlider(0.001, 0.05,0.001,0.001); and then where it is time u put timeslider, the variables for this are (min,max,default,setpbystep)