Puchilog Plus

flickr search

Laqu — Wed, 03 Mar 2010 12:38:12 +0000

たまにAS以外の言語に触れると楽しいです。
rubyでflickrAPIたたいて表示してるだけです。

使ってるjQueryはこつら。
・Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery
・How to Create a Visual Image Preloader using jQuery « Dino Latoga

IEで見るとCSSの角丸がきいてなかったり、ロールオーバー時のキャプションの背景が透過じゃなかったり残念なのでIE以外をお薦めします。

jiglib 3D Physics Engine #2

Laqu — Sun, 11 Oct 2009 05:06:30 +0000

ご覧になるには最新のFlashPlayerが必要です。

package classes
{
	import flash.events.Event;

	import org.papervision3d.view.BasicView;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.objects.primitives.Plane;

	import jiglib.plugin.papervision3d.Papervision3DPhysics;
	import jiglib.plugin.papervision3d.Pv3dMesh;
	import jiglib.geometry.JBox;

	[SWF(width="450",height="300",backgroundColor="#ffffff",frameRate="30")]

	public class Main extends BasicView
	{
		private var rootNode:DisplayObject3D;
		private var physics:Papervision3DPhysics;

		public static const FROOR_SIZE:uint=2000;
		public static const CONE_NUM:uint=5;
		public static const CONE_RADIUS:uint=80;
		public static const CONE_HEIGHT:uint=200;

		public function Main():void
		{
			super(450,300,false);
			init();
		}

		private function init():void
		{
			camera.y=400;
			camera.z=-1500;

			rootNode=new DisplayObject3D  ;
			scene.addChild(rootNode);

			physics=new Papervision3DPhysics(rootNode,9.8);

			var floor:Plane=new Plane(new WireframeMaterial(0),FROOR_SIZE,FROOR_SIZE);
			rootNode.addChild(floor);
			var floorBox:JBox=new JBox(new Pv3dMesh(floor),FROOR_SIZE,1,FROOR_SIZE);
			floorBox.y=-500;
			floorBox.rotationX=90;
			floorBox.movable=false;
			physics.addBody(floorBox);

			for (var i:uint=0; i

Web Creators 10月号に掲載されました

Laqu — Sat, 29 Aug 2009 18:57:03 +0000

Web Creators 10月号に自分がFlashを担当したサイトのインタビューが1ページ掲載されています。
ディレクター・デザイナーさんと一緒です。

自分が喋ってるとこはほんのちょこっとですが機会があれば覗いてみてください。

iPhone Developer Program

Laqu — Sun, 16 Aug 2009 04:08:27 +0000

に加入しようか迷い中。

CocoaとObjective-Cの本買ってiPhoneアプリを勉強中。
今は簡単なのしか作れないけどつくってみたいのとかあるからiPhone Developer Programに加入しようかなぁと。
でないとSimulatorで確認はできても実機で試すこともできない。

年間一万ちょいだからそんな高額でもないし。
ただ今月は金がない。それだけ。

jiglib 3D Physics Engine #1

Laqu — Wed, 29 Jul 2009 01:46:46 +0000

3ヶ月以上空いてしまいました。

jiglib 3D Physics Engineという各種3Dライブラリで物理シミュレーションを行うことができるライブラリを触ってみました。

対応している3Dライブラリはjiglibのバージョンr92の時点でPapervision3D・Away3D・Sandyの3つ。

自分はPV3Dしか使ったことないのでPV3D+jiglibの環境です。

ご覧になるには最新のFlashPlayerが必要です。

package
{
	import flash.events.Event;

	import org.papervision3d.view.BasicView;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.DisplayObject3D;

	import jiglib.plugin.papervision3d.Papervision3DPhysics;
	import jiglib.physics.RigidBody;

	import net.hires.debug.Stats;

	/**
	 * @author laqu
	 */
	public class Main extends BasicView
	{
		private var rootNode:DisplayObject3D;
		private var physics:Papervision3DPhysics;
		private var floor:RigidBody;

		public static const CUBE_SIZE:uint=150;
		public static const CUBE_NUM:uint=15;

		//Constructor
		public function Main():void
		{
			super(450,300,false);
			stage.quality="low";
			init();
		}

		private function init() : void
		{
			addChild(new Stats());

			rootNode=new DisplayObject3D();
			scene.addChild(rootNode);

			camera.y=400;
			camera.z=-2000;

			physics=new Papervision3DPhysics(rootNode,9.8);

			//Create Floor
			floor=physics.createGround(new WireframeMaterial(0), 2000, 0);
			floor.y=-500;

			//Create Cubes
			for(var i:uint=0;i < Main.CUBE_NUM;i++)
			{
				var matlist:MaterialsList=new MaterialsList();
				matlist.addMaterial(new WireframeMaterial(Math.random()*0xffffff),"all");
				var cube:RigidBody=physics.createCube(matlist, Main.CUBE_SIZE, Main.CUBE_SIZE, Main.CUBE_SIZE);
				cube.restitution=1.2;
				cube.friction=0.2;
				cube.y = Main.CUBE_SIZE * i+1000;
			}

			//Rendering Start
			startRendering();
		}

		protected override function onRenderTick(e:Event=null) : void
		{
			rootNode.rotationY+=(stage.stageWidth/2-stage.mouseX)/70;
			physics.step();
			super.onRenderTick(e);
		}
	}
}

以下ソースです。
PV3Dを使用する場合はPapervision3DPhysicsクラスでまず物理のワールドを作ります。

physics=new Papervision3DPhysics(rootNode,9.8);

第1引数はDisplayObjectContainer3Dなのでsceneでもいいんですが、別途事前にDisplayObject3Dを作っておいてそれを割り当てておきます。
第2引数は重力です。

続いて地面を作ります。使うクラスはRigidBodyというクラス。
Papervision3DPhysicsにはcreateGround・createCube・createSphereというメソッドが用意されておりそれらを利用し3Dのオブジェクトを作っていきます。（PV3Dでオブジェクトを作っておいてそれを利用することもできるのですが、それはまた今度）

floor=physics.createGround(new WireframeMaterial(0), 2000, 0);

第2引数はサイズなんですがそれはあくまで第1引数で指定したマテリアルが表示されるサイズであって地面は延々と続いています、はず。

次にオブジェクトを作ってみます。

var cube:RigidBody=physics.createCube(matlist, Main.CUBE_SIZE, Main.CUBE_SIZE, Main.CUBE_SIZE);

最後にenterFrame内でPapervision3DPhysicsのstepメソッドを実行します。
これ忘れると動かない。

physics.step();

Box2D触ってみた

Laqu — Sat, 18 Apr 2009 11:39:53 +0000

今さらですがBox2Dやってみました。というか仕事で物理演算使わなきゃいけなかったので触らざるを得なかったというか。
Box2Dのバージョンは2.0.2です。

ご覧になるには最新のFlashPlayerが必要です。

PV3Dとか他のライブラリとちょっと勝手が違うので最初とまどいましたが。
サンプルのはボックスとサークルを20個ずつNewしてボックスの質量をサークルの質量の100倍にしてます。
ボタンを押したら上下左右ランダムに力を加えてあげてます。

PV3Dとか組み合わせたらおもしろそう。

以下汚いですけどソースです。
（一度全ソース載せましたが長くて表示が遅くなってしまったのでボタン部分とボックス部分、他をちょっと削除します。。）

	import Box2D.Collision.*;
	import Box2D.Collision.Shapes.*;
	import Box2D.Common.Math.*;
	import Box2D.Common.*;
	import Box2D.Dynamics.*;
	import Box2D.Common.Math.b2Vec2;

	public class Main extends Sprite
	{
		private var m_physScale:uint = 100;
		private var world:b2World;
		private var m_sprite:Sprite;
		private var m_iterations:int = 10;
		private var m_timeStep:Number = 1 / 30;

		public function Main():void
		{
			init();
		}

		private function init():void
		{
			var worldAABB:b2AABB = new b2AABB();
			worldAABB.lowerBound.Set( -100, -100);
			worldAABB.upperBound.Set(100, 100);

			var gravity:b2Vec2 = new b2Vec2(0, 9.8);

			world = new b2World(worldAABB, gravity, true);

			var wxArr:Array = [0, stage.stageWidth, stage.stageWidth / 2, stage.stageWidth / 2];
			var wyArr:Array = [stage.stageHeight / 2, stage.stageHeight / 2, 0, stage.stageHeight];
			var wwArr:Array = [10, 10, stage.stageWidth, stage.stageWidth];
			var whArr:Array = [stage.stageHeight, stage.stageHeight, 10, 10];

			//Wall
			for (var j:uint = 0; j < 4; j++)
			{
				var floorBodyDef:b2BodyDef = new b2BodyDef();
				floorBodyDef.position.Set(wxArr[j] / m_physScale, wyArr[j] / m_physScale);

				var floorShapeDef:b2PolygonDef = new b2PolygonDef();
				floorShapeDef.SetAsBox(wwArr[j] / 2 / m_physScale, whArr[j]/2 / m_physScale);

				var floorBody:b2Body = world.CreateBody(floorBodyDef);
				floorBody.CreateShape(floorShapeDef);
			}

			//Circle
			for (var i:uint = 0; i < 20; i++)
			{
				var circleBodyDef:b2BodyDef = new b2BodyDef();
				circleBodyDef.position.Set(stage.stageWidth / 2 / m_physScale, 200 / m_physScale);

				var circleShapeDef:b2CircleDef = new b2CircleDef();
				circleShapeDef.radius = Math.random()*0.3+0.05;
				circleShapeDef.density = 1;
				circleShapeDef.friction = 0.5;
				circleShapeDef.restitution = 0.5;

				var circleBody:b2Body = world.CreateBody(circleBodyDef);
				circleBody.CreateShape(circleShapeDef);
				circleBody.SetMassFromShapes();
			}

			//Debug
			m_sprite = new Sprite();
			var debugDraw:b2DebugDraw = new b2DebugDraw();
			debugDraw.m_fillAlpha = 0.3;
			debugDraw.m_drawScale = m_physScale;
			debugDraw.m_lineThickness = 1;
			debugDraw.m_sprite = m_sprite;
			debugDraw.m_drawFlags = b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit;
			world.SetDebugDraw(debugDraw);
			addChild(m_sprite);

			addEventListener(Event.ENTER_FRAME, update);
		}

		private function update(e:Event):void
		{
			world.Step(m_timeStep, m_iterations);
		}
	}

TextMate買った

Laqu — Sat, 18 Apr 2009 10:51:10 +0000

2ヶ月ぶりの更新になってしまいました。

最近Rubyを勉強し始めましてMac用のいいエディタないかなーと思っていろいろ試して最終的にいきついたのがTextMate。
他に試したのはAptanaやNetBeansとかのいわゆるIDE。この2つはフリーで使えるんだけどTextMateはTrial期間1ヶ月が終わったら有料。日本円で5000円くらい。

やっぱりIDEは他にいろいろアプリ立ち上げてたら重くなっちゃう(自分の環境では)のでTextMateにしました。
ただしTextMateはデフォルトでは日本語が打てない。この辺を見ながらなんとか日本語打てるようになったけど文字幅が細い・・けど今んとこ解決方法が他にないのでしょうがないですが。

一応AS3の補完なんかもやってくれるんですがFlashDevelopには適わないのでASは当分FDで。

Flash→Ruby→XML→FlashとかFlash→Ruby→MySQLとかやって遊んでる感じです。
別にプログラマになりたいわけじゃないんだけどサーバーサイドもやれたら幅が広がるしなーと。

PHPもちょっとやったことはあるんですが自分にはRubyの方がしっくりきたんでRubyをやることに。
なのでRuby関連のエントリも書けたら書いていこうと思います。

Ribbon3D触ってみた

Laqu — Wed, 18 Feb 2009 18:46:44 +0000

PV3Dのブログで紹介されてたRibbon3Dを試してみました。
Audiのサイトで使われてたやつですね。
Soulwireの中の人が作られたのかな？

PV3Dで紹介されてたのをちょっといじっただけですけど。

ご覧になるには最新のFlashPlayerが必要です。

var ribbon:Ribbon3D = new Ribbon3D(マテリアル, 線の太さ, 長さ);

第3引数の長さはmaxSegementってなってたからまぁそのまんまセグメントの最大数を指定してあげる感じ。
10ならセグメントが10個以上になったら前のは消えていくよってことだと思う。

ほんで描画するときはenterFrame内で

ribbon.draw();

って感じでdrawメソッド使えばいい。

ソース抜粋。汚くてすいません。あとBasicView使ってないです。

public function init3d():void
{
	/**** 略 ****/
　　　　
	var light:PointLight3D = new PointLight3D();
	light.z = -1000;
	var material:FlatShadeMaterial = new FlatShadeMaterial(light, 0xFF0000, 0x0099CC);
	material.doubleSided = true;
	ribbon = new Ribbon3D(material, 6, 160);
	ribbon.useOwnContainer = true;
	ribbon.filters = [new GlowFilter(0x000000, 1, 4, 4, 60)];

	scene.addChild(ribbon);

	addEventListener(Event.ENTER_FRAME, render3d);
}

private function render3d(event:Event):void
{
	//ここで動きつける

	ribbon.draw();
	render.renderScene(scene, camera, viewport);
}

WordPressいろいろいじった

Laqu — Sun, 08 Feb 2009 18:52:29 +0000

MTからWordPressに変えてだいぶ違うなーと思ったこと。

Pluginが豊富で追加・削除が超簡単
デザイン変えるのに一苦労
WordPressは再構築がないから待たなくていい（これが理由でMTから乗り換えたんだけども）

PluginはMTのころほとんど使ってなかったんだけどWPでは5個ぐらいすでに使ってる。
iPhoneでも見れるようにしてくれる『iWPhone』とか便利（Flashが見れないのがあれだけど）。
人気記事や関連記事を出してくれるPluginも便利。スパムコメント対策のはデフォルトで入ってる。

MTを2年ぐらい使ってたせいかPHPがそんなに分からないからかデザイン変えるのが一番めんどかった。
PHPもいじんなきゃいけないし。CSSとか全然整理してないや。慣れないとね。
今回はシンプルにしたかったからちょうどよかったけど。

すでに表示がおかしいとこがいくつかあるんだけど、その辺はスルーで。そのうち直します。

Progression講座「最初の2歩目」

Laqu — Fri, 06 Feb 2009 18:44:05 +0000

書くのがだいぶ遅れちゃったけど1/27に開かれた『Progression講座（クラスベース）「最初の2歩目」』に参加してきました。

道に迷って少し遅れて到着。（超方向音痴なんで）

内容はクラスベースでの制作の基礎的なところ。

あるシーンに配置するページ（MC）をあらかじめライブラリにいれておきクラス書き出し設定しておく（仮にここではAboutPageていうクラス名をつけます）
書き出しておいたAboutPageクラスはCastMovieClipを継承しておく
AboutPage内に配置して置いたMCのプロパティを_onCastAdded内でnew Propを使って一括設定
new DoTweenerでアニメーションさせる
順番に実行したいならSerialList、同時に実行するならParallelList
AboutPageからステージに配置しておいた『bg』というインスタンス名のMCを参照する =>var bg_mc:MovieClip=MovieClip(Index(CastDocument.root).getChildByName(“bg”)); みたいな感じ
AboutPageからIndexクラス内の変数を参照する =>Index(CastDocument.root).hoge みたいな感じ

みたいな内容でした。私的にはだいたい分かってた内容だったので少し物足りなかったのだけども復習的な感じで良かったです。

今月は３歩目があるそうなので興味のある方は行って見られてはどうでしょうか。