tmdf.net |

Processingでレイヤーっぽくオブジェクト同士が重なった表現をする場合、z座標を使って重なりを調整すると思うけど、カメラ位置とオーバーラップする3Dオブジェクトを配置すると、常に最前面に表示させたいメニューより前面に描画され、意図しない（調整しずらい）表示になったりします。

同階層に200x200pxの「Sample.png」という画像ファイルがあるとして、以下のようなプログラムで、png画像よりboxオブジェクトが前に来てしまう現象。

void setup() {
	size(200, 200, P3D);
}

void draw() {
	background(0);

	translate(100, 100, 0);
	box(100, 100, 100);

	translate(-100, -100, 0);
	PImage b = loadImage("Sample.png");
	image(b, 0, 0);
}

そこで、png画像を常に最前面に表示できないか試行錯誤した結果、PGraphicクラスを使ってレンダリングした画像を貼り付ける、または最前面に表示させたいオブジェクトを3Dオブジェクトより自分に近づける、この2つが今のところの解決方法。

まず、PGraphicクラスを使う場合。これは単純にPGraphics（仮の描画ステージ）でオブジェクトを描いてレイヤーっぽく貼り付けていく。でも、半透明や大きなサイズで使ったり、負荷が重そうな処理をすると、思った以上に描画速度が落ちていくので注意。プログラムは下記。

void setup() {
	size(200, 200, P3D);
}

void draw() {
	background(0);

	PGraphics pg = createGraphics(200, 200, P3D);
	pg.beginDraw();
	pg.background(0);
	pg.translate(100, 100, 0);
	pg.box(100, 100, 100);
	pg.endDraw();
	image(pg, 0, 0);

	PImage b = loadImage("Sample.png");
	image(b, 0, 0);
}

次にオブジェクトを自分に近づける方法。前者より負荷は少ないけど、最前面オブジェクトより前に表示、最前面オブジェクトが表示されない、ドットバイドットで表示しづらい、などがあるので微調整しながら使わないといけない。プログラムは以下のような感じ。変数cは等倍で表示できた距離、dはカメラを引き寄せと画像を同じだけ縮小するための変数。

float c = 175;
float d = 20;

void setup() {
	size(200, 200, P3D);
}

void draw() {
	background(0);

	camera(0, 0, c, 0, 0, 0, 0, 1, 0);
	box(100, 100, 100);

	camera(0, 0, c / d, 0, 0, 0, 0, 1, 0);
	imageMode(CENTER);
	PImage b = loadImage("Sample.png");
	image(b, 0, 0, b.width / d, b.height / d);
}

いくつか自転車を紹介してきたけど、結局、国産メーカーのKUWAHARA「Gaap Street」を買いました。すでに販売終了しているモデル（グレード）で、上の写真と同じ9thロットのグレー。

CYCLE MODE 2008で11thロットのCross？に試乗した時に、「おぉっ！？」って小径車とは思えないくらい安定してて走りやすかったのが決め手。ま、こんだけホイールベース長かったら当たり前だけど。それにBD-1のような削ぎ落としたソリッドなデザインとは対極にある、このメカメカしたデザインも好み。

LineUpを見てもらえれば分かるように、Gaapは同じフレームを使いながらも、パーツを変えることによってWindやSonicに代表されるロード系から、StreetやLiteのような街乗り、ForestやSpikeのMTB系まで性格を変化させるのが特徴。好きなように弄れってことだと思うし、確かに弄りたくなってくる。

買おうかなって思った11thロットからさらに値上がり（Lite : ￥182,700 → LiteS : ￥218,400）しそうだったから、たまたま見つけたの9thロットを買いました。この価格だったら安いロードとちょっとした小径車なら1台ずつイケるじゃん？って思うけど、個人的には一つに全力投球の方が満足度が高いと思う。

ちなみに、折り畳んだことはありません。

Web : 宿野輪天堂 Gaap Street│Price : ￥204,750 〜

さらに折り畳み自転車から離れていくけど、これはアメリカ TREK社のエントリークラスロードバイク「1.5」。

白黒赤がたぶんコーポレートカラーでメジャーだとは思うけど、このグラデーションがかったライムグリーン系のフレームカラーリングが好き。2.1のブルーのグラデーションもいいと思う。六本木ヒルズと相模大野にあるTREKのコンセプトストアが自転車屋っぽくない雰囲気ってのも欲しくなった理由。

