collisions.dotimpac.to

実写をミニチュア化する。しかもDHTMLで。 (2006-03-09)
コメント欄をまたつけた (2006-03-07)
タグクラウドのスタイルを考える (2006-03-07)
よく考えたらわりと遍在するJavaScript (2006-03-07)
webページの数字をルーズソックス数字に変換するbookmarklet（終了） (2006-03-07)
webページの数字をルーズソックス数字に変換するbookmarklet (2006-03-07)
Autostitchの間違った使いかた (2006-03-07)
インタラクション・デザインとは何か (2006-03-07)
Processing入門2005 (2006-03-07)
AIExport for Processing 0085 Beta (2006-03-07)
Processing(BETA)0085リサーチ (2006-03-07)

Mar, 09 2006 (Thu)

■ 実写をミニチュア化する。しかもDHTMLで。

■えー、例によってぜんぜん意味はないんですが、思いついたのでやってみました。フィルタを使っているのでたぶんWindowsのIE（IEコンポーネントブラウザ）でしか見れないと思います。

http://work.dotimpac.to/miniature/miniature.html

on/offをクリックすると効果をトグルで変更します。

■いちおう説明しておくと、上下をぼかして擬似的に被写界深度を浅くすることで、まるで模型のように見える風景写真、というやつです。最近ネットでよく見かけますな。日本だと本城直季さんという作家さんが、こういう写真の作品をたくさん発表しております。

本城直季さんの作品

Olivo Barbieriさんの作品

そのほかいろいろ

僕は今回初めて作ってみて、なんとなく上下ぼかせばどんな写真でもいいのかなと思ったらそうでもないことがわかりました（あと意外にそういう写真を撮ってないこともわかった）。やっぱり（当たり前だけど）ある程度俯瞰で、上下のぼかしと画面の奥行きが対応する写真じゃないとそれらしく見えないみたいです。あと模型っぽくなるように、多少色調もいじったほうがよさげ。こんな感じにしました。

なんとなく室内照明っぽく、色温度を低めにした
全体の明るさや、ハイライトを強くした
彩度を高くして色をビビッドにすると、ニセモノっぽくなる感じ
シャープネスもかけたほうがよい？

あとたぶん、写真の構成に「模型っぽいレイアウト」というのがあって、それの認識に沿うトリミングにすると、なんとなくそれっぽくなるようです。

ぼかし自体はIEのBlurフィルタをかけたdivを上下２段づつ画像にかさねてるだけです。

at 2006-03-09 01 01。ァ09 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Feb, 22 2006 (Wed)

■ コメント欄をまたつけた

[/study/interface]

※ちなみに一覧画面だとコメントタブは出ません。

■いつだったかこのblog(lily)の負荷が大きくてサーバホストに怒られたとき、あんま使われてないし面倒だとおもってプラグインの類をほとんどはずしてしまいました（lilyの場合リファラログプラグインが負荷の最大要因なので、他のはさほど問題ではないのですが）。ソーシャルブックマークでコメントつけられるし、エントリーのコメント機能ってもういらないだろ、と思ったので。

んが、やっぱコメント機能はあったほうがいいなーと考え直したので、ちょっと標準とはべつのかたちで取り付けてみました。左下についてるタブをクリックすると書き込みフォームとコメント一覧が開いて、そこから書き込めるようになっています。いちおうajaxぽくぽこぽこ書き込めるようにしました。ひさしぶりに素のcgiを書いたら激しくめんどくさかった。なんだったらテストで書き込んでみてください。

こういうかたちにするまでにいろいろ考えたんですが、いわゆるブログエントリーのコメント機能って、なんというか「人のエントリーに自分の文章を勝手に書き加える」ような抵抗感があるような気がするんですな。しかも、それは単にエントリーの文章の下にコメントが並んでいくというレイアウト上の問題だけなんじゃないかと。

なので、コメント欄はあくまでエントリーとは別のものとして、メモを残すような感覚で書けるように、普段は隠れているシートをひっぱりだすようなものにしてみました。画面をいちばん下にスクロールしなくても、思いついたところで書き込めるように、という意味もあります。

けっきょくブログエントリーのコメント欄って、エントリーの内容へのコメントというよりは、そのエントリーを書いた人へのメッセージという意味合いが強いのだろうし、あるいはもう少し正式な形で内容に意見するのであればトラックバックもできるわけで、ならばコメント機能はなるべくらくちんに書けるようになってるといいかなと思ったんですが、どんなもんでしょうか。

