- 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.