17

I am working on custom image filter project. And I came across one challenging task, in which I am supposed to apply distorted filters as can be seen in Funny face effect app. I want to develop first 3 filters as available in Funny Face Effects.

So to implement such an effect I started using GPUImageView GPUImage and in this, it is using seekbar to distort image from the centre. I have achieved Bulge distortion from this. But is there any way I can implement drag filter, where I can distort my image by drag gesture?

We tried to search for any other third party classes other then GPUImage. But we could not find useful stuff.

Our queries are as under:-

1) Is it possible to apply Drag filter using Drag gesture? (Any code snippet or reference appreciable)

2) Any other third party class other than GPU which can help us to get above results.

Thanks in advance!

enter image description here

Ronak Thakkar
  • 2,515
  • 6
  • 31
  • 45
Maddy
  • 4,525
  • 4
  • 33
  • 53
  • Please also post some code snippets with explanation of what you have already tried or what libraries you came across. – DroidDev Apr 13 '17 at 08:50
  • @DroidDev, I have tried with https://github.com/CyberAgent/android-gpuimage which is having Effect filters. It is working fine when single filter is applied but when I try to apply multiple filters it completely goes wrong. Image is getting distorted from random points. – Maddy Apr 13 '17 at 08:56
  • https://github.com/ragnraok/android-image-filter. You can try motion blur feature – Rndomcoder Apr 28 '17 at 09:08
  • @Rndomcoder thanks but it is not what I am looking for. – Maddy May 01 '17 at 05:57
  • did you find any solution for this question? – Rucha Bhatt Joshi Aug 08 '17 at 13:26
  • @RuchaBhatt, Not yet. – Maddy Aug 09 '17 at 04:29
  • @Maddy Have you looked into [this](http://www.jhlabs.com/ip/filters/index.html) library? Its written in java and they have a ton of filters. Including warp. Looks as though you could get the x and y points of the touch event and warp based on the drag from 0-100. – Steve C. Aug 18 '17 at 08:11
  • @SteveC. I haven't. I'll try this and get back to you soon. – Maddy Aug 18 '17 at 08:58

1 Answers1

6

One way to achieve it is to use an additional texture to specify to the fragment shader the deformation to apply. You can modify that texture contents from the app as the user touches the image to apply deformations.

GPUImageBulgeDistortionFilter extends GPUImageFilter which is designed to use only one texture.

You'll need to duplicate the texture binding (glBindTexture) and assignation to the fragment shader (glUniform1i) in GPUImageFilter using 1 for the new texture (instead of 0). You'll need also to duplicate glGetUniformLocation and use other name instead of inputImageTexture, for example inputImageTexture2.

Modify the fragment shader at GPUImageBulgeDistortionFilter or create a new class derived from GPUImageBulgeDistortionFilter to add "uniform sampler2D inputImageTexture2;\n" +

Finally add code to use inputImageTexture2 texels to deform data at inputImageTexture in the same fragment shader.

user1039663
  • 1,230
  • 1
  • 9
  • 15