あともういっこ考えたのは「なるべくmixiぽく」ということですな。とりあえず色とか角丸デザインをそれらしくしてみました。べつにmixiのデザインが素晴らしいと思ってるわけではないんですが（むしろああいうのよりクールでエッジのきいたルックや色調を好みがちなんですけど）、とくにコメント欄みたいな「見知らぬ人を招き入れる部分」には、人懐こい色とか角の取れた感触というのが、ほんとうに必要なのかもなーと作ってみて思いました。ちなみに角丸にはRicoのエフェクトを使ってみました。クセはありますが（paddingを0にしなきゃいけないとか）、おおむねラクチンでした。

というわけで、これでようやくmixiの日記に書いてるたぐいの雑記をこっちに移行しよっかなと思ってるところです。

at 2006-02-22 01 01。ァ56 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Feb, 18 2006 (Sat)

■ タグクラウドのスタイルを考える

[/study/interface]

■それなりのものを出そうと思うとどうも更新が滞りがちなので、自己満足でもともかく考えてることを書いていくことにしますね。

■最近タグクラウドがどういうふうだったら楽しくて便利でかっこいいのか、考えることが多くて、やってみないとわからんなあと思ったんで、とりあえず自分のはてなブックマークのタグクラウドのデザインをいじってみました。議論の余地はたくさんありそうですが、試行錯誤で考えたことをメモしておきます。

つづきを読む▼

at 2006-02-18 17 17。ァ02 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Nov, 26 2005 (Sat)

■ よく考えたらわりと遍在するJavaScript

[/study/javascript]

■なんとなく僕も入門Ajax便乗企画。
いちおう貼っときます。まだ買えてないんですが。

入門 Ajax

高橋登史朗 (著)

■このあいだと旧友との飲み会で「JavaScriptが～」というような話をしてたら友人のacicくん（えーと、仕事ではサーバサイドJavaとかやってるひと）に「JavaScriptなんか使うほうが間違ってるっていう認識だけど」と返されて、うーん、まだそうなのかも。まだ汚名は返上されてないかも。と思ったところ。

ところでわれをひるがえってみるに、なんで今のAjax環境にわりとすんなり適応できてるかというと、よく考えてみると過去3年くらいでJavaScriptでいろんなものを作ってみていて、しかもいろんな（いわば）変態環境をとっかえひっかえするのに慣れていたので、「JavaScript（/JScript/ActionScript/などのECMAスクリプト系）はなんでもあり」というイメージがあったからではないかと思った。

なので、JavaScriptでなにができるか／なにを作ったかを、ここらで棚おろししてみます。

つづきを読む▼

JavaScript+DHTML（Ajax)

Photoshop / illustrator　スクリプト

Flash ActionScript

GA的驚き盤作成ツール　GenekistiScope（flash版）

WindowsScriptingHost(WSH)

まだやってないけど - GraceMonkey / XUL / Konfabulator(Dashboard,GoogleDesktop)

萌ディタ

at 2005-11-26 14 14。ァ37 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Oct, 08 2005 (Sat)

■ webページの数字をルーズソックス数字に変換するbookmarklet（終了）

[/study]

■デイリーポータルZサイト開設３周年　24時間ウェブもぶじ終了したようなので、bookmarkletは動かなくしました。お楽しみいただけましたか？

まあ単純なものなので、ソースを置いておくのでご参考にどうぞ。

http://processing.dotimpac.to/index.php?sample%2FJavaScript%2Fbetsuyaku.js

ちなみにこの手の遊びは「document.body.innerHTML」で検索するといっぱいありますので、こういうのは一瞬で作って一瞬で飽きていくとよいと思います。

つづきを読む▼

ついでに：デイリーポータルZ「ちょっと見てきて」

at 2005-10-08 14 14。ァ49 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Oct, 07 2005 (Fri)

■ webページの数字をルーズソックス数字に変換するbookmarklet

[/study]

にて、「ルーズソックスフォント」というものが公開されていたので、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);})();

※怒られそうなので適当に消します。期間限定。

at 2005-10-07 00 00。ァ10 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Jul, 25 2005 (Mon)

■ Autostitchの間違った使いかた

[/study]

