TextFieldから文字の輪郭を取得して3Dにして砂の落下アニ・・以下省略

@author yooKo@serialField
* @version 1.5.0
* Let's Click!
* Papervision3DのPixcel3Dでまた遊んだ。
* どうぞご自由に画面をClickしてください。
*
* TextFieldから文字の輪郭を取得して3D上にPixcel3Dで描画
*
* ソースは荒れすぎてカオスな事になってます！！
* 途中から自分でも何書いてるか分かんなくなった・・
* 特にテキストの外枠の座標をとる為にifのネストしまくった
* 箇所は飯も食わずに6時間悩み続けた・・orz
*
* 後半から変数名とかちょー適当になってます。
* やけくそで実装しました。「可読性？なにそれ」って感じになってます。 *
* 最適化もこれで精いっぱい　汗
* ifのネストは自分の頭脳ではもう無理です
*
* 今後思いついたらちょくちょく最適化する～
*
*
* クリックイベントが受け取れない！！！ちくしょー
* ローカルでは問題なかったのに・・
* 本当はクリックしたらこうなる予定　↓
* ttp://selflash.jp/wonderfl/Text3DSandAnime
*
* 修正：クリックイベントなおった。paqさんがforkしてくれたやつのまねした。　!flgのトグルはやらない方が
* いいんかも
* 砂のアニメーションを調整
*
* 10/12 21:39 コードの最適化　253行　→　228行になった
* 228行　→　226行
*
* 10/21 12:40 new Pixel3Dしまくってた箇所恥ずかしかったので修正。配列に突っ込んだ

selflash

forked:7
favorite:47
lines:242
license : MIT License
modified : 2009-11-04 18:31:15

Embed: Tweet

// forked from yooKo's TextFieldから文字の輪郭を取得して3Dにして砂の落下アニ・・以下省略
/**
 * @author yooKo@serialField
 * @version 1.5.0
 * Let's Click!
 * Papervision3DのPixcel3Dでまた遊んだ。
 * どうぞご自由に画面をClickしてください。
 * 
 * TextFieldから文字の輪郭を取得して3D上にPixcel3Dで描画 
 *  
 * ソースは荒れすぎてカオスな事になってます！！
 * 途中から自分でも何書いてるか分かんなくなった・・
 * 特にテキストの外枠の座標をとる為にifのネストしまくった
 * 箇所は飯も食わずに6時間悩み続けた・・orz
 * 
 * 後半から変数名とかちょー適当になってます。
 * やけくそで実装しました。「可読性？なにそれ」って感じになってます。 * 
 * 最適化もこれで精いっぱい　汗
 * ifのネストは自分の頭脳ではもう無理です
 *  
 * 今後思いついたらちょくちょく最適化する～
 *
 *
 * クリックイベントが受け取れない！！！ちくしょー
 * ローカルでは問題なかったのに・・
 * 本当はクリックしたらこうなる予定　↓
 * ttp://selflash.jp/wonderfl/Text3DSandAnime
 *
 * 修正：クリックイベントなおった。paqさんがforkしてくれたやつのまねした。　!flgのトグルはやらない方が
 * いいんかも
 * 砂のアニメーションを調整
 *
 * 10/12 21:39 コードの最適化　253行　→　228行になった
 * 228行　→　226行
 * 
 * 10/21 12:40 new Pixel3Dしまくってた箇所恥ずかしかったので修正。配列に突っ込んだ
 **/
