描いた線が水面を揺らすまで。「波になる線」をつくった記録

描いた線が、手を離すと波打ち始める

画面に一本、線を描きます。描き終えると、両端を残したまま線がゆっくり波打ち始めます。その揺れがまわりの水面に伝わって、光や色も少しずつ広がっていきます。「波になる線」は、そんな動きをブラウザで試したものです。

3色の線から波と色が広がる動画（約12秒・無音）

画面には最初から3色のサンプルが入っています。自分で描くときは6色から選べて、波の強さや速さも変えられます。動きを止めたり、線だけを隠して水面を眺めたりすることもできます。

最初に試したのは、描いた形を残したまま、線そのものを波打たせることです。描いた線をいくつもの点に分けて取っておき、その点を少しずつ横にずらします。毎回、描いたときの形からずらすので、揺れている間も元の形が見て取れます。

次は、線の周りに波紋を出してみました。最初は動いたところから円い輪を広げ、その次は波打つ線の形を写して、薄い波紋を両側に広げました。さらに、波紋が生まれた瞬間の形を取っておき、あとから元の線が動いても、先に出た波紋は自分の形のまま進むようにしました。

これで波紋は元の線から離れていきます。ただ、離れた先でも曲がり方は写し取ったときのままです。波紋が重なるところの明るさも変えてみましたが、画面では、よく似た線が何本も外へずれていくように見えました。

そこで、線の周りに広がる水面に、揺れを伝えてみました。水面を小さな区画に分けて、それぞれの高さと、上下に動く速さを覚えておきます。線が動いて近くの水面が揺れると、隣との高さに差ができます。その差に応じて隣も上下に動き、揺れが少しずつ遠くへ伝わっていきます。

こうすると、線のそばで生まれた揺れが、離れたところでは幅のある弧になって見えました。別の波と出会うと、両方が盛り上がるところでは揺れが強まり、片方が盛り上がってもう片方がへこむところでは弱まります。重なる場所が移るにつれて、水面の模様も変わっていきます。

水面が傾くと光って見える場所も変わります。そこで、傾きに合わせて明るさを変えてみました。最初は白い斑点や角張ったところが目立ったので、傾きの変化をなめらかにつなぎ、白く光る部分も少し抑えました。

水面を少し透かしてみると、青緑の下地は見えますが、底に何があるかは分かりにくいままでした。そこで、砂地や小石を思わせる模様を底に置きました。底は固定したまま、水面が傾くたびに模様を読む位置を少しずらすと、波越しに底が揺らいで見えます。

水面を揺らすところにも、途中で手を入れました。最初は、線が画面を占める範囲を前後で比べていました。すると、位置が変わらず線が薄くなっただけでも、変化として拾って波が出てしまいます。同じ線の同じ点がどれだけ動いたかを追うように変えると、実際に動いた部分から新しい揺れを起こせるようになりました。

さらに、水面の動きを線にも少し返してみました。「水の抵抗」を入れると、線は元の波形を少し遅れて追いかけ、真下の水面からも弱い揺り返しを受けます。制作中に切り替えて見比べると、抵抗を入れたときは線の揺れが抑えられて見えました。

最後に、線から広がる波にも色を乗せてみました。青とピンクの線を近くに描くと、線のそばに鮮やかな色が見え、外へ広がった波では淡い色が重なります。

水面の上下の動きと、色の広がりは別々に持たせています。そうすると、水面の動きはそのままで、線の近くの濃さを残しながら、外側へ広がった淡い色だけを見えやすくできます。光や底の揺らぎと同じように、色も画面の上で水らしく見せるための工夫です。

青とピンクの線を近くに描き、同じところで止めて線の表示だけを切り替えた比較です。線を隠すと、水面の色と光の反射が見やすくなります。

使ったもの	今回使ったところ
Canvas 2D	線、水面、水底、光、色を一つの画面に描くところ。
Pointer Events	マウス、ペン、指の入力を同じ仕組みで受け取るところ。
TypeScript	線の形、水面の揺れ、操作に応じた変化を書くところ。
Vite	制作中にブラウザで表示を確かめ、配布用のファイルをまとめるところ。

線の色や波の強さを変えながら、水面の見え方も試してもらえたらと思います。