1
\$\begingroup\$

I'm using Moai SDK. I have an image and some random convex 2D polygons. I want to show only the parts of the image inside these polygons.

Here's an example image:

sample image

The same, shown only where the polygons are:

same sample image, clipped to three polygons

How can I achieve this?

\$\endgroup\$
1
  • 1
    \$\begingroup\$ Bottom left corner is (0,0) top right corner is (1,1). Create your polygons of what you want to show in this space, and your positions will be equal to your texture coordinates, then just render them as usual. \$\endgroup\$
    – MickLH
    Nov 29, 2013 at 12:41

2 Answers 2

1
\$\begingroup\$

In the general case, this is achieved using a clipping mask and an multiply composite operation.

The specifics varies by framework, but with Moai the job is done by way of the MOAIMultiTexture.

\$\endgroup\$
5
  • \$\begingroup\$ The efficiency of this solution would be terrible as you read each pixel twice, apply logic, and write. Also still requires calculating polygons to generate the mask itself from. \$\endgroup\$
    – MickLH
    Nov 29, 2013 at 12:52
  • \$\begingroup\$ @MickLH: Composite operations are done in hardware, and are fast. Rasterizing the polygons to create a mask can also leverage hardware acceleration, and is also fast. \$\endgroup\$ Nov 29, 2013 at 12:56
  • \$\begingroup\$ Well I didn't downvote ;) I did call it a solution, I just am an algorithms fetishist and can't ignore the fact that the process of generating the coverage mask could have just directly written the final image to the screen! --- What I should have said is that the general case is overkill here because he can simply rasterize polygons, your solution would be more suited to a curved cutout. \$\endgroup\$
    – MickLH
    Nov 29, 2013 at 13:13
  • \$\begingroup\$ @MickLH: The solution is fundamentally the same as the one you propose; except that it's split into explicit stages. If the rendering is a one-off, your approach is probably faster, but if the scene is repeatedly rendered, not redoing the polygon rasterization (which has do be done no mattter what you do) can save cycles. \$\endgroup\$ Nov 29, 2013 at 13:19
  • \$\begingroup\$ "not redoing the polygon rasterization (which has do be done no mattter what you do) can save cycles" yes, you may save a few polygons cycles at the expensive of thousands of pixels which also cost cycles in the same chip. --- With respect to the application, the polygon count is constant where the number of pixels of the mobile device will increase over time. This O(n) system is not going to outperform the O(1) system that is a sub-step of the O(n) system in the first place. \$\endgroup\$
    – MickLH
    Nov 29, 2013 at 14:15
0
\$\begingroup\$

Create an image with the same resolution, make it completely opaque. Create some random set of polygons within the boundaries of the this image, set the opaqueness to 0 (so it's completely see through).

Here is an idea for creating the polygon with:

int noPolygons = whatever;

for (i = 0; i < noPolygons ; i ++) {
    int polygonPoints = whatever2;
    Vector points[polygonPoints ];
    float radius = whatever3;
    int centerX = random(0+radius, imageWidth-radius);
    int centerY = random(0+radius, imageHeight-radius);

    for (j = 0; j < polygonPoints ; j++) {
        float x     = cosinus(j/polygonPoints)*random(0.5, 1) * radius;            
        float y     = sinus(j/polygonPoints)*random(0.5, 1) * radius;

        points[j] = new Vector(centerX+x, centerY + y);
    }

    Edge edges[polygonPoints ];
    for (j = 0; j < polygonPoints ; j++) {
        int lastIndex = j + 1 >= polygonPoints ? 0 : j +1; 
        edges[j] = new Edge(points[j], points[lastIndex ]);  
    }  
}

This would produce fairly convex polygons, I think.

I hope Moai SDK supports these things, never used it.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .