How to describe fat curve (curved line of variable thickness)? - graphics

I know how to describe curved line of constant thickness (with Bezier or similar models).
Are there any common models of curved line with variable thickness?
I am imagining some similar things like in Bezier. For example, each node can contain thickness value and it's weight, so renderer would interpolate thickness along curve.
Is there some implementations and/or descriptions?
UPDATE
More precisely the question is follows.
Suppose we have cubic Bezier segment, controlled by 4 points ABCD
In Bezier, the longer we have vector, say AB, then the longer curve follows AB direction. On the picture above, we have raltively long following.
So, I want thikness behave synchronously with control nodes B and C. If AB and CD is long, then thinkness should follow end nodes thinkness long and change to another thickness fast, like below
and if control vectors are short, then thinkness should smoothly change from one to another, like below

Metafont and its successor MetaPost
support variable thickness in the form of shaped pens.
See also
L.M. Mestetskii, Fat curves and representation of planar figures, Computers & Graphics, 24:1 (2000) 9-21 doi: 10.1016/S0097-8493(99)00133-8

If you want to use a "disc based" approach, you need to draw circles around every control point, then find the points on those circles that represent the "offset" (normal to the tangent, for on-curve points, normal to the tangent of the projection for off-curve points). You then plug those new points into the Bezier functions to get your "offset curve".
Curve offsetting, in your case with variable width, is essentially the trick of finding an outline rather than a single curve. For Bezier curves you can find a full explanation over at http://pomax.github.io/bezierinfo/#offsetting, with the variable width explanation over at http://pomax.github.io/bezierinfo/#offsetting (you're interested in the latter, but you need to understand the basics before you look at the special case =)

Related

Fitting a transition + circle + transition curve to a set of measured points

