いろいろぶんかい

2009.09.30(水)

サイコロよく当たるなあ。beshinです。

今回は分解です。
分解って楽しいですよね。元に戻せないところとかも含めて楽しいですね。

というわけで色分解です。
なんか思ったより簡単にできたんですが、ベースの色とBlendModeによって、RGBに分解されたり、CMYに分解されたり、これはこういうもんなんでしょうか・・・結果はうまいこといったんですが、実は理屈があんまりわかってません。

あんまりわかってません。

とりあえず、読み込んだjpg画像を読み込んで、copyChannelで分解したbitmapDataを配列に格納して、matrix変形を加えながらdrawしてる感じです。

■RGB(クリックすると分解します)

This movie requires Flash Player 9

■CMY(クリックすると分解します。ところでKはどこだ?)
This movie requires Flash Player 9

ビルかわいいよビル

ドット絵

2009.09.16(水)

こんにちわ。涼しくなってきたので全力で自転車をこぐbeshinです。

最近、夕方になるともっぱら公園でのんびりしてます。でも蚊がたくさんいるので

かゆいです。

というわけで、今回はドット絵を描いてみようと思います。
yoshiwebさんのこの記事を読んで、これならプログラムでドット絵書けるんじゃね?と思ったのでやってみました。

flash on 2009-10-8 – wonderfl build flash online

ドット絵といえば、マリオですよね。クリックすると、表示面が入れ替わります。

各ドット絵は配列で管理してます。

例えばマリオならこんな感じですね。各数字が色と関連付けされてます。

var arr:Array = [
[0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0],
[0,0,0,0,2,2,2,3,3,2,3,0,0,0,0,0],
[0,0,0,2,3,2,3,3,3,2,3,3,3,0,0,0],
[0,0,0,2,3,2,2,3,3,3,2,3,3,3,0,0],
[0,0,0,2,2,3,3,3,3,2,2,2,2,0,0,0],
[0,0,0,0,0,3,3,3,3,3,3,3,0,0,0,0],
[0,0,0,0,2,2,1,2,2,2,0,0,0,0,0,0],
[0,0,0,2,2,2,1,2,2,1,2,2,2,0,0,0],
[0,0,2,2,2,2,1,1,1,1,2,2,2,2,0,0],
[0,0,3,3,2,1,3,1,1,3,1,2,3,3,0,0],
[0,0,3,3,3,1,1,1,1,1,1,3,3,3,0,0],
[0,0,3,3,1,1,1,1,1,1,1,1,3,3,0,0],
[0,0,0,0,1,1,1,0,0,1,1,1,0,0,0,0],
[0,0,0,2,2,2,0,0,0,0,2,2,2,0,0,0],
[0,0,2,2,2,2,0,0,0,0,2,2,2,2,0,0]
]

今回アニメーションにBetweenAS3を使ってみようと思ったのですが、連打したときの挙動が怪しかったので、いつものようにTweenMaxでトゥィーンしています。
とおもったら、こんな記事が。
これでいけるようになるのかな・・・?

ソースは、papervision3dでCubeにする際の処理がすげえ力技なので、
もうちょい修正してわんだふるにあげるかもしれないです。

追記:10/08wonderflにあげました。

パーティクル祭り

2009.08.24(月)

こんにちわ。このサイトってこういうテーマを掲げてたことをさっき思い出しました。
今日も西日がまぶしいbeshinです。

皆さんは「パーティクル祭り」をご存知ですか?

少し前にWonderflというサイトで盛り上がったのが記憶に新しいです。そんな祭りにすっかり乗り遅れて遠目で見守っていたのですが、少し時間ができたのでいろいろな人が書いたコードをみて勉強してみました。

普通FLASHとかで複数のオブジェクトを動かす場合って、配列とかFP10とかだったらVectorとか使うと思うのですが、どうやらlinked List?(あんまりわかってない)というのを使ってるみたいです。大昔に読みかけてそのまま枕にしてしまった、(ほんとうにすみません)デザインパターン入門本に書いてたイテレータパターン?(あんまりわかってない)ってやつなんですかね?こういう風に使うんですね。

というわけで、僕もつくってみました。画像は僕のTwitterアイコンです。基本的に自分大好きなんです。

flash on 2009-8-24 – wonderfl build flash online

コード汚いですね。すみません。
流れ的には、

  1. 画像を読み込んで、1pxずつgetPixelで解析してPerticleオブジェクトにし、linked Listを形成する。
  2. マウスの動きに合わせて、setPixelする。while ((p = p.next) != null) っていうのが速いみたい。
  3. クリックすると、はじまります。もう一度クリックするとちょいエフェクトかかります。

Wonderflはじめて触りました。
ローカルで実験してたので、あれだけど、こういう場合FORK?するのが正しいんですね。すみません。

どうでもいいですが、「パーティクル」で変換すると「パーティ来る」とセレブな変換が行われるので、おもわず「行く行くー!」と言いそうになります。

オブジェクト指向プログラミング

2009.08.20(木)

わたし、何かが分かった気がしたんです。

ある日の、ラーメン屋での出来事。
今日はクタクタで家に帰ってもメシを作る気がしない。
そんなときは家の近くのラーメン屋で夕飯を済ますのですが、
ラーメンをすすっている時に「はっ」と気が付いてしまったんです。

