现在的位置: 首页 > 综合 > 正文

flash位图技术研究篇(7):像素粒子2

2012年12月22日 ⁄ 综合 ⁄ 共 5233字 ⁄ 字号 评论关闭


 
最近会放慢一点脚步来进行更新博客,关键是有很多事情都没有处理完,有时候程序出到了,但是本身还是不太了解。呵呵,开始有点笨了。这种应用在
wonderfl 看过了,但是一直都很难吃透这个程序,今天自己按部就班学习了一下。获取图片的像素并将这些像素点通过改变组合成上面的图案。

过程:

 一、读取外部图片

  我们采用loade 的方式对其外部图片进行读取,在flex 可以通过embed 嵌入的 方式读取,这里只是谈及flash。

        private function init():void
        {
            //外部加载一张位图
            loader=new Loader();
            loader.load(new URLRequest(url));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete);
        }


二、处理像素

   我们需要获取某一些像素值,然后对这些像素值进行更改变化,一般来讲我们采用位图类当中 getPixel()这个方法来处理

如下:

var color:uint=bitmap.bitmapData.getPixel(j,i);

当我们获取到数据之后,我们需要对其进行保存,事先我们可以构建一个最简单的数据模型,这个数据模型当中包含空间一个点,xyz的坐标值,我们对像素进行保存,并且进行进行设置

package
{
    //基本空间点模型
    public class Point3D
    {
        public var x:Number;
        public var y:Number;
        public var z:Number;

        public function Point3D(x:Number,y:Number,z:Number)
        {
            this.x=x;
            this.y=y;
            this.z=z;
        }
    }
}



然后采用数组的方式对其进行保存。

            for (var i:int=0; i<bmp.height; i++)
            {
                for (var j:int=0; j<bmp.width; j++)
                {
                    var color:uint=bitmap.bitmapData.getPixel(j,i);
                    var red:int=(color>>16)& 0xff;
                    var px:Number = ( j * 5 ) - ( bitmap.width / 2 * 5);
                    var py:Number = ( i *5 ) - ( bitmap.height / 2 * 5);
                    if (red>1)
                    {
                        var point3d:Point3D=new Point3D(px,py,int(red/2));
                        point3dArray.push(point3d);
                    }
                }
            }



保存之后,我们就可以得到了一组点的数组,这些点操作方便我们对其进行重新像素设置,或者通过对点的实现一种旋转的应用。

三 对图片进行渲染

 有了这些像素值和点之后,我们就可以重新将其点进行定位,而定位则采用setPixel32 这个带透明度的方式来进行。

        private function render():void
        {
            //循环检测
            temp.lock();
            temp.fillRect( temp.rect, 0x00 );
            for each (var p:Point3D in point3dArray)
            {
                var scale:Number = fl / ( fl + p.z );
                var viewX:int=centerX+p.x*scale;
                var viewY:int=centerY+p.y*scale;
                color = 0xff000000 | p.z << 16 | p.z << 8 | p.z;
                temp.setPixel32(viewX,viewY,color);
            }           
            temp.unlock();
           
        }



四:坐标旋转

 
对点的旋转是一个很常见的操作,这里仅仅需要通过公式来实现即可以,这样做为了增加一个趣味性视角。


       //旋转Y
        private function rotationY(p:Point3D, angle:Number):void
        {            
            p.x=Math.cos(angle*Math.PI/180)*p.x-Math.sin(angle*Math.PI/180)*p.z;            
            p.z=Math.cos(angle*Math.PI/180)*p.z+Math.sin(angle*Math.PI/180)*p.x;            
        }



总代码:

package
{
    import flash.display.Sprite;
    import flash.events.*;
    import flash.display.Loader;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.net.*;
    import flash.geom.*;
    import flash.utils.ByteArray;
    import Point3D;

    public class Main extends Sprite
    {
        private var loader:Loader;
        private var url:String="1.jpg";
        private var bmp:BitmapData;
        private var temp:BitmapData;
           
        private var point3dArray:Array=[];//记录点的数组
        private var vy:Number=0;

        private var fl:int=500;//透视
        private var centerX:int=int(stage.stageWidth/2);
        private var centerY:int=int(stage.stageHeight/2);
        private var c1:int;
        private var color:uint;
        public function Main()
        {
            init();
            trace(centerY);
        }
        private function init():void
        {
            //外部加载一张位图
            loader=new Loader();
            loader.load(new URLRequest(url));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoadComplete);
        }
        private function onLoadComplete(event:Event):void
        {
            var bitmap:Bitmap=loader.content as Bitmap;
            bmp=new BitmapData(bitmap.width,bitmap.height,false,0xffffff);
            addChild(bitmap);
            //获取每一个像素点值
            for (var i:int=0; i<bmp.height; i++)
            {
                for (var j:int=0; j<bmp.width; j++)
                {
                    var color:uint=bitmap.bitmapData.getPixel(j,i);
                    var red:int=(color>>16)& 0xff;
                    var px:Number = ( j * 5 ) - ( bitmap.width / 2 * 5);
                    var py:Number = ( i *5 ) - ( bitmap.height / 2 * 5);
                    if (red>1)
                    {
                        var point3d:Point3D=new Point3D(px,py,int(red/2));
                        point3dArray.push(point3d);
                    }
                }
            }

            temp=new BitmapData(stage.stageWidth,stage.stageHeight,true,0x00);
            addChild(new Bitmap(temp));
            render();
            addEventListener(Event.ENTER_FRAME,Run);
        }
        private function Run(event:Event):void
        {

            vy+=1;
            if(vy>5)
            vy=0;
            for each (var p:Point3D in point3dArray)
            {
                rotationY( p ,vy );
            }
            render();

        }
        //渲染一张图
        private function render():void
        {
            //循环检测
            temp.lock();
            temp.fillRect( temp.rect, 0x00 );
            for each (var p:Point3D in point3dArray)
            {
                var scale:Number = fl / ( fl + p.z );
                var viewX:int=centerX+p.x*scale;
                var viewY:int=centerY+p.y*scale;
                //c1 =255+(( p.z + 50) / 100 * 255 );
                //c1 = c1 < 0? 0:p.z;
                //c1 = c1 > 255? 255:p.z;
                color = 0xff000000 | p.z << 16 | p.z << 8 | p.z;
                temp.setPixel32(viewX,viewY,color);
            }           
            temp.unlock();
           
        }
       
        //旋转Y
        private function rotationY( p:Point3D, angle:Number):void
        {           
            p.x=Math.cos(angle*Math.PI/180)*p.x-Math.sin(angle*Math.PI/180)*p.z;           
            p.z=Math.cos(angle*Math.PI/180)*p.z+Math.sin(angle*Math.PI/180)*p.x;           
        }
       
    }
}



抱歉!评论已关闭.