【Splatoonネタ】エンドローラーカスタム作ってみたよ

非常勤講師としてプログラミングの集中講義をさせてもらったんですが、
学生たちが最終課題に取り組んでいる間、質問がない時間は暇なので
何か作ろうと思いたって約3時間、こんなものができました。

課題の発表会のオープニング的に披露しました。
マウスボタンでインクを発射して、背景の文字を浮かび上がらせるアプレットです。
インスパイアードバイSplatoonのスタッフロール。(最近はまってる)
openFrameworks使用。

インクの垂れと飛び散りとをうまく表現したかったんですが
パラメータを調整してもまあそこそこにしかならない。。
理想通りの効果を産むには処理から変える必要がありそうです。
(改めて本家Splatoonのインクの表現を見ると全然別物でしたし。。。 )

で、発展版としてエンドロールメーカー的なものをつくりました。
こちらはProcessing.jsを使っていて、ウェブブラウザで動きます。
とりあえずMac OSX 10.10.2(Yosemite)のFireFoxとSafariとChromeでは動作してます。
エンドローラーカスタム(スプラふうン)
ニコニコ動画(【スプラトゥーン?】エンドローラーカスタム つくってみた)

エンドロールをカスタマイズできるっていう意味も込めて
スプラトゥーンのブキっぽい名前のタイトルに。

エンドロールの最初と最後に載せる画像と
その中間に表示するテキストがWebページ上で変更できるようになっているので
遊んだり、使いどころがあればなにかに使ったりしてください。

クイックボム的なやつを実装したり、
インク色が時間で変わる(本家と同じ)ようにしたり、
それと並行してインク描画のクオリティあげたり、
動画/画像書き出し機能をつけたり、
複数人で同時に塗れるようにしたり、
いろいろやりたいことが膨らみますね。

僕の書いた部分のソースコードはMIT Licenseで、GitHubにて公開してます。
※リンク先にも書いてますが、
フォントは戸塚こだまさんのイカモドキをつかわせていただきましたので、
そちらの利用規約にもご注意ください。

それでは、イカ、よろしく〜!

 

jit.genでglTexSubImage2D的なもの

Genがかなり強力そうなので、5,6年ぶりにMaxを再開してみる。
練習がてらいくつか簡単なパッチを作ってアップするのを始めてみる。
一日ひとつとはいかないまでも、続いたらいいな…。

最近個人的には音より映像の方をよく触るので、まずはjitterからはじめていこうと思う。

とりあえずテクスチャの矩形切り出しをやってみた。
video_uv
UV分割数と使用インデックスで指定する方法と、
UVオフセットと幅で指定する方法とを用意した。(サブパッチみてね)

入力がビデオでも静止画でも同じように書けることに地味に感動しつつ。

昔と勝手が違うところがいろいろあって最初は手間取ったけど、
ちょっと触ればやっぱり簡単に作れてすごいソフトだなーと改めて思う。

プログラマな僕としてはGenの導入がかなりMaxをパワーアップさせてくれた感があるので
作品制作に使えるレベルまで継続したい。と今は思っている。

Lazy.h

Kinectとかのハードウェアからとってきた値を使うような処理をしていると、値の細かなブレが歓迎されない状況が多いので、ブレを吸収するためのテンプレートクラスを作ってみました。

Lazy.h on gist

組み上げたアプリへの導入が簡単になるよう、=で代入して右辺値で取り出すっていうシンプルな使い方にしていますので、目的の値の宣言をLazy<>で囲むだけで導入できます。

実際、すでに作った処理に対して組み込む作業を自分でもやってますが、かなり楽ちんです。

例えばfloatならLazy<float>、oFでofPointならLazy<ofPoint>にすればOK。

コンストラクタの第一引数か、もしくはsetSize関数でバッファの大きさを指定してやれば、それだけでブレ補正してくれるはずです。この値が大きいほど補正が強くなります。

以下軽く注意。

  1. 左辺値としては=演算子しか実装してないので、それ以外の使い方をしてるところがあればコンパイルエラーがでます。適切に処理してあげてください。
  2. setSize(unsigned int), clear(), reset(const T&)という関数がもともと定義してある場合、おそらく意味が変わっている上にコンパイル時にエラーとならないので、適切に処理してください。
    ※Tは<>内で指定した型
  3. コンストラクタの意味が変わっているので、そこはチェックしてください。
  4. テンプレートなのでどんなクラスでも使えますが、=演算子、+演算子、/(float)演算子が(適切に)実装されていることが必要です。

 

ちなみに、細かい設定はできませんがアニメーションにも使用できます。

以下のコードは0から1までの値を10分割補間して出力します。
※whlieの条件が環境によってはヤバそうですが、サンプルってことでご容赦を。

Lazy<float> value(10);
value = 0;
while(value < 1.0f) {
	printf("%f\n", value);
	value = 1.0f;
}

 

ofxGuiの拡張addonをつくったよ(ofxParamEdit)

—————————————————————————
(追記 – 20121224)

アップデートによってGithubのバージョンとこの記事の内容とに差異があります。
Githubの方のREADMEを参照ください。
—————————————————————————

