Cafe Diary ログに戻る

2011-12-15

Processingでレイアウトエディタを作ろう

前回に続いて、Processing Advent Calendar 2011の12/15の記事を書きました。

今回は、レイアウトエディタもどきを作ってみたいと思います。

でも、いったい何をレイアウト(配置)するのか?
ひとことで言うなら、「描画関数をレイアウト」します。

LayoutEditorサンプルのページへ

ソースファイルは2つ。
描画関数を抽出したり、描画リストを管理する LayoutManager.pde と、
マウス位置にあわせて描画関数を描画リストに登録する LayoutEditor.pde です。

まず、setupの中で LayoutManager というクラスを初期化しています。

// 初期化
void setup() {
  size(512, 512);

  // 描画関数をレイアウトマネージャに登録
  layout = new LayoutManager(this, "draw_");

  setupGUI();
}

このLayoutManager クラスは、引数として渡された "draw_" という文字列で始まる関数を this (PApplet) の中から見つけてきて記録しています。

// 特定の名前で始まる描画関数を抽出
LayoutManager(Object classObj, String methodPrefix) {
  this.classObj = classObj;
  this.methodPrefix = methodPrefix;
  this.methods = new HashMap<String, Method>();
  this.items = new ArrayList<Item>();

  // 引数で渡されたクラス内で特定名で直接実装された関数を記録
  Method decMethods[] = classObj.getClass().getDeclaredMethods();
  for(Method m: decMethods) {
    if(m.getName().indexOf(methodPrefix)==0) {
      println("LayoutManager: add method : " + m.getName());
      methods.put(m.getName(), m);
    }
  }
}

関数を名前で探すためには、クラス情報にアクセスする必要があります。
そのためにJava のリフレクションという機能を使ってます。

getDeclaredMethods() は、直接宣言している全てのメソッドを返す関数です。つまり、親クラスのメンバは無視してるわけですね。まぁリフレクションの乱用は禁物だと思いますが、なかなか面白いです。[1]

記録した描画関数のテーブル(HashMap)は、LayoutEditorの描画関数選択や描画リスト追加で使用しています。

なお、リフレクションを使うには、最初に以下のような import をしておく必要があります。

import java.lang.reflect.*;
  • [1]ちなみに、名前で抽出というのはどうもなぁ、と思ったときには、関数の前に「@〜」と独自の印を付けられるアノテーションという機能を組み合わせるとよいでしょう。ただ、Processingの一見グローバルな位置にあるコードは、実際はProcessingのアプリクラス内部のコードになります。独自アノテーションを定義するには、ライブラリ化やEClipse利用など、工夫が必要かもしれません。

さて、ここまでで描画関数全種類の記録はできました。あとは現在選択している描画関数を、
クリックした位置にあわせて LayoutManager の描画リストへ追加するだけです。

layout.add(currentMethod, mouseX, mouseY);

この currentMethod は関数の名前を持つString型の変数です。

今回は controlP5 というライブラリを使って、ドロップダウンリストやボタンを作っています。
GUIについては、サンプルコード、LayoutEditor.pde の setupGUI や controlEvent 関数を見てみてください。

リフレクションで取得した関数の実行方法は、LayoutManager の draw 関数内にあります。

// 登録した描画コマンドを発行
void draw() {
  for(Item it: items) {
    pushMatrix();
    applyMatrix(it.matrix);        // 位置などを設定
    try {
      it.method.invoke(classObj);  // 登録してある描画関数の呼び出し
    } catch (Exception e) {
      throw new RuntimeException(e);
    }
    popMatrix();
  }
}

it.method.invoke(classObj); が関数を実行している箇所です。
try〜catchの例外処理で挟まないとエラーになるのでご注意を。

今回はよりクレイジーな雰囲気を重視して(?)、リフレクション機能を使って生の関数を登録するようにしていますが、引数やメンバの値をパラメータ設定して渡したり、クラスを使ったりするのもよいと思います。

たとえば、GUI部品レイアウトエディターとか作れそうです。

描画位置については、今回は位置だけなので applyMatrix ではなく translate で十分なのですが、
回転やスケーリングもすぐに対応可能なように Matrix にしてあります。

そうそう、書き忘れていましたが、アプレット上では「Save」ボタンが使用できません。
ローカルで「Save」すると、LayoutEditor で追加した描画リストをProcessingのコードとして出力できます。

Processingはソースコードを書いて簡単に絵的な表現ができるのが楽しい言語ですが、
逆に絵的な入力からソースコードを出すこともできる、と。

最後にオマケとして3Dバージョンも作ってみましたので、参考までにどうぞ。
こちらは controlP5 のP3Dでのテキスト描画に問題があったため、
かわりに SpringGUI という GUI ライブラリを使っていますが、やっていることは同じです。

LayoutEditor3Dサンプルのページへ

