本文へスキップ
オモシロWeb
さわる

水面リップル

触れると、しずかに波紋がひろがる。

仕掛けを準備しています…
← 他の仕掛けを見る

これは何?

画面ぜんぶが、一枚の静かな水面です。触れた場所から波紋が生まれ、リアルにゆらいで、ぶつかって、やがて消えていきます(本物の水面をまねた波のシミュレーション)。

なぞると波の筋ができ、放っておくと時々ぽつりと雨だれが落ちます。意味はないけれど、指を止められない。夜、音を小さくして眺めるのがおすすめです。

あそびかた

  1. 水面をタップ/クリックすると、そこから波紋が広がる。
  2. 押したままなぞると、波の筋が生まれてぶつかり合う。
  3. しばらく放っておくと、雨だれが落ちてくる。

なぜ水面なのか

水に触れたい、というだけの理由です。池の水面に指を入れて、広がる波を眺める——あれをブラウザの中でやりたかった。目的も得点もありません。

似たものはたくさんありますが、多くは決まった形の輪が広がるだけです。ここでは本物に近い挙動、つまり波どうしがぶつかって干渉し、壁で反射するところまで再現したかったので、簡易的とはいえ物理計算を入れています。

どうやって動いているのか

水面の高さを2枚分(前のコマと今のコマ)持ち、波の方程式を差分化した式で次の高さを求めています。具体的には、上下左右4点の平均から前の高さを引き、そこに0.986を掛けて少しずつ減衰させます。触れた場所には、その瞬間だけ高さを足し込みます。

計算は5px程度の粗い格子で行い、それを拡大して描いています。1ピクセルずつ計算すると重くなるためです。水らしく見せているのは色ではなく、高さの傾き(隣との差)から作った明暗で、これが光の反射のように働きます。

もっと楽しむコツ

ゆっくりなぞると、後ろの波に追いついて縞模様ができます。2か所を交互に叩くと干渉のようすがよく見えます。放っておくと、たまに雨だれが落ちます。指を離しても波はしばらく残るので、消えるまで眺めるのがおすすめです。

よくある質問

本物の水みたいに動くのはなぜ?

画面を細かい格子に分けて、隣どうしの高さを伝え合う「波のシミュレーション」をブラウザ内で計算しているためです。画像や動画の読み込みはありません。

音は出ますか?

触れると小さな「ぽちゃん」という水滴音が鳴ります(ブラウザ内で合成・通信なし)。音オフにもできます。

波はどれくらいで消えますか?

触れるのをやめると、数秒かけて少しずつ弱まって消えます。連続で触れ続けている間は波が重なり合い、干渉した模様が現れます。

音は出ますか?静かに遊べますか?

触れたときに水滴のような音が鳴ります。ブラウザ内で合成しているため音声ファイルの読み込みはありません。サイト共通のミュートをオンにすれば無音で遊べます。