(whistle toots) – Hello, welcome to a coding

challenge, Fourier series. So what I am going to

program in JavaScript using the p5.js library is exactly this. This is what’s known as a Fourier series. It is a series of wave patterns

that when summed up together approximate some other function (sighs). What does that even mean? 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. And you probably should, if you want, stop this video and go look

at these other resources, and then you could come

back, if you wanted, or maybe you’re just off

doing something else. So pretty recently, Smarter Every Day came out with a video called, What is a Fourier Series?

Explained by drawing circles. This video reminded me of a amazing video that I had watched at some point in the past (laughs), I guess like almost a year ago, called, what is the Fourier Transform?

A visual introduction. You probably, if you’ve done

any coding and programming, you’ve probably heard these terms before, FFT, fast Fourier transform. It’s usually referenced in the

context of analyzing sound. And so Smarter Every Day’s video was a collaboration

worked with a Turkish researcher on this website here. I’m not going to attempt to pronounce it, or I will, bilimneguzellan.net. I encourage you to check out

and read this whole article, but this is a visualization, again, of exactly what I want to do. A series of wave patterns visualized

as a path along a circle, periodic functions summed together to approximate a square wave. And if we can make this

happen in JavaScript, then there, in theory, is no reason why

we couldn’t then figure out how to draw any given path as a series of Fourier transforms. And there’s a sort of a

well-known GIF or video of this like crazy set of

circles drawing Homer Simpson. So I’m hoping to get there. But this video, I just want

to, by the end of this video, have exactly this pattern in JavaScript. Okay. So I also want to reference this website,

betterexplained.com, which has a nice article,

An Interactive Guide To The Fourier Transform. And this, I think, is a really

excellent explanation. So again (laughs), going to

get started coding in a second, but you’re just going to have to humor me to let me kind of talk

about this a little bit more just to get my feet under me here. So the idea of a Fourier

transform, so a sound wave, right? We have this idea of a sine wave. You’ve probably seen me draw sine waves on the board or in code

in countless videos, usually drawn something like this. A sine wave has a frequency, (laughs) which is how often does it repeat. Like if this is the sort of x-axis, like this is one whole cycle, right? And I could think of that

as like the time it takes for this dot to go all

the way around the circle. So frequency is like how many cycles of the

wave per unit of time, like per second or per frame. There’s also amplitude. Amplitude is the height

(laughs) of the sine wave, how much distance between the

very top and the very bottom. And so a sound can be

represented as a sine wave. So but you probably have seen like, oh, I’ve got this recording

device soundy thingy and what it’s doing is

it’s like (vocalizing), this is like the sound. This is the wave, this

is the representation of the sound that I’m

listening to right now. Well, you can create,

this kind of wave pattern is typically actually the sum

of multiple wave patterns. So in other words, if this

is like the musical note a, and then this is like the

musical note something else, and we’re to add these two waves together, can you still see what I’m drawing? You know, I might get something

that looks like this, right? And I’ve done this, I think I had like an additive wave video in

the Nature of Code series about this kind of idea. The idea of the Fourier

transform is can we go, right, I could have these two waves. I could add them together

and get this pattern. Could I go in reverse? 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? That’s like pitch detection. Or if I wanted to then filter out a very high-pitched sound,

if I could take the sound, break it apart, take away one

of the high-pitched sound, add it back together, I would get this. So this is akin to, I

love this metaphor here in the Better Explained, of

unsmoothie-ing a smoothie. So I’m (laughs), I like to

make smoothies, actually. Little-known fact. I always like, anyway, so

but could you like, right? Let’s say I take some

mango, and some kale, and some blueberries, and

some like almond milk, and I mix them all together,

and I give it to my children, and I say, I made you

this beautiful smoothie. Can you guess what’s inside of it? This is actually a game

we actually play at home, I’ve just realized, like,

ooh, this is perfect. Well, if I could do a Fourier transform, I could take the mixed

smoothie and filter out, go in reverse, and find

out all the ingredients. That’s the idea. So that’s the idea of

the Fourier transform. That’s conceptually what it is. Now what I want to do in this

video is I’m not going to worry about figuring any of this out (laughs). I’m just, now I understand what it is, what it can be used for. I have this goal eventually of having it, of using a Fourier series

