Skip navigation
Currently Being Moderated

DisplacementMapFilter problem

May 10, 2011 12:46 AM

Did somebody's worked by DisplacementMapFilter? It don't work fine on iPhone, while on flashplayer is correct. In particular, on iPhone, the filter create a image with pseudo-random pixel, without apparent logic, why?

 

Maybe that filter isn't implemented?

 

I would create an app that deforms an image through finger got from a picture done by camera, do exist an alternative method without DisplacementMapFilter?

 

thanks

 
Replies
  • Currently Being Moderated
    May 12, 2011 7:54 AM   in reply to myoscaroxy

    Do you use CPU or GPU render mode ? You should use CPU to apply filter.

     

    Here a small exemple to deforme a picture when you touch screen. (I test it on my Samsung Galaxy S)

     

    *Sorry for french comment...

     

    The "Img" class is a Bitmap (your picture)

    The "Vague" class is a MovieClip Animation of wave (black and white).

     

    Main Class:

     

    package
    {
        import flash.display.Bitmap;
        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.events.AccelerometerEvent;
        import flash.events.Event;
        import flash.events.MouseEvent;
        import flash.events.TouchEvent;
        import flash.geom.Matrix;
        import flash.sensors.Accelerometer;
        import flash.text.TextField;
       
        import modules.fx.Deformation;
       
        import modules.utils.FPSCounter;
       
        /**
         * ...
         * @author Michaël Chartrand
         */
        public class Main extends Sprite {
           
            private var _img:Bitmap;
            private var deformation:Deformation;
           
            public function Main():void {
                //setup stage
                stage.scaleMode = StageScaleMode.NO_SCALE;
                stage.align = StageAlign.TOP_LEFT;

     

                //add handlers
                addEventListener(Event.ADDED_TO_STAGE, init);
            }
           
            private function init(event:Event):void{
                    //removes listener
                    removeEventListener(Event.ADDED_TO_STAGE, init);
                   
                    _img = new Bitmap(new Img);
                    addChild(_img);

     

                    setupTransformBitmap();
            }
           
            private function setupTransformBitmap():void{
                deformation = new Deformation(_img);
                this.addEventListener(Event.ENTER_FRAME, rappel);
                this.stage.addEventListener(MouseEvent.CLICK, ajoute);
               
                var fps:FPSCounter = new FPSCounter(0, 0);
                addChild(fps);
            }
           
            //FONCTION rappel
            //--------------------------------------------------------
            private function rappel(event:Event):void{
                deformation.appliqueEffet();
            }
           
            //FONCTION ajoute
            //--------------------------------------------------------
            private function ajoute(event:MouseEvent):void {
                deformation.ajouteEffet(Vague, mouseX, mouseY);
            }

     

        }
       
    }

     

     

     

     

    Deformation Class:

     

    package modules.fx{

     

        /**
         * ...
         * @author Michaël Chartrand.
         */

     

        //IMPORTATIONS
        //--------------------------------------------------------
        import flash.display.MovieClip;
        import flash.display.DisplayObject;
        import flash.display.Bitmap;
        import flash.display.BitmapData;
        import flash.filters.DisplacementMapFilter;
        import flash.filters.DisplacementMapFilterMode;
        import flash.geom.Point;
        import modules.forme.Rectangle;

     

        //CLASS Deformation
        //--------------------------------------------------------
        public class Deformation extends MovieClip {

     

            //PROPRIÉTÉS
            //--------------------------------------------------------
            private var _imageBitmap:BitmapData;
            private var _displacementMap:DisplacementMapFilter;
            private var _contenant:MovieClip;
            private var _rectangle:Rectangle;
           
            private var _objet:DisplayObject;
           
            //FONCTION Deformation
            //--------------------------------------------------------
            public function Deformation(objet:DisplayObject) {
                //Affectation
                _objet = objet;
               
                //Création d'un bitmap d'après les proportion d'une image.
                _imageBitmap = new BitmapData(_objet.width, _objet.height, false, 0x000000);
               
                //Contenant de l'effets et du rectangle
                _contenant = new MovieClip();
                _contenant.x = _objet.x;
                _contenant.y = _objet.y;
                _contenant.visible = false;
               
                addChild(_contenant);
               
                //Forme un Rectangle
                //--------------------------------------------------------
               
                //Arguments    :: couleurFond, transparenceFond, couleurContour, pixelContour, transparenceContour, largeur, hauteur, coinLargeur, coinHauteur
                _rectangle = new Rectangle(0x000000, 1, 0x000000, 0, 1, _objet.width, _objet.height, 0, 0);
                _rectangle.x = _objet.x;
                _rectangle.y = _objet.y;
                _contenant.addChild(_rectangle);
            }
           
            //FONCTION ajouteEffet
            //--------------------------------------------------------
            public function ajouteEffet(classe:Class, posX:int, posY:int):void{
                var effet:MovieClip = new classe;
                effet.x = posX;
                effet.y = posY;
                _contenant.addChild(effet);
            }
           
            //FONCTION appliqueEffet
            //--------------------------------------------------------
            public function appliqueEffet():void{
                //Reproduit l'image sur le bitmap
                _imageBitmap.draw(_contenant);
               
                //Crée le filtre de déformatiom
                _displacementMap = new DisplacementMapFilter(_imageBitmap, new Point(0, 0), 1, 1, 10, 10, DisplacementMapFilterMode.CLAMP);
           
                //Applique le filtre de déformation
                _objet.filters = [_displacementMap];
            }
           
        }
    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2011 1:47 AM   in reply to myoscaroxy

    I have the same problem, I tried also Pixel Bender on CPU and GPU but the image isn't filtered.

     

    Does anybody know if filtering will be possible with AIR 2.7 for iOS ?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 10, 2011 11:59 PM   in reply to myoscaroxy

    Hi,

    @myoscaroxy I tried your code and I am not able to see any difference in output on desktop and iOS. Could you please attach a screenshot, or file a bug at http://bugbase.adobe.com with an example?

     

    Thanks,

    Sanika

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 23, 2011 1:43 AM   in reply to myoscaroxy

    Thanks for the screenshot. I am able to reproduce the bug. It is currently under investigation.

     

    Regards,

    Sanika

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 23, 2011 2:16 AM   in reply to myoscaroxy

    You could report the bug yourself at http://bugbase.adobe.com along with the app sources. The bug will be visible publicly, so you will come of any updates on the bug.

     

    Thanks.

    Sanika

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 31, 2011 2:40 PM   in reply to myoscaroxy

    Looks like perhaps an authoring error?  Its not the filter that's the problem, its the inputs to the filter.   the code is using stage.mouseX / stage.mouseY to see where to apply the filter; and also previous.x/y - current.x/y to see how much to apply.

     

    On desktop, stage.mouseX/Y are updated per pixcel changes while mouse is moving. But on mobile, with touch input, they don't. So what happens on mobile is that previous.xy - current.xy could be a large value if the two touches are far way on screen. So that leads to a large filter to apply.

     

    So I think this is a UserError one.

     

    On mobile:

     

    mouseDown----------------------------------------------

    previous=221,186 & current=149,311

    mouseDown=true

    drawDisplacement!!!!!!!

    previous=221,186 & current 221,186

    mouseDown=true

    mouseUp----------------------------------------------

     
    |
    Mark as:
  • Currently Being Moderated
    May 9, 2012 1:42 PM   in reply to myoscaroxy

    myoscaroxy, do you can help me, showing your code with solution? I've the same problem. I see that problem is the x,y of Touch position, but I could not to solve this.  Thanks!!!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points