When I saw these fine works, I wanted to make something visualize PI.

Alexis Engelke's awesome article. "Visualizing Pi"

## How I visualized PI.

I visualized PI as 'PI Walking'. I divided a direction angle into 10 equal divisions by digits one by one. And I walked a static length step.
I aimed at how to visualize not calculate PI value. So I picked PI value from here.

The Beginning of the Number Pi, in Binary Through Hexadecimal, etc. | RobertLovesPi.net

But I had a feeling of wrongness with divide the angle into 10 parts. I felt I should divide it into 12 or 6 parts.
When I divide into 6 parts, I should use PI as base 6, not base 10.

### Divided into 12 parts.

...I'll leave this subject for your fun. It not for the reason that I felt bothersome to transform A as 10. 😜

## An example source code of P5.js.

Please feel free to use this example code. To see other works based on my code is my pleasure. And my honor.

``````
const Pi10 = {
base: 10,
value: "314159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651328230664709384", // 126digit
w: 720,
h: 480,
oX: 320,
oY: 100,
step: 60
};
const Pi8 = {
base: 8,
value: "3110375524210264302151423063050560067016321122011160210514763072002027372461661163310450512020746161", // 100digit
w: 720,
h: 600,
oX: 60,
oY: 60,
step: 32
};
const Pi6 = {
base: 6,
value: "3050330051415124105234414053125321102301214442004115252553314203331311355351312334553341001515434440", // 100digit
w: 720,
h: 720,
oX: 320,
oY: 260,
step: 70
};
const Pi4 = {
base: 4,
value: "3021003331222202020112203002031030103012120220232000313001303101022100021032002020221213303013100002", // 100digit
w: 720,
h: 420,
oX: 160,
oY: 240,
step: 40
};

const pi = Pi6; // You can change here.
let path = new Array();

function setup() {
createCanvas(pi.w, pi.h);
background(240);
stroke(100);
strokeWeight(2);
noLoop();

path = pathFinder(pi);
}

function draw() {
translate(pi.oX, pi.oY);

// lines
noFill();
beginShape();
path.forEach(p => {
vertex(p.x, p.y);
});
endShape();

// dots
fill(240, 32, 32);
ellipse(path[0].x, path[0].y, 16, 16);
fill(240);
path.forEach(p => {
ellipse(p.x, p.y, 8, 8);
});
fill(32, 128, 240);
ellipse(path[path.length - 1].x, path[path.length - 1].y, 16, 16);
}

function pathFinder(_pi) {
const path = new Array();
let x = 0;
let y = 0;
path.push(createVector(x, y));
for (let i = 0; i < _pi.value.length; i++) {
let n = parseInt(_pi.value.substr(i, 1));
let r = n * TWO_PI / _pi.base;
x += _pi.step * cos(r);
y += _pi.step * sin(r);
path.push(createVector(x, y));
}
return path;
}

/*

This program is free software: you can redistribute it and/or modify
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>
*/
```
```

## Something extra.

I applied the digit value to the radius of the circle.