Welcome to nature of code chapter 1,
[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,
I'm going to make a separate JavaScript file for walker.
Then I'll write it as a class with a constructor function
that will receive an x and y.
You will have one variable, a position.
What is the walker do?
It walks, so I could call that step or walk or update.
I'm going to use the name update,
I'm going to write a function, and I'm
going to grab the code that I have here, bring it into walker
js, and what am I missing?
[MUSIC PLAYING]
(SINGING) This dot, this dot, this dot, this dot, this dot.
Now that I have the position vector as part of the walker
class, I need to refer to the position
as this dot position, which at some point
is going to create some awkward looking longer winded code,
but we're going to live with that.
And then I think I'm going to have a show function
for drawing the walker.
I will grab this code that draws the point, this dot,
and now I have my walker class complete.
If the constructor creates a position vector,
the update function updates the x and y position,
and the show function draws the position.
Back into sketch, I'm going to make the variable now
called walker and setup call the constructor
with an initial position of 200, 200, and then in draw, update,
and I think I forgot the stroke in all of that
as part of the show function.
Put that back in, and now, whoops, what do I have wrong?
Oh, I forgot to reference walker.js in index of HTML.
And there we go.
I have exactly the same random walker.
So this brings me to the end of this first video about what
is a vector and using p5 vector in your code in your job script
code in p5.js.
But I have really barely scratched the surface.
I'm not doing anything other than thinking of this p5 vector
as a place to hold the x and y variable.
I really want to start thinking about this concept of a vector
more formally, and if I have a position represented
as a vector pointing from the origin
to the x, y location where I'm drawing something,
then couldn't that object that has that position also
have a velocity representing as an arrow that's
moving its current position to its next position
in my animation?
And maybe I could have also something
called an acceleration, which in the same way that velocity
is changing the position over time,
the acceleration is changing the velocity of time?
And I've heard about this thing called a force.
Maybe there's something like Newton's laws and physics
in motion and things that are at rest
and they stay at rest and all that stuff.
Could I somehow take this concept of a force.
Maybe you've heard of this equation force
equals mass times acceleration.
Could that play a role in how acceleration is calculated,
which changes velocity, which changes position,
and so these are the foundational elements
of a physics engine, and I am going to build all of those
slowly bit by bit, while talking about different mathematical
operations with vectors and that's
what you'll see in the next few videos and the next few videos
all throughout chapter 1 chapter 2.
So if you're interested, just keep on watching.
I don't know if they're there right now,
but when they're there, they'll be there,
and you can watch them.
I'm making them.
And these clothes are different clothes depending
which day I'm recording them.
Goodbye.
[MUSIC PLAYING]