It's 2020, this year's Pi Day, it's today

and I would like to do, it's not really today because I'm recording this a couple days early.

But I would like you to see this on Pi Day a coding challenge themed around the number pi

and thank you to FantinBibas

Who suggested this one: Pi Day, find a sequence in pi issue number one four six four

I wonder if those numbers are where they are in pi, we'll find out by the end of this video!

How to look at how one might search for any given sequence of numbers in pi.

Now, I'm in this suggestion, this particular website angio.net/pi is mentioned

it has a bunch of different resources

A resource of where you can download all the digits of pi a place to search for pi

This all reminded me of a wonderful project from Fathom information design.

So if you don't know about Fathom they're an information design firm

founded by Ben Fry who was one of the creators of Processing itself , you can find out more at Fathom.info

But they created this project Peek inside PI, which you can play with at pi.fathom.info

There's also an app version a lot of the versions. I'll link to all those things in the video's description

So the idea here is that I can type or I could tap. Can I tap?

Where is it?

[Tapping]

No it's not working, my touchscreen doesn't work!

The point is for any given sequence like one four one five nine and there it is

It's found at the first digit of pi. So now let's pick another sequence. Like what's a wonderful sequence?

It is today's date is March 14 2020

and that is not in the first 1 million digits of pi. Ah, if only we had more digits. I must have more digits.

[music playing]

Coding train: breaking news!

I'm told that I should search for the number nine nine nine nine nine nine

Which is the 762nd digit of pi

So let's remember that and make sure when I write my own version of this that I find the same digit

I'm gonna do this with p5.js JavaScript in the browser

I'm it's not gonna be as nicely designed with a beautiful interface like this

But I'm first going to recreate this exact thing and then what I'm gonna do

is I'm gonna go from one million digits and go to 1 billion digits

And see if I could still search for a digit in pi

and probably I'm gonna fail because we're gonna need some kind of like Optimization

it's gonna only run too slow

Everything's gonna come crashing down, but I'm gonna try it nonetheless

and we'll see where we get to by the end of this video

I'm starting with a simple p5 sketch and two text files

one with one million digits of pi which is just a Megabyte and one with 1 billion digits of pi which is a Gigabyte

that's a much bigger file. So let's start with the 1 megabyte file

[music playing]

I've uploaded that file to the p5 web editor and I can load all the text from that file right now using preload

[audible typing]

I'm going to just take away animation here. I'm going to get rid of the draw loop and I'm gonna say no canvas

and then the file itself has all of the digits of pi in one line

But loadStrings loads text files into an array with each element of the array being a different line of the text file

so what I'm going to do here is create a variable called digits and just say it is

the first element in that raw data array

Let's console.log digits and just see what happens

Ok, so all of the digits of pi are down here in the console.

Now what I want to do is search for a given digit. Let's make an interface a very very crude simple interface for searching.

[music playing]

Now I have this tiny tiny search box up here. Can I make that bigger?

I also just increased the font size for any input element on the page

So it's a little easier for you to see.

The interaction that I'm looking for is any time anyone types anything into that search box?

I want to look for that string that that those digits in PI itself

[music playing]

And p5.js has a special event function called input

Which you can call on the search box and pass another function that will be executed

Any time a change has been made

So let me write that search it up function because that's when I was looking for something. I say search it up

[music playing]

I'm gonna be a little silly and make these global variables

[music playing]

Then let me get what I'm searching for

[music playing]

From the search box and console.log that

[music playing]

So now whenever I type anything into that search box, I should see what I type here in the console

[audible typing]

And that's working

This is gonna actually be a really easy project to do

You know why? Because I could just use the indexOf function in JavaScript to tell, let me do that real quick

Just please please can I do that real quick? I'm gonna do that real quick.

[music playing]

Digits indexOf search

This is saying look inside the long string digits and give me the index of wherever this string search

Happens to appear. If it doesn't appear. I'll take a negative one, please.

Let's make another element on the page

[music playing]

So now when I get that index back

I can say index P

Dot HTML that index which will put the actual index where it's found in the paragraph text there on the webpage

So for example, if I say 1 4

1 5 9 hmm. Why does it take two so really when counting the digits of pi?

What seems to be the convention is the first digit is the first digit after the period so it's three point

The first digit is one so I should really say

Index minus one and now one four one five nine. I got one and then

what if I say nine nine nine nine nine nine we got it! 999999 appears at the

762nd digit in pi

so if it's a three, I don't want it to find that zero digit so i'm gonna start searching from index two

The chat is also rightfully pointing out that I could just chop off

The first two digits of the string would be much too easy. I'm gonna do it this way

so i'm going to start from looking at digit two

and I'm going to say

as Long as index is greater than zero

Set that, otherwise say...

