Do you remember January 2019?

Oh, it was a simpler time.

Something happened that month.

A video came out on the Internet.

This video was called, The most unexpected answer,

I'm looking it up, The most unexpected answer

to a counting puzzle.

And this video was from one of my favorite YouTube channels,

3Blue1Brown, where I learn a lot of wonderful math stuff

and I get a lot of inspiration for stuff that I do.

And what this video was about

is it was about these two blocks.

There was a small block, and a big block.

And these blocks, they moved around,

they bounced into each other, they clacked.

It was like, the most beautiful clacking sound

I've ever heard.

And then they bounced into a wall,

and after awhile, just count up how many times

they're bouncing into each other,

and this weird thing happens, this number appears,

this number which is the digits of pi appears

based on how many times they're clacking into each other,

which is crazy.

Now, if you want to know why that occurs,

you should go and watch the 3Blue1Brown video series,

and even towards the end of that three part series,

3Blue1Brown makes a connection to optics,

and there's so much beauty and wonder in there.

This is not a new concept,

you can find some other resources.

There's a wonderful paper from 2003,

I'm looking up the title of it now,

by G. Galperin called Playing Pool With Pi,

The Number Pi from a Billiard Point of View.

There's a Numberphile video,

and I'll also link to some other resources

where you can read about this particular phenomenon

and why it occurs in this video subscription.

But that's what not I do on this channel.

What I do on this channel is I code stuff.

So I am going to attempt in this coding challenge

to make my own version of 3Blue1Brown's

collision clacking magic wonderful thing,

and we're going to see like, can I really make this happen,

just in the browser and JavaScript,

and can I actually write some code that's accurate enough

to get the digits of pi?

And where does this all break down, and what happens?

So, let's code.

(whistle blows)

Now, to celebrate Pi Day,

I'm going to do something a little bit different.

I'm going to just start with a little bit of boilerplate code.

I kind of use the same stuff in so many of my examples,

maybe I can save you five minutes here

of retyping this part out.

So what I'm starting with is just a very basic

object-oriented system.

I have a class called Block,

and each Block has an x and y,

that's where it is in the canvas,

and it has a width, it's a square,

so the width and the height are the same.

And then when I want to draw it, I just draw it as an image,

and I've loaded one of my coding train characters.

The square character from the coding train.

I also have in here a little clack sound loaded

that I may or may not use,

and then, I have created just two blocks,

block1 appears at 100 with a size of 20,

block2 appears at 200 with a size of 150,

and then I am showing both those blocks.

Alright, so what do I need to do?

What I want to first do is give these blocks a velocity.

So let me go into the Block class and add a velocity,

I'm going to call it v.

And then I am also going to write a function called update

where I will say this.x += v.

So the idea here is it has a velocity,

and x changes by that velocity.

Then, I'll go back to the sketch,

and let me give them a velocity,

like the block1 is going to have a velocity of zero,

and block2 will have a velocity of negative one,

and then I should be able to say also here,

I can just call update for both of them.

Update, update.

V is not defined, did I really forget the this dot,

already, so already in this challenge?

I think that's what I did, I totally forgot this dot.

Oh, this dot this dot.

So now what I need to do is I need to figure out,

how do I check if the two blocks

have knocked into each other?

Okay, the way that I would do that,

let's write a function, I like to do everything

in the class when possible.

I'm going to write a function called collide,

and I'm checking if I'm colliding with another block,

call it other.

So I'm checking if this block

is colliding with some other arbitrary block.

So how do I know?

If this is block1 with an x and a width,

and this is block2, with an x and a width,

I know that they are not intersecting

if the left side of block2 is greater

than the right side of block1,

or if it was on the other side, right?

If the left side of block1

was greater than the right side of block2.

Otherwise, they must be intersecting each other.

And I know this is a really simple situation,

I don't need to check y's and heights,

because they're only moving along

this one-dimensional horizontal space.

By the way, the math is going to be a key concept here,

and where I'm getting to that,

if you know, you're like, why not the math?

Talk about the math!

So now I can say, I can look and basically say, like,

if this.x + w,

that's the right-hand side,

is greater than other.x, other.x, right?

Oh no, is less than, right?

Or, if this.x is greater than the other.x

+ other.w,

and this has to be a this dot, alright?

So now, I'm going to say,

println, oh no, print, not collide,

not collide, otherwise,

print collide.

Let's see if I got this right.

So it's moving, it's moving,

oh, I got to call this function, that would be nice.

So I'm going to say block1,

1.collide block2.

So I'm adding that in, and it's moving,

not collide, not collide, not collide, not collide,

not collide, not collide, it's going to collide.

It's colliding, it's colliding, it's colliding!

Eventually, it's going to get to the other side,

go to the other side, get to the other side,

not colliding anymore.

Okay, my algorithm was correct.

So, really if I want that,

I want that to just return true or false.

So what I'm going to do is,

I'm actually going to say,

I'm just going to, I could write return,

write return false here, but another way I could do this

is just say return not, not this expression.

This is a test to see if those two blocks

are colliding with each other.

Oof, alright.

If block1 collides with block2,

now what I want to say

is block1.bounce block2.

Alright, I want them to bounce off of each other.

So certainly at some point we're going to have to deal

with the fact that there's a wall here.

But right now I'm just looking at these two,

and what I want to do is I want to calculate

the new velocities from perfectly elastic collision.

So this has a velocity, this presumably also has a velocity,

maybe it's moving that way, maybe it's that way,

maybe it's at rest.

And, in an elastic collision, there's no friction,

there's nothing else here in this environment.

They're not like squishy things,

no momentum, no energy, nothing is lost.

So I need the formula for an elastic collision.