πをビジュアル化

唐突ですがこれなんだかわかりますか？

これ、実は円周率のπです。

もう少し詳しく説明しましょう。円周率は3.14…でした。覚えている人も多いかと思いますが、これ…の後も無限に数字が続きましたね。この画像はその円周率の格桁の値に、例えば１なら赤、２なら黄色といった風に色を割り振って点を打っていったものです。

この点の色、何か規則的に並んでいるように見えますか？

そうです。実はこの点の色の並びに規則性はありません。試しに乱数というランダムに数字を生成してくれる機能を使って描いたしたの絵と比べてみると似ていると思います。

数学的にも円周率にランダム性があることはわかっていて下のようなニッチな本では「乱数表として活用できます」と書いてあります。乱数表ってのは、サイコロみたいにランダムに何かを決めたいときに使うものです。

円周率100,000,000桁表 縮刷版

数学も授業とかで習うような角度からみると味気なく感じますが、見方によってはいくらでも面白くなります。皆さんもいろいろ試してみると良いでしょう。

画像の生成方法

ここからは、上で見せた画像の生成方法についての説明です。どのようにして円周率の値から上の画像を生成したかを説明していきます。

先ずは円周率を求めるのですが、今回は円周率を求めることが本題ではないので、１０億桁までの計算結果を載せている以下のサイトから拝借します。(※500MBぐらいあります）

https://www.tstcl.jp/ja/

このサイトはtxtデータで配布しています。今回は1000×1000の100万桁まで使おうと思っているのでpythonで１００万桁まで取り出してcsvファイルにします。ソースコードはこんな感じ

import csv

count = 0
max_count = 1000000
pi_list = []
with open("/Users/Downloads/pi-10oku.txt") as f:
   for line in f:
       for s in line:
           if s != ".":
               pi_list.append(int(s))
           count+=1
           if count > max_count:
               break
print(pi_list)

with open("/Users/Downloads/pi.csv", "w") as f:
   writer = csv.writer(f, lineterminator='\n')
   writer.writerow(pi_list)

ビジュアルに特価した言語にprocessingがあります。それをweb上で動くように移植したp5jsを使ってビジュアル化していきます。csvファイルのサイズが2MBぐらいです。p5jsのウェブエディタがたしか５MBぐらいまでしかアップロードできないので丁度いいですね。

あとはp5jsの方でπの格桁の値を読み込んで、その値を元に色を決めて円を描画していくだけです。ソースコードはこんな感じです。

let table;
let pi=[];
const ellipseSize = 10;

function preload() {
 table = loadTable('pi.csv', 'csv');
}


function setup() {
 createCanvas(600, 400);
 colorMode(HSB, 10);
   
 const col = floor(width/ellipseSize);
 const row = floor(height/ellipseSize);
 
 for (let i=0; i<col*row -1; i++) {
   append(pi, table.getNum(0, i));
 }
 
 // spiral(ellipseSize, col * row);
 matrixLine(ellipseSize);
}

function draw() {
}


function matrixLine(eSize) {
 colorMode(HSB, 10);
 let index = 0;
 noStroke();
 ellipseMode(CORNER);
 for (let y=0; y<height; y+=eSize) {
   for (let x=0; x<width; x+=eSize) {
     // fill(floor(random(10)), 10, 10);
     fill(pi[index], 10, 10);
     ellipse(x, y, eSize);
     index++;
   }
 }
}