- Coding Videos/
- WebGL /
- Coding Challenge #139: Calculating Digits of Pi with Collisions

# Coding Challenge #139: Calculating Digits of Pi with Collisions

### Download Video link >

Coding Challenge #139: Calculating Digits of Pi with Collisions

Happy Pi Day! In this video I attempt to compute the digits of Pi using the “collisions” method, thanks to 3Blue1Brown for the idea!

π» https://thecodingtrain.com/CodingChallenges/139-pi-collisions.html

π» https://editor.p5js.org/codingtrain/sketches/4FuKfd-LJ

π» https://github.com/CodingTrain/Pi-Day-2019

π Playing Pool with Pi: https://www.maths.tcd.ie/~lebed/Galperin.%20Playing%20pool%20with%20pi.pdf

π Elastic collision on Wikipedia: https://en.wikipedia.org/wiki/Elastic_collision

π Euler Method on Wikipedia: https://en.wikipedia.org/wiki/Euler_method

π₯ The most unexpected answer to a counting puzzle by 3Blue1Brown: https://youtu.be/HEfHFsfGXjs

π₯ How colliding blocks act like a beam of light…to compute pi by 3Blue1Brown: https://youtu.be/brU5yLm9DZM

π₯ Pi and Bouncing Balls by Numberphile: https://youtu.be/abv4Fz7oNr0

π₯ Patron/Member Live Stream: https://youtu.be/yii2P7WVfNE

π Website: http://thecodingtrain.com/

π Patreon: https://patreon.com/codingtrain

π Store: https://www.designbyhumans.com/shop/codingtrain/

π Books: https://www.amazon.com/shop/thecodingtrain

π₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

π₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

π p5.js: https://p5js.org

π Processing: https://processing.org

#PiDay #HappyPiDay

source

### View Comments source >

### Transcript view all >

00:00 - I remember January 2019.

00:02 Do you remember January 2019?

00:04 Oh, it was a simpler time.

00:06 Something happened that month.

00:07 A video came out on the Internet.

00:09 This video was called, The most unexpected answer,

00:13 I'm looking it up, The most unexpected answer

00:15 to a counting puzzle.

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

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

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

00:24 And what this video was about

00:25 is it was about these two blocks.

00:27 There was a small block, and a big block.

00:30 And these blocks, they moved around,

00:32 they bounced into each other, they clacked.

00:33 It was like, the most beautiful clacking sound

00:35 I've ever heard.

00:36 And then they bounced into a wall,

00:38 and after awhile, just count up how many times

00:41 they're bouncing into each other,

00:42 and this weird thing happens, this number appears,

00:47 this number which is the digits of pi appears

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

00:52 which is crazy.

00:53 Now, if you want to know why that occurs,

00:55 you should go and watch the 3Blue1Brown video series,

00:58 and even towards the end of that three part series,

01:00 3Blue1Brown makes a connection to optics,

01:02 and there's so much beauty and wonder in there.

01:05 This is not a new concept,

01:06 you can find some other resources.

01:08 There's a wonderful paper from 2003,

01:10 I'm looking up the title of it now,

01:12 by G. Galperin called Playing Pool With Pi,

01:15 The Number Pi from a Billiard Point of View.

01:18 There's a Numberphile video,

01:19 and I'll also link to some other resources

01:21 where you can read about this particular phenomenon

01:24 and why it occurs in this video subscription.

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

01:28 What I do on this channel is I code stuff.

01:30 So I am going to attempt in this coding challenge

01:32 to make my own version of 3Blue1Brown's

01:35 collision clacking magic wonderful thing,

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

01:41 just in the browser and JavaScript,

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

01:45 to get the digits of pi?

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

01:48 So, let's code.

01:50 (whistle blows)

01:51 Now, to celebrate Pi Day,

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

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

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

02:00 maybe I can save you five minutes here

02:01 of retyping this part out.

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

02:06 object-oriented system.

02:07 I have a class called Block,

02:09 and each Block has an x and y,

02:12 that's where it is in the canvas,

02:14 and it has a width, it's a square,

02:17 so the width and the height are the same.

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

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

02:25 The square character from the coding train.

02:29 I also have in here a little clack sound loaded

02:32 that I may or may not use,

02:34 and then, I have created just two blocks,

02:37 block1 appears at 100 with a size of 20,

