フラクタルタイポグラフィー
Web Designing（2009年2月号）の特別企画「Webデザイナーのためのタイポグラフィ大特集」に掲載させていただいた「Fractal Type」についてご紹介します。
Fractal typeの画面キャプチャ。
このプログラムを書いたのは、2005年の秋ぐらいだったと思います。当時「Ajax」という言葉があちこちで聞かれるようになり、それまで「swapImage()」ぐらいでしか使わなかったJavaScriptでいろいろなことを試していた時期でした。
Web Designing誌にも書きましたが、アートディレクターで師匠の永原康史さんのアイデアで、「デザイン言語2.0」の装丁に使う「行間、字間、書体を文章中の各文字にバラバラに適用するグラフィック」のためのプログラムをJavaScriptで実装しているときに、フラクタル的な造形の中に文字を投げ込んでみたらどうなるかという興味で作ったものです。
* ブラウザに負荷がかかるのでご注意ください。。。IE、Firefoxでは「小」をお勧めします。
* リロードするごとに再描画されます。
5年間さっぱり日の目を見なかったので、どういうアルゴリズムだったか思い出すのに苦労しましたがざっくりと、以下のような感じです。
という感じですが、コードの詳細については追記したいと思います。
（Alliance Port 山辺 2009/1/18）
追記：2009/1/19
当時、手法をいろいろ調べていてとても参考になったサイトがあったのですが、ちょっと思い出せず。。。発見したら参考資料として記載します（すみません。汗）
というわけでサンプルコードをアップしておきます。
（注：2009/1/20 16:33にエラーを修正したものに差し替えました。IEでの出力がundefinedな問題と、ループ処理を修正しています。）
処理は以下のようになっていて、onloadイベント発生時に以下のコードを実行しています。
source = ‘山路を登りながら、@こう考えた。@智に@働けば角が立つ。@情に棹させば流される。@意地を＜略＞;
ftFillRect(‘region’,source,
{width:600,
height:800,
character:true,
frame:true,
background:false
}
);
ftFillRectのargumentは結果出力先のid、配置する文字列、出力先に関するオプションです。
character、frame、backgroundではそれぞれ「文字」「仮想ボディの枠」「仮想ボディの背景」を出力するかを設定できます。
配置する文字列には「@」を適当な位置に入れて、splitしてランダムに配置するようになっていますが、形態素解析した結果などを渡すようにすれば、面白いかなと思います。
結果をブラウザの「プリント」メニューからpdfに保存すれば、Adobe Illustratorなどで開いてグラフィックデザインの素材として使ったりすることも可能です。
これらのソースはGoogle codeにも公開しています。今後は友兼亜樹彦さんと「kumihan」プロジェクトとして縦組みや段組みのコードもふくめて公開していく予定です。
http://code.google.com/p/kumihan/
（Alliance Port, LLC. 山辺真幸 2009/1/19）
追記：2009/1/19
ra66it.netのyamadaさんがさっそく試してくれました。
フラクタルタイポグラフィーを試してみた | ra66it.net
ただ、文字列に@を入れて分割していくみたいですが、うまくいかないと処理が終了しないこともあるみたいです。
ああ、すいません。そうですね。公開するなんてまったく考えていなかったツケがここに。
文字列を「@」で区切る際に、「私の」とか「明日は」とか短い文節が多めに入っていないと、つらいことになっているようです。とはいえ、このままだとブラクラもどきなので、あとで修正しておきます。修正しました。
フラクタルタイポグラフィーを試してみた | ra66it.net
JSのソースはkumihanプロジェクトとしてgoogle codeからsvnで落とせるみたいです。kumihanプロジェクトには縦組をブラウザで実現するtategumiも同梱されていました。こちらもまた試してみたいです。
tategumiは前述した友兼亜樹彦さんと推進するプロジェクトです。とりあえずはmootoolsのClassとして実装していく予定です。いまはまだ未整理なのですが、Web Desingingでも触れた「天童荘ー天童荘からのお知らせ」で実装した、禁則、位取り、スタイルの設定など処理を整備していきたいと思います。こちらもご期待いただければと思います。
（Alliance Port, LLC. 山辺真幸 2009/1/20）
