hysysk:blog

GIF STREAM

2012-02-02T03:22:00.000+09:00

kkosugeさんのサイトがすごく面白かったので、node.jsがちょっと追っていない間にバージョンが上がりまくってたのと、WebSocketに対する興味からこんなの作ってみた。

サーバから4秒おきにGIFアニメのURLがimg要素のsrcにセットされるというだけ。なんだけど同期が取られているので複数タブや複数ウィンドウでも同じ画像が表示されるはず。

やってみて思ったのは、多分GIFアニメじゃなくても同期のタイミングさえ合っていればそれなりに楽しめそうということと、特定のコネクションから操作を受け付けるようにすればVJ的に画面の制御もできそうということ。

stonewall.js開発日記1

2011-12-13T01:37:00.003+09:00

唐突ですが何かしら継続して勉強していけるものを作ろうと思ったので、高さの違う要素を敷き詰めて並べてくれるJavaScriptのライブラリを作ろうと思います。そういうことができるものは既に世の中にあるのだけど、開発手法や設計の勉強が主目的。名前はstonewall.jsとしました。テスト駆動で作ろうと思うので、まずQUnitをダウンロード。使い方は使いながら覚える。ディレクトリ構成はこんな感じ。example以下に実際に表示されるサンプル用のhtmlを置く。test以下のindex.htmlは、ブラウザで開くとQUnitのテスト結果を表示する。テストコードはtests以下に追加していく。


stonewall/
├── example
│   └── index.html
├── src
│   └── stonewall.js
└── test
    ├── index.html
    ├── lib
    │   └── qunit
    │       ├── qunit.css
    │       └── qunit.js
    └── tests

プロジェクトをgitのバージョン管理下に置く。QUnitは管理から外したいので.gitignoreを書いておく。.gitignore


test/lib/

初期化。


git init

カレントディレクトリ以下をadd。


git add .

コミット。


git commit -m "Initial commit"

基本的にmasterはmergeするだけにしてbranchを切りまくるのがおすすめと聞いたので、そうします。


git branch temp
git checkout temp

これでtempブランチで作業を進めていける。今日はここまで。

Paper.jsをソースからビルド

2011-09-24T04:26:00.000+09:00

ScriptographerをCanvasで動かすフレームワークであるPaper.js。
通常であればDownloadからzipファイルをダウンロードして読み込めばそのまま使えるんだけど、githubにソースからビルドする方法が載っていたのでやってみた。

githubからPaper.jsをclone

git clone --recursive git://github.com/paperjs/paper.js.git

buildフォルダに移動して、

./build.sh

でdistフォルダにpaper.jsができるんだけど、これだとzipファイルのものと同じなので、compressedしたい。

NodeJSのUgrifyJSを使う

npmでUglifyJSをインストール。カレントディレクトリはbuildのまま、作業を続ける。

npm install -g uglify-js

nvmを使っているので、-gを付けてグローバルインストールすると、currentで使用しているバージョンのlibフォルダの中のnode_modulesというフォルダにインストールされる。
paper.jsプロジェクトのフォルダと同じ階層にuflifyjsという名前でシンボリックリンクを作成。
(githubに載っているサンプルはシンボリックリンクの引数が逆で、一つ目にソースを指定)

ln -s ~/.node/v0.4.9/lib/node_modules/uglify-js ../../uglifyjs

作成されているか確認

ls -l ../../
lrwxrwxr-x   1 hayashiyosuke  staff   60 Sep 24 03:15 uglifyjs -> /Users/hayashiyosuke/.node/v0.4.9/lib/node_modules/uglify-js

できてる。

comressedオプションでビルド

./build_sh compressed

確認

ls -l ../dist 
-rw-rw-r--  1 hayashiyosuke  staff  144000 Sep 24 03:22 paper.js

70KBほど軽くなってる。
開いてみると、余分なスペースが取り除かれ、変数名や関数名が短くなってる。

今後JavaScriptはかつてのCになると言われているけど、こんな感じでビルドして使うものになってるんだな。

JavaScriptでSine Waveを鳴らす

2011-09-21T02:14:00.001+09:00

連休中に色々と調べものしてて、dsp.jsというライブラリを見つけたので使ってみた。Chrome14でしか動作確認してない。Git覚えたくてgithubに上げたけど、これくらいならgistでよかったと思った。
SoundCheck

Audioletも面白そう。
最近node.jsも触ってみてるので、audiolib.jsも入れてみた。

node.jsはHomebrewからとかソースをビルドとか試してみたけど、nvm使って複数のバージョンを入れて動かすのが良さそう。

Cygwinの使い方

2011-04-21T02:04:00.008+09:00

Windows 7
Cygwin 1.7.9-1
http://cygwin.com/

setup.exeを実行してInstall from Internetをチェックし本体とパッケージをインストール。入れそびれたパッケージがあった場合もsetup.exeを実行してDownload Without InstallをチェックしてLocal Package Directoryにダウンロードした後、再度setup.exeを実行しInstall from Local Directoryでインストールすることができる。
(4/25追記)
上みたいなことしなくても、Install from Internetでよかった。インストール済みのファイルはKeepになっている。

.bashrcが作られていない場合、ホームに自分で作っても起動時に読み込まれなかった。パッケージのインストール具合で変わるみたい。何か色々入れたら自動的に.bashrcと.bash_profileが出来てて、
↑これなんだったんだろう…再現しない。

Cygwin.bat起動時に.bashrc, .bash_profileなどが作られた旨が表示されるので、.bashrcを開いて

# User dependent .bashrc

とか書かれてたのでその下にPATHを設定した。
Cygwinを起動し直して、

echo $PATH

で追加したPATHがちゃんと読み込まれているか確認できる。

/etc/bash.bashrcは読み込まれてたので(中にecho書いて試した)、最悪ここに書いとけばいいのかもと思ったけど、

# Modifying /etc/bash.bashrc directly will prevent
# setup from updating it

というコメントが気になったのでアンインストールしてsetup.exeをやり直したりした。
アンインストールは基本的にRoot Directoryを消すだけでいいみたい。ゴミは残ってしまうけど。

早く慣れたい。

□□□『CD』

2011-02-28T23:45:00.008+09:00

□□□の新しいアルバム『CD』のグラフィックを作ったり、
MV作ったり、

Web作ったり、
CDの読み方
ライブの演出を手伝ったりしました。
どれも全体のアートディレクションは伊藤ガビンさん、グラフィックデザインはいすたえこさんです。
ボストークという会社で制作してました。

本当はそれぞれのタイミングで書くのが良かったのだけど、途切れることなく山場が続いたので全く告知できず。
色々まとめようかと思ってたけどインタビューが掲載されたのでそっち読んでもらった方がいいかも知れない。Webもいくつかの雑誌に載るらしいです。
初回版もうすぐなくなりそうとのことで、売り上げに貢献できたっぽくて嬉しいです。

テクニカルな部分に関してはProcessingをめちゃくちゃ使っていて、PDFの書き出しがとても役立った。ジャケットやTシャツ、ポスターなどサイズが変わったりしても扱いやすい。gupon君にデータを渡すために連番のPDFを書き出したり、PDFだと何故かAfterEffectsが落ちるからXpdfてのでEPSに変換したり、細かい部分で色々勉強になりました。
歌詞の文字の重複をなくしたり、濃度順に並び替える部分はpython使ったり。

MVの最後の方の文字が右上に上がって行くところは元々Evan Rothが作ったjay-zのプログラムっぽいことをやろうとしてProcessingに移植して作った。文字と文字がぶつからないようにとか色々改良してある。ソース読む限り元ネタはおそらくGoran Levinのこれ。

で、僭越ながらアルバムの内容紹介です。
1. はじまり
デモの段階からすごく変わった曲。音の響きが気持ちいい。後半の盛り上がりは感動的。大好き。作業中はずっと「ひびきあい(日々気合・響き合い)」を繰り返してた。歌詞カードがもうすぐWebで見られますが、このビジュアルから始めて曲作ったそうです。右チャンネルと左チャンネルからそれぞれ音が鳴って、右は「右」の母音(いい)、左は「左」の母音(いあい)になってる。というのを感じさせないで普通に聴けてしまうのは良いのか悪いのか。

2. 1234 feat.内田慈
4人の登場人物がそれぞれ別々の拍子で歌う。映画のカット割を意識してるらしいけど本当にそんな感じで映像が浮かぶ。内田慈さんの声がいい。「フォルダから携帯のデータワン」のとことかね。これはWebで歌詞カード見れます。
内田さんにはライブ2日目での怪演に衝撃を受けた。『スカイツリー』の写メとか、『Tokyo』でのキュートさとか。ロリコンが直るレベル。

3. ヒップホップの経年変化
せいこうさんの『ヒップホップの初期衝動』の続き。音はよりハードで、リリックにも励まされる。これのMVもガビンさん監督で、gupon君と牧鉄平さんがアニメーションと編集をしました。ucnvさんに作ってもらったグリッチ版、『「ヒップホップの経年変化」の経年変化 by ucnv』もかっこいい。熟女好きになるレベル。

4. 恋はリズムに乗って feat.大木美佐子
元メンバーの大木さんがボーカル。爽やかでキャッチー。最初に皆これ好きになるでしょ。

5. スカイツリー
吾妻橋ダンスクロッシングで発表した作品。僕、観てたのですが寝てました。。年末にしのださん一人でのパフォーマンスも観ていて、その時はまだ何かの可能性は感じたけど完成ではないなぁという印象だった。別々に進行してる人や物事がある瞬間に交差して、よく分からないけど生まれるいい時間。『Tokyo』に続く東京シリーズで、ただ東京で生活してる感じがしてすごくいい。交通手段も通信手段も発達した今、これくらいの温度感だと思う。岡崎京子さんの漫画みたいな？僕も東京に対して思い入れはあるけど、いわゆる故郷を離れてどうとか、冷たい街とかのステレオタイプなイメージとは全然違う。ライブ2日目では細金監督の超絶映像と内田さんの怪演で確実にこの日のハイライトだった。

6. あたらしいたましい feat.金田朋美
4つ打ちのエレクトロっぽい音色で、最初聴いた時はすごく戸惑ったけど今ではとても好きな曲。男女2つのフレーズが組み替えられて曲ができあがっていく。MVではしつこいくらいにそこを強調した。マスタリング終わったら時間長くなってて焦った。

7. ちょwwwおまwwww
僕は割と綺麗にまとまる方向が好きなんですけど、こういう曲を入れてくるところに余裕を感じる。慣れるとちょっとはまる。ライブ1日目で披露したファンキーなバージョンがとてもかっこいい。全然違う曲。そして1日目終わった後にあっさり2日目用に長いのを作ってきてくれた。リハーサルで初めて聴いて、終わってからプログラム書き直し。本当に「ちょwwwおまwwww」て言いながらやってた感じ。

8. ヵゝヵゞゐ。feat.RUMI
かっこいい。知らずに聴いたら□□□だと気付かないのではないだろうか。「ｷﾀｰ」のところからのグルーヴ感が好き。ライブ1日目のせいこうさん版もよかった。

9. iuai feat.まつゆう*
村田シゲさんが作った曲。夜に聴きたくなる。サビの部分が全て同じ母音で、歌詞も英語みたいな日本語で音として面白い。正確な日本語としては意味が分からないけど、感覚として分かる。

10. lʌ'v mi
僕は□□□のインストが好きで、『Kuchiroro Posse』とか最高だと思ってる。何て言うかかわいい。この曲はさらにキラキラした歌心がある。

デモは上がってくる度に良くなるし、ライブではさらにアレンジを変えてくるし、毎回驚かされて、刺激の多い案件でした。それに加えていすさんやいしい君のグラフィックだったりgupon君の映像だったり、細金君の映像が加わって来て、水尻さんとかucnvさんとか谷口君も巻き込んで、自分も奮起させられたし、結果面白いものになったのではないかと思います。締め切り直前の追い上げ感は卒展とかの盛り上がりに近い。プロがそれじゃ駄目なのかも知れないけど。音楽だけでなく映像やグラフィックも含めてこういう過剰さを持ったアーティストって僕が10代だった頃はフリッパーズギターとかフィッシュマンズとか電気グルーヴだったりしたと思うんだけど(oasisとか聴いてたのでリアルタイムでは通過してない)、今の□□□はそういう存在だと思う。

HerokuでSinatraを動かす

2010-11-02T04:28:00.003+09:00

思うところあってSinatraを触ってみた。ついでにGitも動かしながら覚えている。

が、ここに書いてある通りにしても動かない。
ターミナルでheroku logsと打ち込んでエラーを読む。

==> dyno-2855633.log (crash) <==
/usr/ruby1.8.7/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require': no such file to load -- sinatra (LoadError)

Sinatraがない、とのこと。
同じ日にはまっている人がいらっしゃった。
僕も何もしなくても最初から使えるようになっていると思ってました。

で、解決法はもうひとつあって、マニフェストファイルを作る。.gemsというファイルを同じ階層に作って

sinatra --version 1.1

と書いてpushするだけ。細かいことは公式ドキュメントに書いてある。

最初のとこに書いておいて欲しい(check out the docsのリンク先がかつてそうだったのかも知れない。にしても直して下さい)。

ArrayListについて認識を改めたところ

2010-10-02T00:36:00.005+09:00

以前の投稿(build ribbons)で、
for文のところを単にかっこいい書き方としか認識してなかったんですけど、
配列の長さがループの途中で変わるので、ああいう風にしておかないとremoveで取り除かれた分の添字が詰まった結果、参照されないオブジェクトがでてきてしまってちらつきが起こってしまいます。

こういう場合。
試しにdraw()内のfor文の初期化式をint i=0、継続条件式をi<ripples.size()、再初期化式をi++にしてみると分かります。
リファレンスにも似たような例が書いてあって、Examples>Topics>Advanced Data>ArrayListClassでも確認できます。
[Ripple.pde]

class Ripple {
  float x, y, w, speed;
  float age;
  int intensity;
  color c;
  float a;
  boolean finished;
  
  Ripple(float x, float y, int intensity, color c, float speed) {
    this.x = x; 
    this.y = y; 
    this.intensity = intensity; 
    this.c = c; 
    this.speed = speed;
    this.age = 0;
    this.a = 255-255*(age-speed)/intensity;
    this.finished = false;
  }
  
  void display() {
    age += speed;
    a = 255-255*(age-speed)/intensity;
    if(a<=5) {
      finished = true;
    }
    stroke(c, a);
    ellipse(x, y, age, age);
  }
  
  boolean finished() {
    return finished;
  }
}

[drawRipple.pde]

Ripple r;
ArrayList ripples;
void setup() {
  size(400, 400);
  background(255);
  noFill();
  smooth();
  ripples = new ArrayList();
  for(int i=0; i < 100; i++) {
    ripples.add(new Ripple(random(width), random(height), (int)random(20, 80), color(0), random(0.1, 0.4)));
  }
}

void draw() {
  background(255);
  for (int i = ripples.size()-1; i >= 0; i--) {
    Ripple ripple = (Ripple)ripples.get(i);
    ripple.display();
    if(ripple.finished()) {
      ripples.remove(ripple);
    }
  }
}

Photoshopで画像を統合して別名保存するJavaScript

2010-09-07T17:41:00.009+09:00

FlattenAndSave.jsx

var d = activeDocument;
var fp = d.fullName.toString();
var f = new File(fp.split(".psd")[0]+"_fix.psd");
var out = d.duplicate();
out.flatten();
out.saveAs(f);

コーダーの人にPSDを渡す際にレイヤーを1つに統合しておくと効率が良いそうなので、書きました。
開いているPSDと同じ階層に"_fix"とついたPSDができます。
統合したあとうっかり保存して閉じてしまう心配もありません。
(編集中のデータには変更を加えず新しいドキュメントを複製し、そちらを統合するようにしました)
Windows, MacのCS3で動作確認済。
Adobe Photoshop CS3/プリセット/スクリプトフォルダ以下に入れておくとメニューから選べて便利。

ロールオーバー用のレイヤーを残したい場合はそれらを非表示にし、flatten()ではなくmergeVisibleLayers()を使うなど、用途に合わせて使い分けるといいと思います。レイヤーカンプで切り替えを作っておくと親切。もてます。

2010年9月に思っていること

2010-09-04T20:50:00.004+09:00

3年くらい前にbrazilさん、youpyさん、koyachiさん、ucnvさんとかが見せてくれた可能性に近づきたくてJavaScript勉強してる。ksskさんが最近Audible作ってたのとか、その辺の影響を同時期に受けてての2010年夏って感じで、何かシンクしたと思った。BEAMで今後やろうとしてることも例えばYHCとかStroboみたいなこと。大量のイメージを一気に見たり、暇な時に流しておいたり。各WebサービスのAPIが充実して、便利なライブラリも沢山出て、ブラウザの機能も良くなって、おそらくユーザの環境やリテラシーも変わってきている今、できること。

8tacksのChrome拡張がすごくいいなと思った。CTOが「デザインもっと良くするの手伝うから連絡して」って言ってすぐ反映されてるスピード感とかも面白い。
Last.fmからアーティストの画像を取って来てて、スライドショーになる。

最近一部のクラブに行くと、DJがかけてる曲に合わせてVJがYouTubeから動画を探して流す、みたいなスタイルになっている。自分達の周りでVJが流行ってた頃とはえらい変わりようだ。確かに解像度も十分だし、ブラウザでフルスクリーンも楽勝なので、理にかなっている。もちろん選ぶ時にセンスは問われるんだけど、これある程度自動化したりもっと面白くできるんじゃないかなーと思ってる。

一方でWebの時代は終わったよ、という話もあるので、注意もしてる。
Flashのことを笑っている場合じゃない « ku

優れているとか正しいではなく、全体の雰囲気として、「そうだよな、これはもう終わりだよな」となってしまったら終わるものだと思う。とは言えこの辺は先端的な人達の話なので、どうなっても僕はあんまり得も損もしない気がする。基礎的な部分を鍛えつつ、面白いと思う方で何かやればいい。

他iPadを想定したWebサイトと、iPhoneアプリを頑張っています。今年は働き者です。

BEAM

2010-09-03T13:15:00.003+09:00

BEAM
CGIとかJavaScriptの勉強しつつ触っている間に何かアイディアが出ないかなと思って自分用の画像スクラップを作った。FFFFound!やTumblrみたいにBookmarkletから画像のURLをPOSTで書き込み用のCGIに送って、テキストファイルに保存。表示用のCGIからURLを読み出してHTMLとJavaScriptを出力。
加えて不定期にローカルのPythonスクリプトからそのテキストファイルを読みに行って画像をダウンロードし、iPhoneの写真と同期させてる。

visual dropboxとあるように一時的に貼っておいて、適当に消す、気分で替える壁紙みたいなもの。BookmarkletなのでiPhoneからでも会社のコンピュータからでも自分のMacBookからでも投稿できる。涸れた感じの技術だけど個人的に楽しむ分には割と便利。広く使ってもらうためにはブラウザのプラグインとかにすればいいのかな。

YouTuBJ

2010-08-14T21:46:00.004+09:00

結構前にYouTubeでミックスできるの作りました。
YouTuBJ
わかりにくいけど黄色いエリアの上に入力フォームがあるのでそこから検索するかIDを入れると読み込みます。

最大左と右で4つずつビデオが出てきて、それぞれ鳴らせるのが特長というか、既存のインターフェースにとらわれていないいいところです。使わないと思うけど。
地味にフルスクリーンにもできるようにしました。小さい状態での画質の切り替えにはこつが必要で、動画エリアと画質を選ぶボタンエリアのちょうど境界線あたりを狙います。使わないですよね。

あくまで自分用という感じで作っているので、サービス精神がありませんが、ざっくり何かを探して、すぐ再生できて簡単につなげればいいなという感じです。思いっきり探したい場合はタブでも切り替えてYouTube行って探してくればいいという考えです。

他にもいくつか作っている人がいて、考え方の違いみたいなのがわかると面白いと思いました。いいアイディアがあれば取り入れたいし。

Turntubelist
至れり尽くせりの完成度。このページで完結。プレイリスト書き出しができるのがいい。操作を覚える必要が少しある。

YouTubeMixer
Processing界でも有名なv3ga先生いつのまに。SearchでYouTubeページをiframeで読み込む形になってるけど、ここからID取ってくるのは困難。埋め込みプレーヤーのバージョンも古いしYouTubeリニューアル前に作ってたのかな。シンプルで綺麗。

youtube console
DJ Delicious a.k.a. 萩原くんのやつ。さすがわかってる感じ。Changeで検索結果を掘っていける。操作画面みてても楽しいんじゃないかな。

TWOYOUTUBEVIDEOSANDAMOTHERFUCKINGCROSSFADER.COM
元々これに触発されて作った。partyで背景画像が切り替わる。RECはスクリーンキャプチャの方法が書いてるWikipediaへのリンク。世界はもっとこういう風になるべきだと思う。

長らくインターフェースとかオーディオビジュアルに興味を持っているのですが、音を解析して映像にするとかだけじゃなくて、操作(演奏)しているところ自体が、視覚的に楽しめる要素になってるといいなと思います。

ProcessingでGUIを簡単に使う

2010-08-14T13:09:00.003+09:00

Algorithm for Visual Designより。
controlP5とかその他色々あるけどちょっと試したい時とかAWT使うのもいいと思う。
サンプルではaddActionListenerのところがこんな感じ