to draw any arbitrary path. But one way to get started with that is exactly what’s demonstrated

here on this website, which is, what waves do

you need to add up together to end up with a square wave? And you can see here, this is actually a really

nice visualization, is as you have more and more iterations of the Fourier series, how

it converges even closer and closer to the square wave. I could also just go here to

Wikipedia and find this again. So this is the clue. 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. And we can actually see a

nice clue to that in here. This is actually a very, this is one of the

simplest Fourier series. What is the series? One, three, five, seven. Can you guess the next number? (bell dings) Nine, right? And what’s after that? 11. So if I can just implement this, each one of these circles

and have them rotate around like this at that period or frequency, with that amplitude, we’re

going to get somewhere. So let’s (laughs), I’ve talked

about this for way too long. Let’s try to actually code this now. So the first thing that I want to do, I’m just going to start, I’m

going to start like kind of even not thinking about the Fourier series. And I’m just going to make

up a variable called angle. You could really think of that as time. It might be more appropriate

for me to call this time, ’cause time is moving forward, that’s a sort of crucial idea. And I’m just going to say, time equals, every time through draw,

if you haven’t worked with p5 before, draw is a function that loops over and over

again, over and over again. So time is moving forward. Then what I want to also

do is I just want to like draw a circle somewhere (laughs). So I’m going to translate to like 200 pixels over and 200 pixels down. I’m going to have this idea of a radius, like the radius of a

circle that I want to draw is maybe going to be 50 pixels. 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. I’m going to make this white, so

I’m going to say a stroke 250, oops (laughs), stroke 255. Somebody told me how to get

rid off that auto-complete, and I still haven’t done it, and a noFill. So when I go back the to

browser and refresh it, I’ve got a nice circle there. Eh, let’s make it a little bigger. 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. So the way that I would

do that is I would use a polar to Cartesian

coordinate transformation. And I’ll certainly have a video that talks about how to do that. But what I’m talking about

here is if this is the radius, and this is the angle, which

is really in my program the time, how far over in

x, and how far over in y, how far up in y, can be

calculated based on trigonometry? So the radius times cosine of the angle, or angle is the x value, the radius times the sine

of the angle is the y value. So I’m going to do that here (laughs). I’m going to say, let x equal

radius times cosine (snorts), cosine of time. And let y equal radius

times sine of (laughs), sine of time, I should probably

pause and turn that off. And then, but let me

get through this first, point x (laughs), I’m

definitely going to pause and turn this off, point x, y, I’m going to say stroke 255, stroke, actually, let’s

make this a circle also. So we’re going to say like ellipse x, y, we’re just going to make it

smaller, like eight pixels. And let’s also say fill 2225. My god, this is making me crazy. And here we go. Look at that. There’s that circle moving, right? That circle is moving, and

maybe it makes sense to also draw a line (laughs)

from zero, zero to x, y. 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 (laughs). I’m not sure, I should actually check. What is it doing, if I

want to like recreate exactly what’s here, yeah, yeah, it’s moving the other direction. So I’ve got the beginnings of this. 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. (bell dings) I’m back, I fixed this auto-complete thing that was bothering me

in Visual Studio Code. I’ll put something in the description about how I did that (laughs). But I also wanted to mention, in the chat, thank you to Amar who mentioned, who wrote, you are using Fourier series and Fourier transform interchangeably, but they are not the same thing. So thank you so much for that comment. I will post some links, also,

in the video’s description for more reading about this. But in short, the Fourier

series is for periodic signals, which is what I’m doing exactly right now to create this square

wave, which is periodic, versus the Fourier transform

which is for aperiodic signals. Another way of thinking

about that is to represent any general non-periodic function. So hopefully as I get

further down this road I will come back to this. And also in the chat,

Smarter Every Day writes, Fourier transform is for

swapping between frequency domain and time domain, which is

an also really nice way of putting it. Okay. 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, okay. So here we go. So I have success step one. I have my circle passing around. And you know what, I think that I probably

should not put this, I’m going to have this not go

the correct direction (laughs). I’m going to have it

go, ’cause I don’t know if the negative number’s