Utility.pde は前回の Unproject.pde 内から必要な関数を持ってきただけです。
LayoutEditor3D.pde は LayoutEditor.pde と Unproject.pde をあわせた感じで、
2Dを3D対応にして、カメラ回転や移動ができるようにしました。
LayoutManager.pde の中身は同じです。

えーと、今回はこんなところです。

昨今はソースコードと素材データだけでモノを作る作り方だけではなく、エディターと連携した作り方も増えてきています(といいつつ、実際は昔からそうですけど)。そういったツール作りの参考になればと思います。

工夫すればUnityのような「動かしながらの調整」ができるリアルタイムエディタも作れるかもしれませんね。

# 本当は3Dの方を先に作ったのですが、余計なものが多いので2Dバージョンを作ったという。



Trackback(0)

2011-12-2

Processingでスクリーン座標を3D座標に変換

今、巷では技術系Advent Calendarというのが流行っているらしく、
WritingCafeでもひとつ参加してみることにしました。

まぁ、12月頭からクリスマスまでの間、各言語やテーマに沿った記事を1日1つ、
いろんな人が書いていくお祭りみたいなもの(?)です。

そんなわけでProcessing Advent Calendar 2011の12/2担当記事はこちら。

「Processingでスクリーン座標を3D座標に変換する方法」です。

Unprojectサンプルのページへ

Processingで3D空間の座標(モデル座標、オブジェクト座標)をスクリーン上の2D空間に変換するには、
screenX(x, y, z)、screenY(x, y, z)といった関数を使います。

では、スクリーン座標を3Dのモデル座標に変換するには、どうしたらいいでしょう。

そんなときにあるのがmodelX(x, y)、modelY(x, y)といった関数――だといいのですが、そうではなく。
modelX、modelYは単にローカルなモデル座標をワールド座標に変換してくれるだけです。
なので、あいかわらず3D空間の値しか取れないのです。

OpenGLの関数、gluUnprojectを使えばスクリーンの2D空間の座標を3Dの座標に変換できますが、それだけのためにOpenGL関数やOpenGLレンダラーを使うのはどうも……。

というわけで、今回はこれをProcessingの関数のみで計算してみます。

2D→3D変換の前に、まず3D→2D変換のための行列を作りましょう。

// モデル座標をスクリーン座標に変換する行列を取得
PMatrix3D getModelToScreenMatrix() {
  PMatrix3D projection = new PMatrix3D();
  matrixMode(PROJECTION); getMatrix(projection);
  
  PMatrix3D modelview = new PMatrix3D();
  matrixMode(MODELVIEW); getMatrix(modelview);
  
  PMatrix3D viewport = new PMatrix3D();
  viewport.m03 = viewport.m00 = width * 0.5f;
  viewport.m13 = viewport.m11 = height * 0.5f;
  
  PMatrix3D m = new PMatrix3D(modelview);
  m.preApply(projection);
  m.preApply(viewport);
  return m;
}

モデルビュー行列やプロジェクション行列の取得方法は、リファレンスには載っていませんが、
matrixModeとgetMatrixを組み合わせると取得可能です。[2]
ちゃんとviewport行列も作っているところがポイント。

  • [2]PGraphics3Dのメンバ変数を PGraphics3D p3d = (PGraphics3D)g; 経由で、p3d.modvwとか、p3d.projectionとか、p3d.cameraといった行列を直接参照する方法もあります。

3D→2D変換の行列ができれば、目的の8割は達成したといえます。

// モデル座標をスクリーン座標に変換
PVector projectScreen(PVector v) {
  PMatrix3D m = getModelToScreenMatrix();
  return matrixCMult(m, v);
}

projectScreen関数内では、getModelToScreenMatrixで取得した3D→2D変換行列を
matrixCMult関数を使ってモデル座標のベクトルを掛けあわせた後、wで割っています。

// 行列で変換したベクトル(wで割ったもの)を返す
PVector matrixCMult(PMatrix3D m, PVector v) {
  PVector ov = new PVector();
  ov.x = m.m00*v.x + m.m01*v.y + m.m02*v.z + m.m03;
  ov.y = m.m10*v.x + m.m11*v.y + m.m12*v.z + m.m13;
  ov.z = m.m20*v.x + m.m21*v.y + m.m22*v.z + m.m23;
  float w = m.m30*v.x + m.m31*v.y + m.m32*v.z + m.m33;
  if(w!=0) ov.mult(1.0f / w);
  return ov;
}

中身はともかく、projectScreen関数は、以下のように呼び出せばOK

PVector modelPos = new PVector(10, 20, 30);
PVector screenPos = projectScreen(modelPos);

screenPos.x、screenPos.y に それぞれ screenX や screenY 関数で計算したときと
ほぼ同じ値が入り、スクリーンに投影できていることが分かります。

これをふまえて、2D→3D変換の関数を作ります。