02:41 block2 appears at 200 with a size of 150,

02:44 and then I am showing both those blocks.

02:47 Alright, so what do I need to do?

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

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

02:56 I'm going to call it v.

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

03:04 where I will say this.x += v.

03:07 So the idea here is it has a velocity,

03:09 and x changes by that velocity.

03:11 Then, I'll go back to the sketch,

03:14 and let me give them a velocity,

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

03:19 and block2 will have a velocity of negative one,

03:21 and then I should be able to say also here,

03:24 I can just call update for both of them.

03:26 Update, update.

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

03:32 already, so already in this challenge?

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

03:38 Oh, this dot this dot.

03:39 So now what I need to do is I need to figure out,

03:42 how do I check if the two blocks

03:45 have knocked into each other?

03:47 Okay, the way that I would do that,

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

03:51 in the class when possible.

03:54 I'm going to write a function called collide,

03:57 and I'm checking if I'm colliding with another block,

04:02 call it other.

04:03 So I'm checking if this block

04:04 is colliding with some other arbitrary block.

04:07 So how do I know?

04:08 If this is block1 with an x and a width,

04:13 and this is block2, with an x and a width,

04:18 I know that they are not intersecting

04:21 if the left side of block2 is greater

04:27 than the right side of block1,

04:30 or if it was on the other side, right?

04:33 If the left side of block1

04:35 was greater than the right side of block2.

04:37 Otherwise, they must be intersecting each other.

04:40 And I know this is a really simple situation,

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

04:44 because they're only moving along

04:45 this one-dimensional horizontal space.

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

04:53 and where I'm getting to that,

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

04:56 Talk about the math!

04:57 So now I can say, I can look and basically say, like,

05:01 if this.x + w,

05:08 that's the right-hand side,

05:10 is greater than other.x, other.x, right?

05:18 Oh no, is less than, right?

05:21 Or, if this.x is greater than the other.x

05:28 + other.w,

05:31 and this has to be a this dot, alright?

05:35 So now, I'm going to say,

05:38 println, oh no, print, not collide,

05:44 not collide, otherwise,

05:46 print collide.

05:51 Let's see if I got this right.

05:53 So it's moving, it's moving,

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

05:59 So I'm going to say block1,

06:03 1.collide block2.

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

06:08 not collide, not collide, not collide, not collide,

06:11 not collide, not collide, it's going to collide.

06:14 It's colliding, it's colliding, it's colliding!

06:15 Eventually, it's going to get to the other side,

06:17 go to the other side, get to the other side,

06:19 not colliding anymore.

06:20 Okay, my algorithm was correct.

06:23 So, really if I want that,

06:24 I want that to just return true or false.

06:27 So what I'm going to do is,

06:31 I'm actually going to say,

06:32 I'm just going to, I could write return,

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

06:37 is just say return not, not this expression.

06:41 This is a test to see if those two blocks

06:43 are colliding with each other.

06:45 Oof, alright.

06:46 If block1 collides with block2,

06:49 now what I want to say

06:51 is block1.bounce block2.

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

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

07:02 with the fact that there's a wall here.

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

07:06 and what I want to do is I want to calculate

07:09 the new velocities from perfectly elastic collision.

07:13 So this has a velocity, this presumably also has a velocity,

07:15 maybe it's moving that way, maybe it's that way,

07:17 maybe it's at rest.

07:18 And, in an elastic collision, there's no friction,

07:22 there's nothing else here in this environment.

07:24 They're not like squishy things,

07:27 no momentum, no energy, nothing is lost.

07:29 So I need the formula for an elastic collision.

07:32 Luckily, I have that open right over here,

07:35 and then you can see this is a formula

07:37 that's following both the conversation of momentum

07:40 and the conservation of kinetic energy.

07:42 So with both of these formulas from physics

07:45 we can then get the new velocity, right?

07:48 U here is the old velocity, and v is the new velocity.

07:52 So the new velocity is a function of,

07:55 the both object's mass, and their previous velocity.

08:00 Let's first add the idea of mass.

08:03 So I'm going to go in here,

08:05 and I'm going to add the idea of mass.

08:07 And first I'm just going to say, hey, the mass is one,

08:09 so let's not worry about mass right now.

08:11 By the way, what happens if the mass is one?

08:13 Think about this.

08:14 If they're equal mass.

