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.

Thank you very much.

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.