[Train Whistle Sound]
[Bell Ring]
- Hello, alright, this Fourier transform stuff is so fun
and interesting and weird.
This is the end result of the very long coding challenge
that I just completed and I'm going to be doing a couple
of different follow-ups.
So this first follow-up, I just wanted to write the code
to instead of using the Coding Train logo, have the user
draw a path and then Fourier transform that and render it.
The second follow-up that I want to do is instead
of having two separate rotating sets of epicycles,
one for the x's and one for the y's,
I can actually treat the input to the Fourier transform
as a complex number itself and have one set of epicycles.
So I'll come back and do that in a separate video
that'll come out later.
You could try that on your own, but I will get to that.
So in this videos, I'm just going to see,
I just really want to see it, if I draw a path,
I want to Fourier transform that.
So, how am I going to do that?
So the thing that I need is, well, one thing is I no longer
need this codingtrain.js file which has the full path
of that particular drawing.
Instead, what I need is, I need a variable calling 'drawing'
and I need probably, like a state and I'm going to say like,
something like 'user',
like these will be the two states.
So I'm making two constants, one is a zero, one is a one,
and I know I could use like enumerables
or something like that, but that's not me.
You know me, I can't be bothered!
Refactor this later and we'll put this on.
So I'm going to start with the state being 'user'
and if the state is 'user', this state equals 'user',
I'm going to do something different
than if the state is Fourier.
And there's only two possibilities here so I could use
a Boolean, but there might be other things I want to do
with this later.
So let's just start with that.
And there's no reason for me to do any of this stuff
in setup anymore.
I do want to have this code for reference and then,
I think what I want to do is, when the mouse is pressed,
well, the state should be 'user',
and if the mouse is, when the mouse is released,
these are two global event functions,
I want to make the state Fourier.
So basically the idea's when I click the mouse,
when I'm about to do a drawing, I need to record
all of the points.
So in 'draw', if the state is 'user', I want to say
the current point is 'create a vector', which is 'mouseX',
'mouseY' and then I want to add that to the drawing.
And what I would do is always when I press the mouse,
reset the drawing array to an empty array.
And when I release the mouse, I would calculate
the Fourier transform,
and I'm going to assume that I can use a skip of one,
and this should work!
I mean my offsets are going to be wrong,
but let's see what happens.
So now, if I go here and I hit Refresh, there's nothing.
Now, in theory, if I were to draw a circle like this,
and release, there we go!
There's my drawing.
Now it's weirdly down here in a different place
than I drew it and I wasn't able to see it
while it was drawing, so I need to fix that a little bit.
So one thing that I should do is,
please let me just minimize this, it keeps coming up,
one thing that I should do is probably record the points
relative to the center of the window
and then also, I also want to be rendering it
so I would want to say, for every point, actually,
I'm going to say every vector in the drawing,
let's actually render it while I'm drawing it.
Begin shape, end shape, stroke, let v of drawing,
stroke 255, no fill, and just set a vertex to...
This'll be like the shortest video ever,
compared to the last one.
Instead of vertex, so this is me like,
when the state is in the user drawing state,
I'm going to render all the vertices and there's going
to be a little bit of problem with this.
Ah, so state actually at the beginning, should be,
I just realized, the state should be negative one.
The state is something else, it's like the start,
and I probably should have some instructions,
like 'draw something'.
So the state is negative one because I actually don't,
and then when I click the mouse, but you see my drawing
is up there but this worked.
Ah, okay, great.
So now, what I want to do is,
if I think about this correctly,
ah, I just need to, I'm restoring the points relative
to the center, and I could use translate or something
smarter here but I could just set them when I draw them
relative to the center.
So now, here I am, I'm going to draw a very elaborate figure
'8' pattern, it's like this, and then you can see now
there it is and it's a little bit off.
It might not be exactly where I drew it,
but you could see now, and then, if I can draw a circle,
oh, okay, didn't recalculate the Fourier transform.
Oh, it just added it to the end.
How weird, I thought I re...
When I do mouse released, I should redo the drawing.
Why didn't this work?
Oh, the x's and y's didn't get reset,
because I have this weird extra, okay.
So that needs to happen, okay, so now if I draw this circle,
I get this and it's offset is wrong, and then if I do this,
it'll do epicycles for that.
Okay.
[Bell Ring]
Sorry for the weird edit point, I'm jumping in
because when I did this coding challenge just a moment ago,
I forgot that I also need to reset, in addition to resetting
the drawing and the x's and the y's, I also need to reset
the time back to zero so it starts at the beginning.
And I better clear out that path.
So this is pretty awkward, there's probably a nice way
to refactor the resetting of everything, but this will make
it work with fewer bugs, so thanks.
And now the challenge is going to continue.
So, let's get the offset stuff actually correct,
and so one way to do that would be to actually just, here,
have everything be relative to the center.
So where do I calculate the Fourier?
Where do I draw the Fourier stuff?
Here, let's get rid of this '+100'.
Okay so now, if I draw very slowly, this circle right here,
as soon as I let go, we're going to see it drawing right there.
There we go!
[Bell Ring]
So this coding challenge now complete, let's just make sure
I'm going to draw like now, this very, like my drawn version
of a sine wave, and there we go.
Now my drawing machine is rendering it.
Okay so I just wanted to do this to show you
at least some creative possibilities here.
There's so many things that could be done.
Should we factor this to make it better?
But I just wanted to do this follow-up
because this might help you start to think
of other creative ideas of things you might be able
to do with this particular Fourier transform
epicycle drawing coding challenge thing.
Now, I am going to return at some point in the future
and do one more video, where instead of doing the x's
and y's separately, I process them together,
and that I think will also be something fun and interesting
to play around with.
So it will need a little bit more sense of
how complex numbers work in order to do that
so you might want to go, if you haven't watched, watch.
Go back and review the implementation
of the discrete Fourier transform algorithm
because I'm going to basically be redoing that
but have the inputs be complex numbers themselves.
Okay, thank you very much.
See you in the future.
Please share with me versions of this that you make
and I will see you soon.
Good bye!
[Cheery Music]