使われているメインコンポは前回紹介したPINARELLO TREVISOと同グレードのSHIMANO「Sora」でこっちは9Speed仕様。どっちも街乗りロードっていう位置づけだと思う。書いてて思ったけど特に嫌いなところがないな。

Web : TREK Japan ロードバイク 1.5│￥145,000 ～

BD-1ぐらいコンパクトにならないのなら、折り畳み（小径）自転車じゃなくてもいいんじゃない？と思って候補に挙がったのがイタリアのPINARELLOのエントリーフラットバーロード「TREVISO」。

ドロップハンドルってほど本気でもないしクロスバイクよりはいいかなぁ、って思ってチョイスしていました。性能とかは知らないけど、フレームのスポーティーな曲線がいいと思う。上の写真は2009モデルのゴールドだけど、カラーリングは2008モデルのゴールドの方が好き。

コンポがSHIMANO「Sora 8Speed」、などなど割高感はすごくある。スタイリングが気に入ったならどうでもいいことだけどね。

Web : ピナレロ ジャパン│￥134,000 ～

あまり見ないカテゴリー小径MTB、LOUIS GARNEAU 「LGS-MV 5」。バイクに例えるとHONDA FTRみないな感じか？日常で使用する程度だったら、どこでも気軽に走れてちょっとヤンチャっぽいイメージ。前回紹介したBD-1より一回り大きい20インチタイヤで折り畳みじゃありません。

価格に対して油圧ディスクブレーキとかフロントサスとかそれっぽいパーツが付いてる。強いて言えばカラーバリエーションはもっと欲しいところ。

ここ数年GIANT増えたなぁって思ってたら、最近はLOUIS GARNEAUに乗っている人が増えている気がする。手頃な値段、、幅広い商品展開、台湾よりカナダ、とかが理由で売れてるのかな。でも日本で売ってるのは日本の会社の企画モノに名前だけ貼っ付けているだけだからカナダ本社と関係ないんだね。最近まで知らなかった。

Web : LOUIS GARNEAU LGS-MV 5│Price : ￥101,850 〜

今までの記事からかけ離れている上に、自転車について別に詳しくはないけど、買おうか迷った自転車を数日間に渡って紹介していこうと思います。

折り畳み自転車といえば間違いなく紹介されるドイツ riese und muller（リーズアンドミューラー）の「BD-1」。フレームを折らない折り畳み方法、折り畳んだ状態のサイズ、独特な前サスペンション形状、グニョっとしたモノコックフレームなど、プロダクトデザイン感ばりばりの自転車。

絶妙な18インチサイズで良くも悪くもバランスのいい自転車だと思う。サイクリングロードはもちろん、都内を走っているとちょくちょく見かけるので、値段の割にプレミアム感は微妙だけど、情報を手に入れやすいと思えば安心じゃないかな。自分で試したことはないけど、折り畳むのが楽っていうのもすごい重要なポイント。単体で見るとすごく格好良く見えるんだけど、人が乗っているのを見ると違和感がある。色はシルバーの人が多い気がするけど、上写真のブルーとかもキレイ。

個人的には一番安いグレード「8SPEED」を買って、余ったお金で弄るのが楽しそうだと思う。

Web : ミズタニ自転車 BD-1│Price : ￥157,500 ～

以前のブログでアクセス数が意外と多かった記事をもう一度掲載しておきます。まだ需要あるのかな？

0 ～ 42 までの数を重複せずに6個ランダムに出力するプログラム。上がActionScript3とかに近い感じのFlash Lite 2.0用で、下がFlash Lite 1.1用。
Flash Lite 1.1 は配列のArray()クラスがないので”nums” + 整数文字を変数名として擬似的に配列っぽい処理をします。

追記 2009.8.11
下記ページも参考になります。
FACEｓ：FLASH Lite1.1：擬似配列とメモリコスト

var s:Number = 6;
var t:Number = 42;

var nums:Array = new Array();
for (var i:Number = 0; i < t + 1; i ++) {
	nums[i] = i ;
}

var a:Number = t;
while (t --) {
	var b:Number = Math.floor(Math.random() * a);
	var c:Number = nums[a];
	nums[a] = nums[b];
	nums[b] = c;
}

//出力テスト
for (i = 0; i < s; i ++) {
	trace(nums[i]);
}

s = 6;
t = 42;
for (i = 0; i < t + 1; i ++) {
	set("nums" add i, i);
}

a = t;
while (t --) {
	b = random(a);
	c = eval("nums" add a);
	eval("nums" add a) = eval("nums" add b);
	eval("nums" add b) = c
}

//出力テスト
for (i = 0; i < s; i ++) {
	trace(eval("nums" add i));
}

