誕生日を二進数にしてSVGを作る遊び

svg.jsを使った表題の遊びをご紹介します。

遊びの結果

See the Pen Untitled by FrontendKanazawa (@jikkensya) on CodePen.

アイディア

1. 誕生日を設定

   const birthday = 18790314 //1879年3月4日
   

2. 誕生日を32ビットのバイナリーにする

   let binaryBday = birthday.toString(2)
   
   //この時点でのbinaryBdayは32bitではないので調整しています
   let deficit = 32 - binaryBday.length
   if(deficit > 0){
     let zeros = "0".repeat(deficit)
     binaryBday = zeros + binaryBday
   }
   //binarBdayの中身(32bit)
   //00000001000111101011011110101010
   

3. 8×4の行列に並べる

    const rows = 8
    const clms = 4
    
    for(let row=0; row<rows; row++){
        let line = []
        for(let clm=0; clm<clms; clm++){
            let binary = binaryBday.slice(-1)
            binaryBday = binaryBday.slice(0, -1)
            line.push(binary)
        }
        console.log(line)
    }
   

4. console.logの結果

   [ '0', '1', '0', '1' ]
   [ '0', '1', '0', '1' ]
   [ '1', '1', '1', '0' ]
   [ '1', '1', '0', '1' ]
   [ '0', '1', '1', '1' ]
   [ '1', '0', '0', '0' ]
   [ '1', '0', '0', '0' ]
   [ '0', '0', '0', '0' ]
   

結果の1になっているところに図形を描く、といったシンプルなアイディアです。

ユースケース

• 誕生日を何かにプリントしたいけど個人情報をおおやけにさらすのが気になる時
• 家族の誕生日を組み合わせて柄を作りたい時
• 出会った宇宙人が十進法より二進法に慣れている時
• 十進法が禁止されている惑星で誕生日を尋ねられた時

読んでいただき、ありがとうございました。