Hello and happy pi day part 2
I'm gonna do another coding challenge and this coding challenge will be about visualizing the digits of pi
So I'm gonna use a file that I've prepared of 1 million digits of pi
I also will include links in this video's description to a file with 10 million digits and a file
I think that has a billion digits
I can't remember
Which one I found but various people have posted files with a lot more digits that I'm gonna use so you might be
interested in
Trying it out with even more digits cuz boy. Let's just make as many digits as we can now. This is inspired by
two artists
I'm sure I'm gonna pretend. apologies for mispronouncing the names, but Martin kryzwinski and Cristian vasile.
Who have made?
Christian Ile Elise faasil who have made a whole lot of beautiful images
Visualizing the digits of pi, so I encourage you to check out this
Washington Post article I'll link to that there's also a wonderful
Numberphile video called the beauty of Pi or something like that that I will link to that goes through some of their visualizations
I'm gonna try to do something really simple, so let's get started by loading those digits
so first what I want is I actually want to have a
string because I want to take all the digits of pi and put them in a string although ultimately maybe I'll break that into an
Array of integers, but that's how they're gonna come in they're coming in from a text file, so I'm gonna call it pi
Just P. I lowercase. I don't want to say P. I uppercase because that's a built-in constant in processing
Let's just arbitrarily have a window
That's 400 by 400 then I'm gonna say pi equals load strings, so load strings is a function
That's part of processing. This is processing by the way a Java based programming environment
That what it actually does is it loads, and I have a file?
It's right here PI - 1 million dot txt. You can see those are a lot of digits in that file
So I just need to reference the file name here. We go file name
Now what this actually I'm getting an error here
And what is that error that error is type this match?
Java dot blank string bracket bracket does not match with Java dot laying dot string the reason why this doesn't match is the
Processing load strings function takes in your data into an Raye, and this is actually often quite useful
especially if you have data in multiple lines because it takes every line from the text file and breaks it into an array but this
Text file just has one line so I can actually just take
Zero, just the first element of that array, and I'm gonna say print line pi
Just to see if this appears in the console. Oh boy
I'm gonna freak it out because it should be a million digits there
Let's say PI dot length to make sure I have a million digits
Oh
Oh, I forgot in the Java
Length for a string is a function
I was like whoa I'm so used to programming in JavaScript in Java length for the string as a function
I'm gonna say dot length and there we go. I've got 1 million digits of pi. We're
Cookin here now. We're cooking okay, so let's actually break that into an array
So let me make an array called digits, which has 1
million spots in it
And I wonder if actually actually I don't need to initialize it because I think I can say
String
Call it s digits equals PI dot
split
and if I give it know
if I say split with no
Delimiter so this is like splitting the string but splitting it based on no delimiter this should give me an array with a million strings
in it
So I should be able to say let's just see s digits. Not lengths. This is an array so with an array
I don't need the parentheses because it's not a function. It's actually just the property of the array let's look at that
1 million 1 million yeah, so I've got a million and now I can and then again
This is not necessary the most efficient way I can actually just I think processing has a function called int
Which will just convert that array entirely into integers so now if I say print
Array, and I probably am going to overload the console here, but I'm gonna do it anyway
I'm gonna hit save and I'm gonna run it I
Now have a look at this. I am now printing the entire million digits of pi into the console just
Try loading the bill digits and pretty good the console see how long that takes
What am I up to I'm gonna get to I'm in gonna get to a million before I finish talking
There we go you can see on that last digit. There is one. Okay, so now I have all these digits. What can I do?
So many things right I could just fill the screen with all the digits
And I could be surrounded by the digits of pi now
I mean either way
I almost want to stop this now and say hey
Be creative make something I think what I'm going to try to do is visualize the frequency of the digits
So let's just actually make a simple line
Right, let's say
There are 10 digits, so I'm gonna go I equals 0 so I'm gonna make I'm gonna make an array called counts
And
Has 10 spots in it, okay?
And so and then I'm going to also have an integer which is like current digit
Which will equal zero so the first thing that I actually current index
I'll just call that index because what I want to say is current
digit
Equals pi
digits
Index, and then I'll go to the next index
I got to worry about when I get to a million Bell deal with that later right so I can look at the current digit
Then I I have made something called counts already, and I could say counts current digit plus plus
so I'm going to increase the count for each current digit and
Then what I will do is let's just draw a little let's go
Let's start with x equals zero. I say let's use. I I equals zero I is less than
counts dot length I
Plus plus and I could do a little math here
I can say the width is the width of the window divided by cats length and
so, that's
X is going to equal I times width and
Y is going to equal just a height divided by two
So I'm just going to draw something in the middle how about an ellipse and I probably should offset it by half the width
so X
comma Y, and I'm just going to draw some circles oh
Boy, let's get rid of that console that bit line. That's going be a problem
apologies everybody
And I probably should make a smaller file data file to work with while I'm developing this, but you can see now
I just got a whole bunch of circles
now
What I want to do is actually let me make the size of the circle
The size of the circle relative to the
The number of digits there are so counts
Index I why is that giving me an error
Float does not match with int that's fine. Let's can let's make this an int
So the more times oh
This is this should be an int that's that's my problem the index into the array has to be an int I don't know why
I put a float there this can be a float because it can convert it so now if I do this
What we're seeing is
Every time it finds one of those digits, it's growing that circle now
They're just going to go bigger and bigger and you can see well the distribution is somewhat even
Have I really discovered anything interesting here? I'm not so sure let's put these in
The path of a circle that'll be more interesting so first of all let me give this a background here and
Let's think about this so okay, so let's actually make let's think about polar coordinates for a second
So I'm gonna say
Angle equals
Map I which goes from zero to count length two between zero and two pi
pi is appearing now right I want to get an angle all the way around a circle and
Then I want my X to be
Some radius, so like let's say
Let's say 200 in this case 200 times
Cosine of that angle and this is me converting from polar coordinates an angle and a radius to Cartesian coordinates
I have a video about that that I will link to if this is unfamiliar territory to you
Y equals 200 times sine of that angle
So and then let's also translate
To
The middle of the window because I want to I want to offset everything from the center of the window and let's take a look
And see what this gives us
So now you can see I have now put them all around them
this is this is this is digit 0 1 2 3 4 5 6 7 8 so I've I
Have I have?
normalized in the past 0 so I don't know if this size is really that interesting one of the
One of these artworks if I scroll down here actually what it does and this it doesn't in a more sophisticated way is, it's
Connecting digits to the next digit. That would be super interesting to try let's try that
so I actually need to look at the next digit in this case right, so I don't need to worry about this counts stuff I
Actually don't even need to worry about this loop thing ok hold on let's let's figure this out
Let's so let me save this. I'm gonna save this as pi day
3 because I'm gonna I'm gonna rip this apart now for a second, so let me let me take this out
Let me get rid of all this count stuff and
Let me say
Digit equals digits index, and then let me say next digit equals digits index plus 1
So I'm going to look at each digit and the next digit
Now what I'm going to do is I'm going to say
angle 1 equals
And I might as well use the math function digit, which goes between 0 and 10
between 0 and 2pi I
Could pre-compute all these locations
Angle 2 is
next digit
So now I just need to do that polar to Cartesian transformation again thing again. I'm going to say
200 times cosine of angle 1
Y1 equals 200 times sine of angle 1 I'll do the same thing for x2 and y2
Sine of angle 2 cosine of angle and now what if I draw a line from X 1 X 2 to y 1 y 2
So this is me looking at every digit the next digit mapping those points taking those points around the circle and connecting them
let's see what this does ah
Beautiful guess what the default stroke for a line in processing is black, so let's make this stroke 255
Okay, so this is working I think
Let's let's make the window a little bit bigger so that there is
Let's draw a nice
Let's put move background to setup and let's draw a little circle also
So let's say stroke
255 let's grab the translate here also
and let's
Say no fill. I just want to draw a little circle so we can see that path and I'm going to say
0 0 200 200 that 200 should definitely be a variable and let's try this again
Oops so the size of the circle is 400 400 right because it's the width so what have I done wrong here
Why are these points around a square pattern the line function oh my goodness
Look at this probably everybody has been yelling at me when you watch this whole video the lines are totally the wrong place
X1y1 to x2y2 the line function takes the first point and the second point and this is all messed up
Ok so now let's run this again
There we go so now you can see that. I am filling up the space now
Honestly all the kernel looks like is everything's connected to everything which of course is the case
So maybe what I need to do is think about color
Think about blending think about those positions
There so, but you're seeing here some interesting possibilities here
So I haven't really made anything so beautiful
That wasn't the point of me making this video the point of me making this video was to show you
how to load all the digits of pi
how to iterate over them and how to start thinking about drawing based on them
And if you look through and read this, Washington Post article or think creatively on your own
I am sure you will come up with your own PI drawing
so please
share
Pi train no hashtag pi train on twitter
go to the coding trade comm and
submit your there's a there'll be information there at the page for this coding challenge of how to submit your
version of it share with me on twitter share with me in the comments, I would love to see your
visualization of all of the digits of pi
Yeah, so in the chat, I'm being told oh add some randomness a little bit of randomness to those locations
That would certainly help
I guess I could do that before I leave I mean I'm not going anywhere
But like I could and Gaussian random this might be nice, but like what if I just say oh?
Tonight it's a sorry. Let's add a little bit of randomness each time
Actually the randomness should be in between
Whatever the the difference between each angle is so hold on the difference between two angles is
two pi
divided by ten
So I want to pick something random in between there
Let's try that let's try that just to get a little Sun thing and then let's make this stroke wait
Stroke, let's give it like some alpha
And now we can see I don't know whether I've made anything better necessarily, but
But you can see this is like a variation on this theme so you
You the viewer of this video are a more creative visually talented person than I am that
I am sure of so I don't want to go too far this. I'm not adding any color
I'm not being thoughtful about those positions the circular idea is just one idea a grid is another idea
Somebody suggested making a skyline based on the digits of pi
there's so many designs that you could think about making based on the digits of pi and
Another thing that I'm going to do in the neck video is
Look at how to think about scale so this is me just making it in a processing sketch
But what if I want to it does kind of look like the moon, which is pretty interesting? What if I want to?
Render out the digits of pi to a giant high-resolution poster, so I'm going to look at that in the next coding challenge