// スクリーン座標をモデル座標に変換
PVector unprojectScreen(PVector v) {
  PMatrix3D m = getModelToScreenMatrix();
  m.invert();
  return matrixCMult(m, v);
}

違うのは関数名の他に1行だけ。

m.invert();

と、変換行列を逆行列にしているだけですね。

unprojectScreen関数を使うときは、以下のように呼び出せばOK

PVector mouse3D = unprojectScreen(new PVector(mouseX, mouseY, 0));

さらにunprojectScreenでZ値を1にした座標やカメラ位置と
mouse3Dの差分ベクトルを使ったりすればマウス位置から3D空間に飛ぶ直線が得られます。

詳しいところはサンプルをいじって確認してみましょう。

# 本当は別の少しクレイジーなネタを書くつもりだったのですが、
# そのためにこの変換処理の説明が必要だったので、こちらを記事にしちゃいました。



Trackback(0)

2011-11-11

ProcessingのMQOLoaderをライブラリ化

前回作成したMQOモデルファイルの読み込みクラスを、ライブラリ化しました。

使い方は、プログラムの冒頭あたりで

import eyln.mqoloader.*;

とライブラリを import した後、

MQOModel model = new MQOModel(this, "ファイル名"); 

のようにモデルをロードして[3]

  • [3]ファイル名なしのコンストラクタで初期化したあと model.load("ファイル名") でもOK
model.draw();

と描画するだけです。

使ってみたい方は、こちらのMQOLoader.zipをダウンロード後、Processingの作業フォルダ(Sketchbookフォルダ)直下のlibrariesフォルダに展開(解凍)してご使用ください。ライセンスはMIT Lisenceです。

しかし、Javaは不慣れ(というかProcessing以外で触れたことがほとんどない)でライブラリ化に結構手間取りました。公開されている processing-library-template やフォーラム Problems using the library template のおかげでなんとか。(でもライブラリテンプレート自体にバグがあったとは…)

改良Verなどできましたら、ぜひご連絡を:)



Trackback(0)

2011-11-4

Processingで3Dモデル表示&環境マッピング

Processingで3Dモデルを表示するライブラリはいくつもあります

でも微妙に思い通りにいかなかったり、P3DではなくOpenGLレンダラー用だったりしたため、今回はMQOモデルを表示するクラスをベタに自作してみました。

Model3DViewサンプルのページへ

モデルロードとワイヤーフレーム、フラットシェーディング、グローシェーディングなどだけだと地味だったので、ついでに環境マッピングに対応しています。

普通のフラットシェーディングだと以下のような感じ。

実は最初に出した以下の画像は、ライトオフで描画したモデルの上にαチャンネルありのスフィア環境マップ(反射マップ)として光と影を描き込んでいます。

その画像の階調を少なくすると……

こんなふうにセルシェーディング(トゥーンシェーディング)風になります。

金色の環境マップを適用すれば金属風に(メッキっぽいですね)。
反射ではなく、屈折マッピングもできます。

これもフェイクですが、ガラスっぽくなりました。

なお、MQOモデル表示といえばProcessing上でメタセコイア形式データを表示するライブラリもあるので、OpenGLレンダラーで高速に表示したい方は、そちらもオススメです。



Trackback(0)

2011-9-5

KinectMagicKnight - 魔法の剣と弓矢で遊ぶ300行プログラム

前回は動画だけでしたが、
今回はKinect Magic Knightのアプリとソースコードを公開します。

KinectMagicKnightサンプル

3種類の画面モード(通常カメラ、深度カメラ、3Dドットカメラ)があります。
このスクリーンショットは深度カメラのもの。

ソースコードも適当に書いてるときは600行ぐらいあったのですが、
300行程度にスリム化してみました。

プログラムはProcessingで書いてます。
剣と弓の切り替えの認識は単に手や頭の位置を見ているだけだったり、わりとシンプルな仕組みでこういったことができることが分かると思います。
(盾は球をscaleで変形させたり変なことしてますが)

このアプリで遊んだり、ソースを参考に色々KinectHackしてもらえると嬉しいです。

KinectとPCの接続方法について

KinectMagicKnightやOpenNIを利用したKinectHackを試すには、少し手間ですが、あらかじめ、OpenNI関連のドライバをインストールして、
Xbox360の周辺機器 "Kinect" をPCにUSBケーブルなどで繋いでおく必要があります。

インストールはOpenNI: WindowsでKinectを使うのページが大変参考になりましたが、現在のバージョンでは不要な手順もあるので、以下に必要なものを書きます。

1. OpenNIをインストール

OpenNIのページにある、
OpenNI Unstable Build for Windows x86 (32-bit) v1.3.2.3 Development Edition
などをダウンロードして、インストールしてください。

2. SensorKinectをインストール

SensorKinectのページにある、Downloads -> Download.zip
などをダウンロードして、解凍してください。

