Drawing smooth pixel perfect 1px splines (Catmull-Rom in particular)

A brief history: I am working on a web drawing application and you need to draw solid 1px splines that go through their control points.

The problem I'm struggling with is that I need to draw every pixel between p1 and p2, as if I were using a 1px pencil tool. Thus, without smoothing and one pixel at a time. This needs to be done manually without using any code in the line / curve library, since my brush depends on what pixel coordinate the brush tip applies to the canvas.

Essentially, I need to combine one pixel step from something like the Breshenem algorithm with the coordinates returned by the Kathmull-Rum equation. I have problems because the Catmull-Rom points are not evenly distributed (so I can’t just say that there should be 100 pixels on the curve and run the equation 100 times). I tried using the estimated initial value of the maximum delta X and Y and filling in the blanks with Bresenham, but due to rounding I still get some dirty sections (i.e. the line is clearly moving up and but I still get two pixels with with the same component Y, the result is a "bold" line segment).

I am sure that this has been resolved, because almost every graphics program that draws splines should support the clean pixel curves that I need. After quite a bit of mathematical research, though, I'm a little confused and still without a solution. Any tips?

EDIT: Here is an example of a curve I could make:

alt text

What might look like the expected result (note that this is an estimate):

alt text

Using the Catmull-Rom spline equation, we need four points to create a segment. P0 and P3 are used as tangents for the incoming and outgoing directions from the segment P1-> P2. With a Catmull-Rom splice, the blue section is all that gets interpolated when t moves from 0 to 1. P0 and P3 can be duplicated to ensure that the green part is displayed, so this is not a problem for me.

For simplicity, I need to display pixels on the curve between P1 and P2, given that I have tangents in the form of P0 and P3. I don't have to use Catmull-Rom splines, but they seem like the right tools for this job, as breakpoints have to go through. The uneven distribution of interpolation points is what throws me in a loop.

EDIT2: Here is an example of what I mean when I say that my resulting curve is dirty:

alt text

Red arrows indicate several places where there should be no pixel. This is because the components X and Y of the calculated coordinate do not change at the same speed. Thus, when each of the components is rounded (so that I have the exact location of the pixel), it may happen that either X or Y does not stumble, because the calculated coordinate, say, (42.4999, 50.98). Sharing a round for a floor or ceiling does not solve the problem, as it simply changes where it happens.

+8
algorithm pixel graphics 2d splines
source share
1 answer

Here you are a document describing a method for re-parameterizing splines to get equidistant points along the length of the curve. I think this can solve your problem if you can adapt it to Kathmull-Rum curves (shouldn't be too complicated, I think)

+2
source share

Source: https://habr.com/ru/post/650475/


All Articles