ofxGuiという、超便利なaddonがあります。

この動画の画面左のやつです。

Eden 1.2 + ofxComposer + ofxGui from Patricio Gonzalez Vivo on Vimeo.

スライダーやトグルボタンでグラフィカルに変数をコントロールできて、そのために書くコードの量もさほど多くないというスグレモノなんですが

  • int,float,bool としてしか使えない(charとかucharとか使いたいことあるじゃん)
  • 利用する変数の型が気持ち悪い(intが使いたいだけなのにofxIntSliderを持っとかなきゃいけないなんて!)
  • そのせいで利用時に処理が深い(ポインタ参照やら関数呼び出しが3回くらい?)
  • アプリの規模がでかくなった時にまとめて管理しづらい(お手軽に使える故なんですが。。。)

あたりがもうちょっと解消されればなあと思って作りました。こちらです。

ofxParamEdit on Github

良い特徴としては

  • char, uchar, short, ushort, int, uint, float, double, bool が使える(内部的にはint,float,boolなので値域のはみだすバグがあるかも)
  • intとかfloatとかの普通の変数を持ってれば使える(すでに作ったアプリに組み込むのも簡単!)
  • 利用時の処理コストなし(普通に変数を参照するのと同じ)
  • コントロール群をグループとして管理するので、複数箇所で使う際に分離がよい

悪い特徴としては

  • 値を編集したときの処理が増えてる
    →たかだか1フレームに1回のことなので問題にはならないでしょう
  • Guiを作るのにofxParamEditのインスタンスが必要
    →ofxParamEditを複数作れることに利点もあるのでまあ一長一短ってことで。。。
    アプリ側でシングルトンにする運用も可だと思います。

あと、プログラムのコメントにも書いてますが、ofEventのremoveの動作が怪しい(たぶん)ので、ofxGuiの一部ソースをコメントアウトして利用してください。

ofxSlider.cppとofxButton.cppとofxToggle.cppのofRegisterMouseEventsの行です。

Pull Request歓迎なんでプログラマの方よろしくお願いしまーす!

これ、ofxGuiの本家に組み込んでもらいたいなー。

グループ化の処理は置いといたとしても、Guiの機能を持ったクラスを利用側が保持しとく必要があるのはあんまり良くないと思うんだ。

フォーラムのどこで提案すればいいんだろう。

pull requestできるところまで作るには規模のでかい変更になるのでまずはお伺いをたてたいのだが。。。

Perfume Global Site Project #001 – Programmer’s Answer – by annolab

とんだモンスターを作ってしまいました。

とりあえずこちらをどうぞ。メイキングもあるよ。

Anno Perfume 養成ギプス

Perfumeのモーションデータと同じポーズの写真を全フレーム分撮って並べれば踊ってる動画が作れるじゃん、という工程を自動化してくれるツールです。

ものすごく大変でした・・・その大変さも含めてひとつまとまったコンテンツになったかなあと思います。

今後、ゲーセンに置くとか、商業施設に置くとかの発展が欲しいなあ、とぼんやり考えてます。

もっとカジュアルに楽しめて、かつ成果物のクオリティも維持できれば充分キャッチーになると思うんだよなあ・・・

今のところ弱点は、

  • 姿勢によってはポーズの検知がうまくできない
  • 動画ができるまでにかける時間が長い
  • お手本の姿勢が見て取りづらい

なところかなーと思っているので、

例えばカメラを増やして、フレームレートを落として(できればうまく補間して)、お手本にはちゃんと人っぽい3Dモデルを使って・・・とすればちゃんと楽しめるコンテンツになるんじゃないかなー。

あとは与太話ですが

いろんなコンセプトを無視して、ポーズ検出のシステムってことにすればもっと汎用性ありそう。

例えば脱出ゲームで扉を開ける鍵にするとか、それこそダンスの練習システムにするとか、観光地の記念写真撮影ブースに組み込むとかいろんな発展があるはず。

コントローラー持たなくていいJUST DANCEにもなるかも。

誰か一緒に(あるいは勝手に)やりませんか?

ご連絡はこちらまで。お待ちしてますよ:)

anno lab

となりの要素の表示状態を切り替える(+localStorageへ保存する)

開閉式メニューを実現するのに下記のようなコードをよく見かけるのですが

<a onclick="ChangeVisibleById('childId');">parent</a>
<div id="childId">child</div>

これだとchildIdが2箇所にあって嫌な感じです。

そこで、Visibilityを切り替える対象を隣の要素に限定して下記のようにしてみました。

<a onclick="ChangeVisibleNext(this);">parent</a>
<div>child</div>

こうすれば、どこへでもコピペ可能だしchildにidを書かなくて良いので可搬性バツグンです。

ちなみにChangeVisible~の実装はこんな感じです。

ついでにchild要素にidが指定されていたらVisibilityの値をlocalStorageに保存するようにしてみました。