a.addActionListener(new ActionListener() {
  public void actionPerformed(ActionEvent e) {
    println("A");
  }
}

だったけどActionScriptぽく書き直してみた。
ボタンが押されたときに呼び出されるメソッドは全てactionPerformedになるのでその中で分岐。
[guiTest.pde]

MyControl control;
void setup() {
  control = new MyControl();
}

void draw() {
}

[MyControl.pde]

import java.awt.Button;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
class MyControl implements ActionListener {
  Button a;
  Button b;
  
  MyControl() {
    a = new Button("A");
    a.addActionListener(this);
    add(a);
    b = new Button("B");
    b.addActionListener(this);
    add(b);
  }
  
  public void actionPerformed(ActionEvent e) {
    if(e.getSource()==a) {
      println("A");
    } else if(e.getSource()==b) {
      println("B");
    }
  }
}

TEE PARTY

2010-08-12T00:03:00.007+09:00

夏はもう終わってしまいましたが、縁あってTEE PARTYにレーベルオーナーとして参加することになりました。
ざっくり言うとネットでTシャツが買えるシステムです。

注文が入ってから印刷に入るモスバーガーみたいなシステムで在庫を持たなくていいので、僕らはただひたすらグラフィックを作りまくって送りまくれば良い訳です。毎日大量にアップされていくので普通に埋もれてしまいますが、ちょっと考え方を変えて、ディグるのではなく(ディグってもいいですが)開いたとこでぱっと見て気に入ったら即買うみたいな気持ちで臨めばネットショッピング感覚的に新しい何かが生まれると思います。
いずれプログラムで自動生成したもので毎日更新シリーズを作ろうと思っていますが、現状手作業でアップロードされているので様子を伺っています(地のTシャツの皺とかひとつひとつ違うの気づきましたか？僕は気づきませんでした!)。

最初にお誘いいただいてからどのように展開していくか色々悩んだ結果、答えは出ずに時間だけが過ぎていったのでそのまま持ってる能力や人脈を最大限活かしてやっていくことにしました。
なので会社でお世話になっているMARVELOUS DESIGNさん、恩師であるJames Gibsonさんに参加してもらっています。
他にも関わりがある人で、今のTEE PARTYにはちょっとないテイストの人に声をかけています。

お、思い出横丁情報科学芸術アカデミーのTeeもよろしくお願いいたします。

引っ越しました(2ヵ月くらい前に)

2010-07-04T00:06:00.002+09:00

僕は引っ越しが好きで、暇さえあれば誰かの引っ越しを手伝いたい。片付けをしながら思い出話をしたり、いらないものをもらったり、何より生活が変わる時の希望みたいなものに触れたい。4年前にも同じようなことを言ってる。今回は引っ越しの時に荷造りするのをストリーミングしたりした。次はまた2年後くらいに。

新住所は台東区で、新御徒町が最寄り駅なんだけど、15分くらい歩く気があれば、秋葉原(日比谷線、山手線、総武線、京浜東北線、つくばエクスプレス)、末広町(銀座線)、仲御徒町/上野御徒町/上野広小路/御徒町(日比谷線、大江戸線、銀座線、京浜東北線、山手線)、蔵前(大江戸線、浅草線)、浅草橋(総武線、浅草線)も使えるので色んなところへ乗り換えなしで行けてとても便利。

本当はやっぱり中目黒とか渋谷に住んで、折り畳み自転車で小さい犬の散歩をしながら友人のカフェでアイディアを練るみたいな生活が良かったと思う。先日うっかり中目黒駅で待ち合わせしたら、香水の匂いが次々と替わりながらずっといい匂いがしていた。

前に住んでいたのは東横線の多摩川駅で、住所は田園調布だった。田園調布、というと大抵の人からは「いいとこですね」「お金持ちですね」みたいな反応が返ってくる。が、僕が住んでたのは丸子橋のすぐ近く、中原街道沿いで割と車の音がうるさいところだった。お金持ちっぽい人達は坂を登ったところに住んでるらしい。お店とかもあまりなく、若い人が遊んだりするところもないので、刺激はなかったけど、それが僕にはちょうど良かったし、自転車があればもっと良かったと思う。温泉もあった。引っ越して家賃も上がってしまったけど、通勤時間が短くなったりリラックス効果が高まったので、その分働いたり勉強したりする余裕ができた。以前の環境にいくらか足せば同じような効果を得られるかというとそうではないので、お金と時間の配分についてはよく考える必要がある。

で、自転車なんだけど、仲御徒町に欲しかったピストを売ってるお店があったので予約してきた。届いたら自転車で通勤したい。そうすると終電を気にしなくてもよく、昼休みに洗濯物を取り入れに帰ったりすることもできる。働き方が変わる。明確な答えのない仕事において高いインセンティブとなるのは自由な時間だそうだ。会社の机に縛られて四六時中マウスをちょっと動かしたりしてる必要はない。裁量労働制だし、会社の人も別にうるさく言わないのだけど、何となくの空気みたいなものに押されて早く出社してるのに遅い人に合わせて遅く帰る日々が続いている。誰かが悪意を持ってそういう事態になってる訳でもないのだけど。

今年は色々と外向けの活動ができそう。学生時代に「こ、こいつ…(目立ちやがって!)」と思ってた人達もどっちかと言えば仲間側になってきたし、ポジティブに自分への刺激にできるようになった。続けるということはそういうことなのだろう。

Dropophone

2010-06-16T01:20:00.007+09:00

縁あってLullatoneと一緒にiPhoneアプリを作りました。
Raindrop Melody MakerのiPhone版という感じですね。音数を減らして選び直したり、マルチタッチができたり、色々と調整はしてあります。iTunesにリンクして音源が買えたり!

こういう感じでミュージシャンのアイディアを実現するシステムやソフトウェアを作る、ということをずっとやりたかったのですが、ようやく一つ目標を達成した感じです。今後の動向も楽しみにしていて下さい。

アプリのダウンロードはこちらから。
Dropophone for iPhone, iPod touch, and iPad on the iTunes App Store

LullatoneのDropophone紹介ページ。
Dropophone iPhone App « Lullatone

似ているIPアドレスのページを探す

2010-03-15T03:01:00.001+09:00

lip
検索対象に近いIPアドレスのドメインネーム(リモートホスト)を表示するサイトを作りました。
ドメインネームからIPアドレスに変換して、ネットワーク部と推測される部分の下一桁違いのアドレスに問い合わせて、あればドメインネームを取ってくる。

redundant webというWeb上の展覧会に出した作品。
kiviakというアーティストランスペースの谷口君が企画。
参加作家は全員以下のレギュレーションに従って制作した。

1：webを展示空間とするのではなく，素材として用いること．
2：単なるwebツール/webサービス(道具)を作らないこと．目的のない，且つ合目的な道具を作る．

メディアアートというジャンルを語る際に、余りにもテクノロジーや政治的なアクションにばかり傾き、「この赤がいいよね」というような質感に関する議論がほとんどなされていないのではないか、という疑問が谷口君にあったらしい。
花は繁殖のために綺麗に咲くというが、それにしては綺麗過ぎるという「目的なき合目的性」こそが「美術」であると捉え、「役に立たない機械」を作ることでそれを達成しようという試み。

Webにある素材としてまず着目したのがIPアドレス。普段あまり意識することはないけど、なくてはならないものだから。

無作為にWebページを見たり、新しいものを見つけるのは結構難しいという風に思っていた。RSSリーダで沢山のページは購読しているが、たまに全く関係ないものにアクセスしてみたくなる時がある。結局それを面白がれるかどうかは自分次第なので、そんなに振れ幅は大きくならないのだけど、それまで自分になかったものをどうやって取り入れていけるかは常に考えている(今はKPOPのアイドルが好きです)。
2番目の「目的のない，且つ合目的な道具を作る」という課題への回答としては上記のようなところで、当たる確率の低さや、下一桁違いという大雑把な探し方が冗長性かなと思っている。これでは理由として弱い気もするが。

似たような作品にIP Browserというものがある。こっちはラジオのチューナーを意識しているみたい。「Googleとは違う世界の見方」、みたいなことが書いてあるが、今回の僕の狙いも1つはそこで、「ポータルサイトがなくなったらどうなるのか」という疑問がネットを始めた頃にあった。すごくシンプルで愚直な答えが出せた。

技術的なところでは、初めてPerlでCGIを書いて、JavaScriptもXMLXttpRequestをある程度使えるようになったのが良かった。

クロアチアから帰ってきた

2009-11-01T20:33:00.007+09:00

クロアチアに1週間ほど滞在し、展覧会のオープンを見届け、無事帰国して参りました。
今回僕達を読んでくれたのはKONTEJNERという団体で、インディペンデントで展覧会などの企画をしている。

クロアチアの「Device Art」と日本の「デバイスアート」は、名前は同じだけど少し性格が異なっていて、それをうまく対比させる目的があったようです。トリエンナーレ形式で、今回が3回目。IAMAS関係者が多いのはアルスエレクトロニカでのキャンパス展が面白かったかららしい。

確かに日本の作品はプロダクトのような形式なのに対し、クロアチアやスロベニアの作品はキネティックスカルプチャーと言った感じ。同じなのはそれぞれ身の回りにあるものや技術を使って作っているということや、ナンセンスであるということ。ナンセンス、というのは微妙な表現だな。明らかに遠回りで、冗長なのだけど、だからと言って単に意味がないという訳ではない。

初日
マヤとステファンが空港まで迎えに来てくれて(ステファンがデバイスアート展のポスターを広げながら待ってた)、滞在するユースホステルまでの途中、建築中のクロアチア初の現代美術館や図書館、コンサート会場などを教えてくれた。

ホステルに着くとIAMASの先輩達が待っていて、一緒に夕食。案内してくれたのはマリーナ。ボランティアで展覧会のこととか全然知らなかったけど日本文化を勉強してるからってので頼まれたらしい。こういう感じが最高。
成田からフランクフルトまでの機内食を普通に夕食レベルで食べ、フランクフルトからクロアチアに来る途中のフライトでもサンドイッチが出て、しかも近くに乗ってた日本人のおばちゃんが食べられないからってくれた分まで食べてしまったので全然お腹は空いてなかったけどスープやサラダを食べた。おいしい。オリーブオイルやバルサミコ酢が新鮮な感じ。
食事後は僕とそう君、マリーナで夜の街へ繰り出す。マリーナの友達も合流してクラブ的なところへ。凄く混んでた。

2日目

展覧会場に入って準備。ビゴルとカメリアが連れてってくれる。カメリアはジャパノロジーを勉強していて、百人一首とか和歌を勉強したらしい。英語で話してたら「日本語でいいですよ」と言われ、帰ったらもっと英語勉強することを決意。カメリアは日本語に訳すと椿。

会場は隣がMočvaraというクラブで、元々は鉄工所だったところを改装した建物。若者には人気の場所らしい。クロアチアのこういうとこはあんまりガイドに載ってないしネットでも見かけない。

お昼は会場近くのサンドイッチ屋でサンドイッチを頼む。チーズとかハムとかが挟んであるパンを選んで、トーストしてもらう。野菜とソースを選べるが、野菜は何種類選んでも料金は同じ。今回の企画を手伝っていて、ベルリンで活動しているサウンドアーティストの森田さん、IAMAS後輩のそう君と近くの川岸で食べる。

3日目
オシロスコープも届き、勘で使い方を覚えながら調整。読めないというほどではないが何故か波形が汚く読みにくい。マシンはMac OS10.4でPPCのminiMac。最新のProcessingだと起動しなかったが(おそらくstartup commandの問題)１つ前のバージョンにしたら動いた。

夜は川北さんと渡邊君で軽く御飯。ピザなど。

4日目
会場での作業が本格的になってきて、暖房が入った。

これで温風が送られて会場が暖められる。

中から見るとこんなの。

僕の作品は2階で、温風が来なくて寒かったが、キュレーターのオルガがアウターを貸してくれた。

マシンを直前で手配できたiMacのSnow Leopardに取り替えてもらった。動作が軽くなり波形も綺麗になる。動作が重い→音が悪くなる→波形が汚くなる、と推測。
代わりにAWTのTextEditorから日本語入力ができなくなるが、使うのはビゴルとカメリアくらいなので今回はこれでいくことにした。。本当にコンピュータはわからないことだらけで、よくこんなものを使って作品なんて作ってるなと毎回思う。僕はあまり作品という意識はなく、自分用だけど。

オープン前日という雰囲気では全くなかったが、森田さんは「できちゃうんですよねーこれが。去年もそうでした。」と余裕。

5日目
オープンは19時からで、本当に沢山の人が集まった。森田さんの言葉通り、ちゃんと展覧会ができ上がっている。
彼はオープニングに合わせて髪を切ってきた。流石です。

キュレーターのスンチザに教えてもらった店で切ったらしいんだけど、普通の家を改装したようなところで、鏡とか椅子とかがアンティークな感じだったらしい。「自分の好きな部屋で、好きな客の髪を切りまくる、というのは良い仕事だね」という話をした。僕はずっと坊主で自分で切ってるけど、そういう店なら行ってみたい。

山辺さんの作品前で記念写真を撮るのが流行った。左端に写っているのがマルコで、今回の会場の設営のリーダー。展示台やスクリーンは全て発泡スチロールで、会場の照明は青とブラックライト。建物の雰囲気によく合っている。

Močvaraでサウンドイベントが始まる。オープニングということでハウスとかがかかってパーティ!って感じかと思いきや本気のノイズだった。

23時過ぎても全然人が引く気配がなく、0時過ぎてようやく閉めたんだけど、平日だし次の日も平日なのに本当に皆元気でびっくり。ちゃんと遊んでちゃんと仕事もする感じはYCAMとかにも近いかも知れない。

6日目
プレゼンの日。と言ってもツアーしながら各作家が説明をするだけなんだけど、作品がインタラクティブなだけに質問と体験が一緒で、次第に人が拡散してしまい、僕に回ってくる頃にはもう個別にどうぞって感じになった。もうひとつの会場Nanoもオープン。寿司バーが隣にあって、ケータリングしたらしいけど、着いた頃には全部なくなってた。ひたすらワインを飲まされ、また夜の街に繰り出して飲んだ気がする。
トラムは24時間動いていて、結構深夜でも皆遊んでいる。4時になると警察が来て強制的に全ての店が明るくなるそうで、どんな悪そうな奴もちゃんとそれで帰るらしい。見てみたかった。

7日目

スンチザの家でホームパーティをしようということで、森田さんやウィルと一緒にマーケットで買い物。

魚市場もある。マグロとサバっぽいのとサンマっぽいのとニジマスっぽいのを買う。
寿司、サバっぽい味噌煮、サンマっぽい刺身、ニジマスっぽい塩焼きに決定。

昼頃に一旦解散して僕らはお土産を探したり。

クロアチアのデザイン協会。ギャラリーができたのは最近らしい。
HelveticaでHrvatica(クロアチアの女の子という意味)と書かれたTシャツと協会の年鑑を買う。おまけでTシャツをもう一着もらった。クロアチア語版のQuick brown foxみたいなやつ。

スンチザはいつも変わった服を着ていてお洒落なので、そう君がどこで買ってるのか聞いた。最初は一緒に買い物に行く予定だったけど忙しくて都合がつかず、ステファンが連れて来てくれた。彼も忙しいのですぐまた戻って行ったのだけど。

prostorというクロアチアで唯一のストリートスタイルの店で、取り扱ってるブランドや展示してる作品はほとんどクロアチアの作家によるもの。一周年記念で今まで展示した作家の作品を並べてるらしい。バッジを買う。ここもガイドには載ってなくて、中心地には近いけど普通には見つけられないところにある。流石にキュレーターはいいものを知っている。

会場近くでやってたサーカスを見て、スンチザの家へ。

彼女はラム肉を焼いてくれて、僕らは森田さんを中心に魚料理を作った。僕はほぼ洗い物係。学生時代もそうだったけど、できるアーティストは確実に料理がうまい。曰く「アーティストは味覚に敏感じゃないとね」。
おそらく味覚もそうだけど素材選びから調理の段取りから食べてる時の会話まで、やはりこういう場では問われるという印象。

猫抱きまくり。

8日目
滞在最後の日。午前中は散歩しつつお土産探したり。午後は会場で皆にお別れの挨拶して、カトリーナに車で空港まで送ってもらう。彼女はアニメーションが作りたいらしく、日本のアニメにも詳しかった。渋滞ですごく時間がかかって、ちょっと乗り遅れたら良いのにと思った。

本当にこれからって感じで、30歳くらいの人達に熱気があって、面白くなりそう。
森田さんも話していたのだけど、毎回成立するかしないかギリギリの感じだけど、意外と本質を突いているというか、「これでいいんじゃん」という驚きがあるらしい。何より熱意と勢い。そういうのに「やられてしまった」と。
普通展覧会を開くとしたらどこかの大学や美術館、ギャラリーに所属してとか、資格が必要だとか考えてしまいがちなものだけど、とにかくやってしまえばいいんじゃないかということ。

いつだって何かにやられてしまいたいし、後先考えずにやってしまいたい。勿論クロアチアと日本では状況も違っていて、クロアチアの場合はKONTEJNERが今まさに一番上の世代。日本にはもう既に色んなものができてしまっている。
人口も違うし、働き方も違う。山辺さんの作品が動いてなかった時に、日本時間で23時くらいだったにも関わらず普通に事務所につながったことに皆驚いていたらしいが、日本はそうでもしないと回らない仕組みになっている。普段働いている時にも無駄なこととか、こんな作業いらないのではと思ったりするけど、経済を循環させるという意味や、雇用を創出するという意味では仕方ないのかも知れないとも思う。でもおそらく皆もっと本質的なこととか、直接反応が返ってくるようなことを求めていて、サードプレイスみたいな発想が生まれてくるのだろう。

帰ってくる途中の飛行機のニュースでは子育て給付金や失業率がどうのという話題。放送された短い内容だけでは判断できないが、インタビューされている人は「給付金が出たら寿司を食べたい」と言ってたり、「政府には安定した雇用を作り出すよう努力して欲しい」みたいなことを言っていて、これでは駄目だろうなと思った。勿論こういうことが最低限保証されるのはいいことだとも思うし、泥沼から抜け出す第一歩のためのセーフティネットは必要だろう。けど、考え方から変えないといけない気がする。先日会社の先輩と温泉に行った時にご一緒した伊藤さんが考えてることとか、面白いと思う。彼は建築や食べられる野草にも詳しく、モンゴル武者修行ツアーを組んだり、パン教室を開いている。

だらだらしている間に27歳になってしまったが、しがらみとか失うものがない今がちょうどいい時期なのかも知れない。何となく考えていることを実行に移していきたい。

レイヤーカンプからWeb用のJPEGに書き出すJavaScript

2009-10-06T10:13:00.008+09:00

Webデザイン(ワイヤーフレームから絵を起こす作業)はPhotoshopで常人の理解を超える数のレイヤーを駆使して行われます。そしてそれをコーダーと呼ばれる人達に渡してブラウザで動くようにしてもらったり、クライアントに対してこのデザインでいいですかという確認をとるために、マウスオーバーでこうなって、ボタンを押すこうなる、みたいな流れがわかるようにJPEGでスクリーンショット的な画像を書き出します。このような場合に「レイヤーカンプ」という機能を使い、それぞれのシーンを作っておくと便利です。

で、いつもJPEGに書き出す際に「Webおよびデバイスに保存...」をしてるのですが、数が増えてくると面倒(一度本当に嫌な思いをしました)なので、レイヤーカンプから自動でシーン毎のJPEGを書き出してくれるスクリプトを書きました(その時に書けば良かったです)。
「別名で保存」と同じようなものは既にファイルメニューにありますが、Webおよび...のやつがなかったので(少し変えればPNGなどにも書き出せます)。
exportLayerComp.jsx

使い方:
1.上の.jsxファイルをどこでもいいので保存して下さい。
2.Macの場合はホーム(デスクトップではありません。家のアイコンの場所)に、Windows場合はC:直下にlayercompsという名前のフォルダを作ります。ここに画像ファイルが書き出されます。
3.Photoshopのメニューからファイル>スクリプト>参照...を選びます。
保存したexportLayerComp.jsxを「読み込み」でレイヤーカンプにつけた名前の通りのjpgが書き出されます。
ファイル名はレイヤーカンプと同じ名前になります。日本語だったり長過ぎるとうまくいかないかも知れないです。書き出されるフォルダの位置や名前を変えたい場合は、任意のテキストエディタでexportLayerComp.jsxを開き、

filePath = ""

の二重引用符内を好きなフォルダのパスに置き換えて下さい。
Windowsの場合は\(または¥)に注意して下さい。一つだと次の文字が特殊文字として扱われてしまうので、階層の区切りには2つ入ることになります。

デフォルトでの書き出しの設定は普通にWebおよび...をした時と同じにしてあります。
画質を変更したい場合は、

exp.quality = 70;

の値を0から100の範囲で指定して下さい。

exp.format = SaveDocumentType.JPEG;

のJPEGのところを変更すればCOMPUSERVEGIF, PNG-8, PNG-24, BMPで書き出しできます。ファイルの拡張子を追加している".jpg"のところも合わせて変えるのを忘れずに。

細かい設定などはAdobe Photoshop CS3/スクリプティングガイドフォルダ内にPhotoshop CS3 JavaScript Ref.pdfというのがあるので参照して下さい(106ページ)。ここからダウンロードもできます。

下記のサイトを参考にしました。
Adobe Photoshop CS3自動化作戦
PhotoShop JavaScript(ExtendScript):Note - ホコホコ hoko-hoko

書き出すファイルや画質の設定をGUIでできるようにしたいのだけど、それはまた次。
こういう感じで社内のワークフローを楽にしてくれる専門の人っていないのかな。

openFrameworksでSndObjを使う

2009-09-03T22:21:00.004+09:00

Programming Interactivityに載ってた。著者のJoshua NobleさんがofxSndObjを作ってるのですね。

前回ofxMSAPhysicsでものすごく面倒なやり方をしてましたが、これは僕がXcodeの使い方をわかってなかった。
XcodeのProjectメニューからAdd to Project...して追加したいaddonのsrcフォルダとlibフォルダを選べばいいだけのことでした。それでXcodeの画面で追加したsrcとlibsをaddonsというグループにまとめておくという流れ。XcodeのGroups & Filesは実際のフォルダ構成とは別物。合わせておくとわかりやすい場合もあるというだけ。

僕のopenFrameworks関係のフォルダ構成は

+of
 -addons_contributed
 +of_preRelease_v0.06_xcode_FAT
  -addons
  +apps
   -addonsExamples
   -examples
   -sketch
  -libs
  -other
 -samples

という風にしていて、標準で入っているaddonとそうでないものを分けています。ofxSndObjはaddons_contributedに入れてる。samplesはネットとかで拾ってきたコードを入れておくフォルダ。

以上を踏まえて新しいemptyExampleをsketch以下にコピーして名前を変えた後、ofxSndObjのsrcとlibsを追加し、testApp.hとtestApp.cppを以下のようにすればお約束の440Hzのサイン波が鳴るはず。

testApp.h

#ifndef _TEST_APP
#define _TEST_APP


#include "ofMain.h"
#include "ofxSndObj.h"
#include "AudioDefs.h"

class testApp : public ofBaseApp{

 public:
  void setup();
  ofxSOTable t;
  ofxSOOscillator o;
  ofxSndObj sndobj;
};

#endif

testApp.cpp

#include "testApp.h"

void testApp::setup(){
 sndobj.startOut(true, 1);
 t.init(sndobj, 2500l, SINE, 1.f);
 o.init(sndobj, t, 440.f, 10000.f);
 sndobj.setOutput(o, OFXSNDOBJOSCILLATOR, 1);
 sndobj.startProcessing();
}

2009年8月22日

2009-08-22T20:41:00.005+09:00

通常業務が忙しくなるタイミングとチームのメンバーが夏休みに入るタイミングが運悪く重なり、加えて重い新規案件で先週から働き詰め。ようやく今日完全に休みになったけど明日は出社して月曜日のプレゼンに備えなければならない。

9月末まではこれに付きっきりになりそうで、今月末にとる予定だった夏休みは先延ばし。（＃＾ω＾）というところにメールが届いて、10月にクロアチアのザグレブで開かれるデバイスアートの展覧会にsonicodeを出品できることになった。渡航費と滞在費が出るということで、夏休みをそこに思いっきりぶつけることにした。こんな機会でもなければ行くこともなさそう。

ちょうど10月には別件で展示のお誘いがあったので両方に使える形でうまいことアップデートしたい。

などと考えつつBBOY PARKに行く気力もなく家でだらだらと勉強。
「Programming Interactivity」はProcessingとArduinoとopenFrameworksでインタラクティブアートを作るための本。考え方や興味が近いので、デザイン方面からプログラミングに入った人には理解しやすいと思う。短期集中で一気に読みたい。一緒に買った「Beautiful Data」は美学寄りというか論文的な内容。こういうのが基本にあるかないかでアウトプットも違ってくるだろうな。Radioheadの「House of Cards」の制作背景についても載ってる。

あとは「かんたんプログラミングCGI/Perl」。Perlはネットで面白いことしてる人が結構Perl使いが多く、会社で使える便利スクリプト(スケジュール確認とか)を書いてる人もそうなので是非とも覚えたいところ。初めてCGIを動かす時に想定されるエラーや、その原因と対処法も書かれていて、丁寧で読みやすい。

pythonも好きなので「集合知プログラミング」に加えて「Think Python」というフリーの本を読んでいる。How to Think Like a Computer Scientistという副題がとてもそそる。インタラクティブアートに興味を持ったのはああいう発想がどういうところから出てくるのかがわからなかったから。そもそも現代美術に興味を持ったのもそうだった。調べていくにつれ、それぞれの分野にはそれぞれの文脈があり、突然それに出くわした人にはショックだったりするが作った本人にとっては割と当然の流れで作っていたりするものなのだと知った。そういうところでここ2、3年興味があるのはプログラマ(少し前だったら広告で何千万というお金を使ってどう面白いことをするか、みたいな発想に憧れてたけど、このご時世だし)。

この間試したEcho Nestとかもそうだけどデータの可視化、可聴化で何か面白いことをしたい。

プログラマの人達は本とか読まないでも色々できてしまうのかなと思っていたけど、実は逆というかものすごく本を読んでいる。だからこそ頭にも叩き込まれているんだろうなと思い、最近はできるだけ僕も買うようにしている。彼らが自宅作業を好むのも会社より資料が充実しているからのようだ。思えばうまいデザイナーもそうだった。やっぱりいいものを見ている。

Processing IDEからEcho Nest APIを使う

2009-08-11T01:22:00.006+09:00

Echo NestのJavaクライアントが出ていたのでProcessingで動かしてみた。
Echo Nestが何なのかよくわかってないけど、とりあえずネットと音という大好きな要素が混ざっている。
曲やレビュー、記事のリコメンドからテンポ、ビート等の音響解析にも使えるらしい。

まずはdeveloper用のサイトでEcho NestのAPI Accountを取得してAPI Keyを発行してもらう。
サイトも綺麗だしブラウザから実行例を見られるので勉強しやすい。APIキーとか入れといてくれてる。

Echo NestのJava APIをダウンロードする。

Javaのライブラリなので、OSXの場合"ユーザ名/Library/Java/Extensions"以下にEchoNestAPI.jarを置いて.bash_profileにCLASSPATHを書くのでもいいけど、Documents/Processing/librariesの中にEchoNestAPIというフォルダを作り、さらにlibraryフォルダを作って、その中にEchoNestAPI.jarを入れても動く。ProcessingのIDEから簡単にimportできる。

JavaのサンプルそのままだとProcessingのIDEの場合for文のところでエラーになってしまうので書き換えた。

import com.echonest.api.v3.artist.Artist;
import com.echonest.api.v3.artist.ArtistAPI;
import com.echonest.api.v3.artist.Audio;
import com.echonest.api.v3.EchoNestException;
import com.echonest.api.v3.artist.Scored;
import java.util.List;

String API_KEY = "自分のAPI KEY";
String ARTISTNAME = "weezer";

ArtistAPI artistAPI;

try {
  artistAPI = new ArtistAPI(API_KEY); 
  List<Artist> artists = artistAPI.searchArtist(ARTISTNAME, false);
  if(artists.size()>0) {
    for(int i=0; i<artists.size(); i++) {
      Artist artist = artists.get(i);
      List<Scored<Artist>> similars = artistAPI.getSimilarArtists(artists, 0, 10);
      println(" === Similar artists for " + artist.getName() + " ===");
      for(int j=0;j<similars.size(); j++) {
        Scored<Artist> simArtist = similars.get(j);
        println(simArtist.getItem());
      }
    }
  }
} 
catch(EchoNestException e) {
  System.err.println("Trouble: " + e);
}

実行結果

=== Similar artists for Weezer ===
The Smashing Pumpkins
Ozma
Biffy Clyro
The Breeders
Rivers Cuomo
Nerf Herder
Jimmy Eat World
Foo Fighters
Veruca Salt
The Flaming Lips
=== Similar artists for Weezer Tribute ===
The Smashing Pumpkins
Ozma
Biffy Clyro
The Breeders
Rivers Cuomo
Nerf Herder
Jimmy Eat World
Foo Fighters
Veruca Salt
The Flaming Lips
=== Similar artists for Matt Sharp (of Weezer, The Rentals) ===
The Smashing Pumpkins
Ozma
Biffy Clyro
The Breeders
Rivers Cuomo
Nerf Herder
Jimmy Eat World
Foo Fighters
Veruca Salt
The Flaming Lips

開発者の人のデモがここにある。eclipseで開発してる。

*2009年11月11日追記
EchoNestAPIを使用する場合はJavaのバージョンを1.6にする必要があります。
Applications/Utilities/Java Preferencesを起動して、GeneralタブのJava ApplicationsのJava SE 6を一番上にする。

で、いつの間にかechonestp5というものができてた。

openframeworksでaddonを試す

2009-07-26T10:31:00.012+09:00

FATで入ってるaddonはいいとして、他のaddonを使う時はどういう方法がいいのかなと思って試してみました。かなり愚直なやり方です。

ofxMSAPhysicsを使ってみる。
processingのtraer physics(いつの間にかソースが公開されている!)に似たAPI。

1.ダウンロード
svnがわかる人は
svn checkout http://ofxmsaof.googlecode.com/svn/trunk/ ofxmsaof-read-only

わからない人はミラーからダウンロードできます。
ofxPhysics以外にも色々入ってます。

2.プロジェクトを作る
apps/examples/emptyexamplesフォルダをコピーしてペースト。フォルダの名前をPhysicsTestとする。その中にaddonsというフォルダを作り、ダウンロードしたフォルダの中からofxMSAPhysicsとofxObjcPointerをコピーしてaddonsフォルダの中にペースト。srcフォルダ以外を消しておく。
ofxObjcPointerはメモリ管理に使っているらしい。

xcodeprojファイルを開いて、Finderからaddonsフォルダをドラッグして「Groups & Files」にドロップ。日本語環境だと「グループとファイル」。僕は調子こいて英語にしています。

ダイアログが出てくるので多分そのままOKすればいい。上の方にフォルダをコピーするかどうかチェックする項目があるけど、今回はプロジェクト内に既にコピーしてあるのでチェックは外しておく。ラジオボタンは「Recursively Create Groups for any added folders(追加したフォルダに再帰的にグループを作成する)」方で。src以外を消したのはここで変なことにならないため。

これで準備完了。

3.コードを書く
examplesの中身をコピーしてもいいですが、複雑なので使い方を覚える意味でも必要そうなところを抜き出して改変しました。マウスをクリックしたらボールが落ちてくるサンプルです。キーボードを押すと消えます。

ofxMSAPhysics physics;
でofxMSAPhysicsクラス型を宣言して、physics.makeParticle(x,y,z)でパーティクルの生成。
p->xとかが何なのかわからない場合はSBAW09の第11回目とかOF for Processing usersとかOoops!を参照。

ソースコードがうまく貼付けられなかったのでプロジェクトごとアップしました。
physicsTest.zip
---
*2.についてもう少しましなやり方を後日知った。

hysyskとかmrrychとかいい加減にしよう

2009-07-20T18:29:00.006+09:00

myfye.net
丸尾君の新作。おんぶにだっこのだっこ担当(クライアントサイド)。おんぶ担当(サーバーサイド/normal version)はnajimi.jpのyamakk。

撮った写真がカメラからそのままネットにアップロードされ、撮影の間隔が12秒以内の場合、指定された濃度で自動的に乗算合成されて一枚になります。

このような仕組みが、どう撮るものに影響してくるのか楽しみです。

HTMLからSWFに値を渡す方法、スライダーなどのユーザーインターフェース、ビットマップの操作など色々勉強になりました。

最近読み始めた「ActionScript 3.0デザインパターン」の内容を習得できればもっと綺麗に書き直せそうです。
「Foundation Actionscript 3.0 Image Effect」も買ったので今後のバージョンアップに活かせそうです。

openframeworksの始め方

2009-07-17T15:19:00.007+09:00

去年YCAMでのワークショップに参加したopenframeworksですが、その後iPhone版(ofxiphone, mobileframeworks)が出たり、多摩美の授業SBAW09が公開されてたしているので、再び勉強してみようと考えています。Mac OS10.5.7 Xcode3.1.3です。買ったばっかりのMacBook Proです。

openframeworksはここからダウンロードできます。FATというのはOpenCVなどがaddonとして組み込まれているバージョンです。通常はこちらをダウンロードして使えばいいと思います。

一番最初にopenframeworksに触れた時は、Xcodeの使い方がわからないこともあり、何からどうすればいいのか全くわかりませんでした。

普通のプログラム開発は、ライブラリなどを必要に応じて追加していくことが多いと思うのですが、openframeworksの場合は逆です。必要となる環境が予め用意されていて、高度なc++の知識なしにアプリケーションを作ることができます。

zipファイルを展開してできたof_preRelease_v0.06_xcode_FATフォルダ内に、appsというフォルダがあります。その中にexamplesフォルダとaddonsExamplesというフォルダがあり、名前の通りそれぞれのサンプルコードになっています。openFrameworks.xcodeprojというファイルを開き、Build and Go(ビルドして進行)でアプリケーションができ上がるはずです。

of_preRelease_v0.06_xcode_FATフォルダはどこにあってもいいですが、僕の場合はホーム以下にdevというフォルダを作り、言語毎に分けているので、ofというフォルダを作ってそこに入れてあります。
このようなファイルの管理方法も今後よく考えていく必要があります。

新しく自分でプログラムを書く時は、通常のものならばemptyExample、addonを使う場合はalladdonsExampleを複製して使います。apps以下に新しくフォルダを作り(僕はsketchというフォルダ名にしています)、複製したフォルダを格納します。apps以下のフォルダも、複製してできたフォルダも名前は何でもいいですが、libsフォルダやaddonsフォルダを読み込むため、階層構造はexamplesなどと同じにしておきます。.xcodeprojという拡張子のついたプロジェクトファイル名を変更する場合は.plistファイル名も変更し、中身の編集も必要です。方法はSBAW09の第五回に書いてあり、テンプレートも作って下さっています。僕は変更しないで作ってます。

よくネット上でサンプルコードが配られていたりしますが、これらの仕組みを知らなかったので動かし方がわかりませんでした。Xcodeのドキュメントなども読む必要がありますね。

processingなどに比べていいことは、速いのは勿論、ソースコードを辿りやすいということです。例えばofRectという四角を描画する関数は、libsフォルダの中のopenframeworks/graphics/ofGraphics.cppに書いてあります。これを読めばどのような処理を行っているかがわかります。なので勉強にもいいです(あまり良い書き方がされていないという声も聞きますが僕にはまだわかりません)。

20090531

2009-05-31T19:47:00.003+09:00

早いもので働き始めて明日でちょうど1年。あんだけ夜型だったのに今や完全に朝型。休日でさえ。

新人ということで、仕事は放っておいても上の人から降ってきて、ひたすら手を動かしていればよかったが、そろそろ直接担当者と話して、自分で受けたり他の人に回したり(これが実は結構疲れるらしい)をしていかなければならなくなってきた。

西村佳哲さんの「自分の仕事をつくる」が文庫で出たので読み直した。あとがきがとても良かった。インタビューされている人の名前やイメージにつられると、ロハス的ないい趣味の本に誤解されたり邪推されそうな雰囲気もあったが(本文だけでもちゃんと読めばそんなレベルの話をしているのではないということがわかるはず)、それに対する答えがしっかり書かれている。

今年は僕が働いている部署の年賀状を西村さんのところに送ったのだった。

学生時代が長かったので、そこでできた色んな人脈を通じて、会社の人や友達同士を引き会わせたりしていて、面白いことが起こりそうな予感がする。少なくとも僕にとっては理想的。人と会ったりご飯食べたりは大事。不況の影響はどう？とか。勿論僕がどうこうできる立場ではないけど、大きな流れみたいなものは感じられる。

世の中の仕組みは複雑で、頑張らなければならないのだけど頑張ってもしょうがないことが多々ある。結局政治が一番強かったりして、今僕が関わっている分野での「デザイン」ができることなんて本当に瑣末なことでしかない。かと言って腐ってしまっては本当に何もかも駄目になってしまうので、日々を耐え忍びつつ(嫌々やってる訳ではないけど)、たまに巡ってくる機会のために水面下で動いていなければならない。

actionscript3でglitchする

2009-04-02T00:29:00.004+09:00

参考にしたのはこのforum。
Processing 1.0 - glitch art

ヘッダになっているであろう位置をとばして適当な位置のデータを置き換える。
ヘッダの位置予想は適当。ヘッダがあれば、何でもできる。
バイナリのいじり方はflash oopを参考にした。

本当はhex editorみたいに全部展開してちゃんと狙ってglitchさせたいけど、イベント処理が重く分割させる必要がある。これもflash oopにイベントを分割してドラゴン曲線を描くライブラリの作り方が書かれているので参考にするつもり。


package {
 import flash.display.Sprite;
 import flash.display.Loader;
 import flash.events.Event;
 import flash.events.ProgressEvent;
 import flash.net.URLRequest;
 import flash.net.URLStream;
 import flash.utils.ByteArray;
    
    public class LoadBinaryURLStream extends Sprite {
        private var stream :URLStream; 
        private var request:URLRequest;
        private var data:ByteArray;
        private var loader:Loader;
        public function LoadBinaryURLStream(){
            data = new ByteArray();
            request = new URLRequest("img/pic.jpg");
            loader = new Loader();
            addChild(loader);
   
            stream = new URLStream();
            stream.addEventListener(Event.COMPLETE, onComplete);
            stream.addEventListener(ProgressEvent.PROGRESS, onProgress);
            
            stream.load(request);
        }
  
        private function onComplete(e:Event):void {
            loader.loadBytes(data);
        }
  
        private function onProgress(e:ProgressEvent):void {
            stream.readBytes(data, data.length);
            if(data.length > 1024) {
                data.position = Math.floor(Math.random()*data.length)-1;
                if(data.position<1024) {
                    data.position += 1024;
                }
                data.writeByte(0);
            }
        }
    }
}

as3corelibのJSONクラスを使ってNew York TimesのAPIからデータを取得する2

2009-03-20T05:55:00.006+09:00

JSONというのが何なのかというのが今回の話題。

詳しくは公式ドキュメントなりwikipediaなりを読むとして、とりあえずはXMLなどのようなデータフォーマットの一種であると。JavaScript Object Notationが正式名称だけど、JavaScriptのオブジェクトの表記をベースにしているというだけで、JavaScript以外でも使える。
"キー":値というシンプルな形。入れ子にもできる。
例:


{
  "name":"hayashi", 
  "age":26, 
  "occupation":[
    {"main":"designer"},
    {"sub":"programmer"}
  ]
}

前回のプログラムで、loaderから読み取ったデータをそのまま出力してみる(loader.dataをtraceする)と、このような形式の文字列が出力されているはず。

で、あとはXMLと同じようにドットとキーで欲しい値にアクセスする。
前回のソースの27行目を下のように一旦オブジェクト型の変数に格納する形にして、
var o:Object = JSON.decode(loader.data);

o.tokensで何てキーワードで検索したかとか、o.totalで何件ひっかかったとかが取得できる。

o.resultsはリクエストに合致した記事のデータがそれぞれ配列になっていて、o.results[0].titleで1件目の記事のタイトルを取得したり、o.results[2].bylineで3件目の記事の筆者を取得したりできる。o.results.lengthで結果の総数を得てfor文と一緒に使うケースが多いと思う。

この辺のキーの与え方に関しては返ってきたデータ(loader.dataでtraceした結果)を見ながらの作業になる。

視覚化の方法についてはまた次回。

actionscript2とpapervision3D

2009-03-20T00:49:00.005+09:00

papervisionXがどうとか騒がれている2009年の3月ですが、Flash Player8(もしかすると7)で3Dっぽいものを動作させなければならないのでpapervisionについて調べてる。
が、古い情報はなかなか見つからない。検索結果と見られるページ全部をある時期に戻せたらいいのに。メディアアートに文化財保存修復学科的なものがあればいいのに。

svnからpapervision3Dを全部check outすると、一応as2のsrcもあるのだけど、as3用のpritivesのようなSphereやCylinderがない。wikiにあるとの情報だったが、wikiもう見られない。

3Dに関しては全然知識がなく、ここ数日でわかったことは、立体を作るためには三角形をひたすら組み合わせるということ。

自分で書くのは大変そうなのでinternet archiveで探してサルベージ。

objectフォルダに入れておく。とりあえずSphereは動いた。
ファミコンで鉄拳2とか観て自分を奮い立てる。


import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.scenes.Scene3D;

import org.papervision3d.objects.Sphere;

var container:MovieClip;
var scene:Scene3D;
var camera:Camera3D;
var sphere:Sphere;

init3D();
this.onEnterFrame = loop3D;

function init3D():Void {
 container = this.createEmptyMovieClip("container", this.getNextHighestDepth());
 container._x = 275;
 container._y = 200;
 
 scene = new Scene3D(container);
 
 camera = new Camera3D();
 camera.z = -2000;
 camera.zoom = 1;
 camera.focus = 500;
 
 var material:WireframeMaterial = new WireframeMaterial(0xffffff);

 sphere = new Sphere(material, 400, 10, 10);
 
 scene.push(sphere);
}

function loop3D():Void {
 sphere.rotationY = container._xmouse / 2;
 sphere.rotationX = container._ymouse / 2;
 
 scene.renderCamera(camera);
}

steering behaviorのメモ

2009-03-07T01:11:00.004+09:00

seekがターゲットに向かう動き、fleeがターゲットから遠ざかる動き。まずこれを押さえる。
ここからflockするために、cohesion、separation、alignmentを加えるんだけど、

cohesionは仲間の平均の位置をseekすることで、separationは近づき過ぎた仲間からfleeすること、alignmentは仲間の平均の速度に合わせること。

基本はAdvanced ActionScript 3.0 Animationで勉強した。
最近また新しいサンプルが増えたnature of codeもよくわかる。
どちらも大元にあるのはcraig reynolds。
Steering Behaviors For Autonomous Characters

nature of codeは夏に本が出るらしい。
Nature of Code Book at daniel shiffman

早速メーリングリスト登録した。

as3corelibのJSONクラスを使ってNew York TimesのAPIからデータを取得する

2009-03-03T13:27:00.013+09:00

ProcessingでNew York TimesのAPIからデータを取ってきて視覚化するサンプルを参考に、ActionScript 3.0で実現してみます。
Processing, JSON & The New York Times | blprnt.blg

環境はMac OS 10.5.6、Flex SDK 3、Xcode 3.1です。

まずNew York TimesのDevelopper Networkにアクセスしてアカウントを作成し、API KEYを取得する必要があります。
Times Developer Network - Welcome

色々ありますが今回はThe Article Search APIを使います。
レスポンス形式はJSON。

ActionScriptでJSONを扱うには、as3corelibを使うのが良いと思います。
as3corelib - Google Code
ファイルをダウンロードして解凍したら、libというフォルダにas3corelib.swcというファイルがあるので、それをFlex SDKのframeworksフォルダに入っているlibsの中に入れます。

新しいプロジェクトを作って、NYTimesTestと名付けます。
2005年1月1日から2009年3月3日まででObamaという言葉がいくつあるかというプログラム。

NYTimesTest.as


package {
 import com.adobe.serialization.json.JSON;
 
 import flash.display.Sprite;  
 import flash.events.Event;
 import flash.events.IOErrorEvent;
 import flash.net.URLLoader;
 import flash.net.URLRequest;

 public class NYTimesTest extends Sprite {
  private var baseURL:String = "http://api.nytimes.com/svc/search/v1/article";
  private var apiKey:String = "取得したAPIキー";
  private var word:String = "Obama";
  private var beginDate:String = "20050101";
  private var endDate:String = "20090303";
  
  public function NYTimesTest() {
   var loader:URLLoader = new URLLoader();
   
   loader.load(new URLRequest(baseURL+"?query="+word+"&begin_date="+beginDate+"&end_date="+endDate+"&api-key="+apiKey));
   loader.addEventListener(Event.COMPLETE, decodeJSON);
   loader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
  }

  private function decodeJSON(e:Event):void {
   var loader:URLLoader = URLLoader(e.target);
   var totalArticles:uint = JSON.decode(loader.data).total;
   trace("there were " + totalArticles + " occurences of the term " + word + " between " + beginDate + " and " + endDate);
  }
  
  private function ioErrorHandler(e:IOErrorEvent):void {
   trace("ioErrorHandler: " + e);
  }
 }
}

Flash CSを持ってなくてFlex SDKで開発している場合、Flash Playerで普通に再生しても何も起こらないと思います。Flash Playerのdebugger versionsと、その他色々と設定が必要です。
Archived Flash Players available for testing purposes
flickr APIの時にやった色々設定(今気付いたけど01って何...続きないし)
hysysk:blog: using flickr api 01

フォルダはアカウントの権限とか環境によって変わるのかも。

今の僕の環境では

ユーザ名/ライブラリ/Preferences/Macromedia/FlashPlayer

の中に#Securityというフォルダがあり、その中にFlashPlayerTrustフォルダを置いて、mms.cfgを格納しています。ない場合は作って下さい。
最近は通信関係を開発しているフォルダはまとめてこのファイルで指定しています。

traceした結果はこのFlashPlayerフォルダの中のLogs/flashlog.txtに出力されています。これもない場合は作って下さい。

there were 9595 occurences of the term Obama between 20050101 and 20090303

と出れば成功。
次回(!)以降データの中身をもう少しみていくつもり。

あとこのblprintの人が書いてるActionScriptの本が面白そう。彼だけでなくJonathan HarrisとかAaron KoblinとかProcessingの強者達が書いてる。値段が変動してるな。
Amazon.co.jp： Best Practice: The Pros on Adobe Flash: Douglas Easterly: 洋書

E15:oGFx

2009-02-14T18:23:00.006+09:00

alpha版出た(Mac OS10.5のみ)。
http://ogfx.mitplw.com/
pythonベースで、processingとかnodeboxみたいな感じで書ける。
アニメーションを実行させながらコードを書き換えられるon the flyなスタイル。

今のところスクリプトの保存はwebに。
http://e15web.media.mit.edu/users/52
この仕組みいい。
見るためには登録しないといけないかも。

保存したらすぐスクリーンショットができてページが作られてる。
そういうところがどうなってるのか気になったり。

何かエラー出た後直してもちゃんと動かなかったり、deleteしたらポインタが変なとこに行ったりして不安定なところがある気がするけど、楽しい。新鮮。
あと止め方がわからない。

mousine

2009-02-07T13:42:00.002+09:00

前にjavaでこんなの書いた気がするけど、actionscriptでマウスの動きに合わせて
周波数と振幅変えるコードをwonderflに書いた。
mousine

普通にマウス位置を取得して周波数や音量に入れると波形が急激に変化してブツブツノイズが入ってしまうので、アニメーションを滑らかに動かすのと同じ要領で、波形を書き込む前にfreqとampの値を滑らかに変化させている。onEnterFrame()はsampleData()が実行された後で実行されるので、2048サンプル分ごとにマウスから値を取得し、新しい周波数と音量を設定していることになる。8192サンプルだと反応が遅いと感じる。この辺りは悩ましいところ。
Adobe - デベロッパーセンター : Flash Player 10で広がるFlashの音の世界
SampleDataEvent - ActionScript 3.0 言語およびコンポーネントリファレンス

滑らかな数値の変化のさせ方は結構面白くて、アニメーションで使われている手法を音にも適用してみたい。
CBCNET - 土日 Flash のススメ(4)：動きをつけるということ（イージングについて考える）

toxi audio!!!

2009-01-25T23:10:00.003+09:00

以前フォルダだけはあるなーと思ってたtoxiのaudioutils、できてた。
toxiclibs - Google Code

JOALがバンドルされてて3次元音響が鳴らせる。
サンプル動かしてみ。
geomutilsとprefutilsも必要なので一緒にdownloadしてLibrariesフォルダに入れとく。

toxi rocks!

20081228

2008-12-28T02:08:00.003+09:00

2008と打つのももう最後かも。

少し部(署の)活動とかがありつつも無事仕事は納まった。働き始めて約半年。実は結構色々やった。案件毎にフォルダを分けて、日付毎に管理してるので、pastのフォルダを見るとそれがわかる。進行中のはongoing。

手を動かしてグラフィックを作る以外にも店舗調査したり企画書書いてみたり。タクシーの乗り方も学んだ。

興味の幅が広がった。サービスデザインやビジネスモデルの提案は、僕自身はあまり深くは関わっていないけれども、同じ部屋で会議してたり、雑談してたりして、色んな単語が勝手に耳に入ってくる。CRM、JITボックス、テキストマイニング、マーケットイン、プロダクトアウト。。。検索すると沢山でてくるけど、今まで全く知らなかった世界。まだまだある。

山口行ってからというもの、週末はどこかに行きたくてしょうがない。今回の山口で行ったspongyとか金子さんの作品が売っている店はナガオカケンメイの「デザイン物産展」にもBRUTASの地方特集にも載ってない。まだまだある。

学生時代よりは気分的に自由になって、割と何でもやるよという感じ。以前は興味と関係ないことはストレスでしかなかったけど、今はそういうものこそが新しい自分を作っていってくれてると思える。

20081206-20081207

2008-12-08T22:13:00.005+09:00

12/6
木曜日くらいに中西君から山口行きのお誘いを受ける。いつも週末に持ち越し気味の仕事にキリをつけてprocessing monsterもやって、始発の飛行機(6:40)も予約して準備万端だったのに、目覚めた時には飛行機は飛んでました。

とりあえずシャワーを浴びて、冷静になって、携帯で羽田-山口宇部の空席状況を確認。そのまま予約できるのはもっと後の時間になるので「遅れます」と留守電を入れて羽田行きの電車に乗り込む。

9時過ぎに空港到着。このメンツ、このやり方、この曲でロックし続けるタイミングは多分もうないので、時価だと思ってビジネス特割のチケットを払い戻し、10時のフライト購入。

12時過ぎに宇部到着。雪。バスで新山口へ。雪強い。電車遅れる(そして少ない)。街中を舞台にしたパフォーマンス「山口市営Ｐ」の予約時間には間に合わないので山城に頼んで調整してもらう。

14時山口駅到着。歩いて会場を目指す。14:10の回。ドイツ人家族の3人に割り込ませていただく形になった。20年山口に住んでるそうで、現在は山口大学で教鞭をとられているとのこと。

「山口市営P」は山口市の商店街を舞台にして、様々なイベントを体験する。呉服店から始まり、古いタバコ屋さんの中だったりアーケードの上だったりスナックでおしるこを食べて裏口から出るとか、多分地元の人でも知らなかったり、あそこってどうなってるんだろうと思ってても行けないようなところに行けた。

アーケードの上は、多分僕だけじゃなくて、小さい頃から上ってみたい人はいたんじゃないかと思う。洗濯物などが干してあるため撮影は禁止となっていたが、変わった作りの建築や、都市の作られ方が見えて面白かった。アーケードがある街はアトラクションとして売り出せばいいと思う(広告脳)。

郊外に大型店舗ができ、街の中心部の商店街に活気がなくなって...というのはどの地方都市でも抱えている問題。彦根もそうだし、大垣もそうだった。僕は郊外の大型店舗も大好きなので、それぞれがそれぞれの良さを保ちつつ経済を循環させればいいと思うが、難しいのだろう。ピーターサヴィルがマンチェスターの都市計画クリエイティブ・ディレクターになったような感じで(うまくいってるかどうかはよくわかりませんが)、何かできないものだろうか。

「MASSIVE CHANGE」というブルース・マウの本に、「For most of us, design is invisible. Until it fails.」という言葉がある。多分、僕が信じてるアートも同じようなことで、見えていなかったものを見せてくれる。普段とは違う見方、違う距離感で、対象と向かい合うこと。向かい合わざるを得なくなる状況というか。自分の意識だけじゃなくて、向こうからガツンとくる感じも必要な訳で。

アーケードから屋上をつたって本屋を抜け、細い道の中から空き地を通ってゴール。ここで中西君、ノダモと合流。ひたすら平謝り。そして何故かYCAM関係者はじめ知人の全員が僕の遅刻を知っている。

しばらく歓談した後、秋吉台の芸術村で働いてる服部君の紹介でsponzyのマフラーや帽子を試着しまくる。とても素敵。巻物を購入。あと太いフレームの眼鏡と黒っぽい服と輸入車への興味があればクリエイターになれる。

YCAMへ移動し「minimum interface」。マルちゃんに案内してもらいつつ、takawoやzachの作品を展覧会場によくいる理屈っぽいうぜーやつになりつつ鑑賞。shinchikaの映像がとてもよかった。多分本当に好きなものとかは自分と違うと思うけど、世界の広さのようなものを感じて嬉しかった。

夜御飯の前に「湯田アートプロジェクト」へ。exonemoの毎度ながら気の利きまくった作品、UVAのクリスマスイルミネーション的なインスタレーション、足湯に入りながらのshinchika(すごい制作量)の映像作品、規模としては大きくないが満足度はかなり高い。3という数字のマジックについて話す。

御飯はIAMASのOBOGが揃って仕事の話や恋愛の話、マルちゃんの高校時代の話(実のお姉さんによる)など。2次会では市営Pのスタッフとも合流して突っ込んだ話など。皆それぞれ自分の道を進んだ結果の今ここだなという感じ。

3時頃山城と服部君が住んでるMarumachi Art Center(通称MAC)で就寝。素敵な一軒家。秋吉台で滞在制作している有佐君はお仕事。

12/7
朝8時に起きて温泉かと思いきや余裕で昼まで寝る。服部君に車を出してもらい寿司。14時過ぎ服部君は再び市営Pへ、中西君とノダモと僕は親子3代で来たい感じの温泉「山水園」へ。ウルトラリラックス。

3時半頃YCAMのレストランでコーヒー飲んで、服部君と合流して秋吉台へ。萩焼の作家金子司さんの作品を扱うお店でマグカップ購入。洒落てる。オレオレ日本物産展。

カルスト台地で一通りはしゃいで、商店街の皆に挨拶して僕と中西君は空港まで送ってもらう(本当にありがとうございました)。高速移動と温泉で疲れなし。羽田のアカシアで御飯食べながらこれからの話など。

ここ半年で最高の週末。これからもフットワークは軽めでいきたい。基本的に僕は都内から出たくない症候群(川を渡ればすぐ神奈川)で、インターネット最高主義者だけど、実際に動くことも大事。そのためにも一生懸命仕事して、お金を貯めようと思った。あと誰かが来たときのために自分の住んでる土地にもっと馴染もうとも思った。

「遠くである必要はなく、近くの路地裏にも異世界はあるかも知れない」、みたいな話を石川直樹がしてて、かっこつけ過ぎだろと思うけどあながち嘘でもない。

forward kinematics

2008-11-23T05:42:00.004+09:00

関節みたいな動きのプログラミング。
ActionScript 3.0アニメーションからporting。
PVectorクラスを使ってみた。
Processing Monster作りたい。

walking.pde


Segment s1, s2, s3, s4;
float cycle = 0;
float offset = -PI*0.5;

void setup() {
  size(200, 200);
  smooth();
  frameRate(30);
  fill(255);
  s1 = new Segment(width*0.5, height*0.5, 30, 10);
  s2 = new Segment(s1.getPin().x, s1.getPin().y, 30, 10);
  s3 = new Segment(width*0.5, height*0.5, 30, 10);
  s4 = new Segment(s3.getPin().x, s3.getPin().y, 30, 10);
}

void draw() {
  background(255);
  walk(s1, s2, cycle);
  walk(s3, s4, cycle+PI);
  cycle += .2;
}

void walk(Segment segA, Segment segB, float cyc) {
  float angleA = sin(cyc) * HALF_PI*0.25 + HALF_PI;
  float angleB = sin(cyc+offset) * HALF_PI*0.17 + HALF_PI*0.12;
  segA.rotation = angleA;
  segB.rotation = segA.rotation + angleB;
  segB.x = segA.getPin().x;
  segB.y = segA.getPin().y;
  segA.render();
  segB.render();
}

Segment.pde


class Segment {
  float x;
  float y;
  float w;
  float h;
  float rotation;
  PVector v;
  
  Segment(float x, float y, float w, float h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    v = new PVector();
  }
  
  void render() {
    pushMatrix();
    translate(x, y);
    rotate(rotation);
    rect(0, -h*0.5, w, h);
    ellipse(0, 0, 2, 2);
    ellipse(w, 0, 2, 2);
    popMatrix();
  }
  
  PVector getPin() {
    v.x = x + cos(rotation) * w;
    v.y = y + sin(rotation) * w;
    return v;
  }
}

20081110

2008-11-10T23:28:00.003+09:00

20081108
make tokyo meeting 02行って来た。案の定同窓会と化して挨拶ばかりしていた。
インターネットでおなじみの人達にも会えて良かった。もっと話したかったけど。
ガセネタリウムは確かに佐竹の言葉通り「make:の精神を見た」。

中西君がエディトリアルしたmaking things talkを買おうと思ったが売り切れ。
学食も終わっていて失われた青春が帰ってくることはなかった。

20081109
食べ過ぎで寝過ぎ。会社で亀の世話をしつつプログラミング。making things talkがないので手で餌をやってぶちまける。natzkeのas3のコードを自分なりの解釈でp5にポーティング。気づいたら妖怪終電逃しに会う。

20081110
今月末メディアリテラシーの授業でprocessingを紹介することになったのでランチがてら打ち合わせ。完璧なプログラミングは教えられないけど、初心者がつまづくところには気づけるかも知れないし、アートとデザインの文脈でそれなりに話せることはあるつもり。人のワークショップの資料読みながらどうするのがいいのかとか考える。

仕事もちゃんとした。芸コマ。

build ribbons

2008-11-04T22:46:00.012+09:00

erik natzkeのflash on the beachの発表なのかな。jonathan harrisへのレスポンスと一緒に上げられてた気がするけど。
Untitled Document
Flash on the Beach and “The Jonathan Harris Affair” | THOMAS KRÄFTNER

これのParticlesのソース見て、動かしてみて、この書き方がいいのかどうかは知らないけどprocessingでもループ内でnewしてParticlesを生み出したいと思った。最初に思いついたのが配列を使って実現する方法。サイズの宣言と値を代入する必要があるので、適当に埋めてやってたんだけど、ださい(し、これでは意味がない。最初に決まった数のオブジェクトを作るんじゃなくて、ループの度に増やしたい)。

とりあえずParticleクラス
Particle.pde


class Particle {
  float x;
  float y;
  float vx;
  float vy;
  float rad;
  
  Particle(float x, float y, float vx, float vy, float rad) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.rad = rad;
  }
  void draw() {
    x += vx;
    y += vy;
    ellipse(x, y, rad, rad);
  }
}

