和紙に墨を置くための一枚の画面

「墨 — sumi」は、画面を指やマウスでなぞって描くインタラクティブな視覚作品です。

ページを開くと、何もない和紙の上に龍が一筆ずつ現れます。
描画の途中で画面に触れると龍は引き下がり、そのまま自分の筆で続きを描けます。

筆の運びが線の表情になる

描き方は単純です。
マウスの左ボタンを押しながら動かすか、スマートフォンやタブレットの画面を指でなぞります。

ゆっくり動かすと墨が多く置かれ、線は濃く太くなります。
素早く払うと線が細くなり、かすれが残ります。
ペンタブレットやApple Pencilでは筆圧も反映されます。

線の太さは画面右下のつまみで調整できます。
直前の筆致は10回前まで戻せるため、偶然できた形を残しながら描き直せます。

「紙」モードでは、引いた線がその場所でにじみ、形を保ったまま定着します。
文字や絵を描くときに向いたモードです。

「水」モードへ切り替えると、墨は水流に運ばれて広がります。
線の輪郭は渦に沿ってほどけ、濃い部分から少しずつ紙へ吸われていきます。

同じ筆致でも、紙では形が残り、水では流れに変わります。
描く操作と、変化を眺める時間の両方を楽しめるようにしました。

墨の色は、黒、藍、群青、緑、朱、紫、金、蛍光桃、蛍光青、黄、胡粉から選べます。
端末のカラーピッカーを使えば、一覧にない色も指定できます。

色を変えても、それまでに描いた線の色は変わりません。
異なる色を重ねると、置かれた墨の量に応じて混ざります。

紙は白地と黒地を切り替えられます。
黒い紙に蛍光色を置くと、墨が光を含んだように見えます。

必要ありません。
ページを開くとすぐに描き始められます。

作品データは送信されません。
描画からPNG画像の保存まで、ブラウザーの中で完結します。

指で画面をなぞって描けます。
端末の性能に合わせてシミュレーション解像度も自動で調整します。

墨のにじみは、あらかじめ用意した動画や画像ではありません。
WebGL2と自作のGLSLシェーダーを使い、Jos StamのStable Fluidsに基づく流体シミュレーションをGPU上で毎フレーム計算しています。

水の速度、圧力、渦、墨の濃度、紙への定着を別々に扱い、最後に和紙の質感と合成しています。
外部ライブラリ、サーバー処理、データベースは使っていません。
配信するHTML、JavaScript、フォントなどは、圧縮前で合計約124KBです。

端末の描画性能が足りない場合は、すでに描いた墨を残したままシミュレーション解像度を下げます。
WebGL2を利用できない環境ではWebGL1へ切り替え、それも使えない場合は静止画を表示します。

完成した画面は「保存」ボタンからPNG画像として書き出せます。
会員登録や作品データの送信はありません。

目的を決めて描く必要もありません。
和紙に線を一本置き、そのにじみが止まるまで眺めるところから試せます。