How to achieve this image distortion effect in iOS?

Question

I'm building an iphone photo app. I don't know how to achieve this kind of effect on an image:

enter image description here

When the user drags a finger across the arrow, I want the image to be distorted accordingly. How can I achieve this? Is there any framework that makes this process simple?

Thank you.

score 0 · Accepted Answer · answered Oct 30 '14 at 20:46

0

No clue about iOS, but the look reminds me of a thin-plate spline warp. It's quite easy to implement in OpenGL, a quick Google search for example code returns plenty of hits.

answered Oct 30 '14 at 20:46

Francesco Callari

11,300
2
25
40

Thanks, that looks interesting. I'll look into it. – Jinx Oct 30 '14 at 23:40
I was able to reproduce the effect with grid warping using OpenGL ES. Thanks for pointing me to the right direction. – Jinx Nov 29 '14 at 22:27
@Jinx Can you pls share code or do you have it on Github? – iCoderz Developers Nov 21 '17 at 06:18

score -1 · Answer 2 · answered Oct 29 '14 at 07:05

-1

From the sound of it I think your looking for the CoreImage framework. Look into the various distortion effects...in particular CIBumpDistortionLinear.

I don't have any code so check out this tutorial and read up on CoreImage.

answered Oct 29 '14 at 07:05

maelswarm

1,163
4
18
37

Thank you for the answer @Roecrew. Actually, I did look at CIBumpDistortionLinear before asking the question. The problem is the effect it makes, which is a kind of a "bump strip" as you can see here [link](http://iosapi.xamarin.com/index.aspx?link=T%3AMonoTouch.CoreImage.CIBumpDistortionLinear), is not what I want. Another problem is I couldn't make it work (even with default arguments) although the CIBumpDistortion worked fine. – Jinx Oct 29 '14 at 14:25

How to achieve this image distortion effect in iOS?

2 Answers2

Linked