going to mess things up there. Okay. All right, next step. Next thing that I need to do, and if we go back to

this particular video is, how can I take this circle

that’s moving around and then draw the resulting wave pattern? And this is actually kind

of a much simpler problem than you might think, because

basically what I want to do, this is moving in two dimensions. X is oscillating back and forth, y is oscillating back and forth, and both those oscillating

at the same frequency, with the same amplitude,

in the same phase, the starting together, is moving along the path of the circle. So I just need to take the y value and sort of graph that along the x-axis. So the way that I’m going to do that is I’m going to add an array to my code. I’ll call it wave. And it’s going to be an empty array. It has nothing in it. And what I’m going to do here is every time I calculate a new y value, I’m going to say wave push y. So I’m just going to save

that particular y value. So now all I need to do is say, oh, you know, for let x, you

know, I’m not going to use x, i equals zero, you know, i

is less than wave.length, i++. Let’s draw a point at i,wave index i, right? 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 as them as I get. So if I do this, you’re

going to see, look at that. There’s that wave pattern going. All of those points

are moving up and down, and you could see how

the height of that wave is the same as the thing passing around. Okay. But this doesn’t look so

great, so what I want to do is, I want to instead use beginShape

and endShape, this will, and then say vertex. So this will actually

like tie it all together. And I think if I say, no, it’s actually, I’m going to leave the fill in there for a second,

’cause it’s kind of cool. So that’s actually like

trying to fill in the shape, which is sort of a nice pattern. But I’m going to just say noFill. I’m going to do this, refresh the page, and then also, you

know, why not translate, just to translate this a little

bit over, like 200 pixels. And we can see this. And then I guess I could also draw, sorry, I want to draw a line. Yes, I want to draw, sorry, I

got confused what I was doing. I want the end of the line

to connect to where that is. Oh, of course. Okay. So what I want to do is draw a line, so I need that first, I

need this first value. So I have x minus 200,y to i,wave index zero. And actually it’s not i, it’s zero. So this is just, this I

know is the very first point in this loop, and since

I translated it over, I’ve got to like back up with my x value. This is very awkward. ♪ I will refactor this later, you know ♪ ♪ I will refactor this later ♪ Oh, no, no, no. I don’t want it to connect to here. ♪ You know I will ♪ What am I doing wrong? ♪ This later ♪ Why is what I’m doing different? Oh, this is, oh, I’m doing it backwards. Ah, I know what I’m doing. Ah, I’m doing it backwards. I actually don’t want to, I’m appending to the end of the array, so

every new value I’m appending to the end, I want to

add it to the beginning, so instead of using push, there we go. Instead of using push, I want to use unshift. So unshift is a JavaScript function, it’s a weird name for it,

but push just adds this thing to the end of the array, and I want to add it to the beginning. Well that was a mistake (laughs). There we go. This is what I’m looking for. There we go, okay. (bell dings) So now I have the line

(laughs) connected there. Now the one thing that’s a

little bit of an issue here is that I’m just like adding

points, and adding points, and adding points, and adding points, and never getting rid of any points. So I also should probably, at some point I should say

something like, if wave.length is greater than like, I’m just going to make

up some number right now. I could do a calculation

of how many points I need ’til the end of the canvas, but just to move more quickly

here I’m going to say wave.pop. So that would just like, if

its getting more than 500 it’s going to like delete

the last one off the end. And now we should be able to say like, should be able to look at wave.length. It’s 152. So clearly I only need like, I don’t need more than 250 (laughs). All right, we are at this spot. Now comes the exciting part. 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 that’s

kind of like there with another point around it, to another circle that’s like there, with another point around it? How am I going to add up these circles and continue this path of x y along them with all of these points

rotating and spinning? And guess what? I’ve actually done this before. I’m just remembering now. 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 should go back and revisit this. But so we’ll see how

this compares to that. So let me go back to the code here. And so what I want to do, so first of all, before I do this, I think I need to think a bit more formally about these functions. So before, I was just saying

radius, cosine of time. Radius, sine of time. But these functions actually map to these values on Wikipedia here. So if theta is my time, basically, what I’m saying is that I want to, and the value multiplied by that is four divided by, sorry

(laughs), theta is my time, and four divided by pi is basically my radius, in a way here. Hmm, kind of conflating some

