[BELL DING]

Vectors.

So the purpose of this first video

is just to explain what a vector is.

What is a vector, as well as look

at what it means to use the concept of a vector with p5.js.

Now, if you watch some of the videos in the introduction

section, one of the examples I went through is a random walk.

In this example, I have two variables, x and y.

Together they make up a position in the canvas,

and then every cycle through draw, every frame of animation,

I pick a random number, 0, 1, 2, and 2,

and move it either to the right, the left, up, or down.

This is using vectors.

So the concept of a vector is something you're probably

using all the time in your programming

without realizing it, but maybe you're not actually

getting full power out of vectors

because you're not yet using p5.

vector.

That's really where I'm leading here, but let's zoom back out

and talk about what a vector is.

So first, let me use another term for you, scalar.

So scalar might sound like some scary math terminology that

seems unfamiliar to you, but this is actually

something you have definitely been using all along.

For example, here is an example of a scalar value, 6.

[GASP]

I've got another one for you.

14, 0.319222.

[GASP]

That's my favorite scalar.

So a scalar is a numeric value.

A single value.

It is a magnitude.

So the concept here is something is

something that has a magnitude.

Examples of things that are scalar quantities

are like, oh, the length of this marker.

Maybe the surface area of this beautiful coding train

notebook.

How hot is it outside, whether it's

Fahrenheit or Celsius or Kelvin, that's a scalar quantity.

The distance between two points.

How far away in the world are you from me right now.

That's a scalar quantity.

Anything that you can measure as a single magnitude,

that is a scalar.

A vector, however, has not just magnitude, but also direction.

This is the idea of a vector.

It's a quantity, an entity that has both

a magnitude and a direction.

One thing that's important for me to say

is vectors can exist in many kinds of dimensional spaces.

Two dimensional spaces, three dimensional space,

four dimensional, five dimensional, six dimensional,

and you might have heard me say the term vector in other videos

that I've made maybe about machine learning and data,

but what I'm going to do in this series is constrain myself,

restrict myself to talking about vectors

in a two dimensional space.

This is because I am working with them in a p5.js canvas,

and that happens to be a two dimensional space.

You might choose, and I might do some examples that

look at vectors in three dimensions,

and in fact, p5 vectors do support three dimensions.

3D graphics are a thing, but my focus

and trying to explain all of this and look at the math

will be sticking in two dimensions.

The typical way a vector is represented is by an arrow.

So let me return back to this random walk example,

and look at this.

I had an x and a y, and an x and y is moving randomly,

drawing its trail.

How could I think of that x and y as a vector.

Remember, I had two variables, x and y.

They represent a point in space, two dimensional space, x and y.

I could think of these-- this x and y

together as a vector that provides instructions

for how to get from the origin point, 0, 0, all the way

to that x and y.

So this is the idea of thinking in terms of vectors.

This entity, this vector has both a magnitude,

what is the magnitude?

It is the length of this arrow, and a direction.

What is the direction?

It's the way the arrow is pointing,

and I could think of that in different ways,

but one way of thinking about that

is as an angle, often represented

with the Greek letter, theta.

So I could think of a vector as the length of an arrow,

as well as what direction it's pointing as an angle

relative to the origin point.

Let me take a minute to redo this diagram in a more

traditional math way, because canvases

are a little strange in that the origin is in the top left

and that y points down.

But a more typical Cartesian plane, a two dimensional plane,

Cartesian name for René Descartes, the mathematician,

might have an x, y coordinate right here,

and I could represent the origin right here,

and I could draw an arrow between these two.

So conceptually, the vector has the magnitude,

which is this particular length, and the direction,

which represented by this angle relative

to the horizontal axis.

However, I am conflating a little bit

two concepts, which is this idea of a coordinate

or a position and a vector.

This idea of this vector itself, the concept of this vector

is just this arrow.

It doesn't represent any specific location

in two dimensional space.

It just represents instructions for how to get from one

position to another position, and in the case that

I'm talking about, those instructions are from

the origin to the position, x,y.

So in a moment, I'm going to start talking about velocity,

which is going to be used in our code to describe, well,

if this is my thing at this x,y, it's going to go here,

then it's going to go here, then it's going to go here,

then it's going to go here, I might have a bunch of velocity

vectors giving it a path.

This idea of the vector itself is really a concept

