Name: Coding Challenge #156: Peeking inside Pi
Uploaded: 2020-03-27T19:41:09.000Z
Duration: 30 min 39 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

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

Adverbs of manner

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

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

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?

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?

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

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

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

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

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

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

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.

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

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

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

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

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

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

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.

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.

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

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

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

Subtitles ListPlay Video

Coding Challenge #156: Peeking inside Pi

process

negative

character

rid