things, but I can start to use this particular series to understand the ratio of the radii and the frequencies between these different

oscillating circles. 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. So I’m going to do this. I’m going to just change the y here. And then what I’m going to do is I’m also then going to say, radius times that. And also I missed something. Four divided by what? One times, this is confusing,

’cause there’s a one here. One times angle, one times pi. So I’m going to say,

that’s one times time, one times time, and this is one times pi, and this is one times pi. So the number that I need to change for each circle is that one. So let’s just see what

this actually yields. And I’m going to go back to here. t’s sort of, it’s the same thing, but now the fact that that radius is 100, it’s like everything is way too big. This is going to get calculated here. ♪ I will refactor this later ♪ Let’s put this in here. And then let’s make this back, just ’cause I don’t really need, let’s make this back to here. Okay. And four time, divide, oh, oh,

this should be one times pi. Aah, why is it doing that to me? I don’t want that, I want

these divided by each other. Visual Studio Code is too

smart for my own good. There we go. There we go. That’s what I wanted. That’s why it was giving

me something crazy. Anyway, okay. Radius is not defined. Now I need to draw the circle next. This is when things are going awry. And let me put this here. There we go. And now there we go (laughs). Of course now it’s the, of course, I had the division in the wrong place. I have this tiny little wave (laughs). So let’s go back and make that about 25, which I think would be now basically, oh, it’s divided by pi, aah! This is going remarkably well (laughs). Here we go, okay. I’m happy with where I am now (sighs). Okay, so now I have that first circle. The reason why I am doing this, the reason why I’m putting this, making all this work,

’cause I want this to be n. I actually want this to be a

number that changes, right? First, first it’s one. Then it’s three, then it’s

five, then it’s seven. That’s not too hard to figure out, right? And what I want is to start

x with, and y, both at zero, and just add this stuff together. So x+=, y plus equal. So I want you, and then what I

want to do is I want to loop n. So n is going to go from one,

I’m going to say zero, actually, n, ’cause I’m, you got to count starting with zero, n

is less than two, n++. And then, and this really by

the way, I should call this i, because what I’m really

saying is, what n is. How do I do one, three? And this is pretty easy. I multiply it by two and add one. N equals i times two, plus one, right? When i is zero, I get one. When i is one, I get three. When i is two, I get five. So now if we add these together, and I’m just doing two right now. And speaking of which, I should move this all the way down to here. And I’m going to take

this out for a second. And then I’ve got to go

back here, and there we go. Okay, so something is wrong. I kind of got things close. Like look at this interesting, weird, crazy pattern that I’ve got. 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. So I don’t, I’m going to like

take out the wave for a second, ’cause I’m going to have to

change what I’m doing here. And then I’m going to just

say, previous x equals x. Oh, no. And then previous x equals x, previous y equals y, And then the line is going from those. Like that’s not always

going from zero, zero, it’s going from the previous x, y. So now that’s right. The other circle also needs to have its center be at previous x, previous y. And there we go. So now I have this. I have this circle spinning

around this circle, spinning around this circle (laughs). There’s only two circles. But, in theory, if I

change this to like five, there we go. Now we’re gettin’ somewhere. And actually, it would be sort of fun, I really think that I should think about how I’m drawing

this a little bit better. So, for example, I think

I want these circles to be much lighter, so let

me give them a little alpha, and then the points should also be, I think the points are

almost like less relevant. I almost don’t want to draw these points. Let’s just, ’cause I have the lines now, so let’s see what happens

if I take this out. And I do this. Oops. But I want the line to be full brightness. There we go. So this is what I’m looking to draw. So there we go. So I now have this particular

series with every circle next to, rotating around every other circle. And I am using the values from

the particular Fourier series for a square wave. Okay (sighs). So now, and I feel like

this should be bigger, it’s so small. Let’s go back to having this be 100,

and let’s actually not, let’s just see how this looks. And let’s, we can also, I’m being like neurotically silly about, let’s move it over a little bit. Okay. Oh, I don’t want it to

go off the screen though, so let’s leave it there. Split the difference, 75. Okay. And then (laughs), I’m going to

