流体ペイント

つくりの話

画面の裏にある水の升目

見えているのはインクですが、計算しているのはその下にある「水の流れ」です。画面の短いほうの辺を160マスに区切った升目を用意し、マスごとに「水がどちら向きに、どれだけの速さで流れているか」を持たせています。インクはその流れに乗って運ばれるだけ。なぞったときに加えているのも、インクより先に「水を押す力」です。

インクの升目は流れの升目より1.6倍細かくしてあります。流れは多少粗くても目立ちませんが、色の境目が粗いとすぐにギザギザが見えるからです。計算はすべてパソコンやスマホの GPU（画像処理用のチップ）が、全部のマスを同時に処理しています。

水は押し縮められない

1コマごとに、流れの計算を次の順で回しています。

• 渦の強さを測って、弱まった渦を少し強め直す
• どのマスで水が湧き出し、どのマスで吸い込まれているかを調べる
• それを打ち消す「圧力」を、24回の繰り返し計算で求める
• 圧力の差で流れを補正する
• 流れそのものと、インクを、流れに乗せて運ぶ

まん中の3つが、水らしさの正体です。水は押しても縮まないので、どこかへ押し込んだぶんは必ず横へ逃げます。指でまっすぐ押したのに左右へ渦が分かれていくのは、この「押し縮められない」という条件を毎コマ守らせているからです。圧力は一発では求まらないので、近似を24回重ねて答えに近づけています。

渦を足し戻す

升目で流れを計算すると、細かい渦が計算のたびに少しずつ均されて、すぐに消えてしまいます。本物の水より、ねっとりした蜂蜜のようになるのです。そこで、渦が弱まったぶんを毎コマ足し戻す処理を入れています。強くするほど渦がくるくる巻きますが、上げすぎると画面がざわざわした雑音になるので、ほどよいところで止めてあります。

インクを流れからずらさない

インクの升目のほうが細かいので、インクを運ぶ計算でうっかりインク側の升目の幅を使うと、同じ速さの流れでもインクが短い距離しか進まず、色だけが流れから遅れて見えます。インクも流れと同じ物差しで運ぶことで、両者がぴったり一緒に動くようにしています。

動きは早めに、色は少し遅れて消える

流れもインクも、時間とともに少しずつ弱まります。流れのほうがわずかに早く弱まるので、描いたあと渦が先に落ち着き、色はしばらく漂ってから暗闇に溶けていきます。弱まらなければ色は増える一方で、いずれ画面が濁ります。かといって早く消しすぎると、描いた形を眺める間がありません。

色は黄金比で回す

インクの色は、インクを置くたびに色相環を黄金比（約0.618周）ずつ進めて決めています。この進め方だと、何回進めても前の色のすぐ隣には戻らず、近い色が続きにくくなります。1本のストロークの中でも色が次々に変わるので、ひとなぞりで虹の帯になります。

速さがそのまま力になる

なぞったときの力は、前の位置から今の位置までの移動量に比例させています。速くなぞるほど一度に大きく動くので、強い力になります。素早く動かすと指の位置の報告が間に合わず途切れがちになるため、ブラウザがまとめて持っている途中の位置もすべて拾って、流れに切れ目ができないようにしています。

真っ暗な画面で始めない

開いた直後は、まん中あたりで4つのインクが弾けた状態から始まります。何もない黒い画面は、おもちゃではなく読み込み中に見えるからです。触らずにいるときの自動のインクも同じ理由です。端末で動きを減らす設定がオンのときは、自動のインクは出さず、最初の4つも穏やかに弾けるだけにしています。

最後に画面へ出すとき、明るいところほど伸びを抑える補正をかけています。インクが何色も重なっても真っ白に飛ばず、色味が残ります。画面の四隅は少しだけ暗くしてあります。

楽しみ方

• ゆっくりと速くを比べる：同じ場所を、ゆっくりなぞったときと素早くなぞったときで、渦の大きさと流れる距離がどう変わるか見てみてください。自由研究の観察テーマにもなります。
• 2本の指でぶつける：両手の指で向かい合わせになぞると、流れがぶつかるところで渦が生まれます。
• タップを連打する：同じ場所をポンポン叩くと、色違いのインクが重なって花のように広がります。
• 放置して眺める：触らずに置いておくと、自動のインクでゆっくり模様が変わり続けます。
• ほかの科学トイと：化学反応で模様が育つ反応拡散パターンも、同じように GPU で全画素を計算しています。