INTERACTIVE WATER ― 画像素材0枚
INTERACTIVE WATER ― 画像素材0枚
この水は画像でも動画でもなく、コードがリアルタイムに描いています。
HOW IT'S MADE
このページに、写真や動画は一枚も使われていません。目の前で揺れているこの水は、ブラウザの中でその場で計算され続けている「数字」です。指で触れた場所から波が生まれ、隣のマスへ、そのまた隣のマスへと少しずつ伝わっていく――そんな単純な計算を、画面の中の何十万マスもの場所で、1秒間に60回くり返しています。
指やマウスが触れた場所の「水面の高さ」を少しだけ持ち上げます。持ち上がった水は、隣り合う場所と高さを分け合おうとして少しずつ均されていく――これを毎フレーム繰り返すだけで、波紋が自然に外へ広がっていきます。
水面は、細かく傾いた無数の鏡のようなものだと考えてください。傾きの向きによって、空の光を強く跳ね返す場所と、そうでない場所が生まれます。波の高さのわずかな差から傾きを求め、光の当たり方をその場で描き直すことで、あのきらめきが生まれています。
「月夜」「宵」「暁」「雨」…ボタンひとつで、空の色・光の向き・水の透明感がじわじわ移り変わります。裏側では、いくつかの「色と明るさの設計図」をあらかじめ用意しておき、選ばれた設計図に向かって毎フレーム少しずつ数値を近づけているだけです。
見出しの文字は画像ではなく、一度別のキャンバスに描いてから水面に重ねています。水面の傾きぶんだけ文字の位置をわずかにずらすことで、文字そのものが水に浮かんで揺らいでいるように見えます。
これらはすべて、WebGLというブラウザ標準の描画のしくみと、GPU(画像処理を高速に行う部品)に向けた短いプログラムだけで作られています。写真や動画を用意する代わりに「計算のルール」だけを用意しておき、あとはブラウザに任せて毎秒何十万回もその場で描き直してもらう――そういう作り方です。
← サイトデザイン研究室へ戻る