地図/基礎/Canvas と数学

大量の点が、濃淡になる

globalAlpha を低くした点を一個だけ打つと、ほとんど見えない。同じ点を何千個も近くへ重ねると、アルファが足し算されて滑らかな濃淡になる。一点の濃さは小さいまま、点が集まった密度だけが絵になる。

tintAlpha(30, 0.05) の薄い点を全面に撒き、半分を画面を上下にうねる帯のあたりへ寄せる。帯が通った所は点が密に重なって濃く、外れた所は薄いまま。一粒ずつは弱いのに、重なりの多さがそのまま明暗になる。

帯の周りだけが濃く溜まり、帯が動くと濃い領域もついて動く。0.05 のアルファ一回ぶんは見えないが、同じ場所に二十回重なれば濃く出る。明るさが、その点を何個が通ったかの数え上げになる。

半透明の塗りは out = src·α + dst·(1−α) のアルファ合成で重なる。同じ場所に薄い点を n 回重ねると、紙からの残り (1−α)ⁿ が指数で減って濃さが飽和へ近づく。一点ごとに密度を明示的に数えなくても、合成そのものが「何回通ったか」をおおよそ濃度に変換する。密度を絵にする仕組みになる。

この数え上げに軌道を流し込むのが de Jong アトラクターx, y を三角関数の漸化式で次々に書き換えると、点の通り道が平面のどこかに濃く、どこかに薄く溜まる。一点ずつは薄いのに、何千フレームも撃ちつづけると密度の地図が浮かぶ。

漸化式は x' = sin(a·y) − cos(b·x)y' = sin(c·x) − cos(d·y)。前のフレームの x, y を入れて次の x, y を出す、それだけを毎フレーム何千回も回す。出てきた (x, y) を画面中央を原点にして打つと、軌道が同じ筋を何度も通った所が濃く焼ける。

sincos の出力は -1〜1 に収まるので、xy-2〜2 の枠から飛び出さず、軌道は画面の中で巻きつづける。tintAlpha(238, 0.03) の薄い紙を毎フレーム上から塗っているので、古い跡が少しずつ薄れて模様が更新される。d0.001 ずつ動かすと、軌道の溜まる筋がにゅるにゅる形を変える。a, b, cc の値を変えても模様が別物になる。globalAlpha の足し算が「点がそこを何回通ったか」を勝手に数えていて、明度が出現頻度の地図になる。