字幕表 動画を再生する
Hello.
So this is another video on working with vectors in p5.js.
And in this video, I really just want
to talk about what it means to make random vector, which
seems like, why is there even a whole video about that?
But I have a point to this, which I will get to.
It also is, I think, useful, because it's
kind of opening up this can of worms, this vector of worms,
which I want to open up, because I'm
going to end up looking at some other math functions
that I need.
And it's going to lead me to something
about static functions.
But that'll be in the next video.
Right now, I just want to look at this example that I have.
And what I have here is, first of all,
notice I'm translating the coordinate space
to the center of the canvas.
This is very important because I want to treat--
just for this visual demonstration--
I want to treat 0, 0 as the center of this canvas.
Then I'm making a vector with an x component of 100
and a y component of 0.
And I'm representing the vector as a line from 0,
0 to the x and y.
So it would be nice if I could draw a little hat on the end,
so it looks like an arrow.
But that's going to be too much work.
I could change these numbers, you know, negative 150.
And you can see there's my line.
So let's just think about, first,
what would it mean to pick a random vector?
Well, your first instinct might be
this, which is a very reasonable instinct,
let's make a vector that has between negative 100
and 100 as it's x.
And this is going to start getting very long.
I'm going to have to drag this way off over.
Negative 100 as it's y, that's like the range of stuff
that I'm picking.
And if I run the sketch, you know, at every single frame,
it is picking a new value for x and y,
and I'm seeing that line point off in a direction.
So this is a random vector generator, in a way.
But I want to show you something a little bit odd, which
is that if I take back ground 0 and put it into Setup,
what do you expect to see?
I'm going to see collect over time every single vector that
points from anywhere from 0, 0 to what?
Something with an x and y, minimum maximum
between negative 100 and 100.
Let's run this.
I'm going to let this play out for a little bit.
[MUSIC PLAYING]
Look at that result. I am seeing all of the vectors
fill up a square--
the worst drawn square ever.
Any vector, this vector, this vector, this vector,
this vector, right?
Because minimum, maximum.
This is, you know--
In many cases when working with vectors,
however, it's quite common that you
want to pick a vector with a random direction, but a fixed
magnitude.
What do I mean by that?
Here, the direction and the magnitude, it's all random.
And the magnitude even has kind of this arbitrary range,
because this is the longest vector possible,
but if I go to extend to here.
This one is actually shorter.
What would it mean for me to pick
vectors that fill out a circle?
There is something called a unit vector.
And a unit vector is a vector of length 1--
that's the unit-- with any direction.
So it's a kind of vector that you
use when you only really want to talk about the direction.
Ah, the magnitude doesn't matter.
Let's just pick 1 as a standard, and let's now pick a direction.
So what if I wanted to pick any unit
vector, any vector of length 1, but in any direction?
Oops.
So I could start to look into some trigonometry math
to do this.
And I will come to that soon enough.
But one of the benefits of working with vectors in p5.js
is there's a function that'll pick a random unit
vector for you.
And that function is just called random 2D,
because I want a random 2D vector.
v equals p5.vector.2D.
Now, there's something really odd about this,
which is I'm calling this function random 2D,
p5.vector.radom2D.
What is all that?
So this is veering off into this other topic
about static functions.
And I'm going to talk about that and cover
that in the next video.
But for right now, let's just understand
this as a function that returns a random unit vector.
So now, if I were to run this, look at all those random unit
vectors.
They're all of length 1.
Well, I can't really visually see
what's going on, because 1 pixel isn't very much.
I could use scale.
I could try using the scale function to kind of blow things
up.
But this is a really nice opportunity for me
to talk about another vector math function-- multiply.
Remember, when I had vectors a and b?
And I said a plus b is add the x's together, add the y's
together, and I'll get 8, 3.
Those are the numbers I used before,
but I think this math is correct.
And the function in P5 to do this was add.
Now, what if I wanted to use the idea of multiplication
with vectors?
Oh, my goodness, could I say a times b?
Well, I kind of can, but vector multiplication--
the vector product is a whole other topic
that I'll cover eventually.
But you might have heard of things like the dot
product or the cross product or even something called
the Hadamard product.
But I'm not covering those now.
When I'm referring to this function in P5, called
mult for multiply, I'm talking about scaling the vector,
multiplying the vector by a scalar quantity.
So, in other words, I'm talking about saying a times, not
another vector, but like the number 2.
And what do I mean when I say that?
If I have a vector that's pointing
in a given direction with a given magnitude, like 3--
well, let's actually make it 5, because I'm going
to use the 3, 4, 5 triangle.
If I multiply it by 2, now I have that same vector--
no, sorry, I have a different vector,
but it's the same direction with length twice as much.
So the length of this vector is 10.
And the way that this works is if it's in 3, 4, 5--
if the components are 3 and 4 because it's in 3,
4, 5 triangle, then all I have to do
is multiply each component.
So if I want to take a and multiply it by 2,
the vector I get is 6, 8.
3 times 2, 4 times 2.
So in this case, after I pick this random unit vector, which
has length 1, I can scale it to any quantity
by saying v multiply 100.
And think about what's going to happen now.
I'm going to run this sketch.
And I get any vector, always of length 100,
pointing in any direction.
This opens up, incidentally, a lot of possible,
just like visual possibilities, just from this alone.
And certainly, I could change this and say, oh,
any vector between 50 and 100-- and I should probably give this
some alpha to sort of see.
And we can see now I have any vector,
it's at a minimum length 50, maximum length 100.
And just from that I'm getting this sort
of like nice visualization.
That would be harder to do without these
built in functions in vectors.
Before I move on, let's just quickly move back
to this walker example and see that I could now
say this top velocity equals p5.vector.random2D.
And this would now be a way of taking a walker
and every time I run the sketch, it's
going to go in a random direction.
The speed, the magnitude of the velocity
is always going to be 1.
So I could also randomize that to some value
between like 0 and 3.
Oops.
This dot velocity dot multiply.
And now you're seeing just another way
of thinking about how you might initialize something
with randomness.
And maybe Perlin noise could play a role here.
Is there some way you can create an array
of all these walkers with initial velocities
according to Perlin noise?
If you go back and look at my Perlin noise videos,
that might create some interesting trails
you could consider.
But I'm going to stop here and let
you do some variations of this now
that you see about how random 2D works and multiply works.
There is another aspect to this, though, that I want to unpack,
which is what does it mean to call a function like .multiply,
which is on a vector v, versus a function like random 2D,
which is not on a specific vector,
but on the type of thing itself, p5.vector.
So I'm going to come back and that's
called a static function.
I'm going to cover that in a separate video.
And then after that, we'll be ready to start
looking at acceleration and all the other good stuff, magnitude
and normalize and all that sort of stuff, OK?
So thanks for watching this one.
And I'll see you in the next, one maybe.
I don't know.
Good bye.
[RINGS BELL]
[MUSIC PLAYING]