Finding the position of a point based on a relative point inside a quad

Question

I'm trying to get the relative point position on a quad using a [0,1] Vector2, like in the picture below:

The red dots are relative positions.

What I'm trying to make is a function that takes the A,B,C,D vertices, the relative position and return the local position of point.

Example using the first quad of the image:

// Returns Vector2(7, 7)
GetPositionOnQuad(Vector2(0.7f, 0.7f), Vector2(0,10), Vector2(10,10), Vector2(10,0), Vector2(0,0))

What are some ways of doing this?

Answer 1

Assuming that your quad is convex, you can solve for an interior point using a few linear interpolations (lerps) between the corner points of the quad.

To illustrate, consider finding a point (R for result) at (0.75, 0.5) within the interior of a quad with points A,B,C,D ordered as given in your description. Intuitively, we know that the result is going to be somewhat to the right of the middle. How can we find that?

First consider the simpler case of what would happen if we were looking for (0.75, 0.0). In that situation we would want the point (let's call it P) that sits 75% between A & B. We can find P by lerping between A & B. Similarly, if we simplified to the other extreme of (0.75, 1.0), we would find a point (let's call it Q) that's 75% between C & D. Much like before, we can find Q by lerping between C & D.

But we didn't actually want either extreme, we wanted something between them, something that accounts for the second parameter as given. Again, we can find that by lerping between the intermediate points P & R. In this case we wanted to be 50% between them.

Here's a general illustration:

In terms of code, you might have something like this:

static float Lerp(float a, float b, float t)
{
    return a + t * (b - a);
}

static PointF Lerp(PointF a, PointF b, float t)
{
    return new PointF(Lerp(a.X, b.X, t), Lerp(a.Y, b.Y, t));
}

static PointF PointInQuad(PointF t, PointF a, PointF b, PointF c, PointF d)
{
    PointF p = Lerp(a, b, t.X);
    PointF q = Lerp(c, d, t.X);
    return Lerp(p, q, t.Y);
}

Answer 2

Find the points on the four sides according to the proportion, and then find the intersection of the two segments.

Code:

class Vec2:
    def __init__(self, x, y) -> None:
        self.x = x
        self.y = y

    def __add__(self, v):
        return Vec2(self.x+v.x, self.y+v.y)

    def __sub__(self, v):
        return Vec2(self.x-v.x, self.y-v.y)

    def __mul__(self, n):
        return Vec2(self.x*n, self.y*n)

def GetPositionOnQuad(pos,A,B,C,D):
    p1 = A+(B-A)*pos.x
    p2 = D+(C-D)*pos.x
    p3 = A+(D-A)*pos.y
    p4 = B+(C-B)*pos.y
    return GetIntersection(p1,p2,p3,p4)

def det(a, b):
    return a.x * b.y - a.y * b.x

def GetIntersection(p1,p2,p3,p4):
    xdiff = Vec2(p1.x - p2.x, p3.x - p4.x)
    ydiff = Vec2(p1.y - p2.y, p3.y - p4.y)

    div = det(xdiff, ydiff)
    if div == 0:
        return -1,-1

    d = Vec2(det(p1,p2), det(p3,p4))
    x = det(d, xdiff) / div
    y = det(d, ydiff) / div
    return x, y

result = GetPositionOnQuad(Vec2(0.7,0.7),Vec2(0,0),Vec2(0,10),Vec2(10,10),Vec2(10,0))
print(result)