Here I am back at the whiteboard.
I'm very excited about this, because in this video,
I want to look quite a bit more closely at the sine function
itself.
And the same thing.
Everything I'm talking about for the sine function
could be said of the cosine function as well.
I want to understand why it is that the sine function, when
graphed, results in a wave pattern.
So I'm expecting that you might have seen something like this
before.
This is a graph of the sine function.
What is on the x-axis here?
Returning back to this diagram for a moment here,
I can see that if I have a unit circle, a circle with a radius
of 1, any point along that circle,
I can find its y position by taking sine of the angle.
What this graph represents is the x-axis being angle.
So I'm basically taking the value of this y position
and graphing it here, the y-axis, and taking
the angle and kind of flattening it out to be along an x-axis.
And we could see for a moment here, oh, this makes sense.
Like y is sine of theta 0.
Well, look.
If the angle is 0, the point is here.
What's the y position?
0.
y is sine of pi divided by 2, 1.
Well, if the angle is pi divided by 2 or 90 degrees,
the y position is at 1.
And look at this.
Over here, pi.
And then 3 pi over 2.
And then all the way back over here, 2 pi.
And then it repeats again.
So we can see that this way-- and you can kind of see it
oscil--
we could see this oscillation.
If I just kind of draw a bunch of lines,
that's the value of sine of the angle getting
higher and higher, and then getting lower and lower,
then getting lower, lower, lower, lower,
back to-- but back to 0 again and so on and so forth.
So this is why the sine function is graphed this way.
And the fact that it behaves this way,
this smooth, oscillating wave, means
we can do a lot with that, the results of the sine
function itself, in code.
So here I am back with once again,
a very simple p5.js sketch.
All it has is a circle drawn in the center with a given radius.
What I want to do is take the results of the sine function
and map it to the size of that circle
to see if I can make it feel as if it's breathing.
What does that oscillating behavior look
like as it grows and shrinks and grows and shrinks?
In other words, I want the size of that circle
to follow this sine wave pattern itself.
Now, I have negative numbers here,
so I'll have to deal with that using the map function in p5.
But what I'm noting here now is I need a variable.
I need a variable called angle to track this graph as I'm
calculating the values.
So coming back over here, I'm going
to create a variable called angle, which equals 0.
I want that angle to increment slowly over time.
And then I want r to be the result of sine of that angle.
Now, we don't see anything.
This is really important.
Just like with Perlin noise, the noise function
always gives us a value between 0 and 1.
The sine function always gives us a value between negative 1
and 1, because it's defined according
to the values of a unit circle, a circle with radius of 1.
So this is an easy thing for me to fix by, for example,
I can just multiply sine of that angle.
So I multiply it by 200.
You can see what it's doing.
But there is something a little bit weird going on.
The value is oscillating between 200 and negative 200.
And there's all sorts of ways I could approach the math here,
but I think probably what I want to do
is use the map function, map the sine of the angle, which
has a range between negative 1 and 1,
and map that between a range between 0 and 200.
And I don't need to have the alpha in the background.
We can just see that.
Now, I could slow it down quite a bit
by having the angle increment more slowly.
And we can see here we have this inflation
and deflation-like behavior.
If the map function in P5 is unfamiliar to you,
I'll leave a link in the video's description
to a whole video tutorial where I cover
that much more extensively.
There's another really important concept
when looking at wave patterns that I've kind of glossed over
here, and that's the concept of amplitude and period.
I'll also put the term "frequency" in parentheses,
being the inverse of period.
And I'll get to what I mean by that in a moment.
Additionally, something important that we
can do a lot with, it'll come up more in the next video,
is phase.
But I'll come back to that one.
Amplitude is defined as the height of a graph,
or the distance between either the vertical maximum
or the vertical minimum to the center.
So in this case, they're the same.
So I could say the amplitude, this value is 1,
this value is negative 1.
So the amplitude is the distance between the 0 and 1,
which is just 1.
So this is very simple, where the graph of the sine function
and also the cosine function, the amplitude is 1.
We can see here in p5 that I'm making
an adjustment to the amplitude.
I don't want to use numbers between negative 1 and 1.
It doesn't make sense for what I want to visualize.
Instead, I'm using the map function.
And here, the amplitude is actually 100, technically,
even though I'm going between 0 and 200.
But 100 being in the center there.
So that's amplitude.
The period refers to the amount of time
it takes for a full cycle of the wave before it repeats.
So we can see that is the distance between here and here.
That's one full cycle of the wave.
So in one sense, we can say the period is 2 pi.
But when we're talking about an animation or something that's
actually happening in our real physical world,
the unit of measurement we're going to think about
is often time or number of frames of an animation
This is where it might be useful for us to return back
to thinking in terms of degrees, just to unpack what
this means a little bit more.
So we know that a full cycle of the sine wave
goes from 0 all the way to 360 degrees.
What if I wanted to have a period of 1 second?
I wanted to see the full sine wave in 1 second.
Well, if my p5 sketch is running at, say, 60 frames per second,
I might say that the unit I really care about here
is not seconds, but frames.
So what if I want the period to be 60 frames exactly?
I need to increment the number 0 by some number of degrees
so that at 0 frames, I'm at 0, and at 60 frames, I'm at 360.
So the math works out to be 360 degrees divided by 60 frames.
I need to increment by 6 degrees each frame.
Let's go try putting that into our p5.js sketch.
Now, while I'm tempted to write angleMode(DEGREES) and have
then angle plus equal 6.
I think I'm going to allow myself to stick in radians,
but actually just say, I'm going to say, let increment equal
2 pi, which is the equivalent of 360 degrees, divided
by 60 frames.
So I can actually do that math right here.
Let me also just console.log the frame rate,
just because I am curious to know if it is really
about 60 frames per second.
So we should be able to see.
This is like 1 second, 2 seconds, 3 seconds, 4 seconds.
Now, this is only approximate, because I'm not
locking the frame rate to the actual milliseconds.
Rather, just saying, I think it's
about 60 frames per second, so let
me do 60 frames for one full cycle through the oscillation.
But this is something you could explore as an exercise.
Could you figure out a way to lock the oscillation using
millis to actual time itself?
So while period is the amount of time
it takes for one full cycle of the wave,
frequency is 1 divided by period.
It's the number of times the wave repeats
inside one unit of time.
So if the unit were seconds here, if the period is 1,
the frequency is also 1, one repeating cycle.
But here, with the period being 60 frames,
the frequency is 1/60.
There's so much more to this in the terms--
in thinking about sound and wave patterns and frame rates.
It's a bit beyond the scope of this video.
But hopefully now you have a sense
of what it means to have a wave pattern
with an amplitude and a period.
Practically speaking, it's very rare,
for me, at least, that I need to calculate some sort
of exact period.
And usually, I just want the wave to be faster or slower
or speed up and slow down.
And in that case, it's easier just to play
with that increment value.
For example, let me change this to have the increment
value be a global variable.
Oh, actually, let's call it "angleV."
Why not?
Like the angular velocity, the amount the angle changes.
Have angle change plus angleV.
And then let's say angleV changes over time,
like angular acceleration.
And you can see how fast that happened.
Look, that much smaller.
You can see this oscillating pattern
is going to speed up over time.
So there's a lot of things that you can do now
that you can see, not only does this concept of angular
motion, angular velocity, angular acceleration apply
to the rotation of an object, but it
can be applied to the oscillating of some property
of an object as well.
The next example that I want to demonstrate
is look at how you might actually
graph the full wave itself.
How might you visualize an undulating oscillating wave
pattern in p5?
This, in many ways, is where the idea of phase comes in.
So to do that, I want to make some adjustments
to this example here before I go on to the next video,
where instead of mapping the size of this particular circle,
I want to map its y position.
Let's take a look at that.
And there we go.
This is exactly the same as before.
But instead of taking sine of angle
and putting it into the radius, I'm
taking the result of sine of the angle
and putting it into the y-value and mapping negative 1 to 1
to negative 200 to 200.
Sometimes with this, it can also be
nice to draw a little line from the center
to where the circle is.
Feels a little bit like a yo-yo.
So you can start to see where this might lead.
And actually, some exercises that you
might try before moving into the next video
is, can you have both an x oscillation and a y
oscillation?
What happens if the amplitudes and periods
of those oscillations along the y-axis and the x-axis
are different?
What kind of patterns?
What if you draw trails?
Oh, so many things.
I think I have a video on Lissajous curves
and all sorts of stuff that relates
to the different kinds of flower-like patterns
that you can get out of doing that.
So give that a try.
But in the next video, what I actually really want
to look at, which you could try before we get there, too,
is what if instead of just this one circle moving up and down,
I have an array of them horizontally across the window,
all moving up and down, but slightly
offset from each other with a different phase?
And that's what I'll be covering in the next video.
Looking forward to seeing you there and what
kind of wondrous oscillating beauty you
create from the different examples and concepts
in these videos.
See you then.
Talk to you soon.
What am I saying?
Goodbye.
Next video, please.
[SNAPS]
[MUSIC PLAYING]