have to go back a little bit. This is very silly, what I’m doing. Okay, there. Aah (laughs)! I have a problem. 150. There we go. Okay, so I know this

is hard for you to see. Let me zoom in on it,

so this is what we got. So now guess what? We’re basically done, right? Before, I just had to put the wave back. Let’s see what happens if

I just put that wave back. Like what happens? I put it back. Now what’s going on? Like, I’m getting some crazy thing here. I don’t even know what’s going on. Oh, I’m pushing all the values. I just want to push the last value. Actually, this is going to be

a much easier fix, I think. I just want to push the last

value after the loop is over. And there, we can see there we go. But I don’t know why

this isn’t shifted over. Did I lose that somewhere? I need to do this. This I actually going to be,

oh, this was actually fine. And there we go (laughs). (bell dings) We are done. I should add one more thing to this because this is going

to become relevant later in my mind’s eye of how I’m

going to do more videos on this. So right now I am visualizing

the resulting wave pattern. Also, I got to do a few more things. Will you please bear with me? You know, this video’s already

about 70,000 hours long. But let’s at least add one slider. I’m going to use the, and so

I’m going to have a slider that gives me values between one and 10. And I’m going to start it at one. And what I’m going to do is I’m

going to take a slider.value. So basically I’m going to have n control the amount of iterations of the Fourier series itself. So now you could see there’s just one so I can use this slider

to add two, three, four, five, six, and this is 10. And I could, this is fun that I can actually do this in real time. So now you, the viewers

of this video (laughs), will have so many more

creative and interesting ideas about how to make this prettier, how to create more

interactivity, there’re so many, but this is just an inkling, right? Every system that you build with code has a bunch of variables and parameters. There’s no reason why you

couldn’t make those interactive. You couldn’t even, we could

make the number of iterations match to a sine wave itself,

like (mimics explosion), what would happen there? That would be crazy. But now you could see up to 10. We can see how it’s converging. And I, you know, I don’t know

how far I want to push this. Let’s push it a little. Let’s try. (drums rolling) Let’s put it at 100. That’s zero, all the way up to 100. Performance-wise, it’s fine. It’s happy to do 100. There we go, look at this. Look at that square wave! Oh, that is like (laughs) the nicest square wave I’ve ever seen. This is making me so happy. I cannot explain to you. I feel like this is a thing

that’s been in my head for years, but I never actually

like sat down to program it. ‘Course I am standing right

now, but close enough. Thank you for watching this

coding challenge visualization of the Fourier series

for making a square wave. Check this video’s description for a link to the Coding Train web

page with this challenger and the code for it, and then

if you make your own variation of this, please share it with me. You could contribute it right there. So what are some things you might do? Number one is, why don’t you

try doing this sawtooth wave? Could you take the code that

I wrote and make it do this? That would be a nice exercise to try. What other kinds of

interactivity can you add to this in terms of changing the colors, changing the different parameters,

changing the view of it? What happens if you do this in 3-D? Like, right? Could you have some kind

of points oscillating over three dimensions in a sphere, and then map that to something? That would be cool. So I look forward to seeing

what kind of things you create. Ask your questions and

all of that nonsense. But it’s not nonsense, it is,

I mean, whatever (laughs). Goodbye! (whistle toots) See you next time. (sprightly music)

bilimneguzellan.net hahahah it means science is awesome in Turkish, I didn't know that site before

Damn i hope i can be like you sir 🙂

Yeah finally!

man i feel stupid

Can you give a link to the tools you're using (the javascript library and IDE (if any))

Thanks

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.

frouier seiries can represent any function because all functions contain frequencies even if they are at infinity

frouier series are only 2d u can use a bloch sphere which maps 3d into 2 2d numbers thats what is used in physics

The link to bilimneguzellan, did anyone else have trouble seeing the equations? It looks like it's the same in the video here

Coding challenge: make FNAF. Simple with core mechanics in Java. I think everyone would want to watch that.

I made a windmill with the fourier transform in Matlab. I mapped the blades of the windmill to complex coordinates then I took the fft of that array. Then I multiplied the array with a phasor of magnitude 1 (e^-j*theta) to make it spin.

Dude, you are my new hero.

how did you set up VSC to use p5js? i'm clueless. Can anyone please help?

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,