package {
	import flash.display.*;
	import flash.text.*;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;
	import flash.geom.ColorTransform;
	import flash.geom.Point;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.display.StageQuality;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.utils.Timer;
	import flash.utils.getTimer;

import org.papervision3d.core.effects.BitmapLayerEffect;
	import org.papervision3d.core.effects.BitmapColorEffect;
	import org.papervision3d.core.effects.utils.BitmapClearMode;
	import org.papervision3d.core.geom.Pixels;
	import org.papervision3d.core.geom.renderables.Pixel3D;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.layer.BitmapEffectLayer;
	
	import net.hires.debug.Stats;	
import com.bit101.components.*;
	[SWF(width="465", height="465", backgroundColor="0x000000", frameRate="60")]

public class Text3DSandAnime extends BasicView {
		private var _pixels:Pixels;
		private var _rotateX:Number = 0;
		private var _rotateY:Number = 0;
		private var _pixel3Ds:Array/*Pixel3D*/ = []; 
		private var _particles:Array/*Particle*/ = [];
		private var _startTime:int;
		private var _flg:Boolean = false;
		private var _bmd:BitmapData;
		private var _pre:Number;
		private var _i:int;
		private var _a:Number;
		private var _y:Number;
		private var _x:Number;
		private var _c:uint;
		
		private var _textW:Number;
		private var _textH:Number;
		// 地面との距離
		private const GROUND_NUM:int = 70;
		private const CAMERA_DISTANCE:int = -100;
		
		//========================================================================
		// コンストラクタ	
		//========================================================================
		public function Text3DSandAnime() {	
			super(0, 0, true, true);			
			StageQuality.LOW;
			
			if (!stage)
                addEventListener(Event.ADDED_TO_STAGE, init);
            else
                init();
        }
		//========================================================================
		// メイン
		//========================================================================
        private function init(e:Event = null):void {	
            removeEventListener(Event.ADDED_TO_STAGE, init);			
			camera.z = CAMERA_DISTANCE;			
			var _layer:BitmapEffectLayer = new BitmapEffectLayer(viewport, stage.stageWidth, stage.stageHeight, true, 0, BitmapClearMode.CLEAR_PRE, false);
			viewport.containerSprite.addLayer(_layer);
			_layer.addEffect(new BitmapColorEffect(1, 1, 1, .85));
			_layer.addEffect(new BitmapLayerEffect(new BlurFilter(4, 4, 1), false));
			//_layer.clippingPoint = new Point(0, -4);			
			_pixels = new Pixels(_layer);
			scene.addChild(_pixels);	
			
			createText();		
			
			// レイヤー構造でテキストPixel3Dで生成するお～～
			createBody(-12, 2, 0xFFCCCC00);			
			//createFrame(-7, 3, 0xFFFF0066);
			createFrame(-2, 2, 0xFFFF0066);
			//createFrame(3, 2, 0xFFFF0066);
			createFrame(8, 1, 0xFFFFFFFF);	
			
			upDate();
			
			stage.addEventListener(MouseEvent.CLICK, onClickHandler);		
			
			startRendering();

new Label(this, 400, 440, "LET'S CLICK!")
			addChild(new Stats());
		}		
		
		//========================================================================
		// textの生成
		//========================================================================
		private function createText():void {
			var sprite:Sprite = new Sprite();
			var tf:TextField = new TextField();
			tf.defaultTextFormat = new TextFormat("小塚ゴシック Pro H", 30, 0x000000, true);
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.text = "SELFISH\n        X";
			_textW = tf.textWidth;
			_textH = tf.textHeight;			
			sprite.addChild(tf);
			
			tf = new TextField();
			tf.x = 10;
			tf.y = 80;
			tf.defaultTextFormat = new TextFormat("小塚ゴシック Pro H", 30, 0xCCFF33, true);
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.text = "FLASH";	
			_textW += tf.textWidth;
			_textH += tf.textHeight + tf.y;
			sprite.addChild(tf);
		
			_bmd = new BitmapData(_textW + 2, _textH + 10, false, 0xFFFFFF);
			_bmd.draw(sprite);
		}		
		//========================================================================
		// ClickHandler
		//　なんか知らないけど _flg = !_flg　がうまくいかなかったから冗長なコードになってしまった
		//========================================================================
		public function onClickHandler(e:MouseEvent = null):void {
			_startTime = getTimer();
			_flg = true;;
		}		
		//========================================================================
		//　常に行う処理
		//========================================================================
		override protected function onRenderTick(event:Event = null):void { 
			renderer.renderScene(scene, _camera, viewport);
		
			_rotateX += (- viewport.containerSprite.mouseX - _rotateX) * 0.1;
			_rotateY += (- viewport.containerSprite.mouseY - 170 - _rotateY) * 0.1;
			_pixels.rotationY = _rotateX;
			_pixels.rotationX = _rotateY;
			
			if (_flg) {
                sandAnimation();
                upDate();
            }
		}
		//========================================================================
		//　描画の更新
		//========================================================================
		private function upDate():void {			
			_pixels.removeAllpixels();
			var len:int = _particles.length;
			for (_i = 0; _i < len; _i++) {
				var p:Particle = _particles[_i];
				var px:Pixel3D;
                if (_pixel3Ds[_i]) {
                    px = _pixel3Ds[_i];
                    px.color = p.c;
                    px.x = p.x;
                    px.y = p.y;
                    px.z = p.z;
                }else {
                    px = new Pixel3D(p.c, p.x, p.y, p.z);
					_pixel3Ds[_i] = px;
                };
                _pixels.addPixel3D(px);			
			}			
		}

//========================================================================
		// 中身を作成する
		//　いわゆる具ね
		//========================================================================
		public function createBody(depth:int = 0, distance:Number = 2, color:Number = NaN):void {
			var w:Number = _textW * .3;
			var h:Number = _textH * .3;			
				
			for ( _y = 0; _y < _textH; _y += distance ) {
				for ( _x = 0; _x < _textW; _x += distance ) {
					_c = _bmd.getPixel( _x, _y );
					if (_c != 0xFFFFFF) {
						_particles[_i] = new Particle(_x - w, _y - h, depth, color);
						_i++;
					}
				}
			}
		}		
		//========================================================================
		// 枠組みを作成する 
		//　newする時にプロパティ突っ込んだ方が軽いのかな～？？
		//========================================================================
		public function createFrame(depth:int = 4, distance:Number = 1, color:Number = NaN):void {			
			var w:Number = _textW * .3;
			var h:Number = _textH * .3;			
			
			for ( _y = 0; _y < _textH; _y += distance ) {
				for ( _x = 0; _x < _textW; _x += distance ) {
					_c = _bmd.getPixel( _x, _y );
					if (_c != 0xFFFFFF) {
						_a = (_y == 0)?0:_x - w - _pre;
						if (_a > distance || _a < - distance) {
							_c = (color)? color:_c;
							_particles[_i] = new Particle(_x - w, _y - h, depth, _c);
							_i++;
						}
						_pre = _x - w;
					}
				}
			}
			
			for ( _x = 0; _x < _textW; _x += distance ) {
				for ( _y = 0; _y < _textH; _y += distance ) {
					_c = _bmd.getPixel( _x, _y );
					if (_c != 0xFFFFFF) {
						_a = (_x == 0)?0:_y - h - _pre;
						if(_a > distance || _a < - distance) {
							_particles[_i] = new Particle(_x - w, _y - h, depth, color);
							_i++;
						}
						_pre = _y - h;
					}
				}
			}
			
			for ( _y = _textH; _y > 0; _y -= distance ) {
				for ( _x = _textW; _x > 0; _x -= distance ) {
					_c = _bmd.getPixel( _x, _y );
					if (_c != 0xFFFFFF) {
						_a = (_y == _textH)?0:_x - w - _pre;
						if (_a > distance || _a < - distance) {
							_particles[_i] = new Particle(_x - w, _y - h, depth, color);
							_i++;
						}
						_pre = _x - w;
					}
				}
			}
			
			for ( _x = _textW; _x > 0; _x -= distance ) {
				for ( _y = _textH; _y > 0; _y -= distance ) {
					_c = _bmd.getPixel( _x, _y );
					if (_c != 0xFFFFFF) {
						_a = (_x == _textW)?0:_y - h - _pre;
						if (_a > distance || _a < - distance) {
							_particles[_i] = new Particle(_x - w, _y - h, depth, color);
							_i++;
						}
						_pre = _y - h;
					}
				}
			}
		}
		
		//========================================================================
		// 砂のアニメーション	
		// _flgがtrueの時に発動!!!!
		//========================================================================
		private function sandAnimation():void {
			camera.z += (-150 - camera.z) * .2;

var now:int = getTimer();
			var len:int = _particles.length;
			for ( _i = 0; _i < len; _i++ ) {
				var p:Particle = _particles[_i];
				if (p.y < GROUND_NUM) {
					var x_delay:Number = (1 - ((p.x + _textW * .7) / _textW )) * 25000;
					var y_delay:Number = (1 - ((p.y + _textH * .8) / _textH )) * 5000;
					var z_delay:Number = (1 - ((p.z + 8 * .5) / 8 )) * 2000;
					var delay:Number = x_delay + y_delay + z_delay;
					if (_startTime + delay > now) continue ;
					p.vy = p.vy * p.af + p.g;
					p.y += p.vy;
				}else {
					p.y = GROUND_NUM;
					p.vx = p.vx * p.gf * (Math.random() - .5) * 3;
					p.x += p.vx;
					p.vz = p.vz * p.gf * (Math.random() - .5) * 3;
					p.z += p.vz;
				}
			}
		}	
	}
}

//========================================================================
// 座標、色情報を保持するプロパティ持ちすぎクラス		
//========================================================================
class Particle {
	public var x:Number;
	public var y:Number;
	public var z:Number;
	public var c:int;	
	//=====================================
	// 砂のアニメーションに使うプロパティ
	//=====================================
	public var g:Number  = .98;
    public var af:Number = .99;
	public var gf:Number = .999999;
	public var vx:Number = 8;
	public var vy:Number = 4;	
	public var vz:Number = 8;
	
	public function Particle(_x:Number, _y:Number, _z:Number, _c:int) {
		x = _x;
		y = _y;
		z = _z;
		c = _c;
	}
}

Code Fullscreen

Preview Fullscreen