Hello, and welcome to chapter 3 of the nature of code.
The title of this chapter is Oscillating Motion.
And that's where I want to get to.
What does it mean to model a swinging pendulum
to the plucking of a guitar string, waveforms?
How do we model and visualize all of those in code in p5.js?
But before I can get to those examples,
I need to build up the building blocks
of the tools and knowledge that we'll need to make those.
So the starting point is really trigonometry.
I need to look at the trigonometric functions--
sine, cosine, tangent.
You might have heard of those.
You might be studying them now.
You might have studied them many, many years ago.
I'm going to review all of those.
But before I can even get to that,
I just want to talk about the concept of an angle.
In trigonometry, the idea of an angle
is often found in what's known as a right triangle,
a right triangle being a triangle where one
of the angles is 90 degrees.
And then we might be looking at this particular angle
of the triangle and evaluating it for some purpose.
We are also going to see that angles
are really fundamental to the way
that we describe the path, the perimeter, the circumference
of a circle.
So let's say I have a circle like this.
And the radius is defined as the distance between the center
to the edge of the circle.
I might look at a given point on that circle based
on the angle relative to this horizontal axis.
So the question becomes, what are the units
of measurement for an angle?
And what can I do with angles in p5.js?
The starting point of what I want to look at in p5.js
is rotation based on an angle.
90 degrees is a right angle.
Looking back at the circle, you might
think about, oh, 360 degrees of full rotation
all the way around a circle.
That's 360 degrees.
Half way across, this angle is 180 degrees.
So these are common measurements in the unit of degrees.
Most computer graphics systems, however,
do not work with measurements in degrees.
They work with measurements in a unit known as radians.
Now p5 will actually let you work with either degrees
or radians, and I will show you how to make that designation.
But I think it's really useful for us to practice,
thinking, and working in radians.
There will be some conveniences for that in future examples.
And it will reveal the beauty and wonderfulness
of this magic number so to speak--
pi.
So first, let's look at some common angles
and their corresponding measurement in radians.
0 degrees is 0 radians.
180 degrees is pi radians.
And I'm using the Greek letter pi to indicate the value of pi.
However, in p5, we're going to see
that that's written out with the letters PI both in capitals.
The value of pi is 3.14159 and so on and so forth.
It's an irrational number.
Probably the most famous number in mathematics
because the decimal places go on forever
with no repeating pattern.
360 degrees is 2pi, 2 times pi, or if we were doing this in p5,
it would be written out as the constant 2_PI.
So where does this number come from?
Why do we care about it so much?
And why is this unit of measurement called radians?
Well, it all goes back to this particular diagram.
If I were to draw what is known as a unit circle,
meaning a circle where the radius is of length 1,
and if I were to take a string and wrap it
around the circumference, the perimeter of that circle
and then unfurl that string and measure it,
its length would be 2pi.
So if it were 1 meter, if the radius was 1 meter,
the length or the circumference of the circle
would be 2pi meters.
Pi is the value of the ratio of the circumference
of a circle, the length of the perimeter of a circle divided
by its diameter because in this case, the diameter would be 2
and the length of the full circle is 2pi.
If I wanted to think about what 90 degrees is in pi,
90 degrees is, well, pi divided by 2.
It's the length of this much of the arc of the circle itself.
So this is why pi is so important.
It's fundamental to the study of geometry,
of how we look at and define circles, of how we look at
and define the angles of right triangles,
and so much more that we're going
to need as I build all these examples
throughout this chapter in p5.js.
So where do I want to begin though with this?
I want to just go back to this idea of rotation.
We want to rotate by an angle.
We could maybe do that in degrees.
We could maybe do that in radians.
Let's look at both of those things in code itself.
So here, I have a very simple p5.js sketch that's doing just
one thing--
drawing a rectangle in the center of the canvas.
So presumably, I could do something like say,
hey, rotate that rectangle by 90 degrees and rerun the sketch.
And I'm going to put auto refresh on
so that it constantly updates.
So first of all, it's completely gone.
What happened here?
So I'm not going to get into this aspect of it
in full detail in this video.
I have a whole separate video about transformations in p5.js.
But when I'm working with rotation,
I need to be conscientious not just about the angle
that I want to rotate something by.
But around what point of origin do I
want to rotate the thing about?
So I want this rectangle to rotate around its center.
I'm going to need to use the translate function.
And if you've never used translate before,
again, I'll refer you to that other video that
explains this in more detail.
Once I've translated to 200, 200,
I need to then draw the rectangle at 0,
0 because the origin point is now at 200, 200.
And then I'm rotated by 90 degrees.
That doesn't look like 90 degrees.
If the rectangle is like this at 0 degrees,
then it should be perfectly vertical at 90 degrees.
Well, the reason is is, natively, the computer,
the JavaScript, p5.js, whoever is reading our instructions
is thinking in terms of radians.
It's not a person.
There's no person reading the instructions.
If I do want to work with a unit of measurement degrees
in my code, then in set up, I can change the mode of p5.js
to angleMode(DEGREES).
And once I've done that, you can see
I now have this rectangle rotated perfectly
by 90 degrees.
And there might be some reasons why, I mean,
I can think of actually a really convenient reason
to do this right now.
What if I were to make a variable called angle,
set it to 0, put angle inside of the rotate function,
and then say, OK, every frame 30 frames per second, I'm
going to rotate 1 degree?
Now I have a spinning rectangle.
So this is reason number one maybe to use degrees.
It might be a little bit more intuitive to sort of think
about relative measurements in terms of animation and location
in a canvas.
However, from this point on, I am just
going to make the decision to use radians.
I feel like here we are in the middle of this nature of code
playlist.
It's a perfectly appropriate time
to practice thinking and programming
graphics with radians.
It will translate to other environments
that don't have this option of angleMode(DEGREES).
And there may also be some benefits otherwise
to keeping things in radians for other examples
that will come in the future that we may or may not see.
I think there will be though.
I think there will.
So let me comment--
let me change this now to angleMode(RADIANS).
And you can see like, whoa, this makes sense.
It's spinning super, super fast because if instead of one
full rotation being 360 degrees, one full rotation
is about 6.28.
Is that right?
Something.
What's that number called again?
Tau.
So there's actually a whole other--
we could go off on a very long tangent about whether we
should be using pi or tau.
But tau is a Greek letter that's commonly used
to stand in for 2pi radians.
The point is 1 radian is almost 1/6
all the way around a circle.
So we're going to get there in six frames, which
is really fast in terms of the 30 frames per second animation.
So if I'm using radians, I might want
to use a smaller number like maybe I'm going to say 0.05.
And we can see this maps a little bit more
closely to what I had before.
Smaller numbers for working with angle in radians.
Before I move on to the next video
where I want to look more formally at angular motion,
I just want to point out one important sort of tidbit here.
Look at how this rectangle is rotating.
It's rotating in a clockwise direction.
Why is that?
And is that what you expected it to be?
After all, I have been drawing my diagrams
over here like this.
Oh, this angle is 45 degrees.
So if I had a rectangle and rotated by 45 degrees,
I should see it rotate like that.
But in p5, it rotated the other way.
It rotated this way.
It rotated down positive 45 degrees
or positive pi divided by 4.
That's what that would be.
If pi is 180, pi divided by 2 is 90.
Pi divided by 4 is 45 degrees.
Went this way.
So why is that?
Well, it has to do with the fact that, once again,
in a sort of like a mathematical diagram of a Cartesian plane,
the y-axis points upwards.
0, 1, 2, 3, 4, 5.
But in a computer graphics window,
even though I've translated 0, 0 to be in the center,
the positive direction is still down.
So I could do things like use the scale function
to sort of flip the y-axis and kind of get
into all sorts of wonkiness there.
But I think I'm going to keep our world still,
point it in the traditional computer graphics way-- down--
in which case a positive angle is, by definition, moving
in the clockwise direction.
So if you're looking for an exercise
to do at the end of this video, which
I am going to tackle immediately in the next one,
what would it mean to have this rectangle speed up
as it is rotating, slow down as it is rotating?
Could I create an example of, say, a Wheel of Fortune wheel
that I spin and, slowly over time,
it's slowing, slowing down and coming to a stop?
How would I deal with the mechanics of motion
when we're talking about angular motion?
Spinning and rotating, that's what
I'm going to look at in the next video.
[MUSIC PLAYING]