本文へスキップ

WebGLを使った表現 gallery

Particles パーティクル

たくさんの点の集まりで、ロゴ・写真・イラストを描きます。

  1. 01 Repel ロゴの形に並んだ点です。ポインターで押しのけると、ばねのように元の位置へ戻ります。
  2. 02 Flow 点が風に流されて画面を漂い、また集まってロゴになります。
  3. 03 Sand 写真を、色のついた点の集まりで描いています。砂のように吹き飛ばすと、ゆっくり元に戻ります。
  4. 04 Morph 同じ点の集まりが、ロゴ、イラスト、写真の人物と、形を変えていきます。

Generative シェーダー

数式で模様を描きます。どれもロゴを形として使っています。

  1. 01 Contour ノイズでつくった起伏の上に、ロゴの形の台地を置き、等高線で描いています。
  2. 02 Marble ロゴの内側に、流れ続けるマーブル模様を流し込んでいます。
  3. 03 Voronoi 画面を細胞のような区画に分け、ロゴにかかる区画だけを塗っています。
  4. 04 Dither 明暗を、点の並びだけで表しています。ロゴのぼけ具合が、呼吸するように変わります。

Image Effects 画像エフェクト

写真を、シェーダーで加工します。

  1. 01 Glitch ときどき、または速く動かしたときに、写真が横にずれて色が分かれます。
  2. 02 Mosaic 全体は粗いモザイクで、ポインターの周りだけ細かく、くっきり見えます。
  3. 03 Liquid 水面越しのように写真がゆらぎ、ポインターの周りで渦を巻きます。
  4. 04 Halftone 写真を印刷の網点に置き換えています。ポインターの周りだけ、元の写真が見えます。

Transitions 画像トランジション

写真とイラストを、いろいろな切り替え方で行き来します。

  1. 01 Dissolve 燃えるように、ノイズの形で溶けて入れ替わります。
  2. 02 Warp 波打つ境目で、下から次の画像がせり上がります。
  3. 03 Pixel モザイクで粗くしてから入れ替え、また細かく戻します。
  4. 04 Circle クリックした位置から、円が波紋のように広がって入れ替わります。
  5. 05 Slice 縦に分けた帯が、少しずつ時間差で上から押し出していきます。

3D 立体

ロゴやイラストを立体として描き、ポインターで向きを変えます。

  1. 01 Layers ロゴを何十枚も重ねて、奥行きを出しています。向きを変えると厚みが見えます。
  2. 02 Ring ロゴを円筒に巻きつけて回しています。
  3. 03 Voxels ロゴを小さな立方体の集まりに置き換えています。ポインターの近くの立方体が飛び出します。
  4. 04 Cloth イラストを布のように、風になびかせています。

Interaction インタラクション

ポインターの動きに、波紋・ばね・インク・レンズで応えます。

  1. 01 Ripple 方眼とロゴを描いた面に波紋を立て、その屈折で模様をゆがませています。
  2. 02 Jelly ロゴを、ばねでできた格子に貼り付けています。つまんで引っぱると、ぷるんと戻ります。
  3. 03 Ink なぞったところにインクが流れ、にじんだ部分だけ、イラストの下から写真が現れます。
  4. 04 Lens イラストの上を、ゆがみと色のにじみのある虫めがねが動きます。

Contact

お問い合わせへ