this page is to show the experimental procedural animated background images

HTML5 と javascript で、ページの背景画像を動的に生成してアニメーションさせる実験のページです。

動く壁紙です。何でも文章で書いておいた方が、検索で見つけてもらえると思うので、だらだら説明します。

背景の画像を「動的に」生成するって言うのは、絵が動いているから動的なのではなくて、 リアルタイムに新しい絵をどんどん生み出すという意味です。 反対にアニメーション gif とかムービーのような、あらかじめ出来上がっている動画を背景で再生する場合は、 この意味では「静的」です。

60 分の 1 秒ごとに、256 x 256 ピクセルの「正方形の元画像」を作って、それをタイル状に敷き詰めています。 画像の上下・左右が繰り返すように配慮しておかないと、並べた時にうまくつながりません。

「正方形の元画像」は、オフスクリーンの canvas 要素として用意した後で、背景の大きな canvas 要素へコピーして配置しています。 WebGL を使用しているタイプの作品でも同様に、まず「正方形の元画像」をオフスクリーンでレンダリングしています。 WebGL を簡略化するために、three.js を使用しています。"rdbg" だけは、three.js を使用しないで自力で GLSL を書いています。

どんなページに対しても、HTML のスクリプトを少し調整するだけで順応できるように工夫してあります。このサイトのトップページにも適用しています。




Monkey Circus
author's web site
作者のホームページへ。



↓ click ↓



"tinsel"

©2018 Maeda Mameo

(2018/08/14 on web)



"pitchaze" を改造してキラキラにしました。
光の数は 300 個なのですが、上下・左右がつながるように、 それぞれの光を 4 個ずつ用意しているので、1200 個の光を動かしています。

← 参考にさせていただいた画像。




↓ click ↓



"skull"

©2018 Maeda Mameo

(2018/08/10 on web)



ガイコツがタッチの方向を見つめます。

初めて glTF を使用しました。glTF とてもいいです。

blender から three.js に 3D データを渡す時、以前は json でオブジェクトを1つずつ書き出していましたが、 glTF にすると複数のオブジェクトをツリー構造は保ったままで、簡単に書き出すことができて、 後で子オブジェクトの角度や色などを自由に変えられます。




↓ click ↓



"pitchaze"

©2018 Maeda Mameo

(2018/07/28 on web)



白いテクスチャひとつだけを使って、 いろんな色に変えて表示するというだけ目的で、 WebGL を使用しました。
WebGL なしでも、ブレンドとアルファを裏技的に切り替えれば、 同じことができそうですが、すごく重くなるのではないかと思います。




2018/07/30
Safari 7 で three.js r94 を使用すると、 WeakMap が見つからないということに気づいて、 r85 にダウンバージョンしました。




↓ click ↓



"jangeoids"

©2018 Maeda Mameo

(2018/07/21 on web)



jangeo とは、うなぎです。



2018/07/30
Safari 7 では Math.trunc() 使用不可ということに気づいて、 floor() と ceil() で代用しました。




↓ click ↓



"ribbon"

©2018 Maeda Mameo

(2018/07/10 on web)



Paul Neave "Imagination" ← 参考にさせていただいた作品。




↓ click ↓



"splatter"

©2018 Maeda Mameo

(2018/07/08 on web)



comment




↓ click ↓



"repel"

©2018 Maeda Mameo

(2018/07/06 on web)



← このように。マンホールのフタの
模様を見て点々の並べ方を考えました。



2018/08/16
WebGL 化した。結果 CPU 負荷 15 % 減。
アンチエイリアスが微妙に綺麗になりました。




my other works using this technique

2003
"Fly Panda Fly" 『パンダ空の旅』



2001
"MashimaroFollower"






↓ click ↓



"eoids"

©2018 Maeda Mameo

(2018/06/30 on web)



eo(魚)-oids という意味です。



other similar works of my own

2003
"Apploid"



2001
"Mashimaroid"



1997
"FROG QUEUE" 「カエロイド」






↓ click ↓



"drops"

©2018 Maeda Mameo

(2018/06/23 on web)



Voronoi diagram ボロノイ図
Delaunay triangulation ドロネー三角形分割




other similar works of my own

2007
"Drops"



1999
"interactive reptilian patterns"
「カエルドスコープ」



1998
"FROG CELLS" 「カエルーム」





↓ click ↓



"rdbg"

©2017, 2018 Maeda Mameo

(2017/11/25 on web)



reaction-diffusion system 反応拡散系




my other works with variation

2017
"reaction-diffusion system WebGL"



2014
"reaction-diffusion system"