Placeholder Image

Subtitles section Play video

  • 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 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]

Welcome back to the second video in Chapter 1

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it