I am dealing with a reverse-engineering problem regarding road geometry and estimation of design conditions.
Suppose you have a set of points obtained from the measurement of positions of a road. This road has straight sections as well as curve sections. Straight sections are, of course, represented by lines, and curves are represented by circles of unknown center and radius. There are, as well, transition sections, which may be clothoids / Euler spirals or any other usual track transition curve. A representation of the track may look like this:
We know in advance that the road / track was designed taking this transition + circle + transition principle into account for every curve, yet we only have the measurement points, and the goal is to find the parameters describing every curve on the track, this is, the transition parameters as well as the circle's center and radius.
I have written some code using a nonlinear optimization algorithm, where a user can select start and end points and fit a circle that to the arc section between them, as it shows in next figure:
However, I don't find a suitable way to take the transition into account. After giving it some thought I came to think that this s because, given a set of discrete points -with their measurement error- representing a full curve, it is not entirely clear where to consider it "begins" and where it "ends" and, moreover, it is less clear where to consider the transition, the proper circle and the exit transition "begin" and "end".
Is there any work on this subject which I may have missed? is there a proper way to fit the whole transition + curve + transition structure into the set of points?
As far as I know, there's no method to fit a sequence clothoid1-circle-clothoid2 into a given set of points.
Basic facts are that two points define a straight, and three points define a unique circle.
The clothoid is far more complex, because you need: The parameter A, the final radius Rf, an initial point px,py, the radius Ri at that point, and the tangent T (angle with X-axis) at that point.
These are 5 data you may use to find the solution.
Due to clothoid coords are calculated by expanded Fresnel integrals (see https://math.stackexchange.com/a/3359006/688039 a little explanation), and then apply a translation & rotation, there's no an easy way to fit this spiral into a set of given points.
When I've had to deal with your issue, what I've done is:
Calculate the radius for triplets of consecutive points: p1p2p3, p2p3p4, p3p4p5, etc
Observe the sequence of radius. Similar values mean a circle, increasing/decreasing values mean a clothoid; Big values would mean a straight.
For each basic element (line, circle) find the most probably characteristics (angles, vertices, radius) by hand or by some regression method. Many times the common sense is the best.
For a spiral you may start with aproximated values, taken from the adjacent elements. These values may very well be the initial angle and point, and the initial and final radius. Then you need to iterate, playing with Fresnel and 'space change' until you find a "good" parameter A. Then repeat with small differences in the other values, those you took from adjacents.
Make the changes you consider as good. For example, many values (A, radius) use to be integers, without decimals, just because it was easier for the designer to type.
If you can make a small applet to do these steps then it's enough. Using a typical roads software helps, but doesn't avoid you the iteration process.
If the points are dense compared to the effective radii of curvature, estimate the local curvature by least square fitting of a circle on a small number of points, taking into account that the curvature is most of the time zero.
You will obtain a plot with constant values and ramps that connect them. You can use an estimate of the slope at the inflection points to figure out the transition points.

Using bezier curves to draw variable width paths

Given two points and a control point, one can easily draw a bezier path between the two points. What I would like to do use a bezier curve to draw a path that with changing width, by a assigning a "weight" to a the points of the curve which will determine its width. For example, if I give weight=0 to the first point of the curve and weight = 1 to the second point of the curve then something like the following path should be generated (the curve in the picture is cubic, but I am working with quadratic bezier curves):
In order to do this I would need to find the control points of the "edge" curves that determine the shape and then fill the shape that is found between the two new curves. However, I am quite unsure on how this can be done. One thing I thought about was to determine the starting and ending points of the new curves by simple drawing perpendicular segments to the line connecting the original control point and the original end points, but this still doesn't solve the problem of finding the new control points for the new curves.
I would use cubics instead of quadratics.
Yes you offset the control points perpendicularly by your weight but not the control points of BEZIER but control points of interpolation cubic (or catmull-rom) and then just convert that into Bezier control points. See related QAs:
How can i produce multi point linear interpolation?
How to create bezier curves for an arc with different start and end tangent slopes
draw outline for some connected lines
However much easier would be to directly render curve using Shaders and (perpendicular) distance. See:
Draw Quadratic Curve on GPU
That way you would not need to offset anything just interpolate the width of your curve ...
Maybe this could help, also there is an example on variable offseting
https://microbians.com/mathcode

SVG Path and morphing

I have a bit of a theoretical questions.
Lets say i have 2 paths in svg. Each with a different number of points. One has 4 Bézier curves and the other 3.
What i want to do is morph one into the other.
Now, i know they have to have the same exact structure and same number of points to do so.
So, the question is, can i add "virtual points" into their paths to get the same structure and number of points, without changing the shape of the objects?
For example, taking one point in one of the paths and just adding the same point after it to increase the number of points. Or creating a Bézier curve in both paths that would actually pretend to be a line instead of a curve. Would that change the object? And if i have points on x=1 y=1 and x=4 y=4, would using this form make Bézier curve a line? (M1 1C1 1 4 4 4 4)
Figured it out. Using control points anywhere on the same line as the coordiantes transforms the Bézier into a line, also if you use the same point as both the control points, start and end coordinate you can make the curve into a point. Adding more of these points into path doesnt change the look of the object, just adds more data into the path.
http://www.petercollingridge.co.uk/book/export/html/560
Down at the cubic curves you can align the points in the described manner to get the desired result
I have a simple to use d3 plugin to animate svg path which supports different number of points, also it animates only the parts of the path which differs from original path, not the whole path.
7kb minified: https://pratyushcrd.github.io/d3-path-morphing/

Choosing step for Bezier curve drawing

Bezier curve is a parametric curve, meaning that there is a paramater t at which one can evaluate the polynomials in order to find out the positions of points laying on the curve.
Polynomials for some common cases can be found at en.wikipedia.org/wiki/B%C3%A9zier_curve#Specific_cases
To draw a Bezier curve on screen, one could evaluate the polynomials from 0 to 1 at ever increasing t by tiny little steps. However, that would very wasteful because, in general, the parameter "space" does not correspond to screen "space", i.e. several little steps may fall onto just one pixel.
My question is: how to find the smallest step which increases Cartesian distance from previous point at least by 1 pixel?
To put it in other way: I would like to draw a Bezier curve on screen. How to choose the (uniform) step by which t should grow so that I never draw at one pixel more the once? I don't mind the "holes" when the t grows too quickly, I just don't want to redraw already drawn pixels.
Edit
By "how to find" I mean O(1). Yes, I could use De Casteljau's algorithm but I was hoping there is a way to "guess" the optimal t step quickly.
The comment above (jozxyqk) gives you a hint. I would give it a try with a recursive binary division of the spline drawing.
Lets say you start with a coarse resolution of the parameter space (delta_t = 0.1), that gives you 11 points on the spline curve s , s(t=0), s(t=0.1), ..., s(t=0.9), s(t=1).
Calculate the distance between s(t_i) and s(t_i+1). If it is >1 than make a binary subdivision between those two points. And so on...
But honestly, I guess it is faster to calculate all points a a higher resolution without any recursive loops or subdivisions. Especially if you are using multithread programming.

smooth curve through points, using only horizontal, vertical lines and fixed-radius arcs

Given an ordered list of points, I want to draw a smooth curve that passes through all of them. Each part of the curve can either be horizontal, vertical, or an arc with given radius r (all arcs will have the same radius). The transitions should be smooth, i.e., the heading at the end of one part should be the same as the heading at the beginning of the next part. There can be any number of arcs or straight line segments between any two consecutive input points.
It's sort of like a train track that should run orthogonally or along sections with fixed curvature.
Is there a good algorithm to construct such a curve? (or, in cases where such a line is not possible, I would like to know that.)
I looked into Bezier curves, but that seems like overkill and I couldn't find a good way to enforce my constraints.
What you are asking for above implies to me that you seek tangent continuity of your curve across points (similar to a spline with tangent continuity at knots). The train track analogy at least conveys this requirement. Given the strict limitations of straight lines, and fixed radius circular arcs I am fairly certain that you will not be able to do this. Why not consider a spline interpolation of your points if you require such smoothness instead?
To see why consider the following image:
Consider replacing the line segment between B and C with a circular arc. You can do it to make the join continuous, but to make it tangent continuous, you would need a great deal of good fortune as there is only one circle that is tangent continuous to the line segment AB that also touches point C. The chances of that circle having tangent at C matching the tangent of line CD is remote. It is possible that your data will line up like this but you cannot rely on it.
If I have misunderstood your question please let me know and I will adjust the answer.

Resources