I don't know about you, but I am so excited for this video.
I'm sure all you've been doing with your whole life
is waiting to watch a video on YouTube
about trigonometric functions.
And if that's true, then here you are in the right place.
So this is the moment in the Nature of Code series
where I really want to take the time
to unpack and look at more closely the functions
sine, cosine, and tangent.
Now, if you're looking at these in the P5 reference,
then you would find them under the sort of three letter
versions of each of these, sine, cosine, and tan for tangent.
The way I learned these functions many years ago
it was with a mnemonic device, sohcahtoa.
It's quite a strange one, S-O-H-C-A-H-T-O-A.
And this mnemonic device refers to the sides of a right
triangle.
So here's a right triangle, referenced
by the fact that one of the angles is 90 degrees,
or in radians, pi divided by 2.
And the idea is that I wants to look at, I want to evaluate,
the sine, or the cosine, or the tangent of an angle
in that right triangle.
So let's say I have this angle, once again represented
by the Greek letter theta.
If I want to say sine of theta, the answer to this question,
the evaluation of this function is embedded right here
in the mnemonic device S-O-A, sine
equals opposite divided by hypotenuse.
So what does that mean?
This is an angle.
What do all the sides of the triangle,
how do they relate to this angle?
This side is opposite.
This side is adjacent.
And right over here is the hypotenuse.
Cosine then, we can see over here,
is adjacent divided by hypotenuse.
And then the last one, tangent here,
is opposite divided by adjacent.
Now when referring to any one of the sides of this triangle,
I should point out that I'm referring to its length.
And you'll notice that all of these are really a ratio.
Sine is the ratio of opposite to hypotenuse.
It doesn't change whatever the size of the triangle might be.
As the hypotenuse grows, this opposite side grows.
The angle remains the same.
So that's sort of important to note
as we're looking at how all of these functions are defined.
So while this way of drawing the right triangle and looking
at the definitions of sine, cosine,
and tangent is valuable-- it's how I learned this stuff
in the first place--
there's another way we can look at these functions that relates
more to vectors and a circle.
And I think that's actually going
to prove to be quite useful for me
to get into this idea of a polar coordinate.
So I'm going to just redraw this diagram
and look at sine, cosine, and tangent in a slightly
different way.
And let's see how that goes.
What I want to start with is this idea of a vector.
A vector is an entity with magnitude and direction.
Its direction is indicated by this particular angle, theta.
Its magnitude is the length of this particular arrow.
Now I want to assume right now that the magnitude will just
be 1.
This is a unit vector.
And if I were to take this vector
and sort of spin it around the origin
point here of this graph, I would get a circle.
If I were to take this vector and divide it into components,
I would have the x component.
And I would have the y component.
And this is something we've been doing constantly.
I have an x and a y as represented
by this sort of position relative to the origin.
So I'm just going to state something that might suddenly
be somewhat surprising to you.
I'm going to define sine and cosine again.
I'm going to say sine of theta equals y, and cosine of theta
equals x.
And in a way, this shouldn't be so surprising to you.
Opposite over hypotenuse, y divided by 1, is just y.
Opposite adjacent over hypotenuse, x divided by 1,
is just x.
But suddenly we realize that if I have a circle with radius 1,
and I take any point along that circle,
the x and y position of that point
is defined by cosine of the angle and sine of the angle.
So this is another really nice way
to be able to look at and sort of think
about the trigonometric functions sine and cosine.
I should also note something really quite exciting here.
I'm not sure if I'm going to have
enough room on the diagram.
But let's say I draw a line that is
perpendicular to this vector.
And it is tangent to this circle.
Let me extend that out to here.
It would intersect the x-axis here.
The length of this, by the way, is tangent of theta.
Now in the end, the tangent function
is going to be less useful to us or used less in terms
of a lot of the computer graphics and animation examples
I want to make.
But it's really amazing to see this diagram.
And I'll try to fly in a slightly better one
that you can look at right now, with sine, cosine,
and tangent all defined by this unit circle.
Diagrams like this are going to come up again and again.
We had one in the previous video where
I'm trying to get an object to point in the direction
that it's moving.
I'm going to work on a swinging pendulum example, which
I'm going to need this.
A lot of the steering behavior examples
that are coming up in a later chapter
are going to need this diagram.
So this taking some time to get used to this
and thinking about these functions
is going to have a lot of practical value for you,
I hope, in future videos and examples
of things that you might try to do.
But this moment, right now, what I want to use this for
is something called polar coordinates.
So here we are with yet another very similar looking diagram.
And I want to talk about this point in this Cartesian plane
as the point 4 comma 3, an x, y point where
the exposition is 1, 2, 3, 4, the y position is 1, 2, 3.
This is a Cartesian coordinate. a polar coordinate
is a way of referencing this point not
with its horizontal and vertical position,
but rather by referencing an angle, theta, and a distance
from the origin.
We'll call that far r.
So a polar coordinate would be r comma theta,
where a Cartesian coordinate is x comma y.
One of the things that's very useful in graphics programming
is to be able to sometimes think in polar coordinates.
Everything you probably ever done,
most of the things that I do, I think in terms of x, y.
This circle is over here at x, y,
and this rectangle is over here at x, y.
And then I'm going to move this one
by this amount of x and this one by this amount of y.
Let's consider this scenario.
Let's try to draw a spiral pattern.
If I wanted to draw a spiral pattern
with Cartesian coordinates, I'd have to think about,
maybe we should start going by this amount of y
and this amount of x and then change the x.
I don't know.
It would be hard to do.
But I can tell you that if I'm thinking about my world
and defining all the positions in a world
with polar coordinates, it wouldn't be so hard to do.
I could say, I just want the angle to increase.
I want the angle to increase over time.
And by the way, while the angle is increasing over time,
I want the radius to decrease over time.
So the radius is getting smaller and smaller and smaller,
while the angle is increasing and increasing and increasing.
I didn't draw this particularly correctly.
This should be shifted down with the origin
in the center of that spiral.
But I think maybe you get the idea.
The problem is, however, all of the drawing functions in P5,
ellipse, line, rectangle, vertex, curve vertex,
they all require Cartesian coordinates.
You must give them the x, y position
of the thing you want to draw.
So if you want to think in polar coordinates
but draw in Cartesian coordinates,
you need, ultimately, some formula
to convert between the two.
And that formula, by the way, is exactly in the diagram
I just drew, where I defined sine and cosine
as the x and y components of a unit vector.
If I know the angle, then I know x is cosine of that angle,
and y is a sine of that angle.
That's if r is equal to 1.
But guess what?
If r is equal to 2, y has just doubled in size.
So y would be sine times 2, or in this case,
rx is cosine times r.
So this formula is incredibly useful.
If I'm thinking in terms of polar coordinates,
but I need to draw with Cartesian coordinates,
I can convert from one to the other just with this formula
right here.
And that's the first thing that I
want to do as the code example for this video.
Here's my starting point.
I've got a very basic P5 gs sketch.
It just has a circle.
The origin is translated to the center.
The circle has a radius of 150 in a 400 by 400 canvas.
So I want to be able to draw a dot or a point
on the edge of that circle.
I have my point on the edge of the circle.
And I know exactly how to position it there,
because I could just say, the radius is 150, so if y 0,
it's over there on that side at 150x.
And if I wanted to say it's negative 150,
I've now got it on the other side.
Or I could probably set x equal to 0.
And I could set y to 150.
And I've got it on the bottom.
But what if I want to put it somewhere else on the circle?
How do I find that point if I only
have Cartesian coordinates.
I could kind of guess, 75 comma 75?
No, it's got to be a little further out, at 95 comma 95?
I don't know.
I'm getting closer.
This is where polar to Cartesian coordinates comes in.
I can say I want a position on the circle of radius one
at a given angle and then use this formula to get my x and y,
rather than have to sort of just magically know it
or guess it correctly.
And there we go.
We can see that now with an angle of pi divided by 4,
which is 45 degrees, I've now got the x position
and the y position using the polar to Cartesian formula.
Once again, it's flipped because y points down.
I'll feel a little better if I just
say negative pi divided by 4, and then, of course, what
I might more likely want to see to demonstrate this idea,
what if I take the angle, set it to 0,
and make it a global variable?
And then angle plus equals 0.01, and suddenly, I
have my circle moving around that path.
This probably looks very familiar.
This is exactly where we started this Chapter 3,
this idea of angles and rotations.
Now we see that, while, yes, I could use translate and rotate,
I could also get the exact same behavior of moving, rotating,
so to speak, this dot around the origin point
by using the trigonometric functions sine and cosine
and polar to Cartesian coordinate transformation.
Let's take this one step further and have the radius also
be a global variable.
And I will have the radius shrink over
time, very hard to see.
So what I'm going to do is I'm going to not draw this circle.
I'm going to take the background and put it in Setup,
increase the speed of the angle and the radius.
I can have the radius change itself randomly.
Maybe I will put the background back in draw,
but just give it a little bit of transparency
so that it's fading out the trail.
We can see how it's moving around that path of a circle,
but kind of with a little bit of noise to how it's moving.
Another really common application of polar
coordinates is drawing a circular shape
yourself, having control over all
of the points, all the vertices of that circular shape,
rather than just relying on the ellipse function in P5.
Returning back to the code that I started with,
with just drawing a circle, could I
draw that exact same circle, but instead
of using the P5 function circle, could I
set all of the vertices of that circular shape
individually with begin shape, end shape, and vertex?
Now I can write a for loop starting with an angle of 0
and iterate all the way up to 2 pi
and set a vertex associated with all the angles along that path.
Now, I'm arbitrarily incrementing the angle
by 0.1 radians every time.
We'll see what that does.
Now I need to apply my polar to Cartesian coordinate
transformation.
And look what I get.
Now, notice there's a little hole there.
It's because 0.1 doesn't divide evenly into two pi.
I could be more thoughtful about what number I choose there.
But I could also right here just add the close key word
into end shape.
And it will make sure to close that shape.
Now this didn't really-- this is that circle is there.
I don't know if you can really distinguish it
from the P5 circle that was drawn.
But just to note for a second, if I change this to 0.5,
now we can really start to see.
And this can be a fun sort of value to play with.
If I call this value increment for incrementing the angle,
and I say it's a value mapped to the mouseX location, which
goes between 0 and width, and I want it to be between 0.01,
it's very important that I don't have
that value ever be 0, because if I ever have that value 0,
this loop would be infinite, and then all the way up to,
let's just say, pi.
And then if I put increment in here,
we can see as I move the mouse, this sort of circle unfurls.
And I forgot that I had this background alpha on.
I'll just take that off for a second.
You can see here, and maybe, actually, I
think I almost would like to look at it
the other way around.
So as the mouse enters, this circle starts to unfurl.
The polygon unfurls all the way.
So you can sort of see what those possibilities are.
I can also start to do really interesting things.
Let me just fix the increment to a fixed value right now.
What if for every value of r, I offset it
by some random amount?
So I'm going to say r1 equals r plus some random offset
by 10 pixels.
And then I'm going to use r1 here instead of the core r.
Now we can see I've created this almost electrically charged
circle.
And let me add no loop, just to freeze it for a second,
so you can see what that looks like.
You can imagine this being the design
for an asteroid in the asteroids game, as I
was kind of referring to in a previous video.
What these values are will make a very big difference
in terms of what the quality is.
I have a whole video about doing this kind of path
with Perlin Noise.
We're about to see how I can make wave patterns.
So what kinds of undulating, oscillating, blobby patterns
can you create by drawing your own circular path
and setting the vertices with some algorithm of your own?
There are a lot of possibilities here.
So that's really the exercise I offer to you
at the end of this video.
What kinds of shapes can you generate
through thinking about polar coordinates, rather
than Cartesian coordinates?
In the next video, I'm just going
to keep going with the sine function.
You've probably heard the term sine wave before.
Why do we think of waves in sine and cosine?
That's going to actually lead us to the ability
to model simple harmonic motion and oscillating behavior.
And so that's what I'm going to look at in the next video
and so on and so forth.
So stay with me if you like, and I'll see you there.