■Autostitchというソフトを最近知りました。カメラを振りながら撮った連続画像をつないで、いわゆるパノラマ画像にするソフト。同様の処理はいまやたいていのデジカメに同梱ツールでついてそうな気がしますが、ふつうはなんからの手作業が必要そうなところがこれは処理が完全全自動で、それらしい画像を多数つっこんでやれば、なんとなく画像を作ってくれるというところが特色なんでしょうか。

せっかくなので試してみようと思ったんですがあんまりパノラマっぽい連続画像を撮ったことがなかったので、去年金沢２１世紀美術館に行ったときに外周を回りながら撮影していた連続画像をつっこんでみたところ、ぜんぜんパノラマではないですが奇妙な画像ができました。なんかがんばって整合させようとしてるとこが泣ける。よく見ると建物のガラスに映った自分の像をキーにつなごうとしてたりして。

大きい画像はこっちに。

http://project.dotimpac.to/kanazawa21st/kanazawa_pano.jpg

つづきを読む▼

金沢２１世紀美術館人力タイムスライス

at 2005-07-25 15 15。ァ36 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Jun, 02 2005 (Thu)

■ インタラクション・デザインとは何か

[/study/interaction]

■担当している授業が、いままでのProcessingのプログラムで静止画をつくってみる入門辺から、動きやインタラクションのある内容に差し掛かるところとなりました。

ということで、まずそもそも「インタラクション・デザインとは何か」というイントロダクションが必要だろうということで、「インタラクションとは、つまりコンピュータとのコミュニケーションである」というあんまり聞かない（ような気がする）論法でいろいろ仕込んで授業してみました。例によって音声ファイル（デジオ）つき。

つづきを読む▼

at 2005-06-02 01 01。ァ01 / permalink / はてなブックマーク /del.icio.us / MM/Memo

May, 20 2005 (Fri)

■ Processing入門2005

[/study/processing]

※解説図はTabletPCでナグリ描き…ないよりはいいかなと

■担当授業のProcessingレクチャーのために「Processing入門」の2005年度版を書きはじめました。去年のものをベースに、Betaバージョンでの変更の反映や、説明の順番などをいじっています。基本的には授業とは無関係にテキストだけ読んでもわかるように書いているつもりです。プログラムをやったことないけど、Processingを使ってみたい、という方がいたら参考に読んでみてください。

Processing入門2005

その１　Processingとは/Processingをインストール/Processingをはじめる/直線を描く/曲線を描く/変数をつかう/繰り返し描く
その２　色をつける／画像を使う／文字を使う／場合分けする／illustratorファイル出力
その３（予定）　関数／initとdraw／マウスを使う／キーボードを使う／配列（アニメーション）
その４（よ、予定…）　映像を使う（videoライブラリ）／音声を使う（sonia）

つづきを読む▼

プログラムを教える順番

at 2005-05-20 00 00。ァ18 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Apr, 29 2005 (Fri)

■ AIExport for Processing 0085 Beta

[/study/processing]

■ 授業で活用してみようと思って、Processing上の描画をIllustratorのaiファイルに書き出してくれるライブラリ AIExport を試してみたら、Alphaで作られたライブラリってまるっきりBetaでは動かないんですな。これは。

Processingでつくったプログラムの描画をどんどん紙に印刷させたいんで、まあsaveFrameのビットマップだけでもできなくはないけどちょっと悲しいし、でもAIExportを使うためだけにAlphaを授業で使うというのもシャクだなあ…と思ってなんとかならんかとソース（サイトで公開されている。 Allan William Martin 氏に感謝！）をいじっていたら、なんとか動くようになったので公開しておきます。Processing Betaの形式でimportできます。

■くわしくはこちら。

http://processing.dotimpac.to/index.php?library%2FAIExportFor0085Beta

つづきを読む▼

Alphaライブラリのコンバート

at 2005-04-29 11 11。ァ11 / permalink / はてなブックマーク /del.icio.us / MM/Memo

Apr, 25 2005 (Mon)

■ Processing(BETA)0085リサーチ

[/study/processing]

■授業で教えなきゃいけないのもあって、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のほうにまとめているのでご参照ください＆更新歓迎。

http://processing.dotimpac.to/?0085

つづきを読む▼

.objで遊ぶ

at 2005-04-25 13 13。ァ45 / permalink / はてなブックマーク /del.icio.us / MM/Memo