KinectをUSBケーブルでWindows PCに接続すると、
ドライバのインストール画面がでるので、ドライバの検索場所に
avin2-SensorKinect-12ad25d/Platform/Win32/Driver
など、先ほど解凍したフォルダ内の Platform/Win32/Driver を指定してインストールを行います。

※Kinect単体で購入した場合は問題ありませんが、Xbox360本体のKinect同梱版には、PCにつなぐためのケーブル(電源/USBが二股になったもの)が付いていません。
これは、Xbox カスタマーサポートに電話して3,830円(送料込み)で注文できます。

その後、先ほど解凍したフォルダ内に
avin2-SensorKinect-12ad25d/Bin/SensorKinect-Win-OpenSource32-5.0.3.3.msi
といったインストーラーがあるので、こちらも忘れずにインストールしてください。

3.NITEのインストール

OpenNIのNITEのページにある、
PrimeSense NITE Unstable Build for Windows x86 (32-bit) v1.4.1.2 Development Edition
などをダウンロードして、インストールしてください。

4.再起動

以上でOpenNI関連のインストールは完了です。
念のためPCを再起動しておきましょう。



Trackback(0)

2011-8-30

Kinectで魔法の剣や弓を手にできたら? - Kinect Magic Knight

Kinect は、なんて楽しいおもちゃなんだろう。
というわけで、Kinectを使って魔法の剣や弓を召還……もとい、合成表示するプログラムを作ってみました。
プレイ動画はこちら。

ところどころ、昔の白黒映画みたいな動きになってるのはご愛嬌。
この動画に撮る処理もプログラムで書いているため、フレームレートが実際の半分ぐらいになってます(実際はもうちょっと滑らかです)。

プログラムには、ProcessingとSimpleOpenNIを使用しています。
サンプルも充実しているので2日ぐらいで作れました。

と言っても、いろいろ適当すぎる内容だからというのもあります。見ての通り、剣、盾、弓、矢はすべてBoxやSphereだし。でも、作っていて楽しかったです。

剣モードと弓モードの切り替えや、弓の操作が若干ジェスチャ入力っぽく思うかもしれませんが、ここもシンプルに手首の現在位置を見るだけで処理しています。

あとはターゲットを作ったり、視点を変えたりすれば、このままゲームも作れそうですね。

そのうちアプリもアップする予定ですが、今日はこのへんで。
その際はKinect用ドライバのインストールから記事を書きます。

9/5 追記

ドライバのインストール方法や、ソースコード、実行ファイルを用意しました。
こちらからどうぞ。



Trackback(0)

2011-7-19

OpenFrameworksを使ってiPhoneで3Dモデルを表示

今回はOpenFrameworksを使ってiPhoneで3Dモデルを表示する手順を紹介してみようと思います。
ソースはサンプルそのままで。

OpenFrameworksはProcessingと同様にメディアアート系でよく使われているライブラリで、Processingと似たところがいろいろ。Kincect Hackなんかでも使われていますね。ベースとなる言語は、ProcessingがJavaで、OpenFrameworksはC++です。

まずOS XにXcodeをインストールします。Xcode 3は無償で、Xcode4はMac App Storeで現在450円で販売中(iOS and Mac Developer Programsに加入していれば無償です)。[4]

次に最新(v007)のOpenFrameworksをGitHubからダウンロードします。Downloadsから一式ダウンロードするか、Github for Macのクライアントなどを使ってダウンロードするかはお好みで。[5]

  • [4]7/21にOS X Lionのリリースと同時に最新のXcode4は無料になったようです。
  • [5]7/22にv0.07 が正式リリースされたのでOpenframeworks公式サイトのDownloadsから一式ダウンロードすれば、Githubを使ったり、プロジェクトを生成したり設定したりを省けるかも。あとMacやiPhoneだけでなく、Windowsやandroid版もあります。

Githubは、タコのような、ネコのような、この不思議なキャラクターも見所です。

さてダウンロードもできたし、サンプルをビルドを――といきたいところですが、この段階だと多くのサンプルのプロジェクトファイルがありません。

ダウンロードしたデータのディレクトリ内直下にある、 _OF_PROJECTS_README.txt の指示にあるとおり操作してプロジェクトファイルを作りましょう。

OS Xの場合は、apps/_devApps/_DeployExamples/deployExamples.xcodeproj をXcodeで開いてビルドと実行(CTRL+R)すると、各サンプルのプロジェクトファイル(xcodeproj)を作ってくれます。

これでOFの準備は終わりました。

では、3Dモデルを表示するサンプルを実行してみましょう。
apps/iPhoneAddonsExamples/assimpExample/assimpExample.xcodeproj
を開いてビルドと実行(CTRL+R)です。