以前、Processingのトゥイーンアニメーションライブラリ「Shapetween」について少し触れたけど、同じようなライブラリで「traer.animation」ってのを発見しました。

Shapetweenと違うのは、トランジションなど細かい設定が全く無くて、ちょっとスムージングしたい場合ぐらいしか使いようがないこと。使い方はShapetweenと同じように、数を扱うスムージングオブジェクト（下記プログラムでいうscl）を、他のオブジェクトのプロパティに設定していくイメージ。Smoother、Smoother2D、Smoother3D と3種類のスムージングクラスがあるけど使い方は同じで、一度に扱える数値が1個～3個の違いだけ。

以前と同じように、マウスダウンで赤い円の大きさが変化するサンプルプログラム。

//Main.pde
import traer.animation.*;

Smoother scl;
Animator ani;

//設定
void setup() {

	//スムージング設定
	//引数は、0がダイレクトで、1に近づくほどゆっくり
	ani = new Animator(0.95);

	//スムージング変数とアニメーションを関連付け
	//目標値を設定
	scl = ani.makeSmoother();
	scl.setTarget(100);

	//描画設定（線なし、塗り赤）
	noStroke();
	fill(255, 0, 0);
}

//描画
void draw() {

	//初期化
	background( 255 );

	//アニメーション経過
	ani.tick();

	//円を描画
	ellipse(width / 2, height / 2, scl.getValue(), scl.getValue());
}

//マウスが押された場合
void mousePressed() {

	//リセット、目標値を再設定
	scl.setValue(0);
	scl.setTarget(100);
}

前回の記事でProcessingで連番ファイルを読み込んで表示しようとするとフリーズする、って書いてて思い出したんだけど、前に仕事で作ってたFlashでも同様の現象が起きました。

記憶しているフリーズしていた状況は、Flash Player 9 で、350x350pixelの24Bit PNGファイルを3,000枚ぐらい読み込もうとした時。ActionScirptから参照できるメモリ使用量はたしか200MBくらいだったはず。Processingは純粋に解像度によるデータ量でフリーズしてるけど、こちらはファイル容量に依存するみたいで、8Bit PNGファイルに変換したり、画像解像度を300x300pixelに縮小すると大丈夫だった。PCのスペックにも依存しているみたいで、古いPentium4とかのマシンだとそれでも駄目だったけど。

Processingは大きく分けて3つの描画方式（P2D、P3D、OpenGL）があって、今回はOpenGLで描画する際にフリーズする現象について報告。
Processing1.0.4（1.0.3でも同様）で、Windows XP SP3、Core2Quad 3GHz、GeForceGTS 250、RAM 4GB(3GB) と、MacOS 10.5.7、Core2Duo 2GHz、RadeonHD2400、RAM 2GB。

連番画像を読み込んで、パラパラ漫画の要領で表示しようとすると、あるデータ量でメモリ不足でフリーズ。エラーメッセージは「OutOfMemoryError」。だいたい30MB（6000x5000pixel）くらいのデータを使おうとした時で、Windows、Macどちらも同じ感じ。ファイルのデータ量ではなく解像度に依存しているみたいで、高圧縮JPEG、無圧縮PNGどちらでも同じ解像度のデータで起きる。
タスクマネージャやアクティビティモニタでは、メモリデルタとかフォルトが起きまくってメモリ使用量が急激に上がってしまう模様。下記プログラムの10行目の size() の第3引数を”P2D”や”P3D”にすると常識的なメモリ使用量で収まるし、問題なく動作するので”OPENGL”を使おうとした時のみの現象だと思う。

動作プログラムは下記。実行環境と同階層に「image」フォルダがあって、フォルダ内に「0 ～ 100.png」の画像ファイルがある状況で、4枚分の画像を先読み。

//Main.pde
import javax.media.opengl.*;
import processing.opengl.*;

int a = 0;
int b = 5;
PImage [] img = new PImage[b];

void setup() {
	size(800, 600, OPENGL);
	frameRate(100);
	noSmooth();

	for(int i = 0; i < b; i ++) {
		String url = "image/" + str(i) + ".png";
		img[i] = loadImage(url);
	}
}

void draw() {
	background(0);

	image(img[a], 0, 0, img[a].width, img[a].height);

	b++;
	if (b == 100) {
		b = 0;
	}

	String url = "image/" + str(b) + ".png";
	img[a] = loadImage(url);

	a ++;
	if (a == 5) {
		a = 0;
	}

	System.gc();
}