/** * Fluid on the Video * * @author http://alumican.net * * 動画はこちらからお借りしています * http://www.nicovideo.jp/watch/sm3605606 */ package { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BlendMode; import flash.display.Graphics; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.events.NetStatusEvent; import flash.filters.BlurFilter; import flash.filters.ColorMatrixFilter; import flash.filters.DisplacementMapFilter; import flash.geom.ColorTransform; import flash.geom.Matrix; import flash.geom.Point; import flash.geom.Rectangle; import flash.media.SoundTransform; import flash.media.Video; import flash.net.NetConnection; import flash.net.NetStream; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import net.hires.debug.Stats; public class FlashTest extends Sprite { //CLASS CONSTANTS private const MAP_WIDTH:Number = 465; private const MAP_HEIGHT:Number = 465; private const MAP_GRID_SIZE:Number = 20; private const MAP_FLOW_SIZE:Number = 2; private const MAP_INTENSITY:Number = 0.25; private const MAP_SCALE:Number = 150; private const MAP_USE_DECAY:Boolean = true; private const MAP_BLUR_INTENSITY:uint = 32; private const MAP_BLUR_QUALITY:uint = 2; private const ZERO_POINT:Point = new Point(0,0); //VARIABLES private var _container:Sprite; private var _canvas:BitmapData; private var _canvasTone:ColorMatrixFilter; private var _fluidMap:FluidMap; private var _fluidBmp:Bitmap; private var _mapBmd:BitmapData; private var _mapFilter:DisplacementMapFilter; private var _oldX:Number = 0; private var _oldY:Number = 0; private var _isMouseMove:Boolean = false; private var _ns:NetStream; private var _nc:NetConnection; private var _video:Video; private var _videoMatrix:Matrix; private var _background:Sprite; private var _stats:Stats; private var _usage:TextField; //CONSTRUCTOR public function FlashTest():void { Wonderfl.disable_capture(); addEventListener(Event.ADDED_TO_STAGE, _initialize); } //METHODS private function _initialize(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE, _initialize); stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; _background = new Sprite(); addChild(_background); _container = new Sprite(); addChild(_container); _canvas = new BitmapData(MAP_WIDTH, MAP_HEIGHT, false, 0xffffff); _container.addChild(new Bitmap(_canvas)); _fluidMap = new FluidMap(MAP_WIDTH, MAP_HEIGHT, MAP_GRID_SIZE, MAP_FLOW_SIZE, MAP_INTENSITY, MAP_USE_DECAY, MAP_SCALE, MAP_BLUR_INTENSITY, MAP_BLUR_QUALITY); _mapFilter = _fluidMap.mapFilter; _canvasTone = new ColorMatrixFilter([ 1, 0, 0, 0, 5, 0, 1, 0, 0, 5, 0, 0, 1, 0, 5, 0, 0, 0, 0, 0 ]); _stats = new Stats( { bg:0xffffff, fps:0x333333, ms:0x333333, mem:0x333333, memmax:0x333333 }); _stats.blendMode = BlendMode.DARKEN; addChild(_stats); _usage = new TextField(); _usage.defaultTextFormat = new TextFormat("MS Gothic", 11, 0x0); _usage.text = "Move mouse on movie"; _usage.autoSize = TextFieldAutoSize.RIGHT; _usage.selectable = false; _usage.blendMode = BlendMode.INVERT; _usage.visible = false; _container.addChild(_usage); stage.addEventListener(Event.RESIZE, _resizeHandler); _resizeHandler(); _loadVideo("http://lab.alumican.net/wonderfl/liquid_video_input.flv"); } private function _loadVideo(url:String):void { _nc = new NetConnection(); _nc.connect(null); _ns = new NetStream(_nc); _ns.addEventListener(NetStatusEvent.NET_STATUS, _videoNetStatusHandler); _ns.client = { onMetaData:function(param:Object):void { } }; _ns.checkPolicyFile = true; _ns.play(url); _video = new Video(); _video.width = 300; _video.height = 220; _video.attachNetStream(_ns); } private function _videoNetStatusHandler(e:NetStatusEvent):void { if(e.info.code == "NetStream.Buffer.Full") { _videoMatrix = new Matrix(); _videoMatrix.scale(_video.width / 320, _video.height / 240); _videoMatrix.tx = uint( (MAP_WIDTH - _video.width ) / 2 ); _videoMatrix.ty = uint( (MAP_HEIGHT - _video.height) / 2 ); _usage.x = _videoMatrix.tx + _video.width - _usage.textWidth; _usage.y = _videoMatrix.ty - 20; _usage.visible = true; var st:SoundTransform = _ns.soundTransform; st.volume = 0.3; _ns.soundTransform = st; addEventListener(Event.ENTER_FRAME, _update); stage.addEventListener(MouseEvent.MOUSE_MOVE, _mouseMoveHandler); } } private function _drawCanvas():void { _canvas.lock(); _canvas.applyFilter(_canvas, _canvas.rect, ZERO_POINT, _canvasTone); _canvas.draw(_video, _videoMatrix); _canvas.applyFilter(_canvas, _canvas.rect, ZERO_POINT, _mapFilter); _canvas.unlock(); } private function _refillBackground():void { var sw:int = stage.stageWidth; var sh:int = stage.stageHeight; var g:Graphics = _background.graphics; g.clear(); g.beginFill(0xffffff); g.moveTo(0 , 0 ); g.lineTo(sw, 0 ); g.lineTo(sw, sh); g.lineTo(0 , sh); g.lineTo(0 , 0 ); g.endFill(); } private function _update(e:Event):void { if (_isMouseMove) { var speedX:Number = _container.mouseX - _oldX; var speedY:Number = _container.mouseY - _oldY; _fluidMap.addOrientedForce(_container.mouseX, _container.mouseY, speedX, speedY); _isMouseMove = false; } _fluidMap.updateMap(); _drawCanvas(); _oldX = _container.mouseX; _oldY = _container.mouseY; } private function _mouseMoveHandler(e:MouseEvent):void { _isMouseMove = true; } private function _resizeHandler(e:Event = null):void { _refillBackground(); _container.x = uint((stage.stageWidth - MAP_WIDTH ) / 2); _container.y = uint((stage.stageHeight - MAP_HEIGHT) / 2); _stats.x = 2; _stats.y = stage.stageHeight - 45; } } } import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.filters.BlurFilter; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point; import flash.geom.Rectangle; internal class FluidMap { //CLASS CONSTANTS private static const ZERO_POINT:Point = new Point(0, 0); //VARIABLES private var _cells:Array; private var _cellCount:uint; private var _allCells:Array; private var _allCellCount:uint; private var _width:uint; private var _height:uint; private var _widthCount:uint; private var _heightCount:uint; private var _gridSize:uint; private var _flowSize:Number; private var _intensity:Number; private var _useDecay:Boolean; private var _mapBmd:BitmapData; private var _mapFilter:DisplacementMapFilter; private var _mapScale:Number; private var _mapBlurIntensity:uint; private var _mapBlurQuality:uint; private var _blurFilter:BlurFilter; private var _calculator:FluidCalculator; private var _colorAdjust:Number; private var _distMin2:Number; private var _flowSize2:Number; public function get mapFilter():DisplacementMapFilter { return _mapFilter; } //CONSTRUCTOR public function FluidMap( width:uint, height:uint, gridSize:uint = 10, flowSize:Number = 2, intensity:Number = 0.25, useDecay:Boolean = true, mapScale:Number = 100, mapBlurIntensity:uint = 32, mapBlurQuality:uint = 2 ):void { _width = width; _height = height; _gridSize = gridSize; _flowSize = flowSize; _useDecay = useDecay; _intensity = intensity; _mapScale = mapScale; _mapBlurIntensity = mapBlurIntensity; _mapBlurQuality = mapBlurQuality; _widthCount = uint( Math.ceil(width / gridSize) ); _heightCount = uint( Math.ceil(height / gridSize) ); _allCellCount = _widthCount * _heightCount; _allCells = new Array(_allCellCount); var p:uint = 0; var i:uint; var j:uint; var data:FluidMapData; var cells2d:Array = new Array(_widthCount); for (i = 0; i < _widthCount; ++i) { cells2d[i] = new Array(_heightCount); for (j = 0; j < _heightCount; ++j) { data = new FluidMapData(i, j); cells2d[i][j] = data; _allCells[p] = data; ++p; } } _cells = new Array(); var w:uint = _widthCount - 1; var h:uint = _heightCount - 1; var pi:uint = 0; var pj:uint = 0; for (i = 1; i < w; ++i) { for (j = 1; j < h; ++j) { data = cells2d[i][j] as FluidMapData; data.n00 = cells2d[i - 1][j - 1] as FluidMapData; data.n10 = cells2d[i ][j - 1] as FluidMapData; data.n20 = cells2d[i + 1][j - 1] as FluidMapData; data.n01 = cells2d[i - 1][j ] as FluidMapData; data.n21 = cells2d[i + 1][j ] as FluidMapData; data.n02 = cells2d[i - 1][j + 1] as FluidMapData; data.n12 = cells2d[i ][j + 1] as FluidMapData; data.n22 = cells2d[i + 1][j + 1] as FluidMapData; if (pi != 0) { data.prev = cells2d[pi][pj] as FluidMapData; data.prev.next = data; } _cells.push(data); pi = i; pj = j; } } _cellCount = _cells.length; _mapBmd = new BitmapData(_width, _height, false, 0x008080); _mapFilter = new DisplacementMapFilter(); _mapFilter.mapBitmap = _mapBmd; _mapFilter.mapPoint = ZERO_POINT; _mapFilter.componentX = BitmapDataChannel.GREEN; _mapFilter.componentY = BitmapDataChannel.BLUE; _mapFilter.mode = DisplacementMapFilterMode.CLAMP; _mapFilter.scaleX = _mapScale; _mapFilter.scaleY = _mapScale; _blurFilter = new BlurFilter(_mapBlurIntensity, _mapBlurIntensity, _mapBlurQuality); _colorAdjust = -128 * _intensity; _distMin2 = 4 * _gridSize * _gridSize; _flowSize2 = _flowSize * _flowSize; _calculator = new FluidCalculator(); } //METHODS public function addOrientedForce(x:uint, y:uint, forceX:Number = 0, forceY:Number = 0):void { var s:uint = _gridSize; var n:uint = _cellCount; var cell:FluidMapData = _cells[0] as FluidMapData; for (var i:uint = 0; i < n; ++i) { _calcOrientedForce(cell, x / s, y / s, forceX, forceY); cell = cell.next; } } public function updateMap():BitmapData { var s:uint = _gridSize; var n:uint = _cellCount; var cell:FluidMapData = _cells[0] as FluidMapData; var map:BitmapData = _mapBmd; _decay(); _updatePressure(); _updateVelocity(); map.lock(); map.fillRect(map.rect, 0x008080); for (var i:uint = 0; i < n; ++i) { map.fillRect( new Rectangle(cell.x * s, cell.y * s, s, s), _calcMapColor(cell) ); cell = cell.next; } map.applyFilter(map, map.rect, ZERO_POINT, _blurFilter); map.unlock(); return map; } private function _decay():void { if (_useDecay) { var n:uint = _allCellCount; var cell:FluidMapData = _allCells[0] as FluidMapData; for (var i:uint = 0; i < n; ++i) { _calcDecay(_allCells[i]); //cell = cell.next; } } } private function _updatePressure():void { var n:uint = _cellCount; var cell:FluidMapData = _cells[0] as FluidMapData; for (var i:uint = 0; i < n; ++i) { _calcPressure(cell); cell = cell.next; } } private function _updateVelocity():void { var n:uint = _cellCount; var cell:FluidMapData = _cells[0] as FluidMapData; for (var i:uint = 0; i < n; ++i) { _calcVelocity(cell); cell = cell.next; } } private function _calcDecay(data:FluidMapData):void { var r:Number = data.colorX; var b:Number = data.colorY; if (r != 128) data.colorX += (r < 128) ? 1 : -1; if (b != 128) data.colorY += (b < 128) ? 1 : -1; } private function _calcPressure(data:FluidMapData):void { data.pressure += _calculator.calcPressure(data); data.pressure *= 0.7; } private function _calcVelocity(data:FluidMapData):void { data.vx += _calculator.calcVelocityX(data); data.vy += _calculator.calcVelocityY(data); data.vx *= 0.7; data.vy *= 0.7; } private function _calcOrientedForce(data:FluidMapData, x:uint, y:uint, forceX:Number = 0, forceY:Number = 0):void { var dx:int = data.x - x; var dy:int = data.y - y; var dist2:Number = dx * dx + dy * dy; if (dist2 < _flowSize2) { var f:Number = (dist2 < _distMin2) ? 1.0 : (_flowSize / Math.sqrt(dist2)); data.vx += forceX * f; data.vy += forceY * f; } } private function _calcMapColor(data:FluidMapData):uint { var vx:Number = data.vx; var vy:Number = data.vy; var g:int = data.colorX; var b:int = data.colorY; g = Math.round( _colorAdjust * vx + g ); b = Math.round( _colorAdjust * vy + b ); g = (g < 0) ? 0 : (g > 255) ? 255 : g; b = (b < 0) ? 0 : (b > 255) ? 255 : b; data.colorX = g; data.colorY = b; return data.color = g << 8 | b; } } internal class FluidCalculator { //CONSTRUCTOR public function FluidCalculator():void { } //METHODS public function calcVelocityX(data:FluidMapData):Number { return ( data.n00.pressure * 0.5 + data.n01.pressure + data.n02.pressure * 0.5 - data.n20.pressure * 0.5 - data.n21.pressure - data.n22.pressure * 0.5 ) * 0.25; } public function calcVelocityY(data:FluidMapData):Number { return ( data.n00.pressure * 0.5 + data.n10.pressure + data.n20.pressure * 0.5 - data.n02.pressure * 0.5 - data.n12.pressure - data.n22.pressure * 0.5 ) * 0.25; } public function calcPressure(data:FluidMapData):Number { return ( data.n00.vx * 0.5 + data.n01.vx + data.n02.vx * 0.5 - data.n20.vx * 0.5 - data.n21.vx - data.n22.vx * 0.5 + data.n00.vy * 0.5 + data.n10.vy + data.n20.vy * 0.5 - data.n02.vy * 0.5 - data.n12.vy - data.n22.vy * 0.5 ) * 0.20; } } internal class FluidMapData { //VARIABLES public function get x():uint { return _x; } public function set x(value:uint):void { _x = value; } private var _x:uint; public function get y():uint { return _y; } public function set y(value:uint):void { _y = value; } private var _y:uint; public function get vx():Number { return _vx; } public function set vx(value:Number):void { _vx = value; } private var _vx:Number; public function get vy():Number { return _vy; } public function set vy(value:Number):void { _vy = value; } private var _vy:Number; public function get pressure():Number { return _pressure; } public function set pressure(value:Number):void { _pressure = value; } private var _pressure:Number; public function get color():uint { return _color; } public function set color(value:uint):void { _color = value; } private var _color:uint; public function get colorX():uint { return _colorX; } public function set colorX(value:uint):void { _colorX = value; } private var _colorX:uint; public function get colorY():uint { return _colorY; } public function set colorY(value:uint):void { _colorY = value; } private var _colorY:uint; public function get next():FluidMapData { return _next; } public function set next(value:FluidMapData):void { _next = value; } private var _next:FluidMapData; public function get prev():FluidMapData { return _prev; } public function set prev(value:FluidMapData):void { _prev = value; } private var _prev:FluidMapData; private var _n00:FluidMapData; private var _n01:FluidMapData; private var _n02:FluidMapData; private var _n10:FluidMapData; private var _n12:FluidMapData; private var _n20:FluidMapData; private var _n21:FluidMapData; private var _n22:FluidMapData; public function get n00():FluidMapData { return _n00; } public function get n01():FluidMapData { return _n01; } public function get n02():FluidMapData { return _n02; } public function get n10():FluidMapData { return _n10; } public function get n12():FluidMapData { return _n12; } public function get n20():FluidMapData { return _n20; } public function get n21():FluidMapData { return _n21; } public function get n22():FluidMapData { return _n22; } public function set n00(value:FluidMapData):void { _n00 = value; } public function set n01(value:FluidMapData):void { _n01 = value; } public function set n02(value:FluidMapData):void { _n02 = value; } public function set n10(value:FluidMapData):void { _n10 = value; } public function set n12(value:FluidMapData):void { _n12 = value; } public function set n20(value:FluidMapData):void { _n20 = value; } public function set n21(value:FluidMapData):void { _n21 = value; } public function set n22(value:FluidMapData):void { _n22 = value; } //CONSTRUCTOR public function FluidMapData(x:uint, y:uint):void { _x = x; _y = y; _vx = 0; _vy = 0; _pressure = 0; _color = 0x008080; _colorX = 128; _colorY = 128; } }