Placeholder Image

字幕表 動画を再生する

  • Happy Pi Day!

  • 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

  • So rather than try to work with it client-side in any type of clever way

  • I'm just going to use a node application

  • by the way

  • I could probably do this in processing because a desktop piece of desktop processing is not gonna have any problem loading a really large file

  • But I want to stay into JavaScript

  • I'm going to create a node server that can load all the digits, store them into memory

  • and then my client-side JavaScript code could query that node server

  • now if you've never used node before I do have a few basic beginner tutorials about

  • installing node and getting set up with node and I'll refer you to those but I'm gonna start from the point where I have

  • a directory with a blank JavaScript file

  • A package dot JSON file to describe my project that I'm building and both a million digit and

  • Billion digit file of Pi so I'm going to start by working in index.js

  • to write some code to load that file. So first I need to require the filesystem module

  • [music playing]

  • And one thing that I could just do is just with the million digits of pi. Let's just read file sync

  • Let's just read the whole file in.

  • [music playing]

  • Interesting, so the file has been read in but look how it's being displayed. It's giving me the binary information into the console

  • so I want to tell it that I want to read it as a string and I'll use

  • Utf-8 so that's a second argument to read file sync and now here we go

  • And there's all those digits of pi all those 1 million digits

  • Now let's just change it to, why not change it to a billion. What could possibly go wrong?

  • Interesting, it did something but it didn't print anything out. So I know this is just basically a bad idea

  • I don't know whether something crashed or memory ran out but read file sync for a gigabyte file is not a good idea

  • and I Think what I want to investigate here is createStream createReadStream