Ink Flow Painting

オンラインデモ

GitHub Pagesで作品を開く

GitHub Pages版は、mainブランチへのプッシュ時にGitHub Actionsで自動更新されます。スマートフォンでは描画領域を広く保つため調整メニューが折りたたまれ、「停止」「清める」「保存」は常に画面上部に表示されます。

日本語 | English

水面へ落とした墨が、滲み、混ざり、流れながら少しずつ薄くなっていく様子を描く、インタラクティブなWebアプリケーションです。

特徴

• 黒・朱・緑・蒼から色を選んで描く手描きモード
• 色がゆっくり変化する「色うつろい」モード
• 墨滴と散らしを自動で重ねる「墨流し」モード
• クリック中は墨を流し、クリックしていないマウス移動では水流だけを変化
• マウスの移動方向と速さに応じた水の流れ
• 墨の拡散と減衰による、自然な滲みと薄まり
• 筆幅、墨の濃さ、水流、滴下間隔の調整
• 一時停止、水面の消去、PNG保存

スマートフォンでの表示

起動時は「手描き」モードです。スマートフォンでは描画面を広く保つため、モード、色、筆幅などの調整メニューを初期状態では隠しています。

• 右下の「調整」をタップすると、画面下から設定メニューが開きます。
• 「停止」「清める」「保存」は画面上部に常に表示されます。
• 「閉じる」またはメニュー外のタップで設定メニューを閉じられます。
• 縦向き・横向きの両方に対応し、ノッチやホームインジケーターの安全領域も考慮しています。

フォルダー構成

Inkflowpainting/
├─ docs/        アプリの説明とデモGIF
├─ source/      Webアプリケーションのソースコード
├─ README.md    日本語のプロジェクト概要
├─ README.en.md 英語のプロジェクト概要
└─ LICENSE

詳しい動作と仕組みは、アプリケーション説明をご覧ください。

ローカルでの起動

Node.js 22.13以降を用意し、次のコマンドを実行します。

cd source
npm install
npm run dev

ビルドと自動テストは次のコマンドで実行できます。

npm run build
npm test

主な技術

• React / Next.js
• TypeScript
• WebGL2
• GPUシェーダーによる流体・顔料シミュレーション
• Vinext / Vite