1/20 Version 16.00制作記
早いもので、ホームページだけ更新するのもこれで16回目です。
…僕はホームページという単語を本来の意味で使っていますので、注意して読んでくださいね(^^;)
今日は、16回目のホームページ更新についての制作記録？なんぞを連ねてみようかと。
その前にちょっと脱線して…時々思うんですが、文章書く時に面倒くさがりが意識に混入すると、途端に訳のわからない文章になりますね。説明的な文章書くときには面倒くさがってると要点を得ない文章になりますし、小説とかの物語文だと、読む側に淡白な印象を与えて白けさせる文になります。
それから図と式。文章から曖昧性を排除し、説得力をもたせるのが図と式です。 10年ほど前、レイトレーシング法が世に認知されて間もなくの頃、雨後の筍のようにレイトレーシング法についての解説文献が発刊されたのを覚えていますが、そのうち一冊に「難解な数式を一切排除した、やさしいレイトレーシング入門」というコンセプトの下に書かれた本があったのですが、読んでもさっぱりでした(^^;) 数式はあった方が分かりやすいんです。特に、文章を読んでアルゴリズムを理解して、最終的にはコーディングする段階に至る過程においては、「文章だけ」しか無いと非常に不便です。数式が羅列されて文章が補足的に入ってるだけのほうがまだマシです。
…以上、脱線終わり。 本文とは一切関係有りませんのでご了承下さい(ぉ
ホームページの改装に話を戻しましょう。
まずは全体のレイアウト
まず、ホームページの改装をする前に、大まかなページのレイアウトを考えます。そのために、ホームページからのハイパーリンクを列挙してみます。このホームページの場合、
Fig.1 リンク一覧
こんな感じで。
…あ、スキャナ買って嬉しいんです(^^;) 昨日のピーナツバターの瓶もスキャナで取り込みました(ぉ なので、図とかが以前よりヘボくなる予感ですが、そこは手作り感覚という事で御了承ください。
ともかく、リンク集を復活させる方向で検討してみました。
次は、アプレットをどんな感じで作るかを考えます。ホームページ全体のレイアウトも考えつつ。
Fig.2 アプレット素案1
今飾ってあるのと全然違いますね。いつもそんな感じです、はい。
最初は、こんな感じで、わっかが土台の上を回転してて、土台との間でスパークでも起こそうかと思ってました。でもなんかスパーク飛ばすだけというのも洒落っ気が無いし、わっかのテクスチャを変形させるのも面倒くさい(ぉ ので、もうちょっと工夫してみました
Fig.3 アプレット素案2
わっかを三つに増やして、サイズを変え、さらにわっかをなぞるように円を８つ飛ばす事にしました。これならテクスチャの自由変形を実装しないで済む。
で、線対象な図形になったので、なんとなく上下に３本ずつ線を引いてみたら、リンクを書き入れるスペースとしてちょうどいいな…となったので、そこをリンク入れスペースとして検討してみることにしました。
で、アプレットの実装
VisualJ++を起動して、プロジェクトを新規作成して、アプレット実装開始です。
ホームページのJavaアプレット用に長いこと使っているフレームワークがあるので、それをコピー＆ペーストしてスタート。
まず、3つのわっかを作ります。
Fig.4 三つのわっか上に8つずつのスポット
ただスプライトを置くだけ、とかだとつまらないと思ったので、スポットライト風にしています。なんでスポットライトなのかは不明。
これだけでは全く面白くないので、わっか同士をなんらかの方法でつないでみる事にしました。で、わっか上のスポット同士を点線の間にパーティクルを飛ばしてみることにしました。で、わっかの回転速度をそれぞれ違える事で、パーティクルの軌跡が混ざり合うようにしてみます。
Fig.5 つないでみるテスト
とりあえず繋ぎました。
まだまだ味気ないので、フォグを掛けてみる事にします。遠くのスポットほど暗くなるように、と。それから、フィードバックのさせ方をちょっと考えてみます。フィードバックはもはやお約束なので、使わないといけないんです(そうかよ
それから、ロゴを入れてみます。
Fig.6 フォグ＆ロゴ入れ
フォグを掛けるとパーティクルの軌跡の混ざり方が程よい具合になる、という副作用が出たので、儲けました。あまりパーティクルの軌跡がまじりすぎると、わっかが有るという事が認識しづらくなってしまうんですね。わっかそのものを描画してしまうのも味気ないので、わっかを意識させつつ、パーティクルの挙動も面白がらせる、という匙加減が楽しい。…いや、僕は楽しいので放って置いてくださいm(__
HTMLコーディング
Javaアプレットは…まあ、こんなもんでしょう。当初の完成予想図とは全然違いますが、そのギャップが面白い。あはは(自嘲
あとは、HTMLのコーディングに入ります。
Fig.7 リンクを書き入れる
かなり観づらいですが、ロゴの下に赤い点線が走っています。Fig.3にある、わっかの中心線を入れてみたんです。
で、Fig.3の当初においては、アプレットの上下にリンクを配置する予定だったんですが、Javaアプレットの周囲は1ピクセルの隙間もなく画像とかを配置することが出来ないので、上下に配置しようにもアプレットの中から引き出し線をだすわけにはいかない…思案しました。
結局、アプレットの右端から折れ曲がった引き出し線という形にして、リンクを書き入れることにしました。苦肉の策というか何というか。
やっぱりJavaアプレットの中に全部入れたほうがいいのかなm(__
ともかく、方針としてはそんな感じでページ全体を作り上げます。
これで大体終わりです。
最後にもう一押し
しかし、何か物足りないさを感じるので、ためしにネガポジ反転してみました。
…こっちの方がいい
というわけで、ページ全体をネガポジ反転してみました。
Fig..8 ネガポジ反転直後
当然といえば当然ですが、リンクの文字列とかが汚らしい感じになります。
これはこれで味といえばそうかもしれませんが、そのまま放置しておくのも独り善がりに過ぎるというもの。それに、白ベースなのでもうちょっとパリッとした感じが欲しくなりました。
というわけで、フォントは教科書体にして、色もやや明るい紺色にしてみました。うむ、パリッとした。パリッと。
以上でElectrical Fireworksホームページ、Version 16.00完成です。
…最後に
Fig.9 遺されたメモ
大体、こんな感じでごしごしとメモとりながら作業してます。今回は、メモもコンパクトに収まりました(^^;)
…もうちょっと手を加えたほうがいいよなぁ、やっぱり
戻る