Subtitles section Play video Print subtitles 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<