しかし、おそらくエラーが出ると思います。
「!」マークをクリックするとエラーの内容がわかりますが、Xcode3での解決方法は

  • 「プロジェクト」メニューの「プロジェクト設定を編集」を選ぶ。
  • 「ビルド」タブの「Deployment」設定にある「Mac OS X デプロイメントターゲット」を「コンパイラのデフォルト」(または最新のもの)にする。
  • 「ビルド」タブの「アーキテクチャ」設定にある「アーキテクチャ」を「Latest iOS (iOS 4.3)」(または最新のもの)にする。

でたぶんOK。あとは実行するデバイスをシミュレーターにします。

  • 「プロジェクト」メニューの「アクティブなSDKを設定」で「Simulator」を選択。
  • 「プロジェクト」メニューの「アクティブな実行可能ファイルを設定」で「- iPhone Simulator」を選択。

そしてビルドと実行をすればiPhoneシミュレーターが起動してアプリが動きます。

へんな3Dキャラクターがアニメーションしていれば成功です。

ちなみにProcessingのObjimportではどこかおかしかったモデルも、OFのassimp AddOnでは簡単に問題なく表示できました(objモデルの表示だけであれば他のAddOnもあります)。

こちらのモデル素材はモデモデで公開されているものをお借りしました。

サンプルは、ほかにもたくさんあるのでいろいろビルドして遊んでみるのも楽しいです。
あと、OpenFramworks関連の日本語記事では、yoppa.orgが大変充実していますのでおすすめです。



Trackback(0)

2011-7-13

Processingで簡単Androidプログラミング

最近Androidの話題をよく見かけてまして、そういえばProcessing 1.5からAndroid書き出し機能が追加されてたなと思い――ProcessingプログラムをAndroidで実行してみました。

元となるプログラムはProcessingで作る、100行プログラムのアドベンチャーゲームのソースです。

まず、右上にある「STANDARD」をクリックして「ANDROID」に変更します。

と、その前にAndroidSDKを入れないとですね。Processing for Androidなどの記事を参考にAndroid SDKをインストールして、エミュレーターを起動します。

Program Filesなどの下に入れるとパスのスペースのせいでヴァーチャルデバイスの起動に失敗したため、ドライブ直下にAndroidフォルダを作ると上手くいきました。

CTRL+F11で横向きにしてあります。

あとはいつもどおりProcessingの実行ボタン(またはCTRL+R)を押すだけ。

エミュレーターは遅いですが、今回は特にソースの変更もせずに、一応動きました。
全部上手くいくとは限りませんが、お手軽ですね。



Trackback(0)

2011-6-28

Processingで貼り絵シェーダー

おむすびをもらったお礼……ではないですが、
今回は画像を貼り絵(ちぎり絵)風にしてリアルタイム描画してみました。

HarieViewサンプル

上がオリジナルの画像、下が貼り絵風に変換した画像です。

最初は折り紙を破いた写真を撮影してそれを散りばめようと思ったのですが、面倒だったので、ひとまず矩形描画だけでやってみました。

Pictorial3DViewのときと同じく、処理は簡単です。ベース画像のピクセルを見て、新しい画像の位置にランダムに回転させた矩形を描いているだけ。ポイントは若干スキマが空くようにするのと、たまに白い縁取りをつけること。

ソースコードは、約60行ぐらいです。

ちなみに描画をカクカクさせているのはわざとです。あまりに高速に切り替わると貼り絵なのか判別できないので。

リンク先のアプレットをクリックすると元画像が切り替わります。

同じ理屈で応用もいろいろ。矩形や紙の代わりに石の写真を使えば石シェーダー、水滴を使えば水滴シェーダー、豆腐を使えば豆腐シェーダー、果物を使えば果物シェーダー、人を使えば人文字シェーダー。……あとはご想像にお任せします。



Trackback(0)

2011-6-26

モニターを100円で木製に?

前にプラケースをレンガ調にリフォームしましたが、今回はパソコンの液晶ディスプレイを木目調にリフォームしてみました。

リフォーム前の製品はこんな感じ。

微妙な仕上がりではありますが、リフォーム後は↓こう。

やり方は簡単。100円ショップで売っている「木目調のリフォーム用シート(シール)」を貼るだけです。よく大理石とかもありますが、今の部屋はどっちかというとアンティーク系なので、今回は木目で。

凹凸の激しい部分を貼るときのコツは、あまり細かいことは気にせず思い切ってやることです。特に下で本体を支える部分はデコボコしてるので、綺麗に貼ろうとすると頭痛が。なので、適当に大きめに切って、貼りながらカッターで切れ込みを入れ、ざっくり貼ってしまいます。そのあと、足りない部分に上から重ね貼りすればOK。

以上、Twitterでつぶやいたままこちらでは記事にしてなかったので、簡単にまとめてみました。

しかし、100円でシールを買ったけど3割も使ってない……残りはどうしよう。



Trackback(0)

