[BELL RINGS]
Welcome to another, now with haircut,
video in Chapter 2, Nature of Code.
What I have done so far, using the classical laws of motion,
classical mechanics, force equals mass times acceleration,
I have implemented a system where mover objects can
receive forces as vectors and have those forces control how
they move about a canvas in p5.js.
But the way that I have created these force vectors
is just by picking numbers out of a hat,
and I want to do something more.
The formula that I want to start with
is the formula for friction.
Now, there are many different kinds of friction and examples
of friction.
And there's static friction, which
is friction that holds something in place
and not moving versus kinetic friction, which
is the friction that occurs when two surfaces are in moving
in contact with each other.
Here's the diagram that I have to describe the friction
force in the Nature of Code book itself.
I'm going to take a minute to rewrite that formula over here.
[MUSIC PLAYING]
The approach I like to take when finding a formula like this
and then trying to figure out how to apply it in code
is to unpack each of the elements of the formula one
at a time and figure out whether it actually applies or is,
in fact, something that we can ignore
to simplify in the case of our sort of 2D p5 canvas.
So one, let's-- I'm going to go in sort of in arbitrary order
here, but something really to note here is, what is this?
This is the velocity unit vector.
Why are we doing this?
Let's consider I have this circle
at the bottom of the canvas.
It's moving in this direction, that's its current velocity,
and I want to describe what is the direction of friction.
Well, the direction of friction is--
and this negative 1 is really important.
These two go together.
The direction of friction is a vector
in the opposite direction of velocity.
Circling back for a second, what am I doing again?
I'm calculating a force, a vector,
and I need to figure out two things, direction
and magnitude.
The direction here is expressed as the unit vector pointing
in the velocity's direction times negative 1.
So I know that the friction points in this direction.
That's the friction force.
What is the magnitude?
Well, I have two other variables in this formula.
And all these, by the way, are scalars, scalar, scalar,
scalar, and this is the vector.
This is known as mu or the coefficient of friction.
Let's play a little knock-knock joke together.
Knock, knock.
Who's there?
The interrupting coefficient of friction.
The interrupting--
Mu!
[CHEERING AND APPLAUSE]
Thank you.
Thank you very much.
Coefficient of friction is a value
that describes the strength of the friction force based
on what material it is.
You could imagine if this is like ice
and this is an ice skate, there's
going to be a lot less friction.
That ice skate will glide across the ice
versus this is sandpaper and this
is some other kind of rough material
and there's a much greater amount of friction.
So the coefficient of friction is tied specifically
to the material itself and what its behavior as it
comes into contact.
Then we have something interesting here.
This-- the normal force.
To describe the normal force, let
me refer back to the diagram.
This diagram has a sled in contact with a hill,
and there is also the force of gravity.
The force of gravity is a force pointing directly down
towards the center of the Earth and causing the sled
to kind of rub in with the hill as it moves
and as it comes down.
The normal force is the force perpendicular
to the two surfaces in contact.
And its magnitude is tied to the--
this component of the gravity force,
the component that is perpendicular to the hill.
But guess what?
None of that really matters.
[CHUCKLES] What I want to say is--
I mean, all this is like super important in real world
physics, but let me remind you what we're doing here.
I have a ellipse, a piece of graphics drawn on a two
dimensional canvas coming into contact
with the edge of the canvas.
So there is a normal force pointing
straight down in my world that is the sort of looking at the--
I'm looking at a slice of a three dimensional world
in a way.
There is a normal force, but what its magnitude is
is something that I could just make up.
It's some kind of constant in this case.
Quick clarification.
N is not a constant in the sense that it
depends on the weight, which depends on the object's mass.
So for different objects, that relative amount of friction
would be different because their weights would be different.
But in the case of one particular object,
I can treat it as a constant here and scale it according
to that object's mass.
I'm going to simplify this again to just have one object
so as I add the code for friction into it,
I'm not dealing with multiple objects.
[MUSIC PLAYING]
OK.
So I have my single object bouncing up and down.
I'm going to invent a kind of artificial scenario
where I want this mover to only experience friction
when it comes in contact with the bottom surface
of the canvas.
So any time it is in contact with the bottom surface.
It will experience friction.
To make this happen, I'm going to write a new function
in the mover called friction.
[MUSIC PLAYING]
I'll check to see how far is it away from the bottom.
[MUSIC PLAYING]
I want to know how far is it from the bottom.
So I want to know the difference between the height
and its position plus the radius,
because remember, the position, the y position is the center.
So I want to look at the edge in contact with the bottom.
I will say it's in contact if that difference is
within one pixel.
[MUSIC PLAYING]
So let's just run the sketch, what
we call the function friction.
[MUSIC PLAYING]
And let's see if-- when it comes in contact with the edge
we get the word friction here in the console.
So we can see, every time it bounces,
we're seeing the word friction.
[MUSIC PLAYING]
And now we can see, as it's rolling along
the bottom, friction, friction, friction, friction,
friction, because it's in constant contact
with the surface.
Maybe I would want to treat the scenario of when
it hits the surface once versus just
rolling on the surface differently,
but I'm not going to worry about that right now.
The live chat that's watching me record this video right
now is also pointing out that things would be quite different
if my surface were at an angle.
So how the normal force would be calculated relative
to the force of gravity.
That's why I'm happy about this simple scenario
of this sort of flat surface along the bottom.
Let me first get the direction of the friction force.
I need the velocity vector normalized to length 1
multiplied by negative 1.
Let me copy the velocity vector.
Let me normalize it and reverse its direction.
Now that I have the direction, I need the magnitude.
What is the magnitude?
The coefficient of friction, mu, times the strength
of the normal force.
The normal force is proportional to the weight, which is scaled
by the mass of the object.
So I can use mass in my calculation.
And then mu can be a value that I make up.
Let's say 0.1.
The normal force will be equal to the mass
and then I can say force set magnitude mu times normal.
Once again, anytime I'm calculating the force,
I need to both figure out its direction,
a normalized vector here pointing
in the opposite direction of velocity,
and its magnitude, the coefficient of friction,
a value I'm making up, times the strength
of the normal force, which is some value scaled according
to mass.
What do I do next?
Apply the force.
And I'm realizing I want to call this friction.
[MUSIC PLAYING]
Let's run this and see what happens.
[MUSIC PLAYING]
[GASPS] It came to a stop!
How delightful!
Now that this is working, this is a nice moment for me
to take a minute and just add an array
so we can see a bunch of these all with different masses
and see how they behave within the same environment.
So let me quickly add that in.
[MUSIC PLAYING]
Here you can see I am making 10 mover objects.
Everyone will start with a y position at 200,
but each will start at a random exposition
and with a random mass some value between 1 and 8.
Also might make sense for me to make this mu variable
a global variable, just so I can play
with it outside of the interior of the class itself.
I'm going to leave it up there.
And then inside Draw, this is a nice opportunity for me
to use a for of loop, because I want
to say for every mover of--
I can't.
It's hard to say the word of with what you're describing.
It's really for each or for in really makes sense.
But the loop that I want in JavaScript is for of.
I have a whole other video about that.
But I want to look at every single mover
inside of the mover's array.
And one way of doing that is for every mover of movers,
run all of this code.
And let's take a look and see what happens.
Now, they're all bouncing together.
They hit the bottom at a slightly different time.
They should all respond to wind differently based on their size
not their mass.
And then they'll all also have their own friction
according-- that's scaled according
to their mass as well.
[MUSIC PLAYING]
And after a little while, all of them will roll to a stop.
Does this feel accurate?
Does this-- what does this feel like?
Well, I suspect that by playing around
with the coefficient of friction,
the relative strength of the weight,
the gravitational force, all of these things,
all of these variables you can tune
to have the simulation feel more or less
like different kinds of material in different kinds
of environments.
So while here I am attempting to actually write
a code that uses the formula for friction in the real world,
I could also do this with a very quick and dirty algorithm
that I think it's worth showing you just
at the sort of tail end of this video.
Ultimately, what friction does is it
takes a little bit off of the velocity every single frame.
We lose some speed as this object is coasting
along a particular surface.
The friction slows it down.
Another way to lose a little bit of velocity
with each and every step in time would
be to just take a percentage of velocity off.
I could comment all of this out and just say,
this dot velocity multiply 0.95.
Meaning, shrink the velocity vector
every time step, if it's in contact with the edge,
with the bottom surface by 5%.
And let's just see if this has the same result.
[MUSIC PLAYING]
In the end, it's pretty similar.
They all come rolling to a stop.
Did you notice, though, that they all
seem to come rolling to a stop at exactly the same moment?
Well, that's because one flaw with this particular method
is that I'm not taking into account the objects mass.
So you know, for just having things sort of slow
down over time, this might be a really easy way to do it.
If you want to make sure that that force,
that friction force is scaled to mass, then maybe doing it
the vector way is.
One is not inherently better than the other,
these are just different ways to produce
the same kind of effect.
So this wraps up this very basic demonstration
of coding a friction force into a simple 2D physics simulation.
There's a lot that you could try before you move-- we move on
to the next video.
So we'll try these things as an exercise.
I wrote them all down.
One is it's pretty arbitrary that I decided
to have this sideways view of the world, of taking a slice,
a two dimensional slice, and things are falling up and down
and moving left and right.
What if what I were actually looking at
was a top down view of a 2D world?
So I'm actually overhead maybe a billiards table
and lots of things are rolling around this surface
and experiencing friction.
How might what you code change?
But if I were to stay in this world that's
the vertical slice, what if I wanted,
instead of having a horizontal surface at the bottom,
to actually have a sloped surface within the frame
and my objects are falling down and maybe rolling down
this particular surface.
How would I have the force of gravity behave,
and how would I have the force of friction behave?
Truthfully, the material that you need to do this
is coming in Chapter 3, where I'm
going to look at angles and polar coordinates and things
like a pendulum simulation.
So some of the ways that you would calculate a force
perpendicular to a non-horizontal-- perfectly
horizontal surface are coming soon.
But if you maybe want to look ahead
or experiment with how to do that, try that as an exercise.
I am completely ignoring the difference
between static friction, what's the friction that's
holding something in place when it's not moving,
versus kinetic friction, that friction when it's in motion.
That might be something you consider folding
into this particular example.
Can you demonstrate those two differences.
And then finally, I think this visualization would
be so much more sort of compelling or illustrative if I
were to actually draw the various vectors.
Could I draw the velocity vector as well as
draw visual representations of all the forces.
So could I see the drawing of the friction
force, the gravitational force, the wind
force, all those other forces within the simulation itself.
So if you try any of those and you
make your own version of them, please
go to the URL that's in this video description, where
you can share your variation.
I would love to check them out and maybe also show them
in a future video or livestream, where I sometimes them
show community contributions from the website.
Now, I have two more case studies
to look at related to forces.
One, in the next video, is very similar to friction.
Actually going to look at a drag force, air resistance.
So what happens when something, a body
is falling through the air?
How does-- what sort of force acts on it?
Or a body is moving through a liquid.
So that's known as drag or a fluid resistance.
I'm going to look at that force in the next video.
And finally, I want to circle all the way back
and look at that first example I made when I looked
at acceleration of this object being attracted to the mouse,
and make a version of that, but use
the actual formula for gravitational attraction
itself.
So just a couple more videos left in this Chapter 2,
and we'll be moving on to Chapter 3.
And I hope you're enjoying it and all that stuff.
See you soon!
[MUSIC PLAYING]