Hi again.
So the next topic that I really want to look at
are the trigonometric functions sine, cosine, tangent,
and specifically something known as polar coordinates.
But before I get there, actually, I
want to take a little break and look
at something that's a really common problem in coding
visuals in p5.js.
And it relates to that as well, and will kind of
ease us into looking more closely
at those trigonometric functions.
And so the topic that I want to look at is what if what I want
is things that are moving around in my p5.js canvas
to point in the direction that they are moving.
Let me be a bit more specific about that.
Let's say instead of drawing a circle as my mover object,
I'm going to draw it as a triangle.
And that triangle is moving with a particular velocity.
So I know now that I can rotate something.
If this is my object, I can rotate something
relative to the x-axis.
By the way, an angle is often written in a diagram
as the Greek letter theta.
So I might be doing that.
So I'll just mention that here.
I want to rotate this triangle by some angle.
And what if-- basically to lock it in the direction
that it's moving, I want to know the angle associated
with a particular vector, the velocity
vector, relative to the horizontal x-axis.
Now, you might have a more creative idea
of how you want to rotate an object that's
not keeping it locked exactly to its velocity vector.
Maybe you want it to sort of approach that vector,
or spin in the opposite direction,
or do some kind of like strange or unique behavior.
But just to understand how do I have it pointing exactly
locked to its velocity vector.
Well, a way that I could do that is I can take any vector,
and I can draw its components.
This is its x component and its y component.
This is the velocity vector.
And suddenly you might notice, aha, I have a right triangle.
And this angle here is one of the angles inside
of this right triangle.
And trigonometry, the trigonometric functions deal
with the relationship between these sides of a triangle--
in this case, the x, y, and magnitude of the velocity
vector--
and the angles inside that triangle.
So if I know the x and y of the velocity,
then maybe there's a way for me to calculate
what this angle is.
And in fact, one of the trigonometric functions
is known as tangent.
And in this case, tangent of that angle
equals the length of y over the length of x.
I'm going to talk about what tangent
is in a bit more detail in the next video
when I go through all the trigonometric functions,
including sine and cosine, but this should just
give you an inkling of how you might eventually
solve for this angle.
In The Nature of Code book, chapter 3
that's linked this video's description
I go through the full details of how to solve for this angle,
but I'm going to stop here and just let you
know that one of the nice things about working in p5
is if I have a variable that's storing a vector,
like velocity, I can actually just say velocity.heading,
and it goes through the math using
the tangent of the angle using the x and y components
of the velocity vector to solve for that particular angle.
And I can take that value.
And I can use it to rotate a particular object
that I'm drawing.
So let's see that in action in the code itself.
So here I am back in my mover object.
And I'm going to change the way I'm
drawing it to be a triangle.
So I very quickly just use the radius value
that I was using for the size of the circle
to set the points of the three vertices of a triangle.
There's lots of different ways you could do that,
but I'm just saying negative r for this point, negative r,
positive r for this point, and r comma 0 for this point.
So not drawn exactly to scale, but that's
a quick way to make a triangle based on one single value.
I can add back in rotate by the angle.
And you can see now these triangles
are spinning according to the arbitrary angular motion
algorithm that I did in the previous video.
But that's irrelevant here.
So I can comment all of that out.
And ultimately, I just want the angle
to be the heading of the velocity.
I also just made a quick adjustment to say--
to have this point be halfway down
and this point be halfway down so that the triangle is
a bit more elongated so I could see if it's really pointing
in the right direction.
And you can see that here right now that it is.
This is where I'll stop for this example.
You can imagine the possibilities
of where you might apply this in different projects
that you're creating and working on.
But before I go, I do want to mention
that the inverse is also true.
Right here I'm getting an angle from a vector.
But I can also, if I had an angle,
I can make a vector from that angle.
There is a way to do this with something
known as polar coordinates and sine and cosine.
But I can also use a function in p5 called fromAngle.
This is an example of another static function.
You can go back and look at my video on static functions
with p5 vector.
But I can make a vector from a particular angle.
This is really useful if you want
to build a sketch where maybe you're
using the arrow keys to drive an object around the canvas.
To quickly demonstrate this, is my mover's sketch
from chapter 2.
The only thing that I've done differently
here is change the drawing of it as a circle to a triangle.
And I've eliminated gravity.
So I've taken that out.
So there's no acceleration.
The object is not moving.
What if I just override the concept of acceleration
and set the velocity to a manual vector?
If I were to set it as a vector 1 comma 0,
you can see it's moving to the right.
If I change that vector to 1 comma 1, it's moving down.
Now, I need to also add rotate by that angle.
And now we can see it's pointing in the direction
that it's moving.
But what if I want the angle to be the starting point of where
it moves?
I can say p5.Vector.fromAngle(this.angle).
So now I create the vector from whatever that angle might be.
So if I were make that angle pi divided by 4,
we can see now it's moving at a 45 degree angle.
What if that angle as it moves changes?
Now it's moving in a circle.
Maybe I increase the magnitude of the velocity.
And it's moving in this kind of circular pattern,
because it's always turning, the angle is always turning.
What if I were to change the angle according to key presses?
For example, in draw, I can say if keyIsDown.
Based on whether I'm pressing the left arrow
or the right arrow, I can adjust the angle.
Let me slow it down again to make this easier
to demonstrate.
Oh, I did it in the wrong direction
once again because I'm pressing-- you can't
see which key I'm pressing.
But left, I actually want it to rotate counterclockwise.
So left should be a negative angle.
Right should be a positive angle.
And that was kind of a lot to turn.
I can drive this object around the window.
So what I'm emphasizing here is that the angle
is both something that can come from the velocity from a vector
if we're calculating the vector based
on some kind of algorithm, or I can define a vector
based on that angle.
And I'm going to unlock this even more in the next video
and look at sine and cosine.
So here's an exercise you could try.
This is pretty difficult, I think.
But I've shown you in this example,
if I go back to the mover's code,
how to get the velocity from a particular angle
that I'm manipulating with the arrow keys.
Well, if you've ever played the game Asteroids,
you might recall that as you turn the object,
you can then apply a thruster, which will push it
as if there's a force being applied to it in a given
direction.
It looks exactly like this.
So here I can use the arrow keys to turn this object.
When it's pointing in a given direction,
I can press Z to push it in that direction.
Notice it's not necessarily moving in the direction
that it's pointing, but I can apply a force in the direction
that it's pointing.
So how can I turn an angle into an acceleration vector?
That's how it works in Asteroids.
So of course, I've linked to this example
also in the video's description, but this might be something
before you look at it that you try to see if you
can implement yourself as well.
So hopefully, this gives you a little bit more understanding
of how you can work with angles in the rotation of an object
that you're drawing in a canvas.
And in the next video, I'm going to go even further with this
by looking more closely at sine and cosine themselves,
and a concept known as polar coordinates.
See you there.
[MUSIC PLAYING]