SPDisplacementMap

jbernabeu

Is there a way to apply this filter to just a part of a SPImage (not to all the image) and apply it several times to different places ???

Any example ??

I am trying to make a blackboard with a drawing and that you can "destroy" with your finger when you click over ...

Thanks in advance

Daniel

Yes, that can be done!

The color of the map texture defines how the underlying pixels are modified. If you have a perfectly gray (r=g=b=127) texture, nothing will happen.

So, start with a Gray RenderTexture that has the size of the area you want to distort. Use that texture as the "mapTexture" of the displacement map filter.

Now, when somebody clicks on an area on the screen, draw something in the render texture at that position (whatever RGB values you need for your distortion). Then this part will be distorted.

To understand how exactly the DisplacementMapFilter works, I recommend you look online for examples in Flash/AS3. The class is modeled after the AS3 version. Also, have a look at the sample I show here.

And let me know if you need any more help.

jbernabeu

Hi Daniel,

I tried to do this

- (void)addDistortionTo:(SPDisplayObject *)target position: (SPPoint *) punto width: (float) widthParticulas
{
    SPDisplacementMapFilter *dispMapFilter;

    if (target.filter)
    {
        dispMapFilter = (SPDisplacementMapFilter *)target.filter ;

        SPImage *fondo = [SPImage imageWithTexture: dispMapFilter.mapTexture];

        SPRenderTexture *textura = [SPRenderTexture textureWithWidth:fondo.bounds.width + fondo.bounds.x height:fondo.bounds.height + fondo.bounds.y];
        [textura drawObject:fondo];

        SPQuad *pulsacion = [SPQuad quadWithWidth:widthParticulas height:widthParticulas color:SP_COLOR(255, 255, 255)];

        SPPoint * puntoLocal = [self localToGlobal:punto];

        puntoLocal = [target globalToLocal:puntoLocal];

        pulsacion.x = puntoLocal.x;
        pulsacion.y = puntoLocal.y;
        [textura drawObject:pulsacion];

        dispMapFilter = [SPDisplacementMapFilter displacementMapFilterWithMapTexture:textura];
    }
    else
    {
        SPQuad *fondo = [SPQuad quadWithWidth:self.width height:self.height color:SP_COLOR(127, 127, 127)];

        SPRenderTexture *textura = [SPRenderTexture textureWithWidth:fondo.bounds.width + fondo.bounds.x height:fondo.bounds.height + fondo.bounds.y];
        [textura drawObject:fondo];

        dispMapFilter = [SPDisplacementMapFilter displacementMapFilterWithMapTexture:textura];
    }

    dispMapFilter.mode = SPFragmentFilterModeAbove;

    dispMapFilter.componentX = SPColorChannelRed;
    dispMapFilter.componentY = SPColorChannelGreen;

    target.filter = dispMapFilter;
}

If the image has a filter I try to change the filter texture, if it has no filter I create a new one ... but it is not working as I would like ...

and the frames fall pretty fast.

Any idea ???

Daniel

I just created a small demo project for you that should help you get started. Download it from here.

It allows you to draw around on an image, and while you're doing so, it gets distorted. Depending on what exactly you want to achieve, you definitely need to modify the map texture and the code; but I think that's the basic principle you're needing.

I hope that helps!

Daniel

And here's a link that could show give you a feeling about how those displacement maps must look like for which effect:

http://thonbo.com/starling/DisplacementTest.html

Though I must admit I'm not very good at creating them, either.

jbernabeu

Hi Daniel

Thanks a lot ... the small demo was pretty useful for me ...

Just one more thing, is any way to make the displacement and to make a change in the color at the same time ??

Daniel

You're welcome!
Hm, no, the displacement filter can only distort the image, not change the color.

However, the filtered object could also be an image with a RenderTexture, of course. So you could draw something in both render textures: the one that gets filtered and the map texture.

Perhaps that's an option! It depends on the look you want to achieve, though.