08:15 If they're both equal mass,

08:17 and this one is stationary, and this one's moving,

08:19 and they clack, right?

08:22 All of the momentum and energy is transferred,

08:24 this one stops, this one moves.

08:26 But that's not what's going to happen

08:27 when the masses of each are different,

08:29 so that's when it's going to get really interesting, okay.

08:32 So now we want a function called bounce,

08:34 and I'm also going to say other.

08:36 And it would be really nice if I could just

08:38 have that formula right over there for me to refer to.

08:42 Alright, so I took a screenshot of the formula,

08:44 so I've got it over there to refer to,

08:45 and I just need to implement it here

08:47 in this bounce function.

08:49 So, one is this, two is other.

08:53 So I'm writing it, I'm not referring to my blocks

08:58 as block1 and block2,

08:59 I'm referring it to within the object as this and other.

09:01 So what I want to do is say this.v,

09:04 but I don't want to start messing with v,

09:07 because the old value of v is part of the formula.

09:09 So let's do this, const.v.

09:14 Actually, you know what?

09:15 Let's do, let's do, sorry, let newV =

09:22 this.m-other.m, divided by what?

09:29 Let's make a variable called sum of M,

09:31 which is this.m + other.m.

09:34 So this is divided by sum of M,

09:40 and then, times this.v, right?

09:44 So that's this side, and then,

09:47 I mean, I could do this in one line,

09:48 but I'm running out of space here.

09:50 So then += 2 * other.m,

09:53 divided by sumM * other.v.

09:59 So I think what might make sense here

10:01 is the thing is I don't want to update

10:04 this object's velocity.

10:06 I guess I could do both of them.

10:07 I'll just do both of them in this function.

10:08 I was thinking I could return it,

10:10 and then 'cause it's the same formula both ways,

10:13 I'd rather not duplicate my code.

10:14 Let's try it this way.

10:15 I'm going to return newV.

10:19 You can see how this is the same formula twice,

10:21 it's just written in reverse order for v2,

10:23 but if I change the two there,

10:25 and change all the twos to ones, we'll get the same thing.

10:28 So I should be able to say, if I go back into sketch.js,

10:33 and I say, I'm going to say v1 = block1.bounce block2.

10:39 I'm going to say v2 = block2.bounce b1,

10:44 block, block1.

10:46 And then I should say, I'm going to update their velocities.

10:49 This I don't know if I love, but this will work.

10:53 So let's see what we got here.

10:55 C'mon, clickety clack, go, bounce that thing!

11:01 Look at that, they're the same mass.

11:03 So, by the way, let's, it's like, moving,

11:06 it's like a funeral dirge over here,

11:08 the way that thing's moving.

11:09 Let's give it a bit of a faster velocity to start.

11:13 And we can see, boom, that's a perfect elastically,

11:16 now, it doesn't look very realistic,

11:18 because really what we're seeing here,

11:20 is like, should look like this, right?

11:22 That's what we want.

11:23 If both of those objects have the same exact mass,

11:26 one's going to transfer all of its energy momentum

11:28 to the other one.

11:29 Now what if they have different mass?

11:32 So let's give this one a size of 20,

11:35 and this one a size of 200,

11:37 and actually, I'm also going to give them

11:41 each individual masses.

11:42 So this will have a mass of one,

11:44 and this one's going to have a mass of 100.

11:47 So not perfect, and some weird stuff is happening,

11:50 because I'm introducing another argument here.

11:55 So now let's see what happens.

11:57 Oh, there we go, that's what we want!

11:59 Look at this, right?

12:02 Now the formula's working with different masses.

12:05 Alright, we're doing well, oh, we need a wall, right?

12:08 We need for the little block to hit the edge.

12:11 So the wall is another thing that doesn't exist

12:15 in the real world.

12:16 We're looking at a perfectly elastic collision

12:19 with a immovable, fixed static wall.

12:22 In other words, a wall, a block of infinite mass.

12:25 So we're going to give this wall as having infinite mass,

12:27 but honestly, the easiest way to do this is just,

12:30 if it hits the wall, just negate, reverse its velocity.

12:34 That will simulate a perfectly elastic collision

12:38 with an object of infinite mass.

12:39 So I'm going to write a function like hitWall.

12:45 If this.x is less than zero, then this.v *= -1.

