- I remember January 2019. 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. Luckily, I have that open right over here, and then you can see this is a formula that's following both the
conversation of momentum and the conservation of kinetic energy. So with both of these
formulas from physics we can then get the new velocity, right? U here is the old velocity,
and v is the new velocity. So the new velocity is a function of, the both object's mass, and
their previous velocity. Let's first add the idea of mass. So I'm going to go in here, and I'm going to add the idea of mass. And first I'm just going to
say, hey, the mass is one, so let's not worry about mass right now. By the way, what happens
if the mass is one? Think about this. If they're equal mass. If they're both equal mass, and this one is stationary,
and this one's moving, and they clack, right? All of the momentum and
energy is transferred, this one stops, this one moves. But that's not what's going to happen when the masses of each are different, so that's when it's going to
get really interesting, okay. So now we want a function called bounce, and I'm also going to say other. And it would be really
nice if I could just have that formula right over
there for me to refer to. Alright, so I took a
screenshot of the formula, so I've got it over there to refer to, and I just need to implement it here in this bounce function. So, one is this, two is other. So I'm writing it, I'm
not referring to my blocks as block1 and block2, I'm referring it to within
the object as this and other. So what I want to do is say this.v, but I don't want to start messing with v, because the old value of
v is part of the formula. So let's do this, const.v. Actually, you know what? Let's do, let's do, sorry, let newV = this.m-other.m, divided by what? Let's make a variable called sum of M, which is this.m + other.m. So this is divided by sum of M, and then, times this.v, right? So that's this side, and then, I mean, I could do this in one line, but I'm running out of space here. So then += 2 * other.m, divided by sumM * other.v. So I think what might make sense here is the thing is I don't want to update this object's velocity. I guess I could do both of them. I'll just do both of
them in this function. I was thinking I could return it, and then 'cause it's the
same formula both ways, I'd rather not duplicate my code. Let's try it this way. I'm going to return newV. You can see how this is
the same formula twice, it's just written in reverse order for v2, but if I change the two there, and change all the twos to
ones, we'll get the same thing. So I should be able to say,
if I go back into sketch.js, and I say, I'm going to say
v1 = block1.bounce block2. I'm going to say v2 = block2.bounce b1, block, block1. And then I should say, I'm going
to update their velocities. This I don't know if I
love, but this will work. So let's see what we got here. C'mon, clickety clack,
go, bounce that thing! Look at that, they're the same mass. So, by the way, let's, it's like, moving, it's like a funeral dirge over here, the way that thing's moving. Let's give it a bit of a
faster velocity to start. And we can see, boom, that's
a perfect elastically, now, it doesn't look very realistic, because really what we're seeing here, is like, should look like this, right? That's what we want. If both of those objects
have the same exact mass, one's going to transfer
all of its energy momentum to the other one. Now what if they have different mass? So let's give this one a size of 20, and this one a size of 200, and actually, I'm also going to give them each individual masses. So this will have a mass of one, and this one's going
to have a mass of 100. So not perfect, and some
weird stuff is happening, because I'm introducing
another argument here. So now let's see what happens. Oh, there we go, that's what we want! Look at this, right? Now the formula's working
with different masses. Alright, we're doing well,
oh, we need a wall, right? We need for the little
block to hit the edge. So the wall is another
thing that doesn't exist in the real world. We're looking at a
perfectly elastic collision with a immovable, fixed static wall. In other words, a wall,
a block of infinite mass. So we're going to give this
wall as having infinite mass, but honestly, the easiest
way to do this is just, if it hits the wall, just
negate, reverse its velocity. That will simulate a
perfectly elastic collision with an object of infinite mass. So I'm going to write a
function like hitWall. If this.x is less than
zero, then this.v *= -1. And then I only need to, in this case, I only ever need to check block1. So now I'm going to check block1.hitWall, and let's go here, boom,
boom boom boom boom. Amazingly, that kind of
sort of did something. Now, are we getting the right numbers? This is the question. And also, I kind of
want to hear that clack. Don't you want to hear that clack? So let's add the clack. Oh, I just realized,
this way that I did that, I really should have this
also be if block hitWall, then do something like, block1, let's let these be
separate functions, reverse, because, I also, I'm going
to need to do counting, there's a bunch of things that
are going to need to happen so it's good for me to
actually do it this way. Return, I'm going to say reverse, and then, okay, so this looks right. Let me make sure this is the same thing. Whoops, ah, I hit refresh, sorry. Da-da-da-da-da-da-da! Alright, so that did something. Now, let's add the clack. I mean, we're really
here just for the clack. The clack in the 3Blue1Brown video is the most beautiful clack ever. So I think if I said clack.play,
let's see what happens. (block clacks)
Ooh! Oh, that's kind of good! I need to clack when it
hits the wall though, too. (block clacks) Oh, the clacking, oh! It's a little weird how I lack
the clacking so much, is it? I don't know, it's very satisfying. Alright, so now let's count,
I mean, in theory, we're done! (bell rings)
I have a feeling we're going to run into some big problems. But let's say, int. So I'm going to start
with a count of zero. I am going to create a dom
element, I'll call it countDiv, because I'm going to make
a countDiv = createDiv, with the count in it. Ah, ah, ah. And then, I am going to say, count, countDiv.html count, and we will increase the count every time something collides. Whoops, line six error. Oh no, int, what am I doing, int? Int, oh, I feel like I'm
in Processing, it's a lot. Let's make them the same mass. Oh, and I got to make this bigger. Yes, okay, and then,
let's number format this. So, okay.
(block clacks) Hey, that's kind of like pi, three! Now, I'm going to make,
okay, so here's the thing. The magic number here is 100. So, if the mass of one
of the objects is one, the mass of block1 is one, the mass of block2 should
be the mass of block1 times 100 to the power of something. So the one here, this doesn't matter, 'cause this is just one. The ratio, so I could do 100
to the first power, right? 100 to the zero power,
which would be their equal, 100 to one, which would be one. 100 to the second power,
which would make this 10,000, right, to the third power? You see where we're going here. So what I want to do is, that's how I'm going
to calculate the mass. So, I guess what I want to say is, if the digits are zero, then is then two, I'm going
to say const m2 equals power. 100, to the number of digits. (block clacks) So that's one digit. And so, and now, that's
zero digits really, because, I'm confused when I'm
talking about digits, right? What I mean by zero is the
number of digits after the dot. Pi is 3.1, okay? So, now let's have one
digit after the dot. (block clacks) 3.1, that's crazy! Alright, here we go, two digits. (block clacks) Uh. Wait, hold on a second. Actually, the way that this
would make the most sense is for, if I want to get two digits, I should be saying 100
to the power of one, which is digits minus one, and then this makes sense down here. This is my digits plus
one, and there we go, this is two digits, I
should get the number 31, okay, that's good. And then if I change this to one digit, I get the number three. And by the way, when do I
decide when to stop counting? So at a certain point, the second block, or I know which block is the first, which block is the second, is going to just go off
and running forever, and they're not going to have
another chance to ever collide. So I'm just doing that visually right now. But we could actually
put something in here to determine when it's finished. But you could see here, now even though they're both moving in
the direction that way, but the second, the larger
block is moving faster, so they're never going to collide again, and that's something I could create a conditional to test for. But, let's talk about
the real problem here. The real problem is Euler integration. The real problem is, the phony
baloney physics simulation that I'm doing here. I am taking a giant step in time forward each frame of animation. And so the block is like, moving, then it's covering, it's colliding, again, everything is wildly inaccurate. So there are a variety of techniques of making a simulation more accurate. This diagram over here is
illustrating this concept. So if the blue line is like the real thing that would happen in the real
world with continuous time, if I'm just making guesses every so often, with the red line, with
the Euler integration, just adding the velocity
with large time steps, you could see how the
thing gets out of place. And this, if you were
programming a simulation to try to get a rocket to land on some, moon, planet thing, you're
going to have a problem with Euler integration. So there are a variety of techniques that are different types
of integration techniques for physics engines, and then of course, 3Blue1Brown talks about
other ways to calculate the number of collisions that would happen based on thinking about the
space in a different way. But what I'm going to do here is just see, what if I just make
those time steps smaller? So in other words, if I
recreate that diagram like this, and this is, you know,
with large time steps, well, if I could get smaller time steps, I could stay closer to
what it really would be. So a way of doing that
might be the following: I am going to create a variable, I'm going to call it a timeSteps. And I'm going to put the digits at one, just so we know it's always going to work, and I'm going to say the
timeSteps, I'm going to just try, let's add 10 extra timeSteps. We can make this a constant. So there's always going to
be, every time through draw, I want to do this 10 times. So I'm going to say, for let i = 0, i less than the number of timeSteps, i++. And I'm just going to do
this, all of this 10 times. All of this, by that I mean, check the collisions, bounce
the blocks, play the sound. And let's comment out
the sound for a second. We'll have to think of a different
way of dealing with that. Update the blocks, I'm going
to show once they're drawn. So if I'm doing that 10 times, the other thing I can do here is I can divide the velocity
that I want to start with with the number of timeSteps. So it's actually, it's as
if I'm doing the same thing, but with a tinier, tinier velocity, and just do it multiple
times through draw, so our animation happens faster. Let's see if this allows us to do. Let's just check to make
sure this is still working. One, two, three, oh, I miss the clack. I really miss the clacking. Let's try two digits. One, two, three, four,
five, da, da, da, 31, alright, that's pretty good. Now let's try three digits. And let's see, we should get 314! C'mon, ah, ah, go back! Hit the wall again, hit the wall again, clack, 314, woo! Let's add the clack back in. What happens if I add the sound back in? (block clacks) Hah, that was tolerable. Alright, 314, okay. Let's try four digits. (block clacks) Uh oh, goodbye! So that didn't work, what
if I we have 100 timeSteps? (block clacks) Okay, okay, that was, hey, it worked out! Alright, we got to deal with the sound. Alright, so I think, basically, what we should do with the
sound is I'm just going to say, let clackSound, I'm just going to assume it's not clacking, and
then if it clacks once, if it hits anything, I will say clackSound = true. Like, only if it collides,
either with the wall, or the other block. And then, I'm guaranteeing
now that I can only, I will only play the sound
once every time through draw. So this should really help things. So let's try this now, 100
timeSteps, four digits. (block clacks) 3.141, we're doing really well here! Okay, now, five digits? How about 1,000 timeSteps? (block clacks) Looks pretty good! Six digits, 10,000 time steps? (block clacks) That's pi, right, oh, clack! Oh, 3.14159! Alright, save, I'm saving! Seven digits, 100,000? (block clacks) What, that seriously worked? That's pi, right? I got seven digits just
through this method? I really didn't think I
was going to get that high. Alright, let's try eight. Let's try, like, 500,000. (block clacks) What, is that, is there a six there in pi? I mean, could I really get one million? I'm surprised that it actually, like, will go to one million. Nine, but I don't think that
it can handle 10 million. 10 million timeSteps
each time through draw? Can I get away with, like, 5 million? (block clacks) What? 1.4, what's pi, 14159265? That's right, that's pi! Can I really do 10 million timeSteps? (block clacks)
I didn't think JavaScript, oh yeah, the other thing I should do here, is I should constrain
where it's being drawn. You can hear the frame rate
is getting really, really low, so I'm just going to give these
a variable called x constraint. I want to say block1 can't be
drawn any further than zero, and block2, if this size is 20, can't be drawn any further than 20, and where I'm drawing it, let me say constant x equals constrain, this.x between this.xConstraint, and I don't know, the width
of the window should be fine. And then I'm going to
draw it at xConstraint. This will just visually, I think, make it look more correct. Oh, when an x constraint is not defined, 'cause I probably forgot the this dot. (laughs) Yes, I forgot the this dot. Oh, oops, no, no, I want to
draw at the x that's constraint, I don't know what I'm doing here, put this here, and now let's watch. (block clacks)
It's counting. A lot of collisions. Alright, can we, can we get to 10 digits? Let's try, like 500 bazillion. It's just running really slow. There's too many timeSteps. But I think we probably
will get the right number. (cheerful mamba music) ♪ It's the Pi Song ♪ ♪ We're counting the
collisions on the Pi Song ♪ ♪ We're counting the
collisions on the Pi Song ♪ ♪ Pi Song, Pi Song, Pi Song ♪ (cheerful mamba music) I don't have the digits of pi memorized. Oh, hold on, ah!
(block clacks) Ah, we got 10 digits everybody, whoohoo! Only 500 million, no,
50 million timeSteps, I had to look at this very close up. 50 million timeSteps per time per draw, I mean, why not, right? Oh, let's go to, this goes
to 11, we have to go to 11. Let's just add another
zero, because why not. Loading, loading, okay. Alright, so this, I might
need to speed this up, but I'll at least play you a little song. (peaceful ukulele music) ♪ 3.14159 ♪ ♪ 2653589 ♪ ♪ 793238462 ♪ ♪ 2643 ♪ ♪ 832 ♪ ♪ 795 ♪ ♪ 884 ♪ ♪ 1971 ♪ ♪ 939 ♪ ♪ 375105 ♪ ♪ 1, woops, 8209 ♪ ♪ 7494 ♪ ♪ 45923 ♪ (block clacks)
Ah, whoa! Oh, yes, oh, it's moving, it's moving! Okay, three, one, four, one, five, nine, two, six, five, three. Okay, it's got to hit one more time. Go, catch up little guy! Catch up little square, little one! You can do it, give me a clack! You can do it, you can
do it, you can do it! Ah, yes! 31415926535, that's 11 digits of pi, in JavaScript, p5, in the p5 Web Editor, just by elastic collisions of two squares! Woo, what a coding challenge. (whistle blows)
Alright, thank you for watching this coding challenge. This actually did happen
during a live stream, every once in awhile I do live streams for YouTube members and patrons, and I just happened to be
doing this during one of those, but this was so sort of fun and weird that I will include a link
to that unlisted live stream if you want to take a look and see the long version of all of the time spent actually doing this coding challenge, and waiting and waiting and waiting. I also have made a
Processing version of this. I've made some other attempts, some of them rather comical. For example, I tried to say, could box 2D actually do a good job of figuring out the elastic
collisions more accurately? As you can see, that did not work. I also tried using big decimal. Now, in JavaScript, I'm
using floating point numbers, and a floating point
number just has 32 bits of memory to store, it's
really just about seven digits, I think, you could, in Processing, I could use a double,
which has 64 bits of memory to store the decimal number. But there are lots of implementations, BigDecimal being one in
Java for storing huge, huge, decimal numbers with
really high precision, and I believe there are some
JavaScript analogs to that. So, I will include links
to all of that stuff in the code that goes along with this. If you can come up with a
creative way of visualizing this, of optimizing it to make it run, you should definitely check
out 3Blue1Brown's video. I have a version where I
implemented the optics method, but I had to load the number pi in order to then calculate. So this is a question I'm
asking you, the audience. Is there a way to do, to count
the number of collisions, either without tiny tiny
timeSteps that take forever, or by having access to the
number pi in the first place? I would love to know your
answer or thoughts on that. Go to thecodingtrain.com. Link in the description
to this challenge page, and you can submit your
own version of it there. Thanks for watching, and I'll see you, uh, see you before next
year on Pi Day, hopefully. I mean, there's like
Tau Day, it's coming up! June is, Summer's right around the corner! June is bustin' out all over! Goodbye, see you later!
(whistle blows) (upbeat music) (peaceful ukulele music) ♪ 3.1415 ♪ ♪ 926535 ♪ ♪ 89793238 ♪ ♪ 46, it's Pi Day, Pi Day ♪ ♪ Got to calculate from Pi Day ♪ ♪ Everyone's looking
forward to the digits ♪ ♪ Digits, it's Pi Day, Pi Day ♪ ♪ Got to calculate on Pi Day ♪ ♪ Everyone's looking
forward to the digits ♪ ♪ The digits ♪ ♪ Partying, partying, yeah ♪ ♪ Partying, party, yeah ♪ ♪ Fun, fun, fun, fun, Pi Day ♪ (upbeat music)