実行するメインのコード。
particleTest1.pde


Particle[] p = new Particle[500];
int idx = 0;
float rad = 10;
void setup() {
  size(800, 400);
  fill(0);
  smooth();
  for(int i=0;i<p.length;i++) {
    p[i] = new Particle(0,0,0,0,0);
  }
}

void draw() {
  background(255);
  spawnParticles();
  drawParticles();
}

void spawnParticles() {
  if(idx>p.length-1) {
    idx = 0;
  }
  float vx = random(-1, 1);
  float vy = random(-1, 1);
  p[idx] = new Particle(mouseX, mouseY, vx, vy, rad);
  idx++;
}

void drawParticles() {
  for(int i=0;i<p.length;i++) {
    p[i].draw();
  }
}

actionscript3の場合は描画されるオブジェクトはディスプレイリストで管理されるから、addChildでひたすらオブジェクトを追加しつつ増え過ぎたら削除、みたいな書き方ができる。
processingでもそんな方法はないのかなと思ったらサンプルにあった。
ArrayListClass \ Learning \ Processing 1.0 (BETA)

これはBallクラスにlifeプロパティをもたせてあり、255回ループで呼ばれたらfinished()メソッドがtrueを返して、ballsから削除されるようになってる。

(Example>Topics>Simulate>MultipleParticleSystemsとかもいい。nature of codeでやったVector3DクラスがPVectorクラスとして組み込まれてる。各メソッドについてもサンプルがついてて親切。)