my most favorite to date <3

Круто, Awesome

is a fractal

You have a great taste on youtube channels you watch <3

Fantastic stuff, I think the wave pop should be inside the shape block though? Thanks

Here is the code:

// Fourier Series

// Daniel Shiffman

// https://thecodingtrain.com/CodingChallenges/125-fourier-series.html

// https://youtu.be/Mm2eYfj0SgA

let time = 0;

let wave = [];

let path = [];

let slider;

function setup() {

createCanvas(600, 400);

slider = createSlider(1, 50, 5);

}

function draw() {

background(0);

translate(150, 200);

let x = 0;

let y = 0;

for (let i = 0; i < slider.value(); i++) {

let prevx = x;

let prevy = y;

let n = i * 1 + 1;

let radius = 75 * (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);

}

wave.unshift(y);

translate(200, 0);

line(x – 200, y, 0, wave[0]);

beginShape();

noFill();

for (let i = 0; i < wave.length; i++) {

vertex(i, wave[i]);

}

endShape();

time += 0.05;

if (wave.length > 250) {

wave.pop();

}

}

What program do yo use to programming? @The Coding Train

I was coding along and got lost at some point. Couldn't find this code on gethub

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

i would like to take part of an python coding challenge. i am a bloody biginner and it would be awesome to know how i can use my learnt skills 🙂

Is it normal that at the end of the video, when you try 100 circles, the last tick draws a peak at the top but when it continues to the next wave the peak disapears at the top and appears at the bottom?

