Interpolation method?

[Xrey274]

What would be the best interpolation method to use for drawing a line(with mouse)? I am currently thinking about bezier curve. The line is consists of circle shapes that need to be connected. I have tried by connecting them with a rectangle shape, which works only if your fps is >1000 for the lines to be smooth when curved. So what do you think will work best in this case?

PS: I am not asking for a code, nor guidence on how to implement it, just your opinion on what would be the best in my case.

[Hapax]

I've seen you post a few threads about the implementation of thick polylines with round corners.

Your approach to use circle shapes and rectangle shapes can quickly begin to add up when it comes to draw calls and could significantly slow down the drawing. Removing the rectangles (and replacing with a single vertex array representing all of the rectangles) would halve those draw calls. That said, it would still have all of the circles. If you are also interpolating each line (whether that be linear, Bezier or something else), you multiple the number of circles (and therefore draw calls) exponentially.

The solution, therefore, is to use a single vertex array - one draw call - and combine all of the rectangles and circles into it.

As I've mentioned previously, Selba Ward's Spline class does this all for you. You don't even have to use the entire collection; you can just drop the Spline files (and the common header) into your project and build it inside.
It was created for the very reason to supply a solution to this sort of problem. If you find it's not quite suitable for some reason, let me know and I'll investigate why not.

That said, even if you absolutely don't want to use Selba Ward, feel free to have a look through its code to see if it inspires your own solution:
https://github.com/Hapaxia/SelbaWard/tree/master/src/SelbaWard

[Xrey274]

I have already done that - making them into vertex arrays. Draw calls are not the problem - problem is that even when limiting the fps of the windows to 144, moving the mouse fast makes lines choppy (have a flat spots where the rectangle connectors are quite visible). That's why I want to know if interpolation is the right choice.

[Hapax]

When the mouse is moving quickly, it can leave quite spaced-out position, that's true. A straight line between each point can look angled (like a circle with two few edges) but is it really a big problem? how often does the mouse move that quickly.

That said, if you do need to smooth those 'corners', you could interpolate using Bezier to fix it. One thing to note, however, is that each Bezier curve piece would need extra points - control points - so you would need to figure out a way to smooth out those lines.

Mentioning it again only because its relevant to that subject, Selba Ward's Spline can also automatically calculate control points that smooth out polylines so that they appear to 'flow' smoothly.
Maybe, if you still have a reason to not use it, you could look at the code to see how it does that.

[Xrey274]

I have found that atleast at my dpi settings and mouse sensitivity, that it happens quite offten almost all of the time. About those "corners" - what exactly are you refering to?

[Hapax]

By corners, I meant the points where the edges on either side of the thick lines change direction, which happens at each mouse position in your case if you are drawing straight lines between each one. If you are rounding off this corners, they can still be considered corners but just round

[Xrey274]

Here's what is looks like right now.

[Xrey274]

Trying this out for Bezier interpolation rn. Doesn't work correctly when moving the mouse. It does when there are predefined static points.

        if(circles.size() > 2)
        {
                int X0 = circles[circles.size() - 3].getPosition().x;
                int Y0 = circles[circles.size() - 3].getPosition().y;

                int X1 = circles[circles.size() - 2].getPosition().x;
                int Y1 = circles[circles.size() - 2].getPosition().y;

                int X2 = circles[circles.size() - 1].getPosition().x;
                int Y2 = circles[circles.size() - 1].getPosition().y;

                for(float t = 0.01; t < 1; t+=0.01f)
                {
                        int x =(1 - t) * (1 - t) * X0 + 2 * (1 - t) * t * X1 + t * t * X2;
                        int y =(1 - t) * (1 - t) * Y0 + 2 * (1 - t) * t * Y1 + t * t * Y2;

                        curves.push_back(newCircle(sf::Vector2f(x, y), sf::Color::Blue));
                }
        }

Pic 1 - predefined points
Pic 2 - moving the mouse

[Hapax]

Presuming that you have a 3-point Bezier curve for each line between each pair of mouse points, to what position are you setting the middle point of that Bezier curve, again presuming that the first and third points are the two points of the line between the two mouse positions?