個人的にも好きでよく見かけるの多い画像の区画を明度に合わせてアスキーに変換する手法をさまざまな動画で試していた際に、花火の動画を使った時の出来が一番おもしろかったので投稿のタイトルに使いました。この記事ではこの手法の大まかなアルゴリズムとポイントのみに絞ってまとめていきます。

※参考までとなりますが最後にコードペンを貼っています

アルゴリズム

Imageを行列としてループする
Image[x][y]の色を取得
取得した色をグレイスケールに変換
グレイスケールを5つのASCIIグループに振分ける
[x][y]にASCIIのグループの中からランダムに選択した文字を描写

ポイント

ループについて

画像をループする際は、例えば20 x 20ピクセルといったブロック単位を選択する事が多いかと思います。其の際、2のステップで抽出する色は全てのピクセルの平均した方が良い結果が出るかと思いますが計算コストが高いため平均せず一つのピクセルだけを利用しています。

グレイスケールの変換方法

単純な変換方法としてはR,G,Bの平均値を使うという方法もありますが、Luminosity(輝度) methodといった変換方法の結果がよく見えたためそれを採用しました。

function rgbToGreyScale(r, g, b){
  //Luminosity method
  return r*0.3 + 0.59*g + 0.11*b
}

アスキーのグループについて

明るい色はAなどの面積が多い文字、暗い色は,などの面積が少ない文字といった具合にASCIIをグループ分けして使っています。

const lightness = [
  ' ', //明るさ 0
  '.,-:;',
  '|(){}[]<>^*!/?',
  '+=%#@_~',
  'abcdefghijklmnpqrstuvwxyz',
  'ABCDEFGHIJKLMNOPQRSTUVWXYZ&$0123456789' //明るさ Max
]

コードペン

クリックすると再生されます。

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

簡易的ですが以上となります。
最後までお読みいただきありがとうございました。