12:52 And then I only need to, in this case,

12:54 I only ever need to check block1.

12:57 So now I'm going to check block1.hitWall,

13:02 and let's go here, boom, boom boom boom boom.

13:07 Amazingly, that kind of sort of did something.

13:10 Now, are we getting the right numbers?

13:13 This is the question.

13:14 And also, I kind of want to hear that clack.

13:17 Don't you want to hear that clack?

13:18 So let's add the clack.

13:19 Oh, I just realized, this way that I did that,

13:21 I really should have this also be if block hitWall,

13:26 then do something like,

13:29 block1, let's let these be separate functions, reverse,

13:35 because, I also, I'm going to need to do counting,

13:39 there's a bunch of things that are going to need to happen

13:41 so it's good for me to actually do it this way.

13:43 Return, I'm going to say reverse,

13:47 and then, okay, so this looks right.

13:48 Let me make sure this is the same thing.

13:50 Whoops, ah, I hit refresh, sorry.

13:56 Da-da-da-da-da-da-da!

13:57 Alright, so that did something.

13:59 Now, let's add the clack.

14:01 I mean, we're really here just for the clack.

14:02 The clack in the 3Blue1Brown video

14:04 is the most beautiful clack ever.

14:06 So I think if I said clack.play, let's see what happens.

14:12 (block clacks) Ooh!

14:15 Oh, that's kind of good!

14:16 I need to clack when it hits the wall though, too.

14:20 (block clacks)

14:22 Oh, the clacking, oh!

14:24 It's a little weird how I lack the clacking so much, is it?

14:27 I don't know, it's very satisfying.

14:28 Alright, so now let's count, I mean, in theory, we're done!

14:31 (bell rings) I have a feeling

14:32 we're going to run into some big problems.

14:34 But let's say, int.

14:38 So I'm going to start with a count of zero.

14:41 I am going to create a dom element, I'll call it countDiv,

14:47 because I'm going to make a countDiv = createDiv,

14:51 with the count in it.

14:55 Ah, ah, ah.

14:56 And then, I am going to say,

14:59 count, countDiv.html count,

15:05 and we will increase the count

15:07 every time something collides.

15:12 Whoops, line six error.

15:15 Oh no, int, what am I doing, int?

15:16 Int, oh, I feel like I'm in Processing, it's a lot.

15:20 Let's make them the same mass.

15:22 Oh, and I got to make this bigger.

15:23 Yes, okay, and then, let's number format this.

15:28 So, okay. (block clacks)

15:31 Hey, that's kind of like pi, three!

15:35 Now, I'm going to make, okay, so here's the thing.

15:39 The magic number here is 100.

15:42 So, if the mass of one of the objects is one,

15:46 the mass of block1 is one,

15:49 the mass of block2 should be the mass of block1

15:52 times 100 to the power of something.

15:56 So the one here, this doesn't matter,

15:59 'cause this is just one.

16:00 The ratio, so I could do 100 to the first power, right?

16:04 100 to the zero power, which would be their equal,

16:06 100 to one, which would be one.

16:08 100 to the second power, which would make this 10,000,

16:11 right, to the third power?

16:13 You see where we're going here.

16:15 So what I want to do is,

16:17 that's how I'm going to calculate the mass.

16:19 So, I guess what I want to say is,

16:21 if the digits are zero,

16:24 then is then two, I'm going to say const m2 equals power.

16:30 100, to the number of digits.

16:34 (block clacks)

16:35 So that's one digit.

16:39 And so, and now, that's zero digits really,

16:42 because, I'm confused when I'm talking about digits, right?

16:46 What I mean by zero is the number of digits after the dot.

16:49 Pi is 3.1, okay?

16:51 So, now let's have one digit after the dot.

16:54 (block clacks)

16:58 3.1, that's crazy!

17:00 Alright, here we go, two digits.

17:05 (block clacks)

17:07 Uh.

17:09 Wait, hold on a second.

17:10 Actually, the way that this would make the most sense

17:13 is for, if I want to get two digits,

17:17 I should be saying 100 to the power of one,

17:21 which is digits minus one,

17:23 and then this makes sense down here.

17:25 This is my digits plus one, and there we go,

17:28 this is two digits, I should get the number 31,

17:31 okay, that's good.

17:32 And then if I change this to one digit,

17:37 I get the number three.

17:38 And by the way, when do I decide when to stop counting?

17:41 So at a certain point, the second block,

17:45 or I know which block is the first,

17:46 which block is the second,

17:47 is going to just go off and running forever,

17:49 and they're not going to have another chance to ever collide.

17:51 So I'm just doing that visually right now.

17:54 But we could actually put something in here

17:56 to determine when it's finished.

17:58 But you could see here, now even though

18:00 they're both moving in the direction that way,

18:03 but the second, the larger block is moving faster,

18:05 so they're never going to collide again,

18:07 and that's something I could create

18:08 a conditional to test for.

18:09 But, let's talk about the real problem here.

18:12 The real problem is Euler integration.

18:16 The real problem is, the phony baloney physics simulation

18:19 that I'm doing here.

18:20 I am taking a giant step in time forward

18:26 each frame of animation.

18:28 And so the block is like, moving,

18:30 then it's covering, it's colliding, again,

18:31 everything is wildly inaccurate.

18:33 So there are a variety of techniques

18:35 of making a simulation more accurate.

18:38 This diagram over here is illustrating this concept.

18:41 So if the blue line is like the real thing

18:44 that would happen in the real world with continuous time,

18:46 if I'm just making guesses every so often,

18:50 with the red line, with the Euler integration,

18:52 just adding the velocity with large time steps,

18:56 you could see how the thing gets out of place.

18:58 And this, if you were programming a simulation

19:01 to try to get a rocket to land on some,

19:03 moon, planet thing, you're going to have a problem

19:06 with Euler integration.

19:07 So there are a variety of techniques

19:09 that are different types of integration techniques

19:11 for physics engines, and then of course,

19:14 3Blue1Brown talks about other ways to calculate

19:18 the number of collisions that would happen

19:19 based on thinking about the space in a different way.

19:22 But what I'm going to do here is just see,

19:25 what if I just make those time steps smaller?

19:28 So in other words, if I recreate that diagram like this,

19:31 and this is, you know, with large time steps,

19:35 well, if I could get smaller time steps,

19:37 I could stay closer to what it really would be.

19:39 So a way of doing that might be the following:

19:42 I am going to create a variable,

19:45 I'm going to call it a timeSteps.

19:48 And I'm going to put the digits at one,

19:50 just so we know it's always going to work,

19:51 and I'm going to say the timeSteps, I'm going to just try,

19:54 let's add 10 extra timeSteps.

19:56 We can make this a constant.

19:58 So there's always going to be, every time through draw,

20:00 I want to do this 10 times.

20:03 So I'm going to say, for let i = 0,

20:06 i less than the number of timeSteps, i++.

20:11 And I'm just going to do this, all of this 10 times.

20:15 All of this, by that I mean,

20:17 check the collisions, bounce the blocks, play the sound.

20:21 And let's comment out the sound for a second.

20:24 We'll have to think of a different way of dealing with that.

20:26 Update the blocks, I'm going to show once they're drawn.

20:29 So if I'm doing that 10 times,

20:31 the other thing I can do here

20:32 is I can divide the velocity that I want to start with

20:37 with the number of timeSteps.

20:39 So it's actually, it's as if I'm doing the same thing,

20:43 but with a tinier, tinier velocity,

20:45 and just do it multiple times through draw,

20:47 so our animation happens faster.

20:48 Let's see if this allows us to do.

20:51 Let's just check to make sure this is still working.

20:53 One, two, three, oh, I miss the clack.

20:56 I really miss the clacking.

20:58 Let's try two digits.

21:02 One, two, three, four, five, da, da, da, 31,

21:04 alright, that's pretty good.

21:06 Now let's try three digits.

21:09 And let's see, we should get 314!

21:12 C'mon, ah, ah, go back!

21:14 Hit the wall again, hit the wall again,

21:15 clack, 314, woo!

21:19 Let's add the clack back in.

21:20 What happens if I add the sound back in?

21:23 (block clacks)

21:27 Hah, that was tolerable.

21:31 Alright, 314, okay.

21:33 Let's try four digits.

21:37 (block clacks)

21:39 Uh oh, goodbye!

21:41 So that didn't work, what if I we have 100 timeSteps?

21:45 (block clacks)

21:46 Okay, okay, that was, hey, it worked out!

21:49 Alright, we got to deal with the sound.

21:51 Alright, so I think, basically,

21:53 what we should do with the sound is I'm just going to say,

21:56 let clackSound, I'm just going to assume

22:00 it's not clacking, and then if it clacks once,

22:06 if it hits anything,

22:07 I will say clackSound = true.

22:09 Like, only if it collides, either with the wall,

22:11 or the other block.

22:14 And then, I'm guaranteeing now that I can only,

22:21 I will only play the sound once every time through draw.

22:24 So this should really help things.

22:27 So let's try this now, 100 timeSteps, four digits.

22:31 (block clacks)

22:34 3.141, we're doing really well here!

22:37 Okay, now, five digits?

22:40 How about 1,000 timeSteps?

22:43 (block clacks)

22:47 Looks pretty good!

22:49 Six digits, 10,000 time steps?

22:53 (block clacks)

22:57 That's pi, right, oh, clack!

22:58 Oh, 3.14159!

23:00 Alright, save, I'm saving!

23:03 Seven digits, 100,000?

23:08 (block clacks)

23:12 What, that seriously worked?

23:14 That's pi, right?

23:15 I got seven digits just through this method?

23:17 I really didn't think I was going to get that high.

23:20 Alright, let's try eight.

23:21 Let's try, like, 500,000.

23:24 (block clacks)

23:29 What, is that, is there a six there in pi?

23:33 I mean, could I really get one million?

23:37 I'm surprised that it actually, like,

23:39 will go to one million.

23:40 Nine, but I don't think that it can handle 10 million.

23:45 10 million timeSteps each time through draw?

23:48 Can I get away with, like, 5 million?

23:50 (block clacks)

23:59 What?

24:01 1.4, what's pi, 14159265?

24:07 That's right, that's pi!

24:08 Can I really do 10 million timeSteps?

24:11 (block clacks) I didn't think JavaScript,

24:13 oh yeah, the other thing I should do here,

24:16 is I should constrain where it's being drawn.

24:21 You can hear the frame rate is getting really, really low,

24:25 so I'm just going to give these a variable called x constraint.

24:29 I want to say block1 can't be drawn any further than zero,

24:34 and block2, if this size is 20,

24:39 can't be drawn any further than 20,

24:41 and where I'm drawing it,

24:43 let me say constant x equals constrain,

24:47 this.x between this.xConstraint,

24:53 and I don't know, the width of the window should be fine.

24:57 And then I'm going to draw it at xConstraint.

25:00 This will just visually, I think,

25:02 make it look more correct.

25:05 Oh, when an x constraint is not defined,

25:09 'cause I probably forgot the this dot.

25:13 (laughs) Yes, I forgot the this dot.

25:15 Oh, oops, no, no, I want to draw at the x that's constraint,

25:18 I don't know what I'm doing here,

25:19 put this here, and now let's watch.

25:21 (block clacks) It's counting.

25:25 A lot of collisions.

25:29 Alright, can we, can we get to 10 digits?

25:33 Let's try, like 500 bazillion.

25:38 It's just running really slow.

25:40 There's too many timeSteps.

25:42 But I think we probably will get the right number.

25:45 (cheerful mamba music)

25:51 βͺ It's the Pi Song βͺ

25:52 βͺ We're counting the collisions on the Pi Song βͺ

25:56 βͺ We're counting the collisions on the Pi Song βͺ

25:58 βͺ Pi Song, Pi Song, Pi Song βͺ

26:01 (cheerful mamba music)

26:11 I don't have the digits of pi memorized.

26:13 Oh, hold on, ah! (block clacks)

26:17 Ah, we got 10 digits everybody, whoohoo!

26:21 Only 500 million, no, 50 million timeSteps,

26:26 I had to look at this very close up.

26:28 50 million timeSteps per time per draw,

26:31 I mean, why not, right?

26:33 Oh, let's go to, this goes to 11, we have to go to 11.

26:38 Let's just add another zero, because why not.

26:43 Loading, loading, okay.

26:46 Alright, so this, I might need to speed this up,

26:49 but I'll at least play you a little song.

26:53 (peaceful ukulele music)

26:57 βͺ 3.14159 βͺ

27:02 βͺ 2653589 βͺ

27:07 βͺ 793238462 βͺ

27:16 βͺ 2643 βͺ

27:20 βͺ 832 βͺ

27:24 βͺ 795 βͺ