2011-6-24

窓シミュレーターが雑誌デビュー

WindowSimulatorが掲載された雑誌、Mr.PC 2011年8月号をいただきました。
ありがとうございます!

※後日ソフトの名称を変更しました。

雑誌でいろんなツールを見るのも、ネットとは違った便利さがありますね。ある種、独特のセレクトショップ的な感じがあったり、シンプルにまとめられていたり、探してないツールも目にしやすいので、それでハッとできたり。



Trackback(0)

2011-6-2

Processingでドリブルアクションゲーム

フットサルというミニサッカーのようなスポーツがあって、たまに友人たちと遊んだりします。普通はドリブルよりも、ボールをパスをうまくつなげる方が断然早いし、それはそれで楽しいのですが……でもやっぱり、ボールをたくさん触りたいじゃないですか。

そこでコレ。「ひとりでドリブルしてシュートしたい」という欲求を受け止めてくれるゲームを作ってみました。

Dribbler(Web上で実行はしません)

ソースは、今回あまりにも雑なので載せてません。

全体的にいろいろ未完成のプロトタイプバージョンですが、enjoy it!



Trackback(0)

2011-5-24

無料オンラインストレージ三昧

以前からDropBoxを日常的に使っていたのですが、震災の影響もあって大事なデータをバックアップという意味でもこういったサービスはありがたいなぁと思うようになりました。

写真とかプログラムとか無くなると悲しいし。

そこで、3つの無料クラウドストレージを使い倒すという記事にある、SugarSyncZumoDriveも試しにインストールしてみました。

DropBoxやSugarSyncはローカルにあるフォルダなどをオンラインで同期する方式で、ZumoDriveはオンラインにあるファイルを仮想的なドライブ(Zドライブ)を通してアクセスする方式(キャッシュできます)です。

気に入れば有料サービスを利用して容量の拡張もできますが、無料でもかなりの容量が提供されています。

以下の各サービス招待リンクから登録していただけると、紹介者(n_ryota)と紹介されたひと(あなた)の双方に250MBぐらいの容量が無料プレゼントされるので、もしよろしければどうぞ。

※上記は、2011/5/24現在の情報です。


Tag : ツール

Trackback(0)

2011-4-30

プラケースをリフォーム

レトロ調(?)の部屋の中で大きめのプラケースの存在が浮いてるので、どうにかしたい。でも新しい家具を増やしたくはない。

そんなわけで、プラケースを300円リフォームしてみました。

100円ショップで買ったレンガ柄のシール(80x30cm)を3枚を、プラケースの見える部分に切り貼りしていくとこんな感じになります。

テクスチャは偉大です。

ちなみに貼る前はというと…

こんな有様でした。
中身が見えるのは、なにかを探すにはよいですけど。

使ったシートは↓コレ。

ダメージのあるレンガ柄なので少々雑に貼っても気にならないのがよいです。
コツは中央から伸ばしながら貼ること。
反対側や後ろにも貼りたい場合は、もう数枚必要ですね。



Trackback(0)

2011-4-5

Twilogに登録

WritingCafe/n_ryotaのTwilog

WritingCafe/n_ryotaのTwitterでのつぶやきをTwilogでまとめて見られるようにしました。
Memolaneの方もカッコよくていいけど、Twilogは分かりやすくていいです。
メモがわりにつぶやいたりRTしてることがあるので、自分的に便利そうです。



Trackback(0)

2011-3-30

窓シミュレーターの認識を向上&高速化

前回作成したWindowSimulatorをバージョンアップしました。
やったのは背景差分機能の追加と高速化です。

WindowSimulator(Web上で実行はしません)

身体を素早く動かしているときなど、顔の位置を認識できなかったときに、背景と人物の差分から顔の位置を推測(頭は普通上の方にあるよね、と決めうち)するようにします。

UseDiffのチェックボックスをONにして3秒後にカメラから無人の背景を一時記憶するので、いったんカメラに映らない場所に身を隠してください。
(カメラに明るさを自動補正する機能がある場合、うまく背景差分がとれないことがあります)

上にあるグレーのカメラ画像で顔の前に出る赤枠が顔認識位置です。その下にある白黒カメラ画像の上に出る青枠が背景差分の塊認識で、緑枠がそれをもとにした最終的な顔位置です。

その他、以下のような各種高速化も行ってあります。

  • 描画をP3DからOpenGLに変更
  • Webカメラのキャプチャサイズを半分に
  • Webカメラの更新間隔を8フレームに1回に

さらなる高速化などはOpenFrameworksとか使わないと難しいかな、という印象です。

ソースは400行ちょっとになっちゃいました。


Tag : Processing, UI

Trackback(0)

2011-3-26

窓シミュレーター- パソコンのモニターをバーチャルな窓に

今回はProcessingでバーチャルな窓を作ってみました。
どこでもドアみたいな窓です。

