9/13 Version 15.00制作記
ホームページの更新も一応の収束(見た目の遷移時間は短かったですが)を見た所で、Electrical Fireworks Shell Version15.00の制作記です。
今回で、ホームページ画像としては14枚目という事になります。最初に公開した頃は、タイトル用の絵なんて無かったんですね〜
例に漏れず、かなり苦心しました。苦労はしてないけど。作っても作っても良い感じが醸し出せなくて、ヤケになって適当にやりはじめると良い感じ成分がにじみでてくるというお決まりパターン。良い感じ成分が出てくると制作は俄然楽しくなるのですが、それまでが、ねぇ。
ともかく、製作過程を残すとしましょう。
解像度無限大…のはずが
最初は、昔懐かしのCoghの雪片曲線などのフラクタルネタにしようと思ったり、フラクタルだったらやっぱりMandelbrot集合でしょ、と色々試したのですが、やっぱり借りてきた題材ではどうにもアレンジし切れません。256x256程度の解像度ではMandelbrot集合を描いてもギザギザするばかりだし、解像度を上げだすとリアルタイムで見せることが出来なくなります。
こうして題材がどうにも定まらないので、前回のホームページを作ったときのボツ画像に、安易にフィードバックをかける所から開始してみました。ボツにしたというのも前回のホームページは渋め路線を狙ったので、どうにも使い道が無かったんですね。なので復活！
Fig.1 フィードバック
(効果が分かりやすいように、ホームページで使用しているアプレットより大げさに掛けています)
そういえば、フィードバックはJavaアプレット作りに毎回使っている、まさに欠かせない技法なんですが、フィードバックの掛け方は毎回違います。今回はかなりシンプル(安易)な掛け方をしています。
基本的には、次のフレームの画像の上に、直前のフレームの画像を15/16に縮小したものを暗くして加算合成する、というだけです。縮小時の原点は毎フレーム移動させています。
また、加算合成の際に、ディスプレースメントマッピングの効果も追加しているので、画像自体が波打ったような感じになります。前々から作ってあるルーチンの使いまわしといえばそうですが、重宝しているルーチンです(^^;)
また、暗くするためには、前フレーム画像の色(srcとします)と、白以外の何らかの色(fbとします) とで乗算を行っていますが、fb は、画像の各部分で違います。左上から右下に掛けてグラデーションさせてみました。だから、Fig.1 の残像っぽく見える部分は、左上部分と右下部分で色合いが違いますね。ちなみに、左上と右下で、fb は常にHSB色空間内でH値が120度違います。あまり不愉快なグラデが出来ないように近い色同士で構成してるわけです。
さらに、fb を毎フレームでじわじわ変化させます。これによって、アプレット全体の色調がじわじわ変わって見えるんですね。Version 13.00から使っている方法です。これも重宝しています(^^;) いい加減そんなのに頼って逃げるなという気もしますけど(自戒
背景付け
とりあえず前景は…あまり手が掛かってないですが、こんなもんでしょう。
背景を入れます。
これも適当にテクスチャを描いてそれだけといえばそうですが、前景との合成方法が色々考えられます。今回は、前景もろともフィードバックに巻き込む事にしました。
ただ、前景がいつもより淋しいので、背景で差別化を図ろうということで、色合いが変わるように背景も刻々と変化させることにしました。
→
→
→
最初へ
Fig.2 この順に、αブレンディングしつつ替えていきます
背景テクスチャは最初は左３枚だけだったんですが、もう一枚何か味の出る画像が欲しかったので、なっと＠瑞也氏に頼んで４枚目を加えさせてもらいました。
テクスチャの色は全体に暗めですが、明るくするとフィードバックさせたときに色調がキツ目になりがちだからです。フィードバックさせて良さそうな色合いになるようにテクスチャの色を整えます。
設置
実は、アプレットはさっさと出来てしまったのですが、アプレットを埋め込むべき背景の案が非常に困りました。
なぜかというと…まずこんな風に、アプレットの回りを行儀良く取り囲むように画像を作って表組みしたかったとしましょう。
Fig.3 最初はこうするつもりだった(75%縮小)
すると、
Fig.4 切れちゃう
こんな感じで、表組みがズレてしまうんですね。↑の画像はPhotoshopで適当にズラしているので実際のIEでのズレ方とは必ずしも一致しませんが、ともかく円に切れ目が出来てしまう。これはいただけません。なんか、作り方が悪いような気もするのですが、どうにも解決策が見つからずm(__
うーうー言いながら画像の切り方やセルのスパンをいじってたら、画像の切り方を変えてるのに、セルのスパンを変えてない、という中途半端な状態のHTMLを表示したのです。
…これ採用
そういうわけで、どうせ繋がらないなら円をぶった斬ることにしました。斬ったからには火花を出す！という事で、火花が出てきたので、まあよしとしましょう。でも、Win2Kだと火花器はまともに動かないので、昔作った画像を切り貼りしました(^^;)
Fig.5 これで完成
なんといいますか、まともな絵で構成しようとしていたら絶対に出来ない芸当だったのかも〜と思いますが、画像をいくら崩しても構わないというのは面白いものだな、と確認した次第です。
ともかく、これにてVersion15.00完成です！
戻る