#003 root2visualize

気ままにクリエイティブコーディング。久々です。本業が忙しく、その間にもいくつもの作品を見て勉強になりました。自身の脳内ではスキルアップしているつもりなので、少しアウトプットを試みます。

あとあと知人からアドバイスを受け、循環小数との対比ということで1/71を可視化したものを追記しました。

作品紹介

ルート2をビジュアライズしました。ルート2とは2回掛け算して2になる数ですね。3×3=9だからルート9は「3」ですね！なので、ルート2は整数ではありません。1.41421356...と延々に続きます。ヒトヨヒトヨニヒトミゴロと覚えたアレです。

作品名はまんま、root2visualizeとしました。

実行結果

openprocessingはこちらです。

【おまけ】循環小数1/71を可視化したもの（桁の周期は35です）

コードの解説

前回と同じく、カラフルな色を扱いたいのでカラーモードをHSBにしました。また、ルート2の小数点以下を1400桁を対象としました。

右上の(0,0）から小数点第1位の4個だと短すぎたので40個点を打ちました。次に縦に1つずらして(0,1)から小数点第2位の1より10個点を打ちます。色は何個点を打つのかでHSBのHue値にすることを採用しました（適当...）

今回ついた技術は、長い文字列をsplit関数を用いて1文字ずつ、配列に格納しました。[4,1,4,2,1,3,5,6,...]って感じですね。1つの配列は長くなりすぎるのも嫌だなと思い350桁にしました。なので、今回は配列4つ分の1400桁を4列の帯に表現しました。

点を打つ回数を配列[n]×10とした次第です。

感想

桁の数値はcsvファイルにして外部ファイルとして読み込むと、もっとファイルがスッキリするんだろうなと思いながら、自分にはまだ技術がないため今回の方法をとりました。着想から2時間位かかりましたが勉強になりました。

実行結果は...うーんランダムだっていうことは分かりますね。少し数学的な話をすると、ルート2は無理数、無限小数です。雑な定義ですが、、以下参考までに。

無理数とは分数では表せない数

無限小数とは桁数に無限に続く終わりのない小数

999と9が連続するところは少し赤っぽい帯が太めに出ます。それくらいしか感想がないです。（笑）

でも、ワクワクしながらクリエイティブを楽しめました。楽しむことが1番ですね！

NextSteps

・csvファイルの読み込み

・4つの文字列を配列に代入してfor文4つをやめる！

＜参考：コード＞

root2a = "41421356237309504880168872420969807856967187537694807317667973799073247846210703885038753432764157273501384623091229702492483605585073721264412149709993583141322266592750559275579995050115278206057147010955997160597027453459686201472851741864088919860955232923048430871432145083976260362799525140798968725339654633180882964062061525835239505474575028"

let root2b = "77599617298355752203375318570113543746034084988471603868999706990048150305440277903164542478230684929369186215805784631115966687130130156185689872372352885092648612494977154218334204285686060146824720771435854874155657069677653720226485447015858801620758474922657226002085584466521458398893944370926591800311388246468157082630100594858704003186480342"

let root2c = "19489727829064104507263688131373985525611732204024509122770022694112757362728049573810896750401836986836845072579936472906076299694138047565482372899718032680247442062926912485905218100445984215059112024944134172853147810580360337107730918286931471017111168391658172688941975871658215212822951848847208969463386289156288276595263514054226765323969461"

let root2d = "75112916024087155101351504553812875600526314680171274026539694702403005174953188629256313851881634780015693691768818523786840522878376293892143006558695686859645951555016447245098368960368873231143894155766510408839142923381132060524336294853170499157717562285497414389991880217624309652065642118273167262575395947172559346372386322614827426222086711"


let a = root2a.split("")
let b = root2b.split("")
let c = root2c.split("")
let d = root2d.split("")

function setup() {
 colorMode(HSB, 100);
 createCanvas(360, 350);
 background(10);
 fill(255);
 stroke(255);
 //1-350
 for(let j = 0; j < 350; j++){
   stroke(a[j]*10,100,100);
   for(let i = 0; i < a[j]*10; i++){
   point(i,j);
   }
 }
 //351-700
 for(let j = 0; j < 350; j++){
   stroke(b[j]*10,100,100);
   for(let i = 0; i < b[j]*10; i++){
   point(90+i,j);
   }
 }
 //701-1050  
 for(let j = 0; j < 350; j++){
   stroke(c[j]*10,100,100);
   for(let i = 0; i < c[j]*10; i++){
   point(180+i,j);
   }
 }
 //1051-1400  
 for(let j = 0; j < 350; j++){
   stroke(d[j]*10,100,100);
   for(let i = 0; i < d[j]*10; i++){
   point(270+i,j);
   }
 }
 
}

function draw() {
		
}

おしまい！バイバイ！