WindowSimulator(Web上で実行はしません)

カメラで顔の位置を認識して、その位置から見えるであろう風景や窓をモニターに描画する、という仕組みで本物の窓っぽさを出しています(技術的な新しさはないです)。ただ、そんなに動作速度が速くないので、ゆっくり動くのがコツです。あとカメラの性能や室内の明るさや背景にある物なども影響します。

カメラがない場合はマウスカーソルの位置を顔の位置ということにして動作します。起動直後はカメラの認識がOFFになっているので、カメラを使う場合は、マウスカーソルを画面上部にもっていくと出てくるUseCameraチェックボックスをONにしましょう。

背景はローカルファイル、ネット上のURLを指定することで、自由に変えられます。

今はそれどころではないと思いますが、今回の震災で変わる前の街の様子をこの窓を通して見ることもできます。過去の大切な思い出にいつでもつながる窓として、ほんのひととき、なんらかの形でお役に立てたらいいなと思います。

# 震災とは別の話ですが、自分の場合は、上京している間に故郷の海岸が整備され、
# 小さい頃に遊んでいた景色が様変わりしてしまいました。そのことが寂しくて、
# またそこにつながったらいいな、という気持ちもありました。
# 切なくもありますが、それが確かにあったという事実は変わらないですから。

ソースは約330行で、カメラキャプチャにJMyron、顔位置の認識にOpenCV、ボタンなどのユーザーインターフェイスにSpringGUIを使用しました。

プログラムを作る上でのポイントは、窓枠と背景でカメラの視線のずれ具合を変えている点です。これをしないと窓枠が非現実的にモニターからはみ出したり、背景がほとんど動かなかったりするので。

しかし、プログラムは2日ぐらいで出来たのに、公開できるようにいろいろ整えるのに時間がかかるなぁ。

3/29 追記

カメラを使おうとすると、OpenCVとJMyronのDLLが不足していて動かなかったのでDLLをZIPに含めるようにしました。動作確認はWindowsXPでのみ行っています。

3/30 追記

背景差分機能の追加と高速化を行いました。詳しくはこちら



Trackback(0)

2011-3-20

ソースファイルをHTMLに読み込んでハイライト表示する jquery-incode

Programsjquery-incodeという小さなJavaScriptライブラリ(関数)を追加しました。

これを使うと、HTMLの任意の箇所にソースファイルをJavaScriptで読み込んで、プログラム言語の文法にあわせてハイライト表示できます。

詳しくは解説を見ていただくとしてサンプルはこんな感じです。

ハイライト表示にはjquery-syntax.jsを使っています。

このjquery-syntax.js単体で、HTMLのpreタグの中に直接ソースコードを記入してハイライト表示ができるのですが、ソースファイルとHTMLのpreタグ中に書いたソースの2種類を管理するのは嫌だったので、ファイルを読み込んで表示できるようにしました。

元々はProcessing関連のソースを公開する際に、UTF-8のソースに直接リンクするとブラウザ上で日本語のコメントが文字化けするという問題が発端。これが見苦しかったのでファイルを読み込もうとして、どうせならハイライト表示も、という感じで作りました。

jqueryもjquery-syntaxもその日(地震の前日ぐらい?)初めて使ったものなので、重大な間違いがあるかもしれません。使用は自己責任で。



Trackback(0)

2011-3-18

東日本大震災

Twitter上ではいろいろ呟いてますが、こちらでは地震に触れてなかったので、少しだけ。

我が家は東京よりの埼玉なので、震度5くらいの揺れでした。iPhoneにゆれくるコールをインストールしていたので事前に地震が来るのが分かって心の準備ができてましたし、トースターが落ちたくらいで被害はほとんどなかったです。現在は節電しつつ、なるべく普段通りに暮らしてます。


地震義援金のまとめが分かりやすかったので、WritingCafeからもリンクしました。
こういうのは無理のない範囲で、少しずつみんなが協力するのが一番いいと思います。

被災された皆様の無事、お亡くなりになられた方のご冥福をお祈り申し上げます。



Trackback(0)

2011-3-8

ProcessingでTweetカードゲーム

今回はProcessingでTwitterのつぶやきをカードゲームのカードふうにしてPDF出力してみました。

TweetCardsサンプル(Web上で実行はしません)

Twitterの最新PublicTimelineからつぶやきをひっぱってきて、つぶやきごとにカードを作成しています。

できあがったPDFのサンプルはこちら
両面印刷するか厚紙に貼り付けるかして、ハサミで切り取ればカードにできます。

ユーザーアイコンの左右にあるのは「フォローしている数」、「フォローされている数」です。
これらを使ってゲームルールを作るのもよし、2部印刷して神経衰弱するもよし、単純にポスターとして飾るもよし。

ソースは約150行。Twitterへのアクセスにはtweet4jというライブラリを使いました。

