Morphing on pictures without displacement map

Hello Community!

I’m looking for a solution to do a kind of distortion effect on picture when moving the finger on the screen. Something like liquify photoshop effect for instance

I had done it thanks to the displacement map filter and was rather working well even if a bit limitated…but… I realised it does not works in GPU mode on devices…

I need a solution working with GPU mode so .
Or maybe HARMAN plan to adapt AIR SDK to allow to use blend mode and displacement map filter in both CPU and GPU in the futur? we never know…

If someone have some insight on the topic I would be definitly grateful :slight_smile:

you can do those with Starling, see for ex

How to create a Shock wave effect with displacementMapFilter like this?

see Starling Manual

see blog post: Starling Filter Collection and github devon-o/Starling-Filters

very unlikely to happen

2 Likes

Starling use the displace map filter, I would need to get a similar effect without the displace filter as it’s CPU only…
I investigated the potential of triangulation on picture and then manipulate them but… well, it seems a bit over kill. May there is something simplier?

either I don’t get your question or you don’t understand that Starling is indeed using the GPU and allow to replicate similar filters (displacementMap and others) that were used before in flash.filters

so maybe explain your problem in more details and what you try to do exactly
and maybe review what use CPU and what use GPU

in the starling manual link provided above you can read

While Starling mimics the classic display list architecture of Adobe AIR/Flash , it provides a much better performance: all objects are rendered directly by the GPU (using the Stage3D API).

Thanks for your anwers which help me better understand how displacmeent map filters would be used with the starling framework.

The idea is to do morphing on a face picture when moving your finger on the screen ( exactly the way photoshop can do it with the liquify effect )

Where? mobile? desktop?

Mobile, with finger stretching and squishing the picture when sliding it on one part of the picture .
Let’s say you want to strech the nose of a human face for instance. Suppose you want to stretch pixels zone you tap + slide with your finger.

I get it you want to do like Kai Power Goo

then you need to use the GPU
and then you need to use Starling in order to use a displacement map that works on the GPU

eg. you need starling.filters.DisplacementMapFilter (and maybe starling.filters.BlurFilter

done back in 2006 with Flash, Source Code: Image gOOifier

class com.gskinner.gooifier.Main extends MovieClip {
	private var rect:Rectangle;
	private var mapBmp:BitmapData;
	private var blurredMapBmp:BitmapData;
	private var blurF:BlurFilter;
	private var pt:Point;
	private var dispMapF:DisplacementMapFilter;

	private function Main() {
		// set up geom:
		rect = new Rectangle(0,0,Math.floor(img._width),Math.floor(img._height));
		pt = new Point(0,0);
		
		// set up bitmaps:
		mapBmp = new BitmapData(rect.width,rect.height,false,0x808080);
		blurredMapBmp = mapBmp.clone();
		
		// set up filters:
		blurF = new BlurFilter(8,8,2);
		dispMapF = new DisplacementMapFilter(blurredMapBmp,pt,2,4,100,100,"clamp");
	}

        // ...
}

the idea is to port this old code to AS3 and Starling

you can also find inspiration from FlexMonkey/SwiftGoo (and blog post Recreating Kai’s Power Tools Goo in Swift)

eg. SwiftGoo/ViewController.swift

    let warpKernel = CIWarpKernel(string:
        "kernel vec2 gooWarp(float radius, float force,  vec2 location, vec2 direction)" +
        "{ " +
        " float dist = distance(location, destCoord()); " +
        
        "  if (dist < radius)" +
        "  { " +
            
        "     float normalisedDistance = 1.0 - (dist / radius); " +
        "     float smoothedDistance = smoothstep(0.0, 1.0, normalisedDistance); " +
            
        "    return destCoord() + (direction * force) * smoothedDistance; " +
        "  } else { " +
        "  return destCoord();" +
        "  }" +
        "}")!

Thanks for your insights. Will investigate the starling option. I was also looking at gooifier but stopped after realizing it was also CPU only… but yeah the method is here.