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 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.