The Walk of PI

This is my humble version of the "Walk of PI" using D3 JavaScript. The "walk of numbers" is a method of visualizing numbers, described in this paper. In my version I didn't use billions of digits, or millions of digits: I used only 2216 digits of PI, in base 8 (octal).

Use your mouse or trackpad to zoom and drag the path, and click “reset zoom” to, well, reset zoom. Hover the path to check the digits of PI. When the walk finishes, click “draw again” to restart the walk.

What is this “walk of PI”? Imagine that you put a colour marker in a blank canvas. Each digit of PI, in succession, will dictate how you move the marker on the canvas.

This is how I made it:

First, I loaded a string with the digits of PI in base 8, or octal. After that, I created an array with all the digits of PI:

var digitsofpi = pi.split("");

I chose octal because, starting on a given pixel, there are 8 adjoining pixels: up-left, up, up-right, right, down-right, down, down-left and left. So, starting exactly at the centre of my canvas, each digit of PI (in octal) will make the path grow, according to the following rule:

1     2     3

0    or.    4

7     6     5

Where or. means “origin”. That is, if the next digit of PI is 1, the path moves up-left. If the next digit is 4, the path moves right. If the next digit is 6, the path moves down, and so on. Given x1 and y1 as initial coordinates and x2 and y2 as final coordinates, this is the code:

if (digitsofpi[i] ==  "1") {
	x2 = x1 - 1; y2 = y1 - 1;
	} else if (digitsofpi[i] ==  "2") {
	x2 = x1; y2 = y1 - 1;
	} else if (digitsofpi[i] ==  "3") {
	x2 = x1 + 1; y2 = y1 - 1;
	} else if (digitsofpi[i] ==  "4") {
	x2 = x1 + 1; y2 = y1;
	} else if (digitsofpi[i] ==  "5") {
	x2 = x1 + 1; y2 = y1 + 1;
	} else if (digitsofpi[i] ==  "6") {
	x2 = x1; y2 = y1 + 1;
	} else if (digitsofpi[i] ==  "7") {
	x2 = x1 - 1; y2 = y1 + 1;
	} else if (digitsofpi[i] == "0") {
	x2 = x1 - 1; y2 = y1
	} else {
		return;
	}

After each line being appended, the final coordinates are the initial coordinates for the next line:

x1 = x2;
y1 = y2;

Also, each “move”, that is, each new digit of PI changes the colour of the line according to an RGB rule: red is up, blue is down-left and green is down-right. Using the variables “r”, “g” and “b”:

var color = d3.rgb(r, g, b);

I’m still looking for a source of PI in octal with more than 2 thousand digits. When I find it I’ll update this walk.