日本語フォントのPDFへの出力がうまくいかなかったので、PGraphicsPDFとは別にPGraphicsを作成し、そちらにカードを1枚描画してからimage命令でPDFの方に描画する、といった小細工をしています。

あとカードの裏の模様は、画像を使えばいいものを、ムダにプログラムで図形描画して生成しています。

このソースをもとに、Friendsメインに改造するのもよいですね。



Trackback(0)

2011-3-5

ProcessingでMovie作成

Processingで処理した画像をムービーとして出力するテスト。

少し前に作った3D Shootingを使ってやってみました。

Processingには便利なライブラリがあるので、こういったことも簡単にできます。
付け加えるコードは7行程度です。

ファイルの冒頭にまず、これ。

import processing.video.*;
MovieMaker mm;

次にsetup関数内のsizeを指定した後に、

  mm = new MovieMaker(this, width, height, "sample.mov", 60, MovieMaker.MOTION_JPEG_A, MovieMaker.LOSSLESS);

あとはdraw関数の最後に

  mm.addFrame();

で、キー(今回はMovieの頭をとって、Mキーにしました)を押したら出力を終了するようにしたら完成です。

void keyPressed() {
  if (key == 'm' || key == 'M') mm.finish();
}

出力したファイルをYouTubeに投稿したら冒頭のものができました。お手軽ですね。



Trackback(0)

2011-2-28

Processingで3D描画を絵画調に

今回は3Dの箱を絵画調(?)に描画してみました。

Pictorial3DViewサンプル

左上のAがオリジナルの3D画像、右上のBが絵画調に変換した画像、
左下がその2つを合成した画像です。

処理は簡単です。ピクセルを見てランダムに斜めの線を引いてるだけ。
そのわりにソースコードが冗長で、約60行ぐらいです。

でもこういうことも簡単にできるのがProcessingのいいところです。



Trackback(0)

2011-2-25

OpenProcessing

OpenProcessingというサイトでProcessingのコードをシェアできるようなので、登録してみました
いろいろ眺めるのも楽しいです。

登録のやり方はOpenProcessingでスケッチを共有するが分かりやすかったです。



Trackback(0)

2011-2-24

Processingで作る、300行の3Dスペースシューティング

前回が2Dだったので、今回は3Dのゲームを作ってみました。

SpaceShootingサンプル

マウスカーソルを動かして向きを変えて、左クリックで弾を発射です。右クリックかスペースキーで加速、離すと減速です。10体の敵をすべて倒せばクリアです。

何秒で敵を殲滅できるでしょうか。

プログラムするときに困ったのは、pushMatrixやpopMatrixはあるのに、Matrixを取ってくる関数やMatrix型がリファレンスに無かったこと。Matrixなしで3Dゲームは辛い……。いや、普通あるだろう――とWebでいろいろ検索してみたらgetMatrixとか、PMatrixとかありまして、おかげで無事プログラムできました。

今回はClassも使ってしまいました。ProcessingのIDE(=PDE)は、クラスを別ファイル(別タブ)にして扱ったりもできるのですが、あえて1ファイルにしてあります。

宇宙モノはモーションいらないし、背景の星も点や球でよいので楽ですね。

続報

3/5にこのゲームの画面をMovieで出力する解説を追加しました。



Trackback(0)

2011-2-16

Processingで作る、100行プログラムのアドベンチャーゲーム

ひさびさの更新でWikiの文法を忘れてる今日この頃ですが、
アート系のプログラミングで使われることが多いProcessingで、アドベンチャーゲーム風のプログラムを書いてみました。

AdventureGameサンプル

ソースコードはコメント込みで約100行です。シナリオのテキストを読み込んで解釈して実行してます。フラグや条件分岐、サウンド再生などは省いているので、そういった機能を足してみるのもいいですね。

Processingは3Dでもカメラ入力でもサウンドでもお手軽な関数か揃っていて、シンプルなのがいいです。Javaですが、単純な命令で動かすので、N88-BASICを使ってた頃を思い出します。

気になる方は公式サイトからダウンロードしてみましょう。

今回はJavaアプレットとして書き出しましたが、実行ファイル(win、osx、linux)も作れます。移植もされているので、iPhoneやAndroid、Flashなどでも(移植されている部分については)同じコードを動かすことができます。Add-onを使えばOpenGLやBox2Dなども使えます。Processing.jsを使えばHTML5も先取り(?)できます。

ゲームのプロトをだーっと作って試すのにも悪くないんじゃないかなぁ。

ちょっと残念なのはProcessingのエディタにコード補完やデバッグ機能がないので、そういうのがほしければEclipseでJavaっぽい書き方も若干必要になることです。

速度が必要な場合は似た思想を持つC++ライブラリのOpenFrameworksもいいですね。



Trackback(0)

Cafe Diary ログに戻る