[music playing]

Otherwise I'll put a message about it not being found

Okay, so let's try one four one five nine nine nine nine nine nine nine not found so I now have

essentially without the care and thought

Into the interaction design, the visual design, the layout of the page all of those elements

Recreated my my own version of this peek inside pi

This video is not over though. I got two more things I want to do.

Number one is I want to just investigate: what does it mean for me to actually perform this search myself?

To write my own indexOf function because maybe if I do

that might unlock some other creative possibilities and also I might learn something about programming

And then let me increase things to one billion digits and see what happens

what breaks down once I have a one gigabyte file that I'm loading all the digits of pi in

as opposed to a one megabyte file. All right, so let's first write our own index of function

so I'm just going to change them to comic this out and I'm going to say

let index equals index of

search in this string for this search string

So search in the string digits, for the string search

[music playing]

And so the function looks like this it's name is indexOf

It needs to receive a block of text and the substring that you're searching for in that text

Let's start with what's the first character in the search string?

[music playing]

Then I want to iterate over the entire string of text

[music playing]

And say hey does this character in the entire string of text

match the first character of the search string

[music playing]

If so, I need another loop

Then I need to loop through all of

the characters of that search string

[music playing]

This is supposed to say four

so I don't need to start at zero because I've already checked to make sure that's zero and I want to check

is text charAt I plus J the same as search charAt J

Again, I'm, I'm not worrying about running this optimally or elegantly. I just want to get the core idea out

[music playing]

So let's say this is my text and what I'm looking for is:

I want to find out where is four one five in that particular string? This is my search

What I have going on here is I know the first character of what I'm searching for is four

So I, the index I is starting here and looking is that four as that four? Is that four?

Is that four AHA this is four!

Now let's, let's save our, let's save this spot and then based on this length three

Which, let's iterate over this length with J

zero one two

And let's add j to i zero one two and see if all those digits continue to match

so ultimately really what I'm looking for here is

any of those digits that aren't the same. So I really want to look for first

I'm going to be very strict about this and use the triple equals and then I'm going to say not equals

I'm going to make a guess that I found it

[music playing]

As soon as I find the first character be the same, aha, I found it and then anytime I find anything to be different

I can now say found equals false. So the question becomes

Right here, if found is true

then I can break out of things

And once one is not true. I don't need to check the rest so I can break out

and then if

found

Return what?

So I'm gonna say let found index equals negative one. I'll give a default value of negative one

and then actually if I've found it

Right here

Found index should equal what

I, wherever we started with I

and then if I've gone through every

Possibility and I haven't found it. Then I'm gonna get to the end and I'm still just going to return

Negative one but found index will have negative one

So if I found it somewhere I'm gonna set it equal to that first index get out of the loop

I don't need to check anymore because I just looking for the first instance and then return what I found

Let's run and see if this works

No, found is not defined sketch line 22

This if statement has got to be inside here

This is where I'm looking at every single character in the large string on searching through

as soon as one of those characters is equal to the start

check every, check all the subsequent characters and then if I found it break out of that larger loop

and keep going so that this should be right now. I'm sure there's other mistakes, but that will be fixed

All right, one four one five nine at digit number one

The chat is giving me a nice suggestion where I could simplify this code where I don't actually need this found index

Because I could just return I

which will automatically break out of the loop. And then if I get to the end I could just return negative one great

So this works

Let's try the 999 thing

[audible typing]

There we go, so this really wraps up a small piece of this coding challenge I have made my own

version of fathom informations peek inside pi. I even wrote my own string search function.

There's so much more that you could do with this to be creative

I mentioned at the top that you could think about what if what you weren't looking for were just

Numbers, but you were looking for some other piece of data that's encoded into numbers

So we could you find secret messages in pi or pieces of music in pi

are there other kinds of algorithms that you could explore

that you could optimize this particular search algorithm with

And I'll list some of those in the video's description

That's a little challenge out to you to research some of those and tell me about your favorite substring search algorithm in the comments

but those are going to be needed for when I take the next step and

Attempt to get this working with a billion digits of pi and for that. I'm also going to need a node server

so at the very least I could be like, okay, let's run this exact same code, but now let's take a

Text file that has a billion digits of pi. So I'm gonna go back to add file here. And I'm gonna go back to my

File system. I'm gonna come over here. I'm gonna find my billion digit PI file

Drag that into the browser here and

mmm, the web editor will not let you upload a file that big and even if it could am I really gonna expect my

Client-side code to load. Well a one gigabyte file with a billion characters in it. Now there's plenty ways probably that file could be compressed

Encoded a different way. I probably get down to like 600 megabytes or something

But whether it's 600 megabytes or a gigabyte, I've still really got the same problem. I have this like huge file