雨粒が落ちるたび、街の灯りが輪になって揺れる。雨がやむと、水面はもう一つの夜になる。
夜の路地の水たまりです。雨粒が落ちると波紋が広がり、水面に映ったネオンや街灯、自動販売機の明かりを揺らします。雨は小雨から本降り、土砂降りへと強まり、やがて上がります。雨上がりの水面は静まって、街を鏡のように映します。
水面をタップすると、そこへ大きなしずくが落ちます。雨上がりの静かな水面で試すと、波紋の輪がよく見えます。
RIPPLES波紋が広がるしくみ
しずくが落ちると、その点の水面がくぼみ、まわりの水が押し上げられます。持ち上がった水は重力と表面張力で元に戻ろうとし、その動きがとなりへ、またとなりへと伝わって、輪になって広がります。
いくつもの雨粒の波紋が重なると、山と山が重なる所は高く、山と谷が重なる所は打ち消し合います。強い雨の日の水面がざらついて見えるのは、細かい波紋が絶えず重なり合っているためです。
REFLECTION水面が鏡になるとき
水面は、真上から見るとほとんどの光を通しますが、浅い角度から見るほど多くの光を反射します。しゃがんで水たまりをのぞき込むと、向こうの景色がくっきり映るのはこのためです。
濡れたアスファルトでは、表面の細かい凹凸がそれぞれ少しずつ違う向きに光を返すため、灯りの映り込みが縦に長くにじみます。なめらかな水たまりの中だけ、映り込みが鋭く結ばれます。
HOW IT'S MADEこのページの作り方
WAVE EQUATION ON THE GPU
水面の高さを格子（PCで256×256）に持ち、となりの高さとの差から次の高さを求める「波の方程式」を、毎コマ GPU で解いています。雨粒は、その点を小さくくぼませるだけです。
MIRROR CAMERA
映り込みは、地面に対して上下を反転させたもう一台のカメラで街を描いた絵です。水面では、それを波の傾きの分だけずらして読み取り、浅い角度ほど強く映します。
WET ASPHALT
水たまりの外は、同じ映り込みを四方にずらして重ねた、にじんだ絵にしています。水たまりの形は、ゆるやかなむらから作っています。
A NIGHT STREET
両側の壁の窓や店先、看板の文字、自動販売機の正面は、ページの中で描いた絵です。看板の色は濡れた路面と雨すじにも映り込み、点滅に合わせて変わります。雨すじは数百から千数百本の細い板を1回の描画命令でまとめて描いています。Three.js r186 のWebGLで描いています。