Mar, 09 2006 (Thu)
■ 実写をミニチュア化する。しかもDHTMLで。
■えー、例によってぜんぜん意味はないんですが、思いついたのでやってみました。フィルタを使っているのでたぶんWindowsのIE（IEコンポーネントブラウザ）でしか見れないと思います。
■いちおう説明しておくと、上下をぼかして擬似的に被写界深度を浅くすることで、まるで模型のように見える風景写真、というやつです。最近ネットでよく見かけますな。日本だと本城直季さんという作家さんが、こういう写真の作品をたくさん発表しております。
- 本城直季さんの作品
- Olivo Barbieriさんの作品
- そのほかいろいろ
僕は今回初めて作ってみて、なんとなく上下ぼかせばどんな写真でもいいのかなと思ったらそうでもないことがわかりました（あと意外にそういう写真を撮ってないこともわかった）。やっぱり（当たり前だけど）ある程度俯瞰で、上下のぼかしと画面の奥行きが対応する写真じゃないとそれらしく見えないみたいです。あと模型っぽくなるように、多少色調もいじったほうがよさげ。こんな感じにしました。
- なんとなく室内照明っぽく、色温度を低めにした
- 全体の明るさや、ハイライトを強くした
- 彩度を高くして色をビビッドにすると、ニセモノっぽくなる感じ
- シャープネスもかけたほうがよい？
あとたぶん、写真の構成に「模型っぽいレイアウト」というのがあって、それの認識に沿うトリミングにすると、なんとなくそれっぽくなるようです。
ぼかし自体はIEのBlurフィルタをかけたdivを上下２段づつ画像にかさねてるだけです。
Feb, 22 2006 (Wed)
コメント欄をまたつけた
※ちなみに一覧画面だとコメントタブは出ません。
■いつだったかこのblog(lily)の負荷が大きくてサーバホストに怒られたとき、あんま使われてないし面倒だとおもってプラグインの類をほとんどはずしてしまいました（lilyの場合リファラログプラグインが負荷の最大要因なので、他のはさほど問題ではないのですが）。ソーシャルブックマークでコメントつけられるし、エントリーのコメント機能ってもういらないだろ、と思ったので。
んが、やっぱコメント機能はあったほうがいいなーと考え直したので、ちょっと標準とはべつのかたちで取り付けてみました。左下についてるタブをクリックすると書き込みフォームとコメント一覧が開いて、そこから書き込めるようになっています。いちおうajaxぽくぽこぽこ書き込めるようにしました。ひさしぶりに素のcgiを書いたら激しくめんどくさかった。なんだったらテストで書き込んでみてください。
こういうかたちにするまでにいろいろ考えたんですが、いわゆるブログエントリーのコメント機能って、なんというか「人のエントリーに自分の文章を勝手に書き加える」ような抵抗感があるような気がするんですな。しかも、それは単にエントリーの文章の下にコメントが並んでいくというレイアウト上の問題だけなんじゃないかと。
なので、コメント欄はあくまでエントリーとは別のものとして、メモを残すような感覚で書けるように、普段は隠れているシートをひっぱりだすようなものにしてみました。画面をいちばん下にスクロールしなくても、思いついたところで書き込めるように、という意味もあります。
けっきょくブログエントリーのコメント欄って、エントリーの内容へのコメントというよりは、そのエントリーを書いた人へのメッセージという意味合いが強いのだろうし、あるいはもう少し正式な形で内容に意見するのであればトラックバックもできるわけで、ならばコメント機能はなるべくらくちんに書けるようになってるといいかなと思ったんですが、どんなもんでしょうか。
あともういっこ考えたのは「なるべくmixiぽく」ということですな。とりあえず色とか角丸デザインをそれらしくしてみました。べつにmixiのデザインが素晴らしいと思ってるわけではないんですが（むしろああいうのよりクールでエッジのきいたルックや色調を好みがちなんですけど）、とくにコメント欄みたいな「見知らぬ人を招き入れる部分」には、人懐こい色とか角の取れた感触というのが、ほんとうに必要なのかもなーと作ってみて思いました。ちなみに角丸には
Ricoのエフェクトを使ってみました。クセはありますが（paddingを0にしなきゃいけないとか）、おおむねラクチンでした。
というわけで、これでようやくmixiの日記に書いてるたぐいの雑記をこっちに移行しよっかなと思ってるところです。
Feb, 18 2006 (Sat)
■ タグクラウドのスタイルを考える
■それなりのものを出そうと思うとどうも更新が滞りがちなので、自己満足でもともかく考えてることを書いていくことにしますね。
■最近タグクラウドがどういうふうだったら楽しくて便利でかっこいいのか、考えることが多くて、やってみないとわからんなあと思ったんで、とりあえず
自分のはてなブックマークのタグクラウドのデザインをいじってみました。議論の余地はたくさんありそうですが、試行錯誤で考えたことをメモしておきます。
つづきを読む▼
Nov, 26 2005 (Sat)
■ よく考えたらわりと遍在するJavaScript
■なんとなく僕も
入門Ajax便乗企画。
いちおう貼っときます。まだ買えてないんですが。
■このあいだと旧友との飲み会で「JavaScriptが〜」というような話をしてたら友人のacicくん（えーと、仕事ではサーバサイドJavaとかやってるひと）に「JavaScriptなんか使うほうが間違ってるっていう認識だけど」と返されて、うーん、まだそうなのかも。まだ
汚名は返上されてないかも。と思ったところ。
ところでわれをひるがえってみるに、なんで今のAjax環境にわりとすんなり適応できてるかというと、よく考えてみると過去3年くらいでJavaScriptでいろんなものを作ってみていて、しかもいろんな（いわば）変態環境をとっかえひっかえするのに慣れていたので、「JavaScript（/JScript/ActionScript/などのECMAスクリプト系）はなんでもあり」というイメージがあったからではないかと思った。
なので、JavaScriptでなにができるか／なにを作ったかを、ここらで棚おろししてみます。
つづきを読む▼
Oct, 08 2005 (Sat)
■ webページの数字をルーズソックス数字に変換するbookmarklet（終了）
Oct, 07 2005 (Fri)
■ webページの数字をルーズソックス数字に変換するbookmarklet
にて、「ルーズソックスフォント」というものが公開されていたので、webページの数字をルーズソックス数字に変換するbookmarkletを作ってみた。文字は全部ないから数字だけね。
↓をコピーしてyahooとか適当なページを開いてロケーションバーにペーストしてリターン
javascript:(function(){var d=document;var h='http://dotimpac.to/misc/betsuyaku/';var s=d.createElement('script');s.src=h+'betsuyaku.js';d.body.appendChild(s);})();
※怒られそうなので適当に消します。期間限定。
Jul, 25 2005 (Mon)
■ Autostitchの間違った使いかた
■
Autostitchというソフトを最近知りました。カメラを振りながら撮った連続画像をつないで、いわゆるパノラマ画像にするソフト。同様の処理はいまやたいていのデジカメに同梱ツールでついてそうな気がしますが、ふつうはなんからの手作業が必要そうなところがこれは処理が完全全自動で、それらしい画像を多数つっこんでやれば、なんとなく画像を作ってくれるというところが特色なんでしょうか。
せっかくなので試してみようと思ったんですがあんまりパノラマっぽい連続画像を撮ったことがなかったので、去年金沢２１世紀美術館に行ったときに外周を回りながら撮影していた連続画像をつっこんでみたところ、ぜんぜんパノラマではないですが奇妙な画像ができました。なんかがんばって整合させようとしてるとこが泣ける。よく見ると建物のガラスに映った自分の像をキーにつなごうとしてたりして。
つづきを読む▼
Jun, 02 2005 (Thu)
■ インタラクション・デザインとは何か
■担当している授業が、いままでのProcessingのプログラムで静止画をつくってみる入門辺から、動きやインタラクションのある内容に差し掛かるところとなりました。
ということで、まずそもそも「インタラクション・デザインとは何か」というイントロダクションが必要だろうということで、「インタラクションとは、つまりコンピュータとのコミュニケーションである」というあんまり聞かない（ような気がする）論法でいろいろ仕込んで授業してみました。例によって音声ファイル（デジオ）つき。
つづきを読む▼
May, 20 2005 (Fri)
■ Processing入門2005
※解説図はTabletPCでナグリ描き…ないよりはいいかなと
■担当授業のProcessingレクチャーのために「Processing入門」の2005年度版を書きはじめました。去年のものをベースに、Betaバージョンでの変更の反映や、説明の順番などをいじっています。基本的には授業とは無関係にテキストだけ読んでもわかるように書いているつもりです。プログラムをやったことないけど、Processingを使ってみたい、という方がいたら参考に読んでみてください。
- Processing入門2005
- その１ Processingとは/Processingをインストール/Processingをはじめる/直線を描く/曲線を描く/変数をつかう/繰り返し描く
- その２ 色をつける／画像を使う／文字を使う／場合分けする／illustratorファイル出力
- その３（予定） 関数／initとdraw／マウスを使う／キーボードを使う／配列（アニメーション）
- その４（よ、予定…） 映像を使う（videoライブラリ）／音声を使う（sonia）
つづきを読む▼
Apr, 29 2005 (Fri)
■ AIExport for Processing 0085 Beta
■
授業 で活用してみようと思って、Processing上の描画をIllustratorのaiファイルに書き出してくれるライブラリ
AIExport を試してみたら、Alphaで作られたライブラリってまるっきりBetaでは動かないんですな。これは。
Processingでつくったプログラムの描画をどんどん紙に印刷させたいんで、まあsaveFrameのビットマップだけでもできなくはないけどちょっと悲しいし、でもAIExportを使うためだけにAlphaを授業で使うというのもシャクだなあ…と思ってなんとかならんかとソース（サイトで公開されている。
Allan William Martin 氏に感謝！）をいじっていたら、なんとか動くようになったので公開しておきます。Processing Betaの形式でimportできます。
■くわしくはこちら。
つづきを読む▼
Apr, 25 2005 (Mon)
■ Processing(BETA)0085リサーチ
■授業で教えなきゃいけないのもあって、Processingベータの変更点やら新命令やらをリファレンスを読みながら書き出してます。なるほどけっこう変わってるなあ。いじってて気がついたことは、
- メインループの構成の変更。従来loop()の中に書いていた記述はdraw()に書くようになり、ループするかどうかを選択できるようになった（loop()/noLoop()）。redraw()というrepaint相当の命令も用意されて、イベントドリブンなプログラムが想定されてるっぽい。
- 画面更新のパフォーマンスを最適化するような方策が採られている。従来pixels[]でディスプレイ画像のピクセルを操作すると即座に反映されてたけど、updatePixels()を明示的に呼ぶことで画面に反映されるようになった。updatePixels()は領域の指定もできるので、無駄な書き換えを減らせる。ちなみにPImage(従来のBImageから置き換わった）の内容を書き換えたときも同様で、PImage.updatePixels()を呼び出さないと画像を書き換えたことにならない。これは本家のリファレンスにはぜんぜん書いてないので、過去のプログラムをBETAにコンバートするときに注意。
- OpenGLライブラリのサポートに際して、描画や座標変換に関する命令がよりOpenGLライクになった。3D系の命令（座標変換、カメラ、アトリビュート、光源）はOpenGLのAPIにネーミングもほぼ対応しているみたいなので、GLの入門テキストで勉強したほうがよさそう。
といったところ。目玉のライブラリについてはまだあんまり触ってないけど、VideoライブラリはQuickTimeムービークリップを操作する命令が充実しててけっこう楽しそう。期待のOpenGLライブラリはまだけっこうバギーな感じでおっかない。むしろじつはP3D（Processing専用の3D描画ライブラリ）が結構速くてよくできてるっぽい。2DのプログラムでもP3Dを指定するとOutofMemoryが出なくて問題なく動く場合なんかがあった。
このへんの情報はprocessing.dotimpac.toのwikiのほうにまとめているのでご参照ください＆更新歓迎。
つづきを読む▼
