Color filling algorithm for pseudo-concave shape

[Bogdan]

Hi people,

I've got a "pseudo"-concave shape consisting of three triangles.

The question: Is it possible to fill it in a way, that it looks like the right shape (picture attached; right shape filled with paint.net).

Of course, I could draw and use sprites for everything, but they aren't as lightweight as "shapes" and I will need
several thousands of those shapes. Further they can be scaled without quality loss.

Is there any algorithm for the color filling that recognizes the right edges and so on?
Or is it even possible (without using external libraries)? Many thx in advance for any tips!

#include <SFML/Graphics.hpp>

int main()
{

    sf::RenderWindow window(sf::VideoMode(500,500), "Map", sf::Style::Close);
        window.setFramerateLimit(40);
       
        sf::ConvexShape convex;
        convex.setPointCount(3);
        convex.setFillColor(sf::Color(110,150,190,255));
        convex.setPoint(0, sf::Vector2f(170, 350));
        convex.setPoint(1, sf::Vector2f(35, 250));
        convex.setPoint(2, sf::Vector2f(236, 214));
       
        sf::ConvexShape convex2;
        convex2.setPointCount(3);
        convex2.setFillColor(sf::Color(110,150,190,255));
        convex2.setPoint(0, sf::Vector2f(170, 350));
        convex2.setPoint(1, sf::Vector2f(217, 253));
        convex2.setPoint(2, sf::Vector2f(300, 370));
       
       
        sf::ConvexShape convex3;
        convex3.setPointCount(3);
        convex3.setFillColor(sf::Color(110,150,190,255));
        convex3.setPoint(0, sf::Vector2f(170, 350));
        convex3.setPoint(1, sf::Vector2f(300, 370));
        convex3.setPoint(2, sf::Vector2f(156, 417));

        while (window.isOpen())
        {
            sf::Event event;
            while (window.pollEvent(event))
            {
                switch (event.type)
                {
                case sf::Event::Closed:
                    window.close();
                    break;
                        }
                }
       
        window.clear();
        window.draw(convex);
        window.draw(convex2);
        window.draw(convex3);
       
        window.display();
        }
        return 0;
}
 

[korczurekk]

Well you could use distance from nearest edge to choose a color from some gradient. You have to do it with shaders or it will be extremely slow. Btw you have to put all of those into a vertex array if you actually want to draw thousands of them.

[Bogdan]

Using Vertex Arrays is out of question, because I need those fancy built-in functions like scaling and so on.

How to manipulate the color for example at one edge of a triangle (of type: sf::Convex Shape)?
I know how to detect which triangle was clicked, but not how to manipulate colors besides setFillColor and so on....

[AlexAUT]

I would duplicate the corner points of the polygon and move them along their angle bisector. Then you get the polygon as in the attachement. The green line is the amount you move the duplicated points.
Now if you want to have it in the normal status, give every point the same color. If you want the "glow" effect, give the border points a brighter color.

sf::ConvecShape (sf::Shape) does only support one fill color therefore you will need to use sf::VetexArray, which is the way to go anyways if you want to draw several thousand polygons.



PS. I'm not sure if this is possible with a simple vertex/fragment shader, but with a geometry shader this would also be possible to achieve.


AlexAUT

[Bogdan]

Some time ago I've experimented with vertex array quads and it looks promising.

The inner 2 points have the same color as the vertex array triangles polygon and the 2 outer points have a different color, which makes a nice looking color gradient.

So there is no need for complex calculations/methods, besides finding the bisectors to get the coordinates for the inner points.