- Welcome to the first in a series,
or maybe just one video,
I have no idea what's going to happen with all this stuff,
calculating the digits of pi.
So, for Pi Day today,
at least with the silly American way
of putting the date together, March 14th, 3/14,
if only it was the year 1592, it would really be Pi Day.
I'd like to do coding challenges
around calculating the digits of pi or approximating pi.
Although, if I want to approximate pi,
I should really do that on July 22nd
'cause that's 22/7 or 22.
Anyway, the point is I released a video this morning
about counting the digits of pi through block collisions,
and that's one you could watch.
I'll link to that in the description.
But there are three other methods I want to explore
and I might do all of these video,
more likely just one of them in this video.
There's the Leibniz Method,
there's this way of looking at random numbers and co-primes,
which is a method that Matt Parker
used in his YouTube channel Stand Up Maths to calculate pi,
and then there's also this amazing thing
that happens in the Mandelbrot set,
the Mandelbrot fractal,
which I have a coding challenge about.
Where you can actually find the digits of pi,
the number pi in a very strange place.
There's a wonderful numberphile video
with mathematician Holly Krieger,
who explains this in great detail
and we can see if we can write a code example to do that
since I already have a Mandelbrot set code.
Alright, let's start with the Leibniz Method
and let's use the P5 web editor.
Let's try to think of a way of making this interesting.
So, first of all, the Leibniz formula states that
if we start with the number one
and then alternating fractions where the denominator
is the next odd number subtracting first, adding next,
subtracting next, adding next.
If this infinite series will converge to pi divided by four.
Wow!
That's crazy.
Let's see if that works.
So, this shouldn't be too hard to code.
At least, in terms of things I've coded before.
Let's just start with, let's just do all this in setup first
and then we'll think about
if there's an interesting way to animate it.
So, let's start with, I'm just going to to make a variable
called pi.
I'm going to to start at one
because I need to sum up the values.
Then, I need to do some number of iterations.
So, we'll start with zero.
Let's just try doing 10 iterations to start.
Now I need to get that alternating sequence of odd numbers.
So that should be easy.
That's the denominator of the fraction.
So, let's call that denominator.
It's really just,
i
i times two plus three.
Right, because we're starting at three,
then five, then seven, then nine.
So, zero times two is zero plus three that's three.
One times two is two plus three is five.
You can see how this works.
And then, what I want to do the fraction
is one divided by that denominator
and then I need to say pi plus equals that fraction.
I could just, that's silly, I'll just say pi plus...
Oh! Wait, wait, wait, wait.
First to subtract then add.
So, I need to say that if i modulus two equals zero.
Right because that's how it can detect
whether I'm alternating even or odd numbers.
I mean, they're all odd numbers
but am I the first one or the second one
or the third one or the fourth one, et cetera.
So, I would say in that case
pi minus equals one divided by that denominator
and then otherwise.
Of course, I could write this in,
you could probably find a clever way to write this
in just a few lines of code,
in many fewer lines of code.
Plus equals and then,
let's just say create a div with that digit
and we can see, there it is.
Okay, well, that is not the number pi.
Nowhere close to the number pi.
Why?
Well, if you remember from the Leibniz series,
this series converges on pi divided by four.
So, I could put four minus four divided by three plus four
divided by five or I could just at the very end say,
pi times equal four.
So let's say, let's add,
I might graph it
so let's leave the canvas there
and let's do this again
and there we go 3.23,
that's not so great.
First, let's make that number bigger.
So we can see, there we go,
we have got this number.
Now, we only did 10 iterations, that's very few.
By the way if we just do one, 2.6,
two 3.4, three 2.8,
you can see it's bouncing up and down,
this might be interesting to graph
but let's do 400 3.144,
4,000,
40,000,
you can see that we're getting closer
and closer to the digits of pi.
Let's try graphing it.
Let's go and put in draw.
I'm actually going to take out the idea of this loop.
I'm going to have this idea of pi be a global variable
and I'm going to do this calculation every time through draw.
So this is really, we could think of this as an iteration.
Iterations equal zero.
So, the denominator is iterations
if iterations module is two equals zero
and then I will manually increase the iterations
every time through draw
and I'm going to make a variable called div
and I'm going to div equals create pi div
and I'm going to update it with pi.
So, now, we can see, oh yeah something is,
I'm not sure if this is working.
Oh, whoa whoa whoa, oh!
This times equal four is a problem.
So, in this case it might make more sense
for me to just start pi at four,
I mean I could do a number of different things.
I could start pi at four and I could put four in here
and then I don't need to do this.
Now that pi is a global variable I know I can't
multiply by four every time through draw.
So this should get me converging.
Yes, so you can see I'm converging in theory
on the number pi.
So you can see 3.1 is settled,
eventually this four should settle
as I get to a certain number of iterations.
Okay, so now let's graph this.
So, I'm going to make an array called history.
So what I want to do is say
history.push pi.
I'm going to say for let i equal zero,
i is less than history.length i plus plus.
And what I want to do is I want to draw a line.
I'm going to say begin shape, end shape,
and I also want to calculate sort of the spacing.
The spacing is going to be the history divided by,
oh no sorry,
the width of the window divided by history.length.
And then x will be i times that spacing,
this should really be spacing, I'll call it spacing.
I want to figure out how many things
to go across the window do I have
and then I'm going to say vertex x comma,
so let me just make y right now height divided by two
just to see if this works.
Did I stop it?
And I'm going to need to say stroke 255 no fill.
Right, I see a line going across
but height divided by two,
which is the y should be history index I.
And let me map that value, woops.
Map that value, between some range,
between two and four to between zero and height.
So I want that, no no no.
So, sorry, sorry this is not making any sense.
(bell dings)
What am I doing here?
I forgot to put the y here.
(laughs)
I forgot to put the y here
And I forgot to put the y here.
There we go, that's what I was looking to see.
We are now seeing it converge,
this is what I meant to see.
So in theory, where is pi?
Let's draw a line.
I could be more thoughtful about
what my range is that I'm looking for
but let's
let's put a line also,
we're going to say here line.
Which is going to have
x zero
I'm going to say piY equals,
we'll use the same mapping
but we'll actually map the value of pi.
So we're going to have a line go across the window
and this should say let.
Oh, my brain has stopped working.
So, this is where pi is and now we can see
the Leibniz series graphically approximating
and get it converging all on the number pi.
All right, now I should really invert this
because right now the lower number starts up top.
So I should really put map it from height down to zero.
Let's make the frame rate fast again.
And there we go.
Oh boy!
And this is height down to zero.
And here we go, there is,
we now have the Leibniz infinite series
converging on the number pi
but in a very inaccurate way
because we're just using floating point numbers
which only gives us, I don't know how many decimal places,
like seven at the the most.
Ya know, what is p5 actually think pi is?
I could say console.log pi.
Well, I get more than seven,
but I get this many decimal places.
So could we possibly do this
in a more accurate way is the question.
Thanks for watching this coding challenge
approximating the number pi with the Leibniz method.
I think there's some things you could probably do.
First of all, this should really be,
these should be variables like min y max y
because I'm using them in two places.
Min y max y.
Then, I could just initialize them with something like,
min y equals two and max y equals four
and this should be exactly the same thing.
But the point is that minimum and maximum could be adaptive.
So, for example, you could do something like,
actually start to adapt the range that you're graphing
based on where you are in the approximation series.
I don't know, in other words, what are some other ways
that you could animate this or visualize it
in perhaps a more interesting way?
There must be some sort of like spiraling convergence
that you could do
but also the Leibniz series,
the Leibniz formula I picked because of it's simplicity,
almost relatively easy to implement.
But there are many other series for approximating pi.
For example, there's the Euler Convergence,
you could look at that.
There's these more recent ones
that are quite famous and sort of insane looking.
I really should come back and do a video trying with these
although I probably would need a big integer,
a big decimal data structure to store
the numbers larger than the standard integer of
floating point precision will allow me to do in JavaScript.
So that's something you could also do.
How could you really,
with a really large number of iterations
and more precision in JavaScript?
I'll put a link in the description
to the big rational JavaScript library.
Which allows you to store a number
with many more decimal places
than what you just get for free with floating point numbers,
so you can try that.
So try one of these other formulas,
try animating it in a different way,
share your community contribution
at The Coding Train website
with the page associated with this challenge.
And thank you for watching this video about
approximating the number pi with the Leibniz method.
Goodbye! (bell dings)
(exit music)