for (int i = balls.size()-1; i >= 0; i--) {

は毎回balls.size()を参照しなくてもいいようにするかっこいい書き方。

というのを参考にしつつ、一定数超えたら削除していく方法で書き直したのがこれ。前出のParticleクラスはそのまま使える。
ArrayList使った思い通りの方法。
particleTest1_2.pde


ArrayList particles;
float rad = 10;
void setup() {
  size(800, 400);
  fill(0);
  smooth();
  particles = new ArrayList();
}

void draw() {
  background(255);
  spawnParticles();
  drawParticles();
}

void spawnParticles() {
  float vx = random(-1, 1);
  float vy = random(-1, 1);
  particles.add(new Particle(mouseX, mouseY, vx, vy, rad));
  if (particles.size()>500) {
    particles.remove(0);
  }
}

void drawParticles() {
  for(int i=particles.size()-1; i >= 0; i--) {
    Particle p = (Particle)particles.get(i);
    p.draw();
  }
}

(11/7修正)重力のための変数gravityを削除。まだ関係ないので。

non-formatize

2008-11-02T23:24:00.008+09:00

六本木のTSUTAYAでお洒落なデザイン本などを眺めていたら発見したnon-formatの作品集。
これの左上。
で大体やりたいことはわかると思うけど、やってみました。

輝度が低い、暗いとこは振幅を大きくして、線が重なることで濃くしてある。だけ。
オリジナルに近づけるにはもうちょっと詰める必要あるな。元画像の作り方にも左右されると思うけど。

モナリザの画像探してる時に見つけたこんなんもある。錯視とかもっと勉強したい。

トラック毎に切り分けて音で聴けるようにしたいところだけど、それはまたいずれ。
最新版(0154)だとminim音鳴らないし。
Processing 1.0 (BETA) - Minim problem... I can't hear ANYTHING

flashでもできるな。BitmapDataクラスでgetPixel()して、値をSampleDataEventに渡す感じだろうか(地味に昨日flashでsine wave鳴らすの直した)。ファイル書き出しもできるからwaveファイルとかも作れるし(miztにソースいただきました)。

ビジュアルからインスパイアされて誰にでも説明できる方法で音作りに持っていけるようになったのはよかったよね。

scriptographerでやりたい。


PImage img;
int x = 0;
int y = 0;
int imgW;
int imgH;
float val;
float amp;

background(255);
colorMode(HSB, 255);
img = loadImage("lisa.jpg");
imgW = img.width;
imgH = img.height;
size(imgW*2, imgH);
image(img, 0, 0);

loadPixels();
for(y = 0; y < imgH; y++) {
  for(x = 0; x < imgW; x+=5) {  
    val = brightness(pixels[y*imgW*2+x]);
    amp = (255-val)*0.05;
    stroke(100, amp+100);
    line(imgW+x-amp, y, imgW+x+amp, y);
  }
}
saveFrame("nonformatize.jpg");

sketch20081012

2008-10-12T07:11:00.005+09:00

ドキュメントの左下(0, 0)から選択したオブジェクトのパスにアンカーポイントを追加して線を引く。curvesToPoints()の第二引数がよくわからない。


var sel = document.getMatchingItems(Path, { selected: true });
for(var i=0; i<sel.length; i++) {
 var art = sel[i];
 art.curvesToPoints(10, 1);
 for(var j=0; j<art.curves.length; j++) {
  var p = new Path();
  p.moveTo(art.curves[j].point1);
  p.lineTo(0,0);
 }
}

scriptographer Timer class

2008-09-24T16:34:00.003+09:00

Helpより。
1秒毎に円を描いてx位置が500pixelを超えたら止まる。
timerTest.js


var x = 0;
var timer = new Timer(1, true);
timer.start();
timer.onExecute = function() {
 document.createCircle(x, 100, 10);
 
 if(x>500) {
  timer.stop();
 }
 x+=10;
}

sketch20080924

2008-09-24T01:36:00.006+09:00

Actionscript3.0アニメーションを参考にしたscriptographerでの3Dのスケッチ。
flは焦点距離で、vpX、vpYは消失点(vanishing point)。
ball3D.js


//A4 size
var w = 596;
var h = 842;
var back = document.createRectangle(new Rectangle(0, 0, w, h));
back.style.fill.color = new RGBColor(0, 0, 0);
var fl = 250;
var vpX = w/2;
var vpY = h/2;
var numBalls = 1000;
function drawBall(x, y, z, rad) {
 if(z > -fl) {
  var scale = fl / (fl+z);
  x = vpX + x * scale;
  y = vpY + y * scale;
  rad = rad * scale;
 }
 var b = document.createCircle(x, y, rad);
 b.style.fill.color = new RGBColor(255, 255, 255);
 b.opacity = scale * 0.7 + 0.3;
}

for(var i=0; i < numBalls; i++) {
 drawBall(Math.random() * w - w/2, Math.random() * h - h/2, numBalls - i, 10);
}

drawCircles

2008-09-22T22:25:00.007+09:00

scriptographerで円を描く。Documentクラスが持ってる関数を使う。


document.createCircle(x, y, radius);

xとyを中心点とした半径radiusの円が描かれる。
他にも興味深い関数がいくつかあるのでまた試す。

ランダムに色を選びつつ透明度と線の太さを変更。
こういうのは手作業やブレンドツールでやろうとしても難しいのではないかと思う。

drawCircles.js


var radius=10;
var xOff=250;
var yOff=450;
for(var i=0; i<10; i++) {
 for(var j=0; j<10; j++) {
  var circle = document.createCircle(xOff+i*radius*2, yOff+j*radius*2, radius);
  circle.style.fill.color = new RGBColor(Math.random(),Math.random(),Math.random());
  circle.style.stroke.color = new RGBColor(Math.random(),Math.random(),Math.random());
  circle.style.stroke.width = (i+j)/2;
  circle.opacity = (i+j)/20;
 }
}

再びscriptographerに興味を持ち出したのはjonathan puckeyのDelaunay Rasterがかっこよすぎたからで、これこのままvjできるっていうか、昔illustratorでプレゼンやって怒られたり怒られなかったりしたんだけど、illustratorで絵を描くことがそのままパフォーマンスになる。scriptographer0.5だと他のオブジェクトに跳ね返りながらパスを描いていくスクリプトがあって、それも同じような面白さがあった。Timerクラスが変わったみたいで実装方法がわからない。

今のところforumを読むのが一番勉強になりそう。
来年jonathanが授業でscriptographerやるって言ってるのが楽しみ。

情報少ないけど、その分キレキレで純度が高いアウトプットに出会える。

20080914

2008-09-14T23:39:00.004+09:00

この3ヶ月は仕事でコードを書くことはほとんどなく、ひたすらillustratorとphotoshopだった。
やってたのは主にカンプとかポンチ絵とか呼ばれるプレゼン用のイメージ作りで、学生時代は馬鹿にしてたhow toものがすげー役に立った。というか、こういう用途で使うために存在してるんだね。
Photoshop Tutorials - PSDTUTS
Illustrator & Vector Tutorials - VECTORTUTS

USBとか作ってどうすんの？とか思うだろうけど、何かしらプレゼントとかグッズとかの企画を考える人がいて、それを絵に起こす仕事がある訳です。見せられないのが残念だけど、変なところに凝ってたりして結構笑える。合成とか参考にするための写真をflickrから探したりするのもautopagerizeとかldrizeのお陰で相当助かってます。

探すイメージはネットだけじゃなくて本とか雑誌もあるので、本屋で本当に片っ端から開いて「使う」視点で見る。「あの写真の手をこの写真の手にしよう」とか。何か新しいチャンネルが開いた。そんでいかに先輩がちゃんと今のファッション誌とかの流れに乗っかってタイポグラフィ選んだりグラフィック作ってるかってのがわかった。

ycamでのopenframeworksのworkshopに会社から参加させてもらえることになった。半人前なのに個人的な作家活動も応援してもらっていて(どちらかというとさぼってるから怒られてるくらいで)、そういう投資的な、明日から現場で即使えるようなものじゃなくても面白がってもらえる環境というのはありがたい。

getting started with scriptographer

2008-09-14T18:44:00.011+09:00

scriptographer、色々エフェクトを試す分にはいいけど、自分で一からコードを書く場合どこから始めればわからなかったので、ちょっと調べた。環境はCS3。

General Scriptsに分類される、三角のPlayボタンを押して実行するタイプのものから。scriptsフォルダのscripts以下に入るやつ。

illustratorを起動して、書類のアイコンをクリック。drawline.jsという名前をつけて、scriptsフォルダの中に保存。Mainのコンソールのscriptsの中にdrawline.jsが出来ているはず。ダブルクリックすると何かしらのエディタが立ち上がる。

色々と他のソースを読むと、線を描くにはどうやらPathクラスを使えばよさそう。
Pathクラスのインスタンスを作る。


var p = new Path();

actionscriptと同じように、描画する点へ移動する場合moveTo(x, y)を使う。ペンを置くイメージ。


p.moveTo(0, 0);

目的の点まで線を引くのはlineTo(x, y)。ここが次の線の開始点にもなる。置いたペンを動かすイメージ。


p.lineTo(100, 100);

この3行を書いて保存。Reloadボタン(矢印が2つ回転してるやつ)を押して、Playボタンを押す。
アートボードの左下から右上に向かって線が引かれたはず。

3行目を少し書き換えてみる。


for(var i=0;i<100;i++) {
 p.lineTo(i*5, Math.random()*100);
}

とか。
オブジェクトに対して「フィルタ>パスの変形>ラフ」でギザギザ選ぶのと同じような感じ。コードと手作業でうまく行き来ができると嬉しい。

ちなみに多分scriptographer入れたせいで、illustratorで印刷をするとconsoleにエラーが表示されて、tabを2回押さないとアクティブにならなくなりました...。

Encapsulation

2008-09-05T23:10:00.002+09:00

前回の続き。短いけど。
何でメインになるプログラムのところでt.x++とかして値を代入しないのか、という話。
tを動かすには速度を代入すればいいから、普通の感覚だとt.x += vx;って感じにすると思う。

これはEncapsulation(カプセル化)というやつで、オブジェクト指向プログラミングの基本のひとつ。クラスの外から値を変えたりできないようにする。単純に言うと「オブジェクトのデータに直接アクセスするのではなく、メソッドを使え」ということらしい。
つまりt.go()で動くようにThingクラスを作っておくという訳。

なんだけど、Vectorクラスについては変数をパブリックにしておくと何かと便利なので、今回は例外にして、別のクラスでちゃんとやろうとのこと。Actionscript3.0アニメーションもそんな感じだったな...(13ページの「クラスとOOP」参照)まぁでもその程度のレベルでもこれだけのことができるってのがポイントだと思うので、あんまり堅く考え過ぎないようにしよう。

Vectors

2008-08-09T23:10:00.011+09:00

nature of codeをちゃんとやろうと思った。何となく読んだりコード書き換えてみたりはしてたんだけど、いくつか勉強しておきたい項目を取り上げて書くつもり。まずはVectorsから。実はVector3Dクラスが何をしてるのかとかよく理解してなかった。

motion 101のメインになる部分(hellomotion.pde)とThingクラスの余計なところを削って円の動きだけに注目。Vector3Dクラスを使うにはVector3D.javaをAdd File...でスケッチフォルダに追加するかライブラリを入れてimport noc.*;と書いておく必要がある。

vec3dmotion.pde


Thing t;
void setup() {
  t = new Thing(new Vector3D(0.01, 0.01), new Vector3D(0, 0), new Vector3D(0, 0));
}

void draw() {
  background(204);
  t.go();
}

Thing.pde


class Thing {
  Vector3D loc;
  Vector3D vel;
  Vector3D acc;
  
  Thing(Vector3D a, Vector3D v, Vector3D l) {
    this.acc = a.copy();
    this.vel = v.copy();
    this.loc = l.copy();
  }
  
  void go() {
    update();
    borders();
    render();
  }
  
  void update() {
    vel.add(acc);
    loc.add(vel);
  }
  
  void borders() {
    if(loc.x > width) {
      loc.x = 0;
    }
    if(loc.x < 0) {
      loc.x = width;
    }
    if(loc.y > height) {
      loc.y = 0;
    }
    if(loc.y < 0) {
      loc.y = height;
    }
  }
  
  void render() {
    ellipse(loc.x, loc.y, 10, 10);
  }
}

位置は点(Points)であり、速度/加速度はベクトル(Vectors)。コーディングをシンプルにするために、これらを全てベクトル(大きさと方向)として扱う。

setup()メソッドの中でThingクラスのインスタンスを作る時に、Vector3Dのインスタンスを生成して値を渡してるんだけど、この時の引数が2つ(new Vector3D(x,y))だと2次元、3つ(new Vector3D(x,y,z))だと3次元になる。実際には2つの場合はzに0が入るというだけなのでVector3Dのインスタンスは常にx,y,zで3次元の値を持ってるんだけど。

Thingクラスのコンストラクタではcopy()メソッドを使って、先ほど生成されたVector3Dクラスのインスタンス変数からThingクラスのインスタンス変数に値をコピーして格納してる。

加速度から速度を導いて、速度から位置を導く、という流れ。

Vector3D使わないとすればこうなる。
normalmotion.pde


Thing t;
void setup() {
  t = new Thing(0.01, 0.01, 0, 0, 0, 0);
}

void draw() {
  background(204);
  t.go();
}

Thing.pde


class Thing {
  float x;
  float y;
  float vx;
  float vy;
  float ax;
  float ay;
  
  Thing(float ax, float ay, float vx, float vy, float x, float y) {
    this.ax = ax;
    this.ay = ay;
    this.vx = vx;
    this.vy = vy;
    this.x = x;
    this.y = y;
  }
  
  void go() {
    update();
    borders();
    render();
  }
  
  void update() {
    vx += ax;
    vy += ay;
    x += vx;
    y += vy;
  }
  
  void borders() {
    if(x > width) {
      x = 0;
    }
    if(x < 0) {
      x = width;
    }
    if(y > height) {
      y = 0;
    }
    if(y < 0) {
      y = height;
    }
  }
  
  void render() {
    ellipse(x, y, 10, 10);
  }
}

これはこれでわかりやすい。けど多分後々Vector3Dが効いてくるんだと思う。

ベクトルとかの数学的な概念とか、コード使ったアニメーションで勉強になるのは『ActionScript 3.0 アニメーション』。
スクリプトだけで全部やるからflash持ってなくても動くものが作れる。flex環境のセットアップとかも丁寧に書いてあるしその辺は検索すれば出てくる。値段は高いけど、夏休み(もう大分過ぎてますが)にこれ1冊やると思えばどっか遊びに行くより楽めるし安い。続編も出るらしいし。

processingとActionscript3.0の行き来はそれほど苦ではないと思うので、両方読み書きできるといいと思う。既に使えるソースコードが沢山公開されてる訳だし。

今までは使えそうなコードを集めて勘でプログラミングしてたんだけど、細かい調整できるようにそろそろスクラッチでも色々ちゃんと書けるようになりたい。DJからトラックメイカーへ。

自前のblog環境整えないとな、と思う。かゆいところに手が届かないストレスで投稿が減ってるってのもあるから、何とかしたい。

20080727

2008-07-27T18:43:00.004+09:00

昨日はボ会というボードゲームをする会に参加させてもらって、朝までボードゲームやってた。大人数で時間とってゲームやる機会なんてあんまりない(1プレイ半日かかるやつとかもあるらしい)し、色んなゲームができたのが単純にすげーよかった。相当好きな人達が集まってるので、ゲームの由来だとかコンセプトの話聞くだけでも相当楽しい。

最後のゲームで1位になって、賞品としてStone Ageというゲームを頂きました。ありがとうございます。

会社の先輩に誘われて行ったんだけど、主催が佐々木さんっていうIAMASの先輩だった。大橋さんもいた。この二人はIAMAS入学前にめちゃwebみてた。佐々木さんのインタラクティブなアニメとか、大橋さんのコマドリ兄弟とか倉橋ヨエ子のPVとかすげー覚えてる。ご活躍されてます。

ショーケンとかもそうだけど遊び方がうまい人っているなぁと思う。基本的にはコミュニティの作り方だと思うけど。

皆で人狼やりたい。diamantsも盛り上がるし、小物が洒落てる。Cash'n Gunsとかごきぶりポーカーも良かったな。
昔は割と親が人呼ぶの好きで、結構大人数でボードゲームとかカードゲームやったりした記憶がある。今生きてるモチベーションの大半はそういうのをまたやること。

なんだけど、遊ぶと罪悪感が生まれてくる性格なので会社で少し仕事した。毎日一つくらいは何か新しいこと覚えたい。

using flickr api 01

2008-07-22T02:42:00.018+09:00

flickrから画像を取得する方法。提供されてるAPIを使う。使用の際に必要となるAPIキーはここで取得。
http://www.flickr.com/services/api/keys/

よく使われてるのはこのライブラリらしい。
as3flickrlib - Google Code

ライブラリ使わなくてもある程度は自分でできる。
[Think IT] 第4回：外部API（Flickr）を試す！ (1/3)

MVCモデルを使ってとか、僕にはまだわかりません。
下にあるコードは手っ取り早く使う場合とか、前段階として。
慣れだと思うけど、一回散らかさないと片付け方がわからない。

とりあえず、ブラウザに直接URLを入力してみると、xmlが返ってくる。
例えば、「test」というキーワードで全文検索して10件取得した1ページ目だったらこんな感じ(見やすいように改行入れてますが本来は一行です)。


http://api.flickr.com/services/rest/
?method=flickr.photos.search&api_key=取得したAPIキー
&text=test&page=1&per_page=10

結果。

他のを試したければここに出てるargumentsから選んで&でつないで=で代入すればいい。
&tags=music
とか。
Flickr Services: Flickr API: flickr.photos.search

ここまでくれば、あとは普通にxmlの処理するのと一緒。
SSAW07 » 第5回：ActionScript 3.0応用 I - 外部イメージの読み込み

Make your own Flickr search engine with Flash and AS3 | The Tech Labs

thinkitにも書かれているように、crossdomain.xmlをロードするのを忘れずに。

さらに、flash CS3とかで動かしてるブルジョアは大丈夫かも知れませんが、普通にflash player落としてXcodeとかで開発してる場合、セキュリティのエラーが出ると思う。

FlashPlayerTrustというフォルダを作り、Macintosh HD/Library/Application Support/Macromedia/に保存。その中にcfgファイルを作る(名前は何でもいいそうです。とりあえずmm.cfgとかにしておく)。
cfgファイルに目的のswfやフォルダのパスを設定する。こういう話題はどこに書いてあるかというと、ここからダウンロードできるpdfです。そんなん知らんよね。
Adobe - Developer Center : White paper: Adobe Flash Player 9 security

これもどうやって辿り着けたのか思い出せないが、とにかくここのドキュメントはダウンロードしていつでも参照できるようにしておく。
Adobe Flex resources

testで全文検索した結果から10枚表示。マウスクリックで表示順変更。
YOUR API KEYの部分を取得したAPIキーと差し替えないと実行した時にエラーが出て表示されません。


package {
 import flash.display.MovieClip;
 import flash.display.Stage;
 import flash.display.StageScaleMode;
 import flash.display.StageAlign;
 import flash.display.Bitmap;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.net.URLRequest;
 import flash.net.URLLoader;
 import flash.display.Loader;
 import flash.system.LoaderContext;

  public class TestFlickr extends MovieClip {
  private var APIkey:String;
  private var text:String;
  private var searchURL:String;
  private var startPage:uint = 1;
  private var pageValue:uint = 10;
  
  public function TestFlickr() {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   stage.addEventListener(MouseEvent.CLICK, onMouseClick);
   init();
  }
  
  private function init():void {
   //your API key
   APIkey= "YOUR API KEY";
   //search word
   text = "test";
   
   search();
  }
  
  private function search():void {
   while(this.numChildren > 0){
    this.removeChildAt(this.numChildren-1);
   }
   setSearchURLString();
  }
  
  private function setSearchURLString():void {
   var baseURL:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + APIkey;
   searchURL = baseURL + "&text="+ text + "&page=" +startPage + "&per_page=" + pageValue;
   trace(searchURL);
   startXMLLoad();
  }
  
  private function startXMLLoad():void {
   var req:URLRequest = new URLRequest(searchURL);
   var XMLLoader:URLLoader = new URLLoader();
   XMLLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
   XMLLoader.load(req);
  }
  
  private function onXMLLoadComplete(e:Event):void {
   var imgLoader:URLLoader = URLLoader(e.target);
   var xmlData:XML = XML(imgLoader.data);
   
   var xmlList:XMLList = xmlData.photos.photo;
   for(var i:uint = 0; i < pageValue; i++) {
    var farm:String = xmlList[i].@farm;
    var server:String = xmlList[i].@server;
    var id:String = xmlList[i].@id;
    var secret:String = xmlList[i].@secret;
    var imgURL:String = "http://farm" + farm + ".static.flickr.com/" + server + "/" + id + "_" + secret +".jpg";
    trace("URL:" + imgURL);
    var imgReq:URLRequest = new URLRequest(imgURL);
    var loader:Loader = new Loader();
    
    loader.contentLoaderInfo.addEventListener(Event.INIT, loadImageInit);
    loader.load(imgReq, new LoaderContext(true));
   }
  }
  
  private function loadImageInit(e:Event):void {
   var bitmap:Bitmap = e.target.content;
   addChild(bitmap);
  }
  
  private function onMouseClick(e:MouseEvent):void {
   setChildIndex(getChildAt(0), numChildren - 1);
  }
 }
}

20080721

2008-07-22T02:21:00.000+09:00

本当はデザインに時間は関係ない。

py-appscript

2008-06-29T12:17:00.004+09:00

面白そうなのでやってみた。
py-appscriptでiTunesで再生中の曲を取得する

sh setuptools-0.6c8-py2.5.eggのとこでzlibがなくてinstallできない。ここで少しはまった。

zipimport.ZipImportError: can't decompress data; zlib not available

わざわざzlibをインストールしたけど、pythonをコンパイルし直すとかよくわからず。
もういいやと思ってpythonのバイナリ入れ直そうかと思ったけどエラーでインストールできない。

macportsでpythonを入れてあるのが原因ぽく、Python macports zlib で検索。
» ( ﾟ∀ﾟ)o彡° Python! Python! easy_install! MacPorts!　| ヲゾゾ wozozo blog

ということで、terminalから


sudo port install py25-zlib

すればうまくいって、


sh setuptools-0.6c8-py2.5.egg

も無事できた。

わからないことだらけ。


>>> import appscript
>>> itunes = appscript.app('iTunes')
>>> print itunes.current_track.album.get()
Baby cruising Love/マカロニ

でも安心できるの(一応動いたので)。
いまさらながらtwitter自動ポストとかもできるな。やらないけど。これとあれを組み合わせればできるなとか、別の言語でやる場合はこれに似た何かを探せば(できることなら作れば)いいんだなとかがわかれば収穫。やった気になって何もしないのは駄目だと思うけど。

これやりたい。
pachube :: connecting environments, patching the planet - Map of feeds

ipod、通勤中聴くけど、朝と夜ではあんまり意識してないけどボリュームが違ってて、朝に聴くと音量でかかったりして、前の日の夜の気分とかテンションみたいなものが音量として残ってる感じがして、何となく世界中の人々の音量を知りたいと思った。

bloggerの話だけど、preタグのline-heightとか日によって変わるの何で？

20080620

2008-06-14T23:51:00.005+09:00

東京で働き始めました。肩書きはデザイナーです。
まだ僕自身は何もできてないんだけど、今まで普通に目にしてたようなものを作ってる現場。
3週間経ってちょっとずつ仕事が回ってきて、楽しい。

仕事してて一番勉強になるのは制作中のものを見られることで、大体の場合においてラフの段階が一番かっこいい。というのはデザイナーの癖みたいな部分がやっぱりかなり出ていて、そこから色んな制約とかクライアントからの要求によってバランスがとられていく。最終的にはいい感じに落ち着いて、それはそれでいいものになる。

今まではデザイン好きだけどデザイナーになれるかどうかわからなかったのであんまり本気出してない風でいたし、実際プログラミングしたり音楽作ったりして心の中で「僕はデザイナーじゃないし」みたいな言い訳してた。

ありがたいことに今の職場ではそういう色々やってるところを買ってもらえた訳だけど、変な話、やっとデザインに対して本気出せると言うか、自分が生きていく上で本気を出すことが一番重要な手段になった。一口にデザイナーと言ってもまたこれはこれで細かく種類があるんだけど、とにかく「デザインの仕事」という枠の中でうまく機能するように、ある程度方向性を絞り込んで取り組むようになるだけで以前とは随分違う。

まぁ、偉そうなこと言ってても電話の受け答えから書類の作り方まで、うまくできない。コピー用紙の取り替えとかお弁当の買い出しとか、下っ端だからやるんじゃなくて、そういうのも仕事のうちってことに気づくため。

6年前くらいにネットラジオとして聴いてたプログラムが、今は作業中のbgmとして隣の隣から聴こえてくるっていう状況には人生の機微を感じる。

adobe made some noise

2008-05-25T03:37:00.014+09:00

BIT-101のコード試してもSamplesCallbackEventがどこにあるのかわからず発狂しかけた。
Astro Dynamic Sound! » BIT-101 Blog
Joa Ebertがフルコードをzipでくれ！てるからそれ参考にした。
Simple Astro synthesizer at blog.je2050.de - Blog of Joa Ebert

最新のsdkをダウンロードしてパスを通す。
Download Flex 3 - Flex SDK - Confluence

flex-config.xmlも書き換えておくこと。
Targeting Flash Player 10 Beta with Flex SDK 3.0.x
osxのスタンドアローンのflash playerはないのかな。
コンパイルしたらとりあえずブラウザにdrag & dropしてる。
SDKの中にruntime/playerフォルダがあって、各OS毎のflash playerインストーラーがある。

そのうち環境構築も含めてまとまった記事を書く。

(11/1)書き直しました。不要なimportをなくして、akihiro kamijo: Flash Player 10 の動的サウンド生成機能（Sound クラス）を参考にサンプル数を増やした。

さて、イベントハンドラ内では 2048 以上 8192 以下のサンプルデータを書き込みます。パフォーマンス上はできるだけ多くのサンプルデータを（つまり 8192 個）書くのが有利と考えられます。


package {
 import flash.display.Sprite;
 import flash.media.Sound;
 import flash.events.Event;
 import flash.events.SampleDataEvent;
 
 public class SoundTest extends Sprite{
  private var sound:Sound;
  private var freq:Number = 440;
  private var rate:Number = 44100;
  private var phase:Number = 0;
  
  public function SoundTest() {
   init();
  }
  
  private function init():void {
   sound = new Sound();
   sound.addEventListener(SampleDataEvent.SAMPLE_DATA, sineWaveGenerator);
   sound.play();
  }
  
  private function sineWaveGenerator(event:SampleDataEvent):void {
   for(var i:int = 0; i < 8192; i++) {
    phase += freq / rate;
    var phaseAngle:Number = phase * Math.PI * 2;
    var sample:Number = Math.sin(phaseAngle)*0.25;
    event.data.writeFloat(sample);
    event.data.writeFloat(sample);
   }
  }
 }
}

richard paul lohse remix

2008-05-06T01:10:00.008+09:00

tumblr見てたらコードにしやすそうなグラフィックを見かけたのでコードにしてみた。
元ネタはこれ。Richard Paul Lohse

元画像から色情報とって描画したりするのが正確なんだろうけど、自分の目でどれくらい色を数値に置き換えられるか試してみた。印刷に長けてる人は色を見てCMYKがそれぞれ何%か言えるらしい。

色空間はHSBで、最初は全部真ん中の列の明度(Brightness)だけが下がってるのかなと思ってたんだけど、どうもそれではうまくいかないので、黄色の行だけ明度はそのままで彩度(Saturation)を下げたらそれっぽくなった。

元画像をPhotoshopで調べてみたら、青色の行も黄色と同じで、明度は変わらず彩度が下がっていた。
あと全部の行の真ん中の列は色相(Hue)も微妙に変化してた。思ってたよりかは単純じゃなかった。

何かIAMASでこういうプロジェクトあったな。芸術情報アーカイブだっけ？こんなぬるいのではないけど、昔の人の作品の特徴を解析するやつ。特定の画家のジェネレータをつくったりするとか何とか。

コードは結構無駄なことしてる。上から下に実行って感じ。色のおかしいところは直してない。


PFont font;

size(500, 710);
background(255);
noStroke();
font = loadFont("HelveticaNeue-Light-48.vlw");
textFont(font, 21);
colorMode(HSB, 360);
smooth();

int rectSize = 156;
int offY = 16;
int offX = 16;

background(340);
for(int i=0;i<3;i++) {
  int h;
  int s;
  int b;
  for(int j=0;j<3;j++) {
    if(i==1) {
      b = 250;
    } 
    else {
      b = 280;
    }
    if(j==0) {
      h = 322;
      s = 290;
    } 
    else if(j==1) {
      h = 224;
      s = 300;
    } 
    else {
      h = 55;
      s = 360;
      b = 360;
      if(i==1) {
        h = 44;
      }
    }
    fill(h, s, b);
    rect(offX+i*rectSize, offY+j*rectSize, rectSize, rectSize);
  }
}
fill(0);
text("Richard Paul Lohse Remix\n5. May 2008\nHayashi Yosuke, Processing", 
      offX+rectSize, rectSize*4-10);
saveFrame("richard remix.tiff");

golden rectangle

2008-05-01T12:22:00.007+09:00

Balance in Design読みながらprocessingで黄金長方形のコーディング。作図法を参照しながら、コードは自分で考えるというのがちょうどいい。

スクリーンのサイズ、背景色、塗りなどを設定。


size(400, 250);
background(255);
smooth();
noFill();

正方形を描く。


int square = 200;
rect(0, 0, square, square);

一辺の中点aから相対する角bまで斜線を引く。


float[] a = {square/2, square};
float[] b = {square, 0};
line(a[0], b[0], a[1], b[1]);

斜線abを半径とする弧を描く。
abの長さは三平方の定理で求められる。
dist(a[0], a[1], b[0], b[1])でも同じだけど、数学的な考え方を確認。
傾きはatan2(y, x)で求められる。


float ab = sqrt(pow(b[0] - a[0], 2) + pow(b[1] - a[1], 2));
arc(a[0], a[1], ab*2, ab*2, atan2(b[1] - a[1], b[0] - a[0]), 0);

正方形の伸ばした線と弧が交わる点をもつ小さな長方形。


rect(b[0], b[1], ab-a[0], square);

この小さな長方形と正方形で黄金長方形。
整理してまとめておく。


int square = 200;
float[] a = {square/2, square};
float[] b = {square, 0};
float ab = sqrt(pow(b[0] - a[0], 2) + pow(b[1] - a[1], 2));

size(400, 250);
background(255);
smooth();
noFill();

rect(0, 0, square, square);
line(a[0], b[0], a[1], b[1]);
arc(a[0], a[1], ab*2, ab*2, atan2(b[1] - a[1], b[0] - a[0]), 0);
rect(b[0], b[1], ab-a[0], square);

20080409

2008-04-09T21:44:00.003+09:00

実家で今受けている会社の課題と論文の続きをしてます。

まぁ、のんびりなもんで、地元は今が桜満開。一足先に都へ行った皆がもう次に向かって進んでる頃、花見だの何だの。
だから流行とかも遅れるのかもしれない。

朝に親を見送って犬の散歩、昼はウキウキウォッチンしながら御飯食べて、夜に親が帰ってくる頃また散歩して、残りは勉強。高3みたいなライフサイクル。

今日は久しぶりに登校して、前林さんと面談。少しずついい方向に進んでる。今月で一気に仕上げたい。

「今読むと混乱するから、時期が来たら教える」と言われてた参考文献。時期が来た。
Amazon.co.jp：芸術の設計—見る/作ることのアプリケーション: 岡崎乾二郎: 本

少しコピーして、読ませてもらった。

コンピュータを使って、誰でも簡単に音楽とかグラフィックが作れるようになった。僕もできるようになったけど、他の人もできるようになった。コンピュータを表現のツールとして使うことで、一般化するものと、しないものは何か。

一部を引用すると、

少なくとも、ほとんどのミュージシャンたちと同じように先ほどあなたが行った、ガレージバンドのようなDAWソフト上で、素材をフィーリングにまかせていじくり回すというやり方だけでは、先へ進めないことは確かだ。自明のものとして取り扱っていた記録システムやインターフェースなどの技術をいったん表面化させ、その組み立て方を解明し、さらにはそれらの組み替えを行うこと。すなわちプリセットの技術をカスタマイズする手段を会得しなければ、前に立ちふさがる壁を突き破ることはできないだろう。DAWは単一のソフトウェアに見えるものの、実は複数の技術が一つに束ねられることで成立しているからだ。

ちょうどこの内容と対応していて、僕が論文で一番言いたいことが、久保田さんの「消えゆくコンピュータ」に書かれている(10年前の本だよ)。

システム工学的な、マン・マシン・インターフェイスのイメージでもなく、また、見えない情報や知識に形や色を与えていく、というプロダクト/グラフィック・デザイン的なイメージでもなく、それは「言語の経験」であり、同時に「経験の言語」をデザインすることでもある。そのために、トップダウンで決められた、定型的な構造や仕組みは必要ない。むしろ、インターネットと同じように、最小限の単純なガイドラインでつくられた、ゆるやかな場の中で、さまざまなインターフェイスが、同時多発的に生まれ、それらが相互に干渉し合いながら、並列的に変化し続けるイメージこそが、インターフェイスというランゲージのデザインの、一つのありようではないだろうか？

sonicodeでは画像を音に変換した訳だけど、文字を入力する機能、画像を表示する機能、画像を解析する機能、数値を元に音響を生成する機能、それらを操作するツマミやボタン、といったような要素の組み合わせから成り立っている。これらは最初から一緒だった訳ではなくて、既存のものを解体して、組み替えて、再びパッケージングしている。
僕は、この作業が久保田さんの「インターフェイスというランゲージのデザイン」に対する一つの答えになっているんじゃないかと思っている。

既にある、沢山の技術の断片をうまく組み替えて自分のツールを作ること。作品やアプリケーションでは既に多くの先行例もあるし、自分もずっとそうやってきた。初めてコンピュータを触って何かを作る、というのではなく、一通りのリテラシーを身につけた人がどういうアプローチを取り得るか、という方法論。これをどこまできちんと検証可能な言葉で説明できるようになるか、が課題。

jquery loading test

2008-03-20T02:00:00.007+09:00

jqueryでファイル読み込みする時に、load()メソッドそのまま使うとローディングしながら中身が表示されてしまうので何か方法ないかと思って見つけた。

早い話が、読み込ませるdivにCSSでdisplay:noneを指定しておけばいいってことだった。
非同期通信されるとajaxSendとajaxCompleteが呼び出される。

コールバック関数ってのがよくわかってなかったんだけど、イベントリスナみたいなものだと言われたらちょっとわかった。というか、こういう使い方してもいいんだろうなと。


$(this).fadeOut("fast", function() {
 $("#content").show();
});

fadeOutした後に読み込んだファイルの中身を表示してる。dtをクリックしたらddが表示される。これやる前は普通にチェーンでつないでたんだけど、フェードアウトが終わる前に読み込みが始まってださいことになってた。
動作サンプル
read fileをクリックするとファイル読み込み開始。

sonicode by st44100

2008-03-06T14:50:00.002+09:00

sound file


s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
電子音楽
電子　楽
　子音　
電子音楽
電　音楽
　子音　
電子fdさfdさfdさ　楽
　子　楽
電子音楽
電子音楽

電子音楽
電子音楽

電子音楽
電子音楽

S
S O
SON
SONI
CODE
 ODE
  DE
   E
C             /
  O         /
    D    /
      E /
C  C
  O O
    D D
      E  E

S 
S O/
SON/
SONI/
CODE/
 ODE/
  DE/
   E/

S O N I C O D E 

S O N I C O D E 

S O N I C O D E 

S O N I C O D E 

S O N I C O D E 
SONIC♪
     CODE ♬
SONIC♪♪
     CODE ♬ ♬
SONIC♪♪/
     CODE ♬ ♬ / 
S O N I C O D E /
S O N I C O D E / /
S O N I C O D E / / /
S O N I C O D E / / / /
S O N I C O D E / / / / /
S O N I C O D E / / / / / /
S O N I C O D E / / / / / / /

㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
  ㍿　㍿　㍿　㍿
㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
  ㍿　㍿　㍿　㍿
   ㍿　㍿　㍿　㍿
㈱
㈱　㌕
㈱　㌕　㌖
へへへへへへへへへへへへへ
へへ　へへ　へへ　へへ
　へ　　へ　　へ　　へ

wwwwwwwwwwwww
wwwwwwwwwwwww
wwwwwwwwwwwww
IAMAS
IAMAS
IAMAS
IAMAS
IAMAS
IAMAS
I
I
I
I
I
A
A
A
A
M
M
M
M
A
A
A
A
M
M
M
M
A
A
A
A
M
M
M
M
 S
 S
 S
 S
 S
２
２
２
０
０
０
０
０
０
８
８
８
２００８
　　　８
　　０８
　００８
２００８
　　　８
　　０８
　００８
２００８

wodcast

2008-03-04T12:24:00.004+09:00

wodcast.org
Adrian ShaughnessyとかPeter Savilleとか有名なデザイナーのインタビュー集。
このままではpodcastに登録できないので、yahoo pipes使ってmp3のとこだけ抜き出した。
http://pipes.yahoo.com/pipes/pipe.run?_id=HCgD5pbp3BGhaZYI8jxBKg&_render=rss
リンク先をクリックして購読に使用するフィードリーダーをitunesにするか、itunesから「詳細...」>「Podcastを登録...」にこのURLを入力すればいけるはず。pipes実行しただけだとuntitledにしかならないけど、itunesではちゃんとタイトルなど表示されるのでこれでいいや。

環境が変わることもあって、携帯音楽プレーヤーで常に英語を聴いてるようにしたい。けどいわゆる語学学習用のって話が面白くなかったりするので、できるだけ興味を持って聴けるやつがいい。

wnycのradio labは編集とかも凝ってて、内容だけでなく音声ならではの試みが面白い。
WNYC - Radiolab

glitch (alike) for vjs 2

2008-02-11T04:54:00.000+09:00

画像と合わせるのは簡単。

PImage型の変数を宣言(imgは合わせる画像、capはノイズをキャプチャした画像のために使う)

PImage img, cap;

して、setup()の中で画像を読み込む。background()にPImageのインスタンスを入れる場合は画像とウィンドウのサイズを合わせなければならないことに注意。


void setup() {
  size(200, 200);
  img = loadImage("mkk.jpg");
  noiser = new Noiser(colNumber, rowNumber);
}

draw()はこんな感じ。


void draw() {
  noiser.drawNoise();
  cap = get();
  background(img);
  blend(cap, 0, 0, width, height, 0, 0, width, height, ADD);
}

noiser.drawNoise()でノイズを作った後、capに代入。
背景をimgで塗りつぶして、blend()使ってcapと合成。

blend()のシンタックス
blend(srcImg, x, y, width, height, dx, dy, dwidth, dheight, MODE)
x, y, width, heightは読み込む画像のx座標、y座標、幅、高さ
dx, dy, dwidth, dheightは書き出し先のx座標、y座標、幅、高さ
MODEはADDの他にも色々あるけどビットシフトはない。イラストレーターとかフォトショップのエフェクトと同じようなもの。試してみると面白い。

ということで、今後この辺は使いそうな気がする。
勿論pixels使って1ピクセル単位で操作することもできるし、ビットシフトはblend()じゃできないからいずれ使うことになるけど、とりあえず簡単な方法から。

glitch (alike) for vjs

2008-02-08T05:55:00.000+09:00

vade » Blog Archive » Real World Max/MSP/Jitter 1 - Glitch (alike) for VJs

glitchっぽい映像を、jitterで作るチュートリアル。
glitchの特徴はfragmentation, repetition, linearity and complexityだそう。
随分前にブックマークしておいたんだけど、今になってprocessingでやってみようと思った。

まずイメージと、ブロックノイズを組み合わせてるんだけど、ブロックノイズの作り方。
2通り思いつく。

普通にrect()で作る。


Noiser noiser;
int colNumber = 5;
int rowNumber = 5;

void setup() {
  size(200, 200);
  noiser = new Noiser(colNumber, rowNumber);
}

void draw() {
  noiser.drawNoise();
}

class Noiser {
  int col;
  int row;
  public Noiser(int col, int row) {
    this.col = col;
    this.row = row;
  }
  void drawNoise() {
    for(int j=0; j<height; j+=height/row) {
      for(int i=0;i<width;i+=width/col) {
        noStroke();
        fill(random(255),random(255),random(255));
        rect(i, j, width/col, height/row);
      }
    }
  }
}

pixels使う。widthをcolで割った数が整数にならなかったりした時とかに今後の展開感じる。


Noiser noiser;
color[][] colorTable;
int colIndex = 0;
int rowIndex = 0;
int colNumber = 5;
int rowNumber = 5;

void setup() {
  size(200, 200);
  noiser = new Noiser(colNumber, rowNumber);
  colorTable = new color[colNumber][rowNumber];
}

void draw() {
  noiser.drawNoise();
}

class Noiser {
  int col;
  int row;
  public Noiser(int col, int row) {
    this.col = col;
    this.row = row;
  }
  
  void drawNoise() {
    for(int j=0; j<height; j+=height/row) {
      for(int i=0; i<width; i+=width/col) {
        if(colIndex>=col) {
          colIndex = 0;
        }
        if(rowIndex>=row) {
          rowIndex = 0;
        }
        colorTable[colIndex][rowIndex] = color(random(255), random(255), random(255));
        colIndex++;
      }
      rowIndex++;
    }

    loadPixels();
    for(int j=0; j<height; j++) {
      for(int i=0; i        int pos = i+j*width;
        if(pos%(width/col)==0) {
          colIndex++;
        }
        if(pos%(width*height/row)==0){
          rowIndex++;
        }
        if(colIndex>=col) {
          colIndex = 0;
        }
        if(rowIndex>=row) {
          rowIndex = 0;
        }
        pixels[pos] = colorTable[colIndex][rowIndex];
      }
    }
    updatePixels();
  }
}

次回、画像と合わせる。

MAX_FLOAT, MIN_FLOAT

2008-02-01T22:36:00.000+09:00

visualizing data読み始めて、知った。
最小値とか最大値を比べて取得する場合、初期値を代入する時に

float dataMax = MIN_FLOAT;
float dataMin = MAX_FLOAT;

としておく。
読んで字のごとくMIN_FLOATはfloatで一番小さい値で、MAX_FLOATはfloatで一番大きい値。
どんな数値もこれより小さくて大きい。

sonicodeでは文字をビットマップにして黒いところに順番に番号つけて、縦のセルで大きさを比べて最大値と最小値を出してるんだけど、最大値を入れるための変数の初期値を0にしてた。これだと負の値がきたときに動かない。
設計上負の値がくることはないからいいや、と思ってたけど、気持ち悪かったんだよね。
MIN_INT, MAX_INTもある。

0126から追加されたみたい。

recursion

2008-01-04T00:17:00.000+09:00

it's hoba
シンプルなコードで、視覚的に強い。

血が滴るみたいなやつ。
it's hoba: Processing 13

再帰を使って書き直してみた。


//based on hoba's code(http://hobagoogle.blogspot.com/2007/12/processing-13.html)
//rewrite by using recursion
void setup() {
  size(800, 450);
  background(152);
  noStroke();
  smooth();
  colorMode(HSB);
}

float e, r, var, posx, posy, a, dex, lengh, bri;
int cnt;

void draw() {
}

void mousePressed() {
  e = HALF_PI/180*30;
  a = 1-sin(e);
  r = random(30, 150);
  var = random(0.6, 0.9);
  dex = random(-0.15, 0.15);
  lengh = random(0.8, 1.2);
  bri = random(0, 1);
  posx = mouseX;
  posy = mouseY;
  cnt = int(random(30, 200));
  fill(2, 247, 80+50*bri);
  ellipse(posx, posy+r*HALF_PI/180*var, r/20+r, r/20+r);
  blood(posx, posy, r, var, dex, lengh, bri, cnt);
}

void blood(float posxU, float posyU, float rU, float varU, 
           float dexU, float lenghU, float briU, int cnt) {
  fill(2, 247, 80+50*briU, 100-100*a);
  ellipse(posxU+dexU*rU, posyU+rU*e*varU, rU/20+rU*a*a, rU/20+rU*a*a);
  e += HALF_PI/180;
  a = 1-sin(e);
  if(cnt>0 && e<=HALF_PI*lenghU) {
    blood(posx, posy, r, var, dex, lengh, bri, cnt-1);
  }
}

void keyPressed() {
  if (key == 'r' || key == 'R') {
    background(152);
  }
}

20071228

2007-12-28T23:18:00.000+09:00

卒展のwebがローンチしました。第一弾。今後トピックとか作品情報とか充実していきます。わざわざwordpressで作ったので利点を最大限活かしたいところ。
IAMAS 2008 » 情報科学芸術大学院大学第6期生修了研究発表会岐阜県立国際情報科学芸術アカデミー第11期生卒業制作展

情けないことにブラウザごとで変わる見た目に2日ほど泣かされてました。ブラウザのせいっていうか、自分のコードが間違ってたんだけど。毎回本番に一番勉強してしまうのは何とかしたい。春から社会人なのに...。firebugとか、自作のbookmarkletが意外と役立った。デバッグ重要。ガチのプロがガイド作ってくれてたのでスムーズにコーディングできた。

次は印刷物。これもひとひねり効かせてるので、大変だけど、いいものになると思う。

バイト先のwebのこともあって、jquery調べてたんだけど、面白い。というか、javascriptもっと使わなきゃと思う。locationオブジェクトとか駆使すれば、かなりクライアント側でも頑張れる。

で、ユーザビリティ(アクセシビリティ?)とかweb標準的にはどうかわかんないけど、自分のページで色々試してみた。
hysysk

linkのとこで、liタグの中にリンクがある場合、css側でcursor:pointer;になるようなclassを用意しておいて、クリックしたらaタグ内のリンク先を解析して飛ぶようにしてある。クリッカブルな領域が広くとれるので使いやすいのでは、と思う。かなり視覚的な作り。workでの画像の見せ方も、dtタグにタイトルと拡張子入れといて、クリックしたらcss書き換えて背景画像にしてる。まぁ、見にくいのはわかってるけど、楽しんでやってる。

Reading newsfeeds

2007-12-20T05:30:00.000+09:00

GainerでおなじみアカデミーDSPの小林さんがnodeboxワークショップやってる。
DSP

天気情報のrssを取得して表示。webライブラリを使う。
NodeBox | Web

text()メソッドに渡す際にstr()メソッドを使うんだけど、utf-8にdecodeしないとエラーになる。デフォルトのエンコーディングがutf-8になってないから？
3. 形式ばらない Python の紹介

文字コードは常に悩みの種。いつも何となく解決してるので、ちゃんと理解せねばと思う。


web = ximport("web")
fontsize(10)
news = web.newsfeed.parse("http://weather.livedoor.com/forecast/rss/21/40.xml") 
y=0
xoff=10
yoff=10
for i in news.items:
    s = str(i.description).decode('utf-8')
    text(s, xoff, y*30+yoff)
    y+=1

同じことをprocessngでやるとこうかな。もっと泥臭い感じ。
関係ないけど文字表示する場合PFont.list()で一覧とって配列の一番最初のを指定してあげればいちいちメニューからCreate Font...しなくて済む。


import processing.xml.*;
XMLElement xml;
XMLElement[] siteData;
xml = new XMLElement(this, "http://weather.livedoor.com/forecast/rss/21/40.xml");
XMLElement site = xml.getChild(0);
siteData = site.getChildren();
PFont font;
String[] fontlist = PFont.list();
font = createFont(fontlist[0], 10);
textFont(font);
size(400, 400);
int y = 0;
for(int i=0;i<siteData.length;i++) {
  if(siteData[i].getName().equals("item")) {
    XMLElement[] items = siteData[i].getChildren();
    for(int j=0;j<items.length;j++) {
      if(items[j].getName().equals("description")) {
        text(items[j].getContent(), 10, y*30);
        println(items[j].getContent());
        y++;
      }
    }
  }
}

20071215

2007-12-15T03:02:00.001+09:00

14日
プレゼン終了。2日目は他の人のも見て回れてよかった。
皆ちゃんとできてるし、今日的な問題意識持ってやってる。

昼ご飯食べてる時にカメラの機能の話になって、笑顔検出だとか、eye-fiだとか。
笑顔検出機能使って写真撮ったらすごくきもいのができそうで、やってみたい。しっかり照明当てて、高解像度で。やってる人いそうだけど。
【レポート】SEDテレビで見る写真、笑顔を逃さないカメラ - キヤノンの新技術 | 家電 | マイコミジャーナル

カメラって変な機能がついては結構消えてる印象があるんだけど、あんましそういうこと言ってる人いないんじゃないかな。「つかわねー」っていうエフェクトとか、録音機能とか。ポジティブに使ってみたい訳なんだけど。

15日
テクノロジーとは何か、みたいな話で、以前聞いて面白かったのは、川に橋をかけるのはテクノロジーではないが、ダムを造るのはテクノロジーである、という話。ダムは「川」を「水源」に変えてしまう、という点でテクノロジーだそう。正しい正しくないはおいといて、ひとつの世界の切り取り方。

こういうアクロバットには惹かれるものがあって、藤幡さんはデジカメについてる液晶ディスプレイによって、カメラがポインティングデバイスとして機能してる点をあげてた。最近論文執筆態勢を整えるにあたって寝袋をリサーチしてるのだけど、-20度まで耐えられるやつが1万3000円以下とか、足が分かれてて動けるやつとかあって、そういうの考えれば、建築とか家のあり方も変わって良さそう。

多分だけど自分が求めてるものってのはそういうものの本質を変えてしまうような何かで、単なる概念じゃなくて実際に動くもの。

LOGO A LOT
注文した。collect.apply載ってる。opnsdoのロゴも載ってるらしいので嬉しい。クリスマスギフトにどうぞ。

sonicode1212

2007-12-13T01:10:00.000+09:00

プレゼンは14日。

AudioIn with MacBook built-in-microphone

2007-11-22T14:36:00.000+09:00

MacBook Proに移行して、SuperCollider3も3.1にして、processingと連携させて遊んだりしたんだけど、
ある時マイクを使おうとしたら入力ができなかった。
解決法をwebで発見したので記録しておく。

アプリケーション>ユーティリティ>Audio MIDI設定を起動して、メニューから機器セットエディタを開く
+ボタンで機器セット追加。名前をsupercolliderとでもつけておく
内蔵マイク、内蔵出力にチェックして、完了
デフォルトの入力と出力をsupercolliderにしておく

で、SC3起動(既に起動してる場合は再起動)。
Serverをbootするとこんなメッセージが出るはず。

Number of Devices: 4
0 : "Built-in Microphone"
1 : "Built-in Input"
2 : "Built-in notification is on

"supercollider" Input Device
Streams: 1
0 channels 2

"supercollider" Output Device
Streams: 1
0 channels 2

新規ファイルを開いて、

{Out.ar(0,AudioIn.ar(1))}.play;

で無事左チャンネルから音が聞こえて録音もできましたとさ。

today's glitch 3

2007-11-19T08:05:00.001+09:00

この間、youpyさんに教えてもらったOSXで超簡単にglitchする方法で、

cat ファイル名 | sed 's/9/1/g' > ファイル名

てのがある。
sedコマンドで

s/検索文字列/置換文字列/g

って感じで数値を置換してる。数値を変えると結果も変わる。ファイルはmp3とかもいける。

同じようにprocessingでも単純にバイナリ形式で開いて、if文で置換。
数値は色々試さないとできたファイルがうまく開けなかったりする。finderのプレビューで見るのと、アプリケーションのプレビューで見るのと、photoshopで見るので結果が違ってたりする。


byte[] b = loadBytes("hysysk.jpg");
for(int i=0;i<b.length;i++) {
  //println(b[i]);
  if(b[i]==18) {
    b[i]=1;
  } else {
    b[i]=b[i];
  }
}
saveBytes("glitch.jpg", b);

jython + p5#2

2007-11-17T22:12:00.000+09:00

後半。本当にやりたかったのはここから。
irbでやってるみたいに、インタラクティブにコードを書き換える。
Processing by Ruby #2 - Quietstar

コードはrubyとほとんど同じ。下のコードをSketchTest2.pyとか名前付けて、保存。
jythonを起動して、

>>> from SketchTest2 import *

これでjrubyのloadと同じなのかな。

>>> applet = Sketch()

で、Sketchクラスのインスタンスを作る。

>>> run(applet)

とするとアプレットが動きます。ランダムな位置に四角が描かれては消される。
jrubyでの例と同じように

applet.stop()

とかすれば止まるし、

applet.strokeWeight(5)

とかすれば線が太くなる。これは楽しい。
GUIもCUIもPhysical Computingも全部組み込みたいものだ。


from javax.swing import JFrame
from processing.core import PApplet

class Sketch(PApplet):
 def __init__(self):
  pass
 def setup(self):
  self.size(200, 200)
  self.rect(0, 0, 100, 100)
 def getField(self, name):
  return self.class.superclass.getDeclaredField(name).get(self)
 def draw(self):
  self.background(255);
  self.rect(self.random(self.width), self.random(self.height), 10, 10)

def run(applet):
 frame = JFrame(title="Processing",
  resizable = 0,
  defaultCloseOperation=JFrame.EXIT_ON_CLOSE)
 frame.contentPane.add(applet)
 applet.init()
 frame.pack()
 frame.visible = 1

if __name__ == '__main__':
 run(Sketch())

jython + p5#1

2007-11-17T21:02:00.000+09:00

jrbでprocessingっていうこの記事読んで同じことがjythonでもできないかと思った。
Processing by Ruby - Quietstar

jythonのインストール
Installation

ここからリンク先をクリックしてjarファイルをダウンロード
Downloads

jarファイルをダブルクリックするか、terminalで

java -jar jython_installer-2.2.1.jar

と打ち込む。
GUIが出てきて色々聞いてくるので、色々答える。Installation typeはStanderdにした。
あとはひたすら光ってるとこをクリックしてくと、jython2.2.1というフォルダが作られる。

PATHを通す(コマンドサーチパスに加える、というのか)。terminalで

open .bash_profile

して、bash profileを開く。jython2.2.1フォルダ内にjython実行ファイルがあって、ホーム(hysysk)のすぐ下に置いたので、

export PATH="/Users/hysysk/jython2.2.1:${PATH}"

とすればよい。他に色々ある場合は:でつないでいく。${PATH}は忘れずに。
これでterminalから

jython

と打ち込むだけで起動するようになる。

Processingの方。
.bash_profileにprocessingのCLASSPATHを書いておくと実行する時に楽。
ここを参考に。
JRuby上のirbでインタラクティブにProce55ingを動かす:TKMR.blog.show

export P5_HOME=/Applications/Processing¥ 0133
export CLASSPATH=$CLASSPATH:$P5_HOME/lib/core.jar

こんな感じで。exportってのは変数の宣言みたいなものか。
Processing 0133じゃなくてProcessing¥ 0133。\か¥を入れる。フォルダ名変えればいいのか？試さない。

jythonでの書き方はここを参考に(via koyachiさん。いつもありがとうございます！)。
Backspaces: Processing: .. with Jython

ただ四角を描くだけのコード。SketchTest.pyとか名前付けて保存して、

jyhton SketchTest.py

で実行される、はず。上のサイトの人もあんましいいコードじゃないけどとりあえず動くからいいよね的なこと言ってるけど、僕もそんな感じです(僕の場合、どこがどう悪いかもわからない)。ご了承下さい。後半へ続く。


from javax.swing import JFrame
from processing.core import PApplet

class Sketch(PApplet):
 def __init__(self):
  pass
 def setup(self):
  self.size(200, 200)
  self.rect(0, 0, 100, 100)
 def getField(self, name):
  return self.class.superclass.getDeclaredField(name).get(self)

if __name__ == '__main__':
 frame = JFrame(title="Processing",
  resizable = 0,
  defaultCloseOperation=JFrame.EXIT_ON_CLOSE)
 panel = Sketch()
 frame.add(panel)
 panel.init()
 while panel.defaultSize and not panel.finished:
  pass
 frame.pack()
 frame.visible = 1

dial

2007-11-16T02:42:00.000+09:00

本審査まであと1ヶ月を切った。泣いても笑ってもと言う感じ。数年前に比べれば情報も増えたし、環境も良くなってる分、求められるレベルは上がっている。

音楽機材のインターフェースと、テキストエディタのインターフェースを組み合わせたものを作るのに、ダイアル必要でしょ、ということでDialクラス自作。controlP5あるけど、基本的にSpringGUI使ってるので最終的な見た目を調整する際にもう少しフレキシブルにする必要があると思ったので。casey&benのp5本を参考に。基本的にはスクロールバーと同じ。まだまだ最適化できると思うけど、とりあえず。
ダイアルの中心部から離れれば離れるほど分解能が下がるのは、仕様ってことで。。。
dial : Built with Processing

使い方は、
Dial d = new Dial(x位置, y位置, 大きさ, 最小値, 最大値)
でインスタンス作って、

d.update(mouseX, mouseY)
でマウスオーバー検出、

d.press(mouseX, mouseY)
でロックして、

d.getVal()で値を取得。

20071111

2007-11-11T21:56:00.001+09:00

today's glitch 2

2007-11-11T00:20:00.000+09:00

今日もglitch。

最初のものはグリッチを起こすタイミングをランダムに設定していたんだけど、周期的にずれ具合を変えるという風に変えてみた。koyachiさんが参考にしてたmikrosophtみたいに。
Flickr: Photos from mikrosopht

マウスのx位置とって何ピクセル目にグリッチさせるかってのを設定してる。どれくらいずらすかは毎回変わるので、同じ位置で何回かクリックしてみてもいい。preタグだと<があれなのでインデントこんなんですが、OSXだとprocessingIDEでコマンドキー+T(Toolsメニュー>Auto Format)で自動でインデントつけてくれるので、コピー&ペーストして試してみてください。

/*
inspired by HSYNC Glitch t.koyachi
http://d.hatena.ne.jp/koyachi/20071107
hysysk
*/
int interval= 1;
void setup() {
size(500, 375);
PImage imgsrc;
background(255);
noStroke();
int slideX = 0;
int slideY = 0;
int randSlideX = int(random(15));
int randSlideY = int(random(5));
imgsrc = loadImage("cXHwYYMtm1he27ib375S4A0e_500.jpg");
int glit=0;

loadPixels();
for(int j=0; j<height; j++) {
if(glit%interval==0) {
randSlideX = int(random(10));
randSlideY = int(random(5));
}
else {
slideX += randSlideX;
slideY += randSlideY;
}
for(int i=0; i<width; i++) {
int current = j * width + i;
int src = current + slideY * height + slideX;
if(src>=height*width) {
src = current - width;
}
pixels[current] = imgsrc.pixels[src];
glit++;
}

}
updatePixels();
}

void draw() {
interval = max(1,mouseX);
}

void keyPressed() {
saveFrame("glitch.jpg");
}

void mousePressed() {
setup();
}

today's glitch

2007-11-10T00:41:00.000+09:00

koyachiさんが作ってたglichを元に僕もやってみた。
きょうのglitch - koyachiの日記

jrubyでの書き方がよくわかってないのでところどころ書き換えてます。
hysncglitch : Built with Processing

マウスクリックで描画し直します。
コメントアウトしてるけど、キーを押すと画像の保存。

ポイントとしては外側のfor文の中の変数glitに入る乱数の値(1行読むごとに再設定される)が、

0の場合　
x軸方向にrandSlideX分、y軸方向にrandSlideY分ずれたところをソースにする

1の場合　
randSlideX、randSlideYの値を再設定

それ以外の場合　変化なし

という風に分岐してるとこかな。画像変える場合はsize()の大きさを画像の大きさに合わせてね。
色々試す。

(追記:試した結果、縦の方が長いの画像の場合、配列のエラーが出ます。原因究明中。眠い。)
(さらに追記:直しました。int current = j * width + i;としなければならないところ、widthがheightになってました。koyachiさんありがとうございます！)

pre presentation

2007-11-09T11:27:00.000+09:00

修士制作予備審査終了。前日に受けたアドバイス(とにかくでかくプロジェクションしろ、でかい音を出せ、今何やってるかわかるようにしろ)が効いて何とか乗り切った感じ。素早い変更ができるのはprocessingとかmax/mspの最大の利点。

複数行の入力を可能にして、回転を加えたところ、波形は面白くなった。
テキスト操作の結果、音響合成の理論ではどういう効果に位置づけられるのかというところを丁寧に調べていく必要がある。文字の幅を調整して周波数を変えるとか、90度回転させて打ち込むと普通の波形テーブルの編集みたいになるとか。

今回はキーボードでテキスト編集、マウスで形状変化、という風にしたけど、tex/tspでやってたみたいにコマンドっぽい機能をつければまた変わると思う。マウスじゃなくてフェーダーとかツマミで操作もしたい。最初はグリッチだったりエラーを利用して楽しむ感じだったけど、次の段階はそれをオーガナイズすること。耳を頼りに操作してかっこいいグラフィックができてるとか夢。

アカデミーの高桑教授が本気でプログラム書く時はモニタ見ないでうなだれた状態で目を閉じてキーボードをタイプするそうだ。大度君も本気で演奏する時は目を閉じるとか言ってたし、触覚的なインターフェースについてももっと考察してもいい。視覚的にいくらリッチにしたところで越えられない壁ってのはやっぱりある。

去年思い描いていた通りGUIもCUIもフィジカルコンピューティングもデザインも音響もグリッチも全部広く浅く盛り込んだ作品になりそう。

解放感というよりは、上記のようなブラフをどれくらい実現できるのかってとこの重圧。
とはいえ進むべき方向が見えつつあるのはいい。

gnu.io.PortInUseException: Unknown Application

2007-11-04T21:37:00.000+09:00

gainer使うのに一苦労してしまった。
まずファームウェアとライブラリのバージョンが合ってなかったのと、シリアルを使う際のこのエラー。

答えはfaqにあった。
Serial \ Libraries \ Processing 1.0 (BETA) \ Processing 1.0 (BETA)

Processing/libraries/serialフォルダ内のmacosx_setup.commandをダブルクリックすると、terminalが起動する。シリアルを使えるようにするプロンプトが出て、Do you want to continue?と聞かれるので、yを入力してエンター。アカウントのパスワードを入力して、そのままOSを再起動。無事使えるようになった。

さらによく見てみると、Gainer公式サイトにしっかり載ってました。
GAINER.cc | Tutorial / Processingで使う

慣れたつもりでやってると痛い目見るので注意が必要ですね。

20071104

2007-11-04T17:34:00.000+09:00

まだ何もないけど(正確にはあるが、リンクを貼ってない)、webちょっとずつ作り直してる。自分の作品を見せるというよりは今後のため。

jquery使ってみたら非常に便利だった。最初メニューを定義リストで作ってて、dtをクリックしたらddの中身が表示されるようにしてたんだけど、コンテンツが増えると最初の読み込みが重くなりそうな予感がしたので書き換えた。innerHTMLにhtmlを動的に読み込む形式。何かでもこれもパーマリンク力弱そう。うまいやり方ないかなー。この人のページのこの画像(とか文章)っていうのにすぐアクセスできるようにしたいんだけど。栞とかポストイットみたいな感じで、そのページにいくと自分が気に入ってるところをすぐ見られる仕組み。

見た目も、構造も、ちょっと変わっててかっこよくて便利な物を作りたい。

でもまずは修士制作だろ。8日予備審査。

build sndobj app

2007-10-18T22:48:00.000+09:00

ありがとうございます！
Xヶ所村: すでにsndobjをインストールしていて、てっとりばやく自分アプリを作りたい場合。

sconsはmakeみたいなもので、ソースから実行可能ファイルを生成するのに使うコマンド。SConstructファイルがmakefileにあたる。

sconsの解説
sh1.2 pyblosxom : SConsについてちょっと調べてみた。Part.1

makeの解説
Make と Makefile の説明
MAKEの第一歩(入門)

miujunさんがおっしゃる通り、既にSndObjフォルダのsrcフォルダ内にexamplesというフォルダがあり、ソースファイルが置かれている。srcフォルダと同じ階層にはbinフォルダがあって、実行可能なファイルがいくつかできている。試しにsinusというのを実行する。

d242204:~/SndObj/bin hysysk$ ./sinus

とエラーが出る。

./sinus infile.wav outfile.wav timestr pitch thresh intracks outracks

このエラーとソースを読めば、実行ファイルに加えて引数を7つ指定する必要があることがわかる。サウンドファイルを読み込んで、タイムストレッチとかピッチチェンジするのかな。その時に綺麗に補完するアルゴリズムって感じ？

色々試す。

miujunさんのここのソースをビルドしてみる。
Xヶ所村: CygwinでSndObjなど

インクルード部分を

#include <SndObj/AudioDefs.h>

に書き直す(blogに貼る際にhtmlが書き換えられてる？)。あと、30秒は長い気がするので

int dur = 5;

にした。

で、example以下にsin.cppとか名前つけて保存。

次、Sconstructファイルの編集。

493行目の

# realtime IO examples
if rtio:

以下に他の既にあるexampleと同じような形式で書く。その上480行目で定義されてるBuildExampleメソッドに渡す処理を書けばいいのかな。何となくやってることは分かる。

sin = BuildExample('./bin/sin', './obj/sin.o', 'src/examples/sin.cpp')
Depends(sin, deplibs)

Sconstructファイルはpythonスクリプトなので、インデントなどちゃんと合わせておくこと。

terminalで/SndObjに移動して、sconsコマンド実行。こんな感じ。

d246112:~/SndObj hysysk$ scons
scons: Reading SConscript files ...
Building the Sound Object Library
Checking for Realtime IO support...
OS is MacOSX
Checking for C header file jack/jack.h... (cached) no
Host is little endian
swig doesn't exist
Python version is 2.3
Checking for C header file m_pd.h... (cached) no
Checking for C header file ladspa.h... (cached) yes
scons: done reading SConscript files.
scons: Building targets ...
g++ -o obj/sin.o -c -O3 -DMACOSX -Iinclude -Iinclude/rfftw -I/system/library/Frameworks/CoreAudio.framework/Headers src/examples/sin.cpp
g++ -o bin/sin -framework coreaudio obj/sin.o -Llib -lsndobj
scons: done building targets.

確かにgccでコンパイルする時のオプションはここからわかりそう。makeもsconsもコンパイルの詳しい仕組みもよくわかってないのでまだうまくいってないけど。要勉強。とりあえずはこれで。

ワークショップ形式で適宜説明受けながらのこういう授業があれば。。。てかIAMASの場合は直接先生のとこに行って聞くのが主体なんだから、もっと積極的になれよ僕、という話なんだけど。

miujunさん本当にありがとうございます！

20071017

2007-10-18T01:00:00.000+09:00

画像から波形をpysndobjでできるようにした。

画像を扱うためのライブラリであるPython Image Libraryを導入するのに手間取ってしまった。OSXの場合、ソースからビルドしなければならない。諸悪の根源はPILというか、デコーダのlibjpegなんだけど。
PIL(Python Image Library)の導入 — JZUG
libjpeg.dylib のコンパイル方法 - Cube の日記
PIL のエラー解決編 - mitszoの日記
【コラム】OS X ハッキング! (42) OS XでGIMPを使おう! part4 | パソコン | マイコミジャーナル
あと海外でインストーラ作ってくれてた人もいたな。

この辺全部試して、
jpeg-6bフォルダ内で./configureとかmake installとかひたすら打ち込み、文字列をずらーっと眺める。

Imaging-1.1.6フォルダ内でsetup.py buildしたらちゃんと
--- JPEG support ok
が出るにも関わらず、pythonを起動してImageをインポート、jpegファイルを読み込もうとすると、
IOError: decoder jpeg not available
となる。

で、エラーログで検索したら、setup.pyを2回以上行う場合はbuildフォルダを消しておく必要があることが判明。無事解決。とは言え、どれが決め手だったのかは不明...。
decoder jpeg not available - あるシステム管理者の日常

sudo setup.py install

PILさえ入れてしまえば画像表示は超簡単で、

import Image
Image.open("kaho001.jpg").show()

だもんね。
P型フーリエ記述子とかいうのを試してみたいんだけど、できるかしら。僕に。

本当、こんなにわかってないものをよく毎日使ってるなぁと思った。ちょっと普段と違うことしようとすると途端に困ったことになる。

20071016

2007-10-17T01:33:00.000+09:00

OSXでc++でSndObj使ってみようとか思った。
SndObj Library Homepage

sconsが必要なのでインストール。
SCons: A software construction tool
scons-0.97フォルダへ移動しsetup.py install
permission deniedが出たのでsudo python setup.py install

sconsのインストール先は
/System/Library/Frameworks/Python.framework/Versions/2.3/bin/scons

.bash_profileのPATH編集。
export PATH="/System/...(略).../2.3/bin/:${PATH}"

:${PATH}つけとかないとosxのコマンド読まなくなるので注意。

sndobjインストール。
SndObjフォルダへ移動しscons

多分入った。SWIGがないとか出るけど、これはpythonとかrubyとかのスクリプトから使いたい時に必要みたいなので、問題ないだろう。

で、あとはコード書くだけのはずなんだけど、こっから先、わからず！

何でコンパイルの仕方とかってあんましwebにないのかな。本は本でwindowsだったりそもそもコンパイルの方法は載ってなかったり。。。g++に渡すオプションだとか、Xcodeで外部ライブラリ使ってビルドする方法とか。。。

とりあえずはpysndobjで様子見。todoとしてはfftしてifftした音を作ること。
教授陣とガチで向き合ってみるべきか。

開発の始め方、調べ方、コンピュータの仕組み、まだまだわかってない。

sonic typeface interactive

2007-10-11T01:08:00.000+09:00

processingでは、例えばPImage型の変数imgを作って、
img = get();
とすればスクリーンをキャプチャできるので、テキスト入力しながら音を出すことは簡単にできた。
画像はHello worからHello worlになるところ。波形エディタでこれくらいにまで拡大して、再生するとアニメーションみたいなものにもなる。再生ポイントに合わせて動いてくれないと駄目だけど。
hello world.wav

波形エディタはaudacityってソフト使ってます。
フォント変えると音も違う。Helvetica Neue UltraLightとか音も細いよ。

最初気づかなかったけど、波形エディタでみると音の始めにずっと1.0が入ってた(ヘッドフォンしてるとバツッときてあと無音で圧迫感)。なんだろうと思ってたんだけど、setup()メソッドの中でbackgroundを明示的に初期化してなかったせいで、デフォルトの値がマッピングされちゃってた。processingのwindowを目で見ただけではわかんなかったけど、耳ではバツッてのがわかって、波形エディタで確認するとよくわかるのが面白い。

スポイルされちゃう部分もあるから絶対最強最高って訳じゃないし、方向性もぶれちゃったりするけど、とにかくものができると色々発見もあるし考えられる。

applet
テキストエディタ感覚で文字打てる。文字数多いとピッチも上がる。deleteで消せる。領域内をクリックしないと動かないかも。アルファベットのみ。

trash0003

2007-10-10T00:57:00.001+09:00

pegは楽しかったまたやりたい。

trash0002

2007-10-10T00:52:00.000+09:00

僕は絵が描きたかったのだった。これも2年前くらい。

trash0001

2007-10-10T00:45:00.000+09:00

2年前くらいに作ったやつ。

sonic typeface src

2007-10-08T00:32:00.000+09:00

minimで任意の波形テーブルを作るのはすごく簡単で、AudioSignalインターフェースを実装すればいい。exampleにあるので、参考に。

generate()メソッドに渡されるsamp[]の中に-1から1の値を突っ込む。
512サンプルの波形テーブルにするため、512ピクセルの画像を用意して、上から下、左から右にスキャン。

解説というか、自分でちゃんとわかってるか確認のためメモ(下のリンク先にあるソース参照)。
まずピクセル全てに番号を振る。

色が閾値以下の値を持っている場合(元画像を黒で作ってあるので、適当に赤成分が50以下、としました)、その番号。それ以外は0にして、sndArrayに入れる。

sndArrayの中で最大値と最小値を出す。最小値は0が最初に0でない数値を受け取ったときの値になるはず。boolean型の変数startで判別。

0の数はoffsetという変数に入れて最終的に振幅をそんだけ分持ち上げる。

次のif文でまずsndArray内に0でない値が入っているか(描画すべきピクセルがあるか)を判別し、
x%2==1が真のときに下のエッジ(highとlowの差+offset)、偽のときに上のエッジ(offset)をプロット。
(10/10訂正:上下が逆だったので直しました。)

あとはmap関数に任せれば、0から1の間で適当に補完してくれる。lowを1に、highを0にすることで、元画像と書き出された波形を一致させることができた。

タイポグラフィの専門用語で言うところのカウンター(counter)、文字の中の閉じられて中空になっている部分とか、入り組んだ部分、つまりhighとlowの間に0が入ってるところは潰されてしまう。描画の密度に差を持たせれば擬似的に空間を見せることは可能かもしれない。miujunさんのは多分そういう感じ。

今のところ画像読み込んでるだけだけど、テキスト編集する感じで音に直結できればいいなと。カーニングとか、長体とか、フォントを変えることによって音が変化する。それでプログラミングができて、さらにその音の解析からまたコードが生成されて、フィードバックする。

sourceの方はprocessingで実行してクリックすると画像と音を書き出します。色々試してみて下さい。minimライブラリが必要です。
applet
source(zip file)

20071006

2007-10-06T23:58:00.000+09:00

今月号のstudio voiceにcollect.applyの作品載ってます。55ページ。
2000年代に発売された200枚のディスクガイドで、アルバムの長さを線の長さに変換して、円形に並べた。僕はそのためのコード書いた。もらったリストからxmlファイル作って、processingでグラフィックにして、svg形式で書き出したやつを渡した。データビジュアライズものなんだけど、手作業が加わってて、あんまし硬質な感じじゃなくてピタゴラスとか、ダヴィンチとか、そういう人らの物理とか数学の図っぽい感じに仕上がってて、結構いいんじゃないかと思う。

studio voiceを知ったのは東京で浪人してた時で、初めて買ったのが2001年9月号のwhole earth catalog 2001 in japanてやつ。今も持ってる。本当に高校卒業するまでは現代美術もデザインもクラブカルチャーも全く知らなかったし、多分そのまま一般大学に進んでたら一生知らずにいたんじゃないかと思う。とにかく書かれてることのほとんどが意味わからず、語り口もそれまでの自分が知ってるものとは明らかに違ってた。冒頭の宇川直宏とヤマタカEYEとYUKIの対談なんて、この人達一体何者でどこの世界の話してるんだって感じだった。そっから一気にわかりやすい文系サブカル少年みたいになっていく訳だけど、多分一般的にはかなりそういうのに目覚めるのにしては遅かったと思う。予備校ではその辺はリテラシーとして当然になってるから、やべーってなってどっぷりそっち浸かっちゃって、皆が普通に空気みたいに触れてるものを知識ベースで入れ込みすぎたせいで逆にださくなる現象に陥ってまた悩む訳だけど。

そんなことをバイトの後に本屋寄った帰り道で思ってたんだけど、今日見つけた道がすごくよかった。揖斐川はドナウ側説をより強固にした。夏にスイス村ってとこ行って来て、スイス的な要素はゼロだと思うんだけど、何かそこをスイスだと呼びたくなる気持ちはすごくわかったのと同じ。

何年か前の卒展で、森岡って先生が大垣のブラジル人向けスーパーの色とか造りとか、店員のお姉さんが無駄に美人だとか、商店街に売ってる変な生活用品とかの雰囲気を指して「グランドゥール」って言ってたのが結構気に入ってて、小手先で真似できない本物(必ずしも良いとは限らない)から滲み出る質感っていうか、蓄積された時間とか文化とか圧倒的な力の働きによって作り上げられたもの、どうしてもそうなってしまうものみたいなのを僕はそう呼ぶようになったんだけど、そんな感じ。いつかこれうまく説明できるようになるかなー。

sonic typeface

2007-10-06T01:54:00.000+09:00

先日衝撃を受けたオシロスコープに猫及びポルノ画像。

これはtex/tspの音響生成エンジンに使えるのではと思い試してみた。とりあえず文字の画像データを用意して、そいつを2値化して振幅に変換。とりあえず読めるレベルにはなってるのではないだろうか。詳しい解説はまた後で公開します。このアルゴリズムは多分最終成果物にはしない感じなので...。
Helvetica Neue 75 Boldを240ptで使用。

オシロスコープで出したいなー。

元画像。コード書き換えて反転なしでできるようにしよう。

processingではこんな画像ができる。

音はこんな感じ。ご家庭の波形エディタなどで読めるかどうか試してみて下さい。
ktkr.wav

sketch20070926

2007-09-26T21:41:00.000+09:00

itunesのlibraryの一部を視覚化。綺麗に見せる方法はもっと考える必要あり。
この辺参考に。
Yahoo! Design Innovation Team
QQ!'s photosets on Flickr

20070925

2007-09-26T01:33:00.000+09:00

深夜、ひと仕事終えて就寝。

朝起きてアルバイト。給料日で皆ちょっと明るい気がする。
職場の人達は皆本当に優しい。だから僕も皆に優しい。

帰りの日差しがかなりきてて、ヨーロッパみたいだった。揖斐川がドナウ川みたいだった。カリッとした描写。
空がでかい分、気分への影響もでかい。今日はいい。

住んでる環境の影響は大きくて、ツルツルのフューチャリスティックなイメージを
追い求めるのが辛くなったのもボーボーの草むらと野焼きの煙とジャージ姿の若者のせいだろう。
ここから21エモンみたいな未来...はないな。と。

未来は来ないから未来だ、って話もある。未だ来ざるもの。
予想通りになるってことは、未来は来なかったということ。

夜は夜で名月だし、夕方から夜へのつなぎは完璧。
深夜自販機までのつもりがコンビニまで歩いてしまった。少し寒かった。
多分同じような人もいることだろう。経済効果。

明日あたり近い将来について話す。

sketch20070921

2007-09-21T03:09:00.000+09:00

図書館で借りた奥村晴彦著『C言語による最新アルゴリズム辞典』読みながらprocessingでsketch。

最新っても8年前のだけど。

lorenzアトラクタを描くアルゴリズムに、色々変な値突っ込んで遊んだ。繰り返しをめちゃめちゃに増やしたり、xとy入れ替えたり。

ドラゴンカーブとかも試したんだけど、どっか間違ってるらしくちゃんと描けてなくておもろい。
いかにもカオス系っぽい感じをなくしつつ、調整すればそれはそれでありなんじゃないかと思いました。視覚効果的には。アルゴリズムグリッチ。

...真面目に勉強します。

python版とかやってる人もいます。
Pythonでアルゴリズム - Konnichiwa, A doumo

これは割と素直な描画のコード。元になってるCのコードみたいに表示位置をうまく指定する関数とか書けなかったので結果見ながら調整してます...。


float a = 10.0;
float b = 28.0;
float c = (8.0/3.0);
float d = 0.01;

float xpen = 0;
float ypen = 0;

int h = 0;
int alp = 0;
int dir = 1;

void setup() {
  size(400, 400);
  background(255);
  smooth();
  strokeWeight(0.05);
  int k;
  float x, y, z, dx, dy, dz;
  
  x = y = z = 1;
  
  scale(14);
  translate(14, -20);
  
  for(k = 0; k < 3000; k++) {
    dx = a * (y - x);
    dy = x * (b - z) -y;
    dz = x * y - c * z;
    x += d * dx;
    y += d * dy;
    z += d * dz;
    if(k > 100) {
      plot(x, z);
    } 
    else {
      move(x, z);
    }
  }
  saveFrame("lorenz.tif");
}
void move(float x, float y) {
  xpen = x;
  ypen = y;
}

void plot(float x, float y) {
  if(alp<0 || alp>100) {
    dir = -dir;
  }
  alp = alp + dir;
  println(alp);
  stroke(0,alp);
  //point(x, y);
  line(xpen, ypen, x, y);
  xpen = x;
  ypen = y;
}

20070914

2007-09-15T00:29:00.000+09:00

久しぶりにprocessingで作業してた。XMLを解析してグラフィックに。まだ途中なので公開しないけど、いずれ。

ちょっとjavascriptに行ってる間(やっと「初めてのJavascript」終わった)に、色々動きがあったようだ。
個人的に興味深いのが徳井さん。

Music 2.* Lab

タイミングのためにスレッドのとこきっちりやったり、processingのライブラリを使わないでjavaで実装したりできるあたり、さすが。本当に音系のプログラミング(で、ちょっと今までにないものを作ろうという志向)の話題はほとんどないので心強い。

ほとんどないっていうか、あったらあったでド変態。

Xヶ所村: オシロスコープに猫を

最高過ぎる。

で、processing本もまた出てます。開発者のben flyとcasey reasが書いたもの。

Books \ Processing 1.0 (BETA)

サンプルも落とせます。ちょっと動かしただけだけどオプアートっぽいのからゲームから物理シミュレーション(昔のsodaplayのソースコードもある!)から、グラフィック的にも洗練されてて、かなりいいんじゃないかなー。まずグラフィックとかから入って、それがどういう規則で作られてるかってのを、ちゃんと興味持って勉強できる気がする。ソースコードちょっと変えるだけでも面白そうなもの作れると思うし。こんなのとか。本当にパラメータちょっと変えてアニメーションにして適当にキャプチャしただけ。

max/msp night schoolとかもあるんだよねー。
2007 CNMAT MaxMSP Night School, taught by Ali Momeni | Ali Momeni

ここに来て宿題どっさりって感じだ。

snap20070906

2007-09-07T02:15:00.000+09:00

ppm

2007-09-03T01:05:00.000+09:00

画像研究入門してみた。色々入門ばっかりしてる。入門のプロになりたい。
画像研究入門

portable pixelmapて名前がいい。

とりあえずCでppm形式の画像を作ってみたはいいが、開けないのでImageMagickを入れる。
Happy KARATE Mac OSX Tiger へのImage::Magick インストール

相変わらず不安になる文字がずらーっと。
unixにも慣れていきたい。

convert filename.ppm filename.gif

でgifに変換。

ToyViewerでいい気もする。
ToyViewer for Mac OS X

cのソースを元にpythonでsketch。200*200ピクセルの画像で、1ピクセルにそれぞれr g bの値が入るので3をかけてる。最後に改行入れないとfile errorになるってとこにはまった。多次元リストでうまいことやればもっと色々描けるはず。要勉強。


size = 200*200*3
try:
        f = open('test.ppm', 'wb')
        f.write('P6\n200 200\n255\n')
        for i in range(0, size):
                f.write(chr(i%255))
        f.write('\n')
        f.close()
        print "Done."
except:
        print "file error"

Electrical Tape Sign Art

2007-09-02T00:16:00.000+09:00

修悦体、騒ぎ過ぎじゃないかと思う。
修悦体で新宿駅が便利に（佐藤修悦さんのガムテープフォントドキュメント）　トリオフォー[34]

独特な形に洗練された文字がガムテープで作られていたこと、それが特に専門的なデザインを学んだ訳でもない駅員の手によるものであったこと、何より好意からであったこと、は確かに驚きだったし、心温まる話であった。

けど、展覧会が開かれたり、皆が駅で写真撮るようになったり、装飾が過剰になってきたり、グッズが作られていったりすると、違うんじゃないかと思う。

サインとしてアイキャッチと可読性は重要だと思うし、見ていて楽しくなったりその場の雰囲気を演出してたりすれば尚いいと思う。話のインパクトとしてはそりゃあ素人が誰に頼まれた訳でもなくあんなものを作り出した方が強いとは思うんだけど、「デザイン」という観点からすれば、今の持ち上げられ方は偏ってると思う訳です。

そもそもテープでサインを作ること自体は他でもやってる人はいる。勿論これらは職業デザイナーが費用対効果を考えた上で作ってるものではあるのだけど。
Vier5
Fulguro

『情報デザイン分かりやすさの設計』という本の中に、「公共情報デザインの落とし穴」というタイトルで興味深いコラムがある。

"汎用のデザインは、地域固有の習慣に足下をすくわれる。しかも周囲の環境の変化に合わせて成長する余地も想定されていない。"

"デザイン上の課題に直面している人々、能力のあるなしにかかわらず、維持管理の必要と欲求に突き動かされて手を下した人々から学ぶべきなのである。"
情報デザイン

普段使っている駅の過剰な貼紙やアナウンスは、本当に不快で排除すべきだと僕は思う。が、おそらく必要だからやっている訳で、つまりは元々のデザインが成功していないということ。それは見直されるべき問題なんじゃないか。修悦体も、公共空間におけるデザインの、ひとつの批評として受け取りたいと思う。

こんな凄い人がいる、とか調べてみるとこんな面白いことがある、というのを伝えたいとか、広めることは悪いことではないと思うし、興奮を抑えるのは大変だし、受け取る側のリアクションにまではなかなか責任もとれないとは思うけど、単なる面白看板発見みたいな感じで終わるのは勿体無いと思う。マスメディアじゃないところから発信、というところも良かったのに、結局マスメディアによる報道と同じようにツーリズム的な消費がされてしまうのは残念だ(沢山見たい気持ちはわかる。Tシャツとか欲しくなるのもわかるけど、そこは大人になりましょうという話)。

a digital remake

2007-09-01T00:54:00.000+09:00

» A Digital Remake

装飾イニシャル文字をプログラムで生成。洒落た論文だな。
これぐらいやってみたい。

で、装飾に使われてるのがCornuってライブラリ。それっぽいのが簡単に作れそう。
NodeBoxのライブラリの使い方は

~/Library/Application Support/NodeBox/

にフォルダごと入れてしまえばいい。もしくはスケッチと同じ階層。

Core Imageライブラリとか使ったら結構簡単に面白おかしいことができるんじゃないだろうか？
今何となくjavaでフィルタとかやってる(完全に趣味)んだけど、こっちにしようかな。python覚えたいし。
Java Image Processing - Blurring for Beginners

cornuをほんの少し触ってみた。リストを入れ子にして位置指定すれば簡単。
あとは一発でjpgなりgifに書き出せたらなー。


cornu = ximport("cornu")

size(400, 400)

path = [[(0.1,0.1),(0.15,0.3),(0.4,0.2),(0.6,0.6),(0.4,0.4),(0.5,0.4)],
        [(0.1,0.1),(0.15,0.25),(0.4,0.2),(0.8,0.6),(0.35,0.2),(0.5,0.4)],
        [(0.1,0.1),(0.15,0.35),(0.4,0.2),(0.8,0.6),(0.2,0.4),(0.5,0.4)]]
nofill()
stroke(0)
for i in range(0, 3):
    cornu.drawpath(path[i], tweaks=20, points=False)

note20070829

2007-08-29T16:24:00.000+09:00

eclipse + flex 2(actionscript 3)
Aaron Spjut » Blog Archive » Continuous Integration with Flex 2 (Actionscript 3), FlexUnit, CruiseControl, Apollo and subversion on OS X

build.xmlのfailonerror="true"をなくしたらビルド通った。

eclipse + CDT(C/C++)
HelpからSoftware UpdatesのFind and Install...
Search for new features to ins...をチェックして、Next>
New Remote Site...でNameにCDTとか名前付ける、
URLはhttp://download.eclipse.org/tools/cdt/releases/europa

OpenGL
ProjectのPropertiesでTool settingsのMacOSX C++ LinkerからMiscellaneousを選び、Linker Flagsに
-framework OpenGL -framework GLUT
と追加。
あとはこの辺で遊ぶ。
OpenGL Video Tutorial - Home

OpenALもこんな感じでやってこう。

pink noise

2007-08-20T23:22:00.000+09:00

最近全く音沙汰無しとなってるopenframeworksを動かしてみる。
色々面倒なことを先に設定しといてくれてて、Xcodeなど統合開発環境の使い方も慣れていないためフルスクラッチで書く時どうするのか全くノーアイディアなんだけど、サンプルからソースを読んで何かしら勉強するのと、使うとこだけに減らして何かやってみようと思った。

audioOutputExampleてフォルダのプロジェクトを使います。
サイン波とホワイトノイズを生成するサンプルで、これのソースを読めばサイン波の作り方とホワイトノイズの作り方はわかる。

lAudio = new float[256];
rAudio = new float[256];

ってfloat型の配列を256個作って、audioRequested関数内のfor文で全てに値を入力してる。
サンプルではboolean型の変数bNoiseがtrueならホワイトノイズ、falseならサイン波という感じで指定されているが、式の形は同じ。右辺をsample * volume * leftScale;とすればサイン波(すぐ上のところでphaseの値を変えつつsin()関数で値を取得しsampleに入れている)で、ofRandomf() * volume * leftScale;とすればホワイトノイズが鳴る。単にofRandomf()関数で乱数を作ってるだけ。

で、今回はofRandomf()でなく、自分で関数を用意して、ピンクノイズを作ってみようと。

lAudio[i] = output[i*nChannels] = pinkNoise() * volume * leftScale;
rAudio[i] = output[i*nChannels + 1] = pinkNoise() * volume * rightScale;

こんな感じでofRandomf()のように呼び出したら値を返してくれる関数を作ればいい。が、そんなものを僕が自分で作り出せる訳もないので、googleでアルゴリズムを探す。こんなん見つける。

pubs on one-over-f (1/f) noise

pink noiseが1/fの揺らぎでなんとかかんとかで作業に集中できるとかいう話は聞いていたが、色々変なノイズを研究してる人達がいる。

そっからここに飛ぶ。

DSP Generation of Pink Noise

SuperColliderの開発者であるJames McCartneyも何やらやってますね。
The Voss algorithmてやつを使ってopenframeworksでピンクノイズを鳴らす。ホワイトノイズをソースにして低いオクターヴの連続を作っていく(?)手法。

C++のクラスとかその辺のことがまだわかっておらず、processing感覚でこのままクラスを作ってインスタンス作ってpn.pinkNoise()って感じで値をとろうとしたら、errorになった。値を生成するだけのコードから移植した際に何か見落としてるのかもしれない。

という訳で、特にクラスは作らずGetNextValue()関数をpinkNoise()関数として値を返してくれるような設計にする。PinkNumberクラス内のprivate変数をopenframeworksのプロジェクト内のtestApp.hのtestAppクラスにコピー&ペースト。コンストラクタの中身はtestApp.cppのsetup()関数の中に。

で、int GetNextValue()関数を一番下にでもコピー&ペーストしてpinkNoise()って名前にしてofRandomf()をpinkNoise()にすればいけるかな。あといらないとこ消して、いるとこ残して。pinkNoise()関数はそのままだと0〜128で数値が帰ってくるので0.05fをかけてます。これは単に、音がいい感じだからってだけ。testApp.hにint pinkNoise()を宣言しておくこと。

で、ビルドしたもの(build>Release>openFrameworks)とソースをzipで圧縮してここに置きました。キーボードの+と-で音量変えられます。

noise.zip

何かインタラクション仕込みたかったらmouseMoved()関数などに書けばいいかな。ドキュメントなど参照しつつ。
openFrameworks: documentation

ビルドしたものとソースは音に関係するとこをint型からfloat型にしてあります。グラフィックもつけてるから試せばわかるし当たり前だと思いますが、縦軸の解像度が上がって音が綺麗です。int型だと小さくブツブツ鳴ってる音がある。

オーディオマニア的な世界は足を踏み入れると電源が...とか水晶が...とかこの機械で地球の磁場の歪みを補正して...みたいな世界であれですが、プログラムソースの部分でも色々言ってる人いそう...もっと深い部分でだろうけど。

「ノイズの中にクリスマスソングが聴こえるんだけど聴こえる？」とか言って単なるホワイトノイズを聴かせるとほとんどの人が「聴こえる」って答えるらしい。人間はノイズの中から何らかのパターンを見いだしてしまうとか何とか。そういう傾向が強い人は何かと何かを組み合わせたり、思いもよらぬ新しい使い道を発見したりする水平思考に向いてるんだって。ピンクノイズを聴いてると作業が捗るってのはそういう意味でもあるのかも。

細かい話は今後また勉強するとして、とりあえず何かしらのアルゴリズムを使ってopenframeworksでピンクノイズ(本当にそうなのか不安になってきたけど、音的にはそれっぽい)が鳴ってよかったなと。

これを元に次はminimのPinkNoiseクラス作る。

あと、色々な色のノイズ。
Colors of noise - Wikipedia, the free encyclopedia

20070818

2007-08-19T00:20:00.000+09:00

バイト先のwebができつつある。真のweb標準野郎からしたら大量失血しそうな感じかもしれないけど...。帰りにプリンもらった。いつもおいしい差し入れをいただけるので嬉しい。社食をちゃんと食べてればそこそこ野菜も採れるし。生活リズムを改善するにはちょうどよかったと思う。25分の自転車通勤もいい運動。今日は帰り道ハックがうまくいって、静かで安全な道を発見できた。ipodの音量を無駄に上げ過ぎることなく、しかも歌いたくなったら歌える。

学校着くと春成さんのDVDが置いてある。東京展の前にコンペとか色々諸々あれしてるらしく曲を調整する時間がなくてどーんと提供しただけになってしまったけど、今後また何かできるといいな。

早速観ようと思ったんだけど僕のマシンは壊れててDVDを読み込めないので、共有のmac miniで鑑賞しようと思ったらこんなことになってた。

マウスを動かすとこのでっかい白い四角(しかも半透明)が動く。誰かの作品かと思ったけど、何かmac本体はあれな音してるし、再起動してもまたこれがでちゃうので、一通り撮影したら仕方なく別のマシンで観ることに。

で、観た！音とアニメは付かず離れずの感じで、逆に色々しなくて良かった気もする。絵がかわいいんだー。東京展(通称いまからだもんで展)行く人は観て下さい。

ちょっと前にcollect.applyのwebがリニューアルしてる。サーバエラー出たときとか、かっこいいんだ！しかも

"Do we have to tell you not to take or use anything without asking first?
We’re reasonable people and more than likely to help and share if we can."

「事前の承諾もなしにコンテンツを持ってったり使ったりするなって僕らは君に言わなきゃなんないの？
僕らは理解ある人間だし、それよりもっと役に立ったり分け合ったり、できることならしたいと思ってるよ。」

ってね。やるー。webページ自体もナンバリングされてるし。

例えば山形浩生さんとか、hippocamp(久々に見たらv3.0になってた)とか、すげーと思うのは、売られてるものより質が高いんじゃないかっていうものを無料で配ること。単にお金節約できて嬉しいってんじゃなくて、お金で計れない価値を突きつけられてる気がする。何か、いいものを見たり、いい体験をする。それに対して、お金を払う。それはそれで良い。けど、そこでお金別にいらないよって言われた時に、どうすればいいんだって思う。

レーベルオーナーでもあるblue sky researchのSommerbokkenはオールタイムベスト。本人は消したがってるみたいだけど...。
Sommerbokken

bsrの他のお気に入り集。昔processingでsonia使って音響解析した映像作品とかもいち早く作ってたな。どうやって生活してるんだろ...。
Greenish Yellow
Northern Rainy City
Happy Samantha Live Version

さすがに時代を感じる音ではあるけど、僕は未だにほわーんて感じのシンセ、ビート、ちょっとボイスサンプルってのに弱いみたいです。Happy Samantha Live Versionはアルス行った時に調子乗ってバーで人生で初めてDJ(itunesのプレイリストかけただけ)した時にかけて盛り上がった。daito君がめっちゃ酔ってHow deep is donau? How deep is my love?とかいうラブレター書いた可愛い店員さんが踊ってたのを思い出す(確かにすげー可愛かった!)。