for (let i = 1; i < 5; i+=2){ #why_not_this? }

how do you make visual studio code usable by getting rid of auto correct??

I am trying this challage as well but i have encoutered problem with running this code. I have no clue how I can run it in my browser… I made index.html and seperate js file, added script to the header and still can't run it. And sugestions?

You mentioned FFT’s in sound. Another really amazing use for FFT’s is in WiFi! Your data is modulated and encoded in what’s called frequency domain (the unmixed smoothie) and then put through an IFFT (Like mixing the smoothie up) to create what’s called a baseband signal, that’s the signal that contains the information that’s going to be transmitted. Then to transmit it, we mix it up to WiFi frequencies, and do the exact opposite of all of this on the receiving end. Amazing what the Fourier transform can do for us!

Asin bayraklari

Loves from TURKEY

i DONT HAVE SUCH RECORDING SOUND THINGYS BUT I do have oszilloscoppe and no I dont care writing again without caps thank you

amazing. Wow

you just took the circles from the finished picture. theres no fourier in the coding just some theory before :p

Hey man! Found your channel today And I really love it!

I do want to just correct a little error. There’s a difference between the Fourier TRANSFORM and the Fourier SERIES. The transform is indeed unsmoothying a smoothie so to say, but that has to do with infinity integrals in the complex plane (don’t ask). The series on the other hand takes a periodic function and approximates it with an infinite series of simple sines and cosines. Kinda like a Taylor series for periodic waves.

There may be a connection between the two, I don’t deal with them a lot in my life, but just wanted to let ya know 😊

Edit: ah I see u addressed it. Thank you!

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

I hope my math teacher teach like this😂..then it will be my fav. subject..

Can someone explain to me how 'for (let i = 0; i < wave.length; i++) {

vertex(i, wave[i]);' is drawing a wave for us??

I don't like mysteries, thank you

That was butchered…

I really enjoy your projects but unfortunately, the only language that I know is python, how can apply this in python.

Wow, this is amazing!

looks like fibonacci spiral woeee www

Fourier is a nice tool, but quite complicated

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

yanlış mı gördüm acaba dedim orada bilim ne güzel lan adlı bir site adı görünce 🙂 türkçe bir şey görünce sebepsiz sevinmek

You have so much energy. I hate it.

Theres a bug though. Look at 28:11 . The spike switches positions from the top to the bottom. Also there should be two spikes (smaller than they are here) and on both the bottom and the top. So theres a mistake somewhere.

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

Bunu kodlayan Türk asasasas

This sites name is kind of "Science is what a good thing". It is Turkish website.

I'm curious, what's that song "I will refactor this later"? 😀

Where is the link to disable intellisense on vscode?

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

I think this has a relationship to whip dynamics. Especially when you take it up to 100. Check out smartereveryday’s video on whips. https://youtu.be/AnaASTBn_K4

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.

Very very useful. Thank you so much Dan

I'm here from 3B1B.

Sir, can you please tell me what should I do now that I mastered Data Structures and Algorithm using C++. I want to do projects like you but I dont know where to start, can you please guide me?

one of the best explanation and the use of Fourier Series. Thanks for making this video.

3blue1brown recommended this video for his Fourier transform video

You're too silly

Could you make it so the change of n is corresponding to a sine wave?

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 🙂

Why did the circle move around clockwise?

Hey, go to 3Blue1Browns Channel for a new video about Fourier Series!!

this is so much fun

I am proud about my country to seeing that 1:25

I like your train if thought, it is very helpful

Unmix the smoothie…. with Infrared Spectroscopy you can. One of the most important applications of the Fourier Transformation btw.

Hey, i've been tweaking and turning the knobs of the above program.

https://editor.p5js.org/[email protected]/sketches/2zF2_KY9w

here is the link. I wanted to plot the trapezoidal wave given in the below link:-

http://www.till.com/articles/QuadTrapVCO/trapezoid.html

Can't seem to work my function with it. please give it a look, i cant make the trapezoidal wave work. please help.

I've graphed the Square wave and the triangular wave. but with the Trapezoidal wave i face difficulty. it would be a great help if anybody can give it a look. And rectify

This was awesome. Can you continue with this lesson? I'd like to create a fourier series that outlines the image of Trump to prove to him that science is real.

Is it just me or is this pattern of circles rotating around eachother looking like a whip when it reaches a hundred.

Maybe this is how a whip delivers such a fatal blow.

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

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

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

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

Nice work really 😀

Very sad there is no explanation what so ever on what the series actually is, and why this particular series produces this particular shape.

If this were the avengers, Fourier would be nick fury and you, 3blue1brown, destin and the amazing georgia tech turkish dude would be the avengers

My perfectionism prevents me from stopping at the ingredients when unsmoothie-ing a smoothie. I ended up with a LOT of sunlight and a bit of water, mostly.

3Blue1Brown pointed me here and I am glad I visited, nice basic step by step programming, down to earth, simple.

When did wik-i-pedia become wik-a-pedia? it's not mr coding train's fault of course. Someone in the US started mispronouncing this some time ago.

the question is why are you using the mouse arrow?

noob alert but what is the software for coding and what is that site he uses to see the result?

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

You should try time += 100000;

Is funny

you are crazy awesome++; 😜

What programming language is used?

I guess I have made up my mind to learn coding. This is surreal for a person like me who live my whole life calculating with my bare hand, brain and a calculator, bc I used to be lazy to learn this skill.

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)

the websites name in turkish means how beautiful is science by the way 🙂

Hello! I want to visualize the three-phase electropower grid. For this, I made three vectors that simulate the voltage. I have a problem, I can not make a difference of 120 degrees between them! I did about and do not know how exactly. Please tell me how to do it because I have yet to do several vectors and I will not pick them up!

My project: https://editor.p5js.org/dmnbnn63/sketches/RTceaItJc

My e-mail [email protected]

Can someone explain me what is in the index.html file?

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

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.

let j = -1;

let n = i + 1;

if (n%2==0) { j = -1 }

let radius = 75 * (4 / (j * n * PI));

Brother, dude, friend Daniel, thank you!

Nice Videos Dan!

How come I didn't find this channel earlier on?

So I've been trying to follow your coding challenges by rewriting your code without any external libraries and/or frameworks.

For this code, I decided to do something special. I added the ability to approximate

ANYfunction with sine waves.I'm very proud of my program. I hope you like it.

link: https://code.sololearn.com/WJYMx6I5ht43

Made something like this in flutter https://github.com/johnstef99/fourier_flutter

Fourier series don't

approximatea function, theyexactyrepresent it on the fourier basis; what you implemented is either a truncated IDFT or a very approximated inverse discrete-time Fourier transform, which indeed approximates the Fourier integral (which is associated to the Fourier transform, not the Fourier series)bilim ne guzel lan means

science ftw!