of the arrow, not the specific location,

but a position in a p5 sketch can be thought of as a vector

with instructions from how to get to the origin to that x,y

location itself.

And in that sense, it really is relative

because if I use the translate function

to move the origin around, that vector is

going to move around with that.

Oddly enough, even though I am starting this discussion

of about vectors, focusing on these core concepts, magnitude

and direction, the actual values stored

in the p5 vector object, which I really haven't shown yet

but I'm going to get to, are not the magnitude and direction,

but rather the components of a vector.

What do I mean by components?

Well, that I actually mean these this x and this y.

Because in fact, look at this arrow here.

I can make this into a little bit of a triangle,

and imagine the y equals 3, right?

The y value is 3, go up by 3, the x value

is 4, go across by 4.

x equals 4, y equals 3.

The data stored with the vector are actually

these numbers 4, 3, and I could choose to write them

in different ways.

I could say 4, 3, or I could write these are in brackets

and write 4, 3 like that.

So in many cases, more generically,

a vector is actually just a list of numbers,

it's a list of components, and if I were in two dimensions,

I would have two numbers.

Three dimensions, three numbers, four dimensions, four numbers,

et cetera, et cetera, and this again,

comes up more in machine learning and data science,

but in the concept of physics, I'm

really thinking about this two dimensional space

with just an x and a y.

And incidentally, I will ask you the question,

what is the magnitude of this vector?

Think about that for a second.

Maybe you've heard of in 3, 4, 5 triangle, right?

If one side of a right triangle with a 90 degree angle

is three, the other side is four,

the hypotenuse of that triangle is five.

So one of the things you'll discover

as I do more videos about different vector math

is a lot of the math with vectors,

particularly in two dimensional space, that is,

relates to trigonometry and all the same math associated

with right triangles.

Returning back to this random walker example,

we can look at it with a new outlook on life,

and that is vectors.

Instead of having-- and this is really

the first thing when you're starting

to program with p5 vector.

This is already using the concept of vectors in the way

that I described it to you, but I want to rewrite this now

with p5 vector.

Here is the reference page on the p5 website for p5.

vector.

Now, it's a little strange that there's this thing called p5.

vector, maybe I can return back to that

in a moment in a little bit.

But what I want to highlight for you is this right here.

Create vector.

The function, create vector, is what

makes an object in p5 that is a vector object a p5.

vector.

And when you create a vector, you

give it two values, an x and a y.

It also can optionally take a third for an x, y, z,

but again, I'm not making use of the third dimension right now.

So the first thing beyond all of the fun interesting new vector

math that I will explore is just replacing my old x, y

variables with one variable that is a p5 vector.

Going into the code, I'll comment this out,

and I will say--

I'm going to say pos for position,

and then here in setup, I'm going

to say position equals create vector,

and the x is width divided by 2, the y is height divided by 2.

I want to draw that point at pos.x and pos.y.

And while this code, this random walker code

is based on the core idea of a random walker that can only

go in four different directions, up, down, left,

and right, I want to instead simplify this and just

let x and y change by any random floating point number

between negative 1 and 1.

So to do that, I'll say pos.x equals pos.x plus

random negative 1, 1.

Same for y, and I'm going to run the sketch.

So step one of working with vectors in p5

is go and find something you once

made that had separate x and y variables,

and see if you could use create vector instead for them.

Yeah, go ahead.

Do that now.

I'll wait.

[CLOCK TICKING]

Step two, I would say is that I want

to start building a foundation for a physics engine.

Ultimately, through all of these chapter 1 videos

and chapter 2 videos, by the end of all of them,

I'm going to have a very rudimentary physics

engine that I can build a lot more projects on top of.

It will also serve as a foundation of knowledge

and understanding to use more sophisticated and robust

physics engines from other libraries.

That's the point of where this all is going,

but in order to do that, I want to make heavy use

of object-oriented programming.

So if you've never done object-oriented programming

before or worked with classes in JavaScript,

a class being a template for creating an object,

then I might refer you to go back to my beginner coding

videos, where there's a whole section

on object-oriented programming.

But for right now, just to recap that, I'm in a very quickly

create a walker object.

So instead of having a position variable that's

in the global space, I'm going to make a walker class

and create a walker object that is in the global space.

Also to keep things organized, and this is just my style,