# 9-Point mesh warping

**URL:** <https://discourse.processing.org/t/9-point-mesh-warping/1932>\
**Category:** Coding Questions\
**Created:** [July 20, 2018, 11:05am UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932 "2018-07-20T11:05:39Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jakedubber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jakedubber/32/829_2.png) [@jakedubber](https://discourse.processing.org/u/jakedubber)\
**Post date:** [July 20, 2018, 11:05am UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932/1 "2018-07-20T11:05:39Z")

</div>

I’m trying to figure out how to go about warping a mesh using 9 handles (marked in red). I can already deform the mesh by moving the corners but it’s the intermediary handles I’m really struggling with. I need this to work with a mesh of basically any number of vertices, although it’s always an odd number of rows and cols (to ensure proper middle points) and the number of rows and cols are always the same. Ideally, if you pulled the top-middle handle down, the top row of verts would form a U-shape, not a V-shape.

![Capture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/008a7f045154e415690669a8bc44994d5c9565da.PNG)

I’ve experimented with defining the edges of the quad as bezier curves and interpolating between them all towards the middle, but that seems like the most overkill solution to this problem (and it didn’t really work all that well anyway)

Thanks!

---

<div class="post-metadata">

**Author:** ![gohai](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gohai/32/25_2.png) [@gohai](https://discourse.processing.org/u/gohai)\
**Post date:** [July 20, 2018, 6:00pm UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932/2 "2018-07-20T18:00:35Z")

</div>

@jakedubber I implemented this for the GL Video library, the code for which should be easily reusable:

There is actually two implementation - the [VideoMapping](https://github.com/gohai/processing-glvideo/blob/master/examples/VideoMapping/) example is using [WarpPerspective](https://github.com/gohai/processing-glvideo/blob/master/src/gohai/glvideo/WarpPerspective.java) and [PerspectiveTransform](https://github.com/gohai/processing-glvideo/blob/master/src/gohai/glvideo/PerspectiveTransform.java) classes, which don’t have any external dependencies.

And we also got a different implementation donated, which soley uses shaders to accomplish the same: [VideoMappingWithShader](https://github.com/gohai/processing-glvideo/blob/master/examples/VideoMappingWithShader/).

Hth

---

<div class="post-metadata">

**Author:** ![jakedubber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jakedubber/32/829_2.png) [@jakedubber](https://discourse.processing.org/u/jakedubber)\
**Post date:** [July 22, 2018, 2:17am UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932/3 "2018-07-22T02:17:05Z")

</div>

Gohai, cheers for the reply 🙂 From what I can see, those examples only let you drag the four corners around. I’ve already achieved this in my sketch - I’m looking to be able to drag nine fixed points around to deform the mesh.

Perhaps I missed something? 😕

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 22, 2018, 6:51am UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932/4 "2018-07-22T06:51:19Z")

</div>

> [@jakedubber](#):
>
> I can already deform the mesh by moving the corners but it’s the intermediary handles I’m really struggling with

Please show your code.

Kf

---

<div class="post-metadata">

**Author:** ![jakedubber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jakedubber/32/829_2.png) [@jakedubber](https://discourse.processing.org/u/jakedubber)\
**Post date:** [July 22, 2018, 9:59am UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932/5 "2018-07-22T09:59:34Z")

</div>

```auto
int i = 0;
for (int x = 0; x<subd; x++)
{
  for (int y = 0; y<subd; y++)
  {
    // get normalised vector
    PVector p = new PVector(normPos(x), normPos(y));

    // interpolate top edge x coordinate
    PVector x1 = PVector.lerp(handles.get(0).pos, handles.get(2).pos, p.x);

    // interpolate bottom edge x coordinate
    PVector x2 = PVector.lerp(handles.get(1).pos, handles.get(3).pos, p.x);

    // interpolate y position
    p = PVector.lerp(x1, x2, p.y);

    //Apply the transformation
    verts.get(i).x = p.x;
    verts.get(i).y = p.y;

    i++;
  }
}

PVector normPos(PVector i)
{
  float x = map(i.x, 0, quad.subd-1, 0, 1);
  float y = map(i.y, 0, quad.subd-1, 0, 1);
  PVector p = new PVector(x, y);
  return p;
}

```

That’s the bulk of what’s handling the mesh deforming. It takes the positions of four handles (0 - TL, 1 - BL, 2 - TR, 3 - BR) and fills an ArrayList of PVectors. Obviously, this doesn’t include drawing the mesh nor does it have any logic for dragging corners around with the mouse, that’s all implemented elsewhere in the code and not something I have an issue with.

---

<div class="post-metadata">

**Author:** ![jakedubber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jakedubber/32/829_2.png) [@jakedubber](https://discourse.processing.org/u/jakedubber)\
**Post date:** [July 23, 2018, 9:01am UTC](https://discourse.processing.org/t/9-point-mesh-warping/1932/6 "2018-07-23T09:01:38Z")

</div>

I didn’t end up figuring out exactly what I was looking for, but I did find this which was incredibly useful: [https://www.openprocessing.org/sketch/65475](https://www.openprocessing.org/sketch/65475)