Welcome back to the second video in Chapter 1
about vectors and p5.js.
Hi.
So I could go in a number of different directions here.
And I'm still sort of figuring out
what direction I'm going to go in right now.
But ostensibly, if you're following "The Nature of Code"
book along with these videos, the next topic
is really looking at vector math.
What are the kinds of operations that you
might be used to doing with scalar quantities?
5 plus 2 equals 7.
5 minus 2 equals 3.
Multiply, divide, square root, power of three,
all of these kinds of mathematical operations,
those mathematical operations exist for vectors as well.
And a lot of times it's as simple as a vector addition
is the same as scalar addition.
But you just add the x's.
Then you add the y's.
And that's really where I'm going to start.
But what I think I prefer to do is
rather than go through a laundry list, which
is how the book does this to a bit more extent, of vector math
one at a time, I'm going to take the next step
in the random walker example and discover what kinds of vector
math I need as I'm going and start
to talk about the different functions, vector math
functions, I need as I get to them.
But you might want to look and sort
of wonder like what are all the things
that I can do with vectors.
And one of the reasons to use the P5 vector class beyond just
your own x and y variables is that all
of these common operations exist as functions in the P5 vector
class itself, like add, subtract, multiply,
divide, magnitude, magnitude squared,
dot product, cross product, distance, normalized limit,
heading, rotate, so many so many things.
So I expect that over the course of many, many videos
throughout this whole series, I will get to a lot of these.
But you also might just take a moment to pause
and click through and look at some of these yourself.
So in the random walker example, there
happens to be some vector math going on.
I am taking the x component of the position vector, the y
component of the position vector,
and adding a random number to it.
So let's start by discussing vector addition.
Let's say that I have two vectors.
We'll call them u and v. Actually, you know what?
That's a very-- the u and v, the way I write u and v,
it always looks too similar.
Let's just call them a and b.
Vector a and vector b-- and vector notation
that you might see in a math textbook
often uses the arrow on top of the letter
to say this represents the vector
a, this represents the vector b.
And let's say the vector a is 3, 4.
And let's say the vector b is, I don't know, 2, negative 1.
I want to examine, what do I mean when
I say vector a plus vector b?
So this is actually a really simple operation to do,
because the answer-- if this was c--
actually just involves adding the components together.
So this would be 5, 3, because 3 plus 2 is 5
and 4 plus negative 1, or 4 minus 1, is 3.
Incidentally, while we're here, I'll
just say that a minus b, vector subtraction,
is also what you probably imagine it would be,
the x component minus the exponent, the y component
minus the y component.
And this would extend into any dimensional space.
If my vector had 10 numbers in it, it would be the same thing.
So this would be 1, 4 minus negative 1
is 4 plus 1, which is 5.
So these are how these operations actually work.
However, while this is so incredibly simple,
I think it's worth taking a moment
to actually look at how this appears in a diagram,
because this really relates to how we're using
vectors in a 2D P5 canvas.
Let's think about our two-dimensional Cartesian
space, the one where y points up and x points to the right.
So not the upside down one, what with the demi-gorgon in it.
And so the vector 3, 4 would be 1, 2, 3--
oops-- 1, 2, 3, 4.
So this is vector a.
And vector b is 1, 2, and negative 1.
So this is vector b.
So a and b.
Adding vectors, the resulting vector c, which is a plus b,
is the vector that results from putting these two end to end.
So it doesn't matter which one I do first.
But I'll start with a.
And then I'm going to put b on the end.
And b was 2, negative 1, so like this.
That's b.
That means this vector here is C.
This is the resulting vector that you get from a plus b.
Incidentally, the vector you get from a minus b
would be just take b, the same b,
and put it in the negative direction,
because this is like representing minus b.
And then the result of a minus b would be this vector.
So in that case, which vector goes
on the end of which is quite important, because a minus
b is quite different than b minus a, whereas a plus b
and b plus a are the same.
The reason why I mention this is because now
if we go to our upside down world, the worlds of P5,
and I have this idea of a position, the position
vector, which gives us instructions of how
to get from the origin to some location in the canvas,
and what I want to do is have this thing move,
intimate, live in a physics world and respond to forces.
That's where I'm going with this.
I want to add--
to the concept to position, I want
to add the concept of velocity.
And if this happened to be velocity,
then if I take velocity and add it to position
and restore that back into position,
then I have a new position.
And then I do it again.
I take that velocity and add it again.
And then I have a new position.
So the object, the walker, so to speak,
is moving from position to position to position,
while adding the velocity over and over again.
Now, if that velocity should ever change,
that's going to make things much more interesting.
But let's just start with this concept.
So I am going to add to my walker
a variable called vel for velocity.
I'm going to say create vector.
And I'm just going to hard code something in it
just to see that right now.
I'm going to say 1, 0.
Then, now, what I'm essentially saying
is that these numbers, these random numbers that I was
picking in the random walker example
that I was adding to position dot x and position dot y,
those are the equivalent of the components of the velocity
vector.
So [MUSIC PLAYING] if I add replace
those with the x and y components of dot velocity,
now I have, what do I have?
I have a dot that's moving to the right.
I should probably change it from a dot
so it's a little easier to see to an ellipse.
[MUSIC PLAYING] And let's run this sketch.
Oh, and let me now also erase the background,
because ultimately the idea of the trail of the random walker
was where I was before that example.
But now, I'm moving into a body that's going to hopefully
eventually respond to physics.
And I think this visually makes more sense
with background and draw.
This circle's position is changing
according to its velocity every cycle through draw.
I'm going to change this now to 1, negative 1.
And can you imagine which direction it's
going to go when I hit play?
Think about it.
Did you say up and to the right?
If you did, you're right.
[BELL DINGS]
Oh, how I am missing something so important here, though.
The whole point of where I started all of this discussion
was looking at the reference and talking about vector math
and how there are all these functions for common vector
math operations, like the Add function.
But I'm not using the Add function.
Why aren't I using the Add function?
Well, here is the most confusing aspect of this.
Looking at this, you see this dot pos dot x equals itself
plus this dot velocity dot x.
It's just like x equals x plus speed.
Couldn't I-- wouldn't I-- shouldn't
I maybe, as a next step, comment these out?
And just say this dot pause equals
dot pause plus this dot velocity.
Ultimately, this is what I'm doing, right
to add the velocity to the position,
yeah, the components together.
But I don't care about the components.
I just want to add this vector to this vector.
So just add those vectors together.
Let's run the code.
Why not?
Let's see what happens.
Isn't it nice how JavaScript just like
doesn't give you any errors.
It just says like, I don't know.
You tried to do something.
Whatever.
I couldn't do it.
I just won't draw anything.
I wish I had an error here, because the error I would want
it to give me would say, I don't know
how to use the plus operator with p5.vector.
I wish that I did.
And I personally, me, Dan, wishes that JavaScript,
there was a way for me to tell it
how to use the plus operator with P5.vector.
and some programming languages do allow you
to overload what the operators do.
I think C++ is one maybe, but JavaScript is not one.
It knows no more how to add these two vectors together
than it would two fonts or two P5.images.
And so in order to add them together,
we need to instead of using the plus operator--
I don't know why I'm coming over here--
but we need to use the add function.
And all of the vector math operations
that I use over and over again probably
throughout these videos, I need to find the function in there
that does that operation.
So instead of this, I will say this.pos.add.velocity.
It's a bit of a mouthful.
It's kind of-- there's a lot of dots here.
But let's just take a moment to breathe this in.
Ultimately, if you forget about this dots for a little bit,
I'm saying a.add b, right?
Back to this example of two vectors a and b,
I've got a.add b.
Add b to a.
Add this object's velocity to this object's position.
And now, when I run it, we've got what we had before.
I can delete all this extra code.
And here we are.
So this is the end of this piece in the sense
that I've talked about what vector math is.
It's taking a mathematical operation
and applying it to vectors.
Add being a primary example, or at least
our first example of that.
And the concept of velocity as being a vector that
changes the position over time.
One question you might be asking yourself is, well,
what if I wanted to go back to that random walk
and have the velocity be random every frame?
Like how would I go about doing that?
And I think I want to cover that in a separate video,
because there is actually a really interesting thing that
happens when you pick random vectors as opposed to picking
random x and y values separately.
And I want to show that in a video on its own.
So I'm going to do that next.
And then, once I finished with that,
I will come back and start looking at other vector math
operations--
magnitude, normalize, multiply-- in the context
of setting an acceleration for random walker.
So it doesn't just have a position and a velocity,
but it also has an acceleration.
So I'll see you there.
[MUSIC PLAYING]