var PREFIX = "visibility_";// 重複を防ぐためプレフィックスをつけとく(きやすめ)
var STORAGE_NAME="storage_name";// localStorageが使えない環境のためにLSTJSON(※)を使う場合
function ChangeVisible(obj)
{
	obj.style.display = (obj.style.display=="none")?"block":"none";
	if(obj.id) {
		localStorage[PREFIX+obj.id] = obj.style.display;
		LSTJSON.save(STORAGE_NAME);
	}
}
function ChangeVisibleById(id)
{
	var obj = document.getElementById(id);
	ChangeVisible(obj);
}
function ChangeVisibleNext(obj)
{
	do {
		obj = obj.nextSibling;
	} while(obj && obj.nodeType != 1);
	ChangeVisible(obj);
}
// localStorageからVisibilityを拾ってくる処理
function Load()
{
	LSTJSON.load(STORAGE_NAME);
	for(id in localStorage) {
		if(id.indexOf(PREFIX) == 0) {
			var obj = document.getElementById(id.substring(PREFIX.length));
			if(obj) {
				obj.style.display = localStorage[id];
			}
		}
	}
}

なお、htmlとhtaでnextSiblingの返すオブジェクトが違ったようなので、ChangeVisibleNextの実装にはこちらのサイトを参考にしました。
Finding HTML elements using Javascript nextSibling and previousSibling

(※)LSTJSONについてはこちら
htaでlocalStorageっぽいものを使えるようにしてみる

htaでlocalStorageっぽいものを使えるようにしてみる

localStorage超便利るんるんーって言ってたところで、htaではlocalStorageが使用できないことが判明(使えないよね?)

まぁhtaならファイル読み書き余裕ですしどっかローカルに保存しときゃ問題ないんですが

htaとhtmlとで違うコードを書かなきゃいけないのはいやだったので作りました。

localStorageが使えない環境だと自前で生成したlocalStorageを、localStorageが使える環境だと普通にlocalStorageを使用します。

■使用法

  1. localStorageを使用するより前(onloadあたり?)にLSTJSON.load(filename)を一度だけ呼んでおく
  2. 普通にlocalStorageにホイホイ代入
  3. 保存したいタイミング(onunloadあたり?)でLSTJSON.save(filename)を呼ぶ

※filenameはloadとsaveで対応がとれていれば適当で構いませんが、重複すると上書きされるので一意なものにすることをおすすめします。

※ファイルは環境変数%TMP%のフォルダに作られます。

■通常のlocalStorageと比べて良い点

・保存したファイルをhtaと一緒にパッケージとして配布できる(保存場所は工夫する必要あり?)

・ファイル単位で管理されるため、オリジン(プロトコル、ドメイン、ポート)をまたいで共有できる

■悪い点

・わざわざloadとsaveをする必要がある

・StorageクラスにあってArrayクラスにない機能が使えない

var LSTJSON = {};

// localStorageが使えない時のみ有効にする
if(!localStorage) {
	// json2を使うので読み込んどく。パスは適当に書き換えてください。
	// json2を持っていない方はこちらからDL→https://github.com/douglascrockford/JSON-js
	document.write('<script type="text/javascript" src="./js/json2.js"></sciprt>');

	var localStorage = new Array();

	LSTJSON.load = function(filename) {
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		// 作成済みなら%TMP%下にある
		var filepath = fso.BuildPath(fso.GetSpecialFolder(2).Path, filename+".json");
		// 空っぽだと困るので初期値を入れておく
		var str = "{}";
		if(fso.FileExists(filepath)) {
			var stream = fso.OpenTextFile(filepath);
			str = stream.ReadAll();
			stream.Close();
		}
		localStorage = JSON.parse(str);
	};

	LSTJSON.save = function(filename) {
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		// %TMP%下に作成
		var filepath = fso.BuildPath(fso.GetSpecialFolder(2).Path, filename+".json");
		var stream = fso.CreateTextFile(filepath);
		stream.Write(JSON.stringify(localStorage));
		stream.Close();
	};
}
// localStorageが使える時はloadとsaveを無視する
else {
	LSTJSON.load = function(){};
	LSTJSON.save = function(){};
}

GitHubに上げました。不便ところは多々あると思うのでご協力お願いします。

GitHub – WebStorageOnHTA

Perfume Global Site Project #001

Perfume Global Site Project #001 でPerfumeのダンスモーションデータと曲データが公開されているので

一緒に公開されているサンプルコードを改造して動画を作ってみました。

Processingを使用してます。

気持ちいいディレイになると確信して作り始めたものの、まあやっぱ難しい。

こだわりだしたらきりがないので途中経過ということにしてアップ。

今後、曲の展開に合わせてパラメータを制御したりカメラをいじったり新しい処理を追加したり…

妄想はつきませんが、手の空いた時にゆっくりやろうかなといったところ。

フォルダ内にあるファイルのリストを作成するバッチ処理

ご無沙汰してます。

ちょろっと作ってみました。

make_file_list.bat

使い方:コマンドプロンプトで make_file_list.bat ルートフォルダ 出力ファイル名(フルパス) を実行してください。

フォルダ階層をカンマで区切ったファイル(csv形式)が生成されます。

※フルパスで指定しないと大変なことになります。

※ユーザビリティのことはあんまり考えてません…

※普通に dir /s /b すれば良いことには作ってから気付きました…