Pi Visualization
example p5.js javascript arraysThis sketch assigns a different color to every digit 0-9, and then draws a single pixel for each of the first million digits of pi.
Edit this code in the p5.js editor.
let piString;
const columns = 1000;
const rows = 1000;
let row = 0;
let colors = [];
function preload() {
loadStrings("pi.txt", loadPi);
}
function loadPi(piLines) {
piString = piLines[0];
}
function setup() {
createCanvas(1000, 1000);
noSmooth();
noStroke();
background(32);
colors = [
"black", //0
"red", //1
"orange", //2
"yellow", //3
"green", //4
"cyan", // 5
"blue", //6
"indigo", //7
"violet", //8
"white", //9
];
}
// restart the animation with random colors
function keyPressed() {
colors = [];
for (let i = 0; i < 10; i++) {
colors.push(color(random(255), random(255), random(255)));
}
background(0);
row = 0;
loop();
}
function draw() {
if (!piString) {
return;
}
// draw a whole row of digits
for (let column = 0; column < columns; column++) {
const piDigitIndex = columns * row + column;
const piDigit = int(piString.substring(piDigitIndex, piDigitIndex + 1));
const digitColor = colors[piDigit];
fill(digitColor);
rect(column, row, 1, 1);
}
// move to the next row, or stop the animation
row++;
if (row >= rows) {
console.log("Done!");
noLoop();
}
}
Edit this code in the p5.js editor.
If this looks like randomness, that’s because it is! The digits in pi are random, or at least mostly random. Don’t ask me, I just think it looks neat.
Zoomed in:
Other colors:
Remix Ideas
- Visualize a different number, like Euler’s number or the golden ratio
- Instead of taking a single digit at a time, what would it look like to take 2 or 3 digits at a time?
- What would it look like to play connect-the-dots with all of the threes?
Comments and Questions
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!