「も、もしやこのラーメンに入ってる刻みネギは、ネギを拡張したものではないか!」
「も、もしやこのラーメンに入ってる麺は、小麦粉を拡張したものではないか!」
「も、もしやこのラーメンに入ってるチャーシューは、豚肉を拡張したものではないか!」

とね。。
職業柄プログラムを触らせて頂く機会が増える一方で、
自分の作るロジックにため息しか出ない日々が続いておりました。

「なぜ、俺の作るプログラムはこうもイケてないんだ!」

プログラムの世界にはオブジェクト指向というものがありまして、
自分なりに参考書を読んで勉強してきていたのですが、
なかなか身になっている気がしませんでした。
そんな折、ラーメン屋での出来事があり、
もう少し理解を深めたいと思い今回の記事を書こうと自主的に申し出た所存でございます。

———————————————————————————-

さて、今回のお題は「ラーメンとオブジェクト指向」でございます。

例として、ユーザーさんがボタンを押すとラーメンが出てくる、
というインスタントラーメン屋を想定してプログラムを組んでいきます。

■制作環境

  • ・Windows XP
  • ・FlashDevelop
  • ・flex_sdk_4.0.0.4904

■構成
ラーメンの構成は簡略化して考えていきたいと思います。
細かいことは気にしない。

  • ・麺
  • ・チャーシュー
  • ・ネギ

この三つで今回のオブジェクトラーメンは出来ております。
だがしかし、麺は小麦粉を原材料として作られ、
チャーシューは豚肉からできる。
プログラム的に言うと、
麺は小麦粉を拡張し、チャーシューは豚肉を拡張している。
さらに刻みネギは、ネギを拡張しているというふうに言えると思います。

という考えのもと、以下のファイル構成にしております。

panel

すべての元になるクラスたちが「shokuzai」フォルダー。
その食材から作られる具や麺たちは「proccessed」フォルダーへ。
さらに、それらを組み合わせて作られるラメーンを「menu」フォルダーへ構成しました。

それらに簡単なアニメーションをつけたのがこちら!

かなり不完全ではありますがソースも置いておきます。
よろしかったら使ってみてください。

■ラーメン ダウンロード
ramen

wonderflのfork

2009.07.21(火)

どうもdarmanです。
今ちまたで有名なwonderflというものに触れてみました。

サイト内を徘徊していると三つのフラッシュに出会えたので、
さっそくwonderflのすばらしい機能、「forke」なるものに挑戦。

一つ目は、「カラーフィルムが重なり合うようなエフェクト」

Blendmode – wonderfl build flash online

二つ目は、「丸が作られると音が鳴る」

forked from: Dynamic Sound Generation – wonderfl build flash online

三つ目は、「丸が流れ落ちる」

流れ落ちる – wonderfl build flash online

この三つを混ぜたら新しいものが出来そうだ!
ということでやってみたのが以下です(※音が鳴ります)。

forke祭り – wonderfl build flash online

先人達のすばらしいコードをあたかも自分が作ったかのような錯覚に陥ることに成功したので、
みなさまもぜひ体験してみてください。

FLARToolkitやってみた

2009.06.29(月)

ようやくサイコロに当たりました。

はじめまして。beshinです。

早速ですが、僕の携帯は二世代ほど前のものです。メールや、簡単なインターネットとかはできるのですが、最近では当たり前のようになっている、ワンセグとかは当たり前のように見ることができません。
普段はまったく気にならないのですが、つい先日、行われたWBCのときとか、隣のdarmanとかが得意げにワンセグ観戦しているのを目の当たりにすると、悔しいというか、寂しいというか・・・

つまり僕だって得意げに携帯で動画を見たいわけです。

というわけで、記念すべき第一回目の投稿は、AR(拡張現実)を使って、僕の携帯で動画再生を試みました。僕はFlashしかできないので、AID-DCCのSaqooshaさんがFLASH用に移植してくれた、最近話題のFLARToolkitを使わせてもらいます。

用意するものはWebカメラとFLARToolkit用マーカーです。今回は携帯で動画を見たいので、携帯の待ち受け画面にマーカーを表示させました。

デモ

キレの良い動画が再生されますね。(再生されているイケてる動画はココから拝借しました。問題あれば削除するつもりです。)

flar_sample

具体的な手順は、このページを参考にしました。
新しい技術に触れるということで、かなり前のめりに作業をはじめたのですが、用意されていたFLARToolKitスタートキットを使うと、PV3Dのコードをちょっと書いただけで、動くみたいです。便利ですね。


protected override function onInit():void {

super.onInit();

var conection:NetConnection = new NetConnection();
conection.connect(null);
var stream:NetStream = new NetStream(conection);
var video:Video = new Video();
video.attachNetStream(stream);
stream.play(‘sample.flv’);
stream.togglePause();

var vsmat:VideoStreamMaterial = new VideoStreamMaterial(video, stream);

this._plane = new Plane(vsmat, 120, 120);
this._plane.z = -100;
this._baseNode.addChild(this._plane);

this.addEventListener(FlarSegEvent.AR_RENDER, function(e:FlarSegEvent):void {
if (e.isVisible) {
stream.resume();
}else {
stream.pause();
}
})

}

外部から表示非表示の判定の部分だけ良く分からなかったので、PV3DARApp.asをちょっと改造してイベントを発行してみたのですが、他にいい方法があるのかな?実はAPIが用意されてそうだけど・・・

これでWebカメラとマーカーさえあれば、携帯でも動画見放題ですね。ようやく隣の席のdarmanを黙らせることができそうです。