27:27 βͺ 884 βͺ

27:30 βͺ 1971 βͺ

27:33 βͺ 939 βͺ

27:35 βͺ 375105 βͺ

27:42 βͺ 1, woops, 8209 βͺ

27:47 βͺ 7494 βͺ

27:51 βͺ 45923 βͺ

28:01 (block clacks) Ah, whoa!

28:02 Oh, yes, oh, it's moving, it's moving!

28:05 Okay, three, one, four, one, five,

28:09 nine, two, six, five, three.

28:15 Okay, it's got to hit one more time.

28:17 Go, catch up little guy!

28:19 Catch up little square, little one!

28:21 You can do it, give me a clack!

28:24 You can do it, you can do it, you can do it!

28:29 Ah, yes!

28:32 31415926535, that's 11 digits of pi,

28:37 in JavaScript, p5, in the p5 Web Editor,

28:40 just by elastic collisions of two squares!

28:44 Woo, what a coding challenge.

28:46 (whistle blows) Alright, thank you

28:47 for watching this coding challenge.

28:49 This actually did happen during a live stream,

28:51 every once in awhile I do live streams

28:52 for YouTube members and patrons,

28:53 and I just happened to be doing this during one of those,

28:56 but this was so sort of fun and weird

28:58 that I will include a link to that unlisted live stream

29:01 if you want to take a look and see

29:03 the long version of all of the time spent

29:06 actually doing this coding challenge,

29:07 and waiting and waiting and waiting.

29:09 I also have made a Processing version of this.

29:12 I've made some other attempts,

29:13 some of them rather comical.

29:15 For example, I tried to say,

29:16 could box 2D actually do a good job

29:20 of figuring out the elastic collisions more accurately?

29:23 As you can see, that did not work.

29:25 I also tried using big decimal.

29:28 Now, in JavaScript, I'm using floating point numbers,

29:32 and a floating point number just has 32 bits

29:35 of memory to store, it's really just about seven digits,

29:37 I think, you could, in Processing,

29:39 I could use a double, which has 64 bits of memory

29:41 to store the decimal number.

29:43 But there are lots of implementations,

29:45 BigDecimal being one in Java for storing huge, huge,

29:50 decimal numbers with really high precision,

29:52 and I believe there are some JavaScript analogs to that.

29:55 So, I will include links to all of that stuff

30:00 in the code that goes along with this.

30:02 If you can come up with a creative way of visualizing this,

30:06 of optimizing it to make it run,

30:07 you should definitely check out 3Blue1Brown's video.

30:10 I have a version where I implemented the optics method,

30:13 but I had to load the number pi

30:16 in order to then calculate.

30:17 So this is a question I'm asking you, the audience.

30:20 Is there a way to do, to count the number of collisions,

30:23 either without tiny tiny timeSteps that take forever,

30:26 or by having access to the number pi in the first place?

30:29 I would love to know your answer or thoughts on that.

30:32 Go to thecodingtrain.com.

30:34 Link in the description to this challenge page,

30:36 and you can submit your own version of it there.

30:38 Thanks for watching, and I'll see you,

30:40 uh, see you before next year on Pi Day, hopefully.

30:42 I mean, there's like Tau Day, it's coming up!

30:44 June is, Summer's right around the corner!

30:47 June is bustin' out all over!

30:49 Goodbye, see you later! (whistle blows)

30:51 (upbeat music)

30:55 (peaceful ukulele music)

31:01 βͺ 3.1415 βͺ

31:04 βͺ 926535 βͺ

31:06 βͺ 89793238 βͺ

31:09 βͺ 46, it's Pi Day, Pi Day βͺ

31:13 βͺ Got to calculate from Pi Day βͺ

31:15 βͺ Everyone's looking forward to the digits βͺ

31:18 βͺ Digits, it's Pi Day, Pi Day βͺ

31:21 βͺ Got to calculate on Pi Day βͺ

31:23 βͺ Everyone's looking forward to the digits βͺ

31:26 βͺ The digits βͺ

31:27 βͺ Partying, partying, yeah βͺ

31:29 βͺ Partying, party, yeah βͺ

31:30 βͺ Fun, fun, fun, fun, Pi Day βͺ

31:33 (upbeat music)

**Tags:**calculating, challenge, coding, collisions, digits

## Leave a Reply