I'm working on a network graph and would like to use bezier curves to represent multiple edges between and two given nodes.
I would like to animated a dashed line to represent this edge.
There are quite a few examples and conversations floating around regarding dashed lines but not dashed curves.
I'm very new to Pixi.JS and am struggling to even find which direction to go to explore figuring out this topic.
Hopefully someone can point me in the right direction and give a few examples of dashed curves in Pixi.JS
Related
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
I followed this thread here (unfortunately its very old, ancient I would say):
Perspective transform of SVG paths (four corner distort)
And this thread contains great pdf explaining how calcuations are done (see below).
Question: in the original post author says the approach will work for simple paths but not arcs. Can someone help me understand - would the approach work for Bezier curves? The font used in the example obviously is using curves though...
One can apply affine transformations to the control points of Bezier curve and get transformed Bezier curve.
But perspective transformations are not applicable to "usual" (used in fonts) Bezier curves - they produce rational Bezier curves.
Using only a box function, what is the proper way to draw an annulus (wide circle) using Bresenham's algorithm? I assume that consecutive parallel lines could be drawn, but that using an angled line instead of a point would be more feasible, but also involve trigonometry.
I am using Python, but examples in any language appreciated.
You cannot fill all ring points with radial lines, because for R2=2*R1 outer circumference contains twice as much points in it's raster representations, and there will be empty places near outer circle.
Graphics engines (DirectX, OpenGL and so on) often use triangle fans to fill the circles, ellipses, rings.
I have a list of cubic bezier curves in 3D, such that the curves are connected to each other and closes a cycle.
I am looking for a way to create a surface from the bezier curves. Eventually i want to triangulate the surface and present it in a graphic application.
Is there an algorithm for surfacing a closed path of cubic bezier segments?
It looks like you only know part of the details of the surface (given by the Bezier curves) and you've to extrapolate the surface out of it. As a simple example I'm imagining a bunch of circles in 3D with the center and radius that will be reconstructed into a sphere.
If this is the case you can use level sets. With level sets, you define a bunch of input parameters that defines the force exerted by the external factors on your surface and the 'tension' of the surface.
Crudely put, level sets define the behaviour of surface as they expand(or contract ) over time. As it expands it tries to maintain it's smoothness while meeting other boundary conditions - like 'sticking' to the circles in this case. So if you want a sphere from bunch of circles, the circles will exert a great force, while the surface will also be very tense.
Physbam has an open source implementation of level sets.
CGAL and PCL also provide a host of methods that generate surfaces from things such as points sets and implicit surface. You may be able to adapt one of them for your use.
You can look into the algorithms they use if you want to implement one on your own. I think at least one of them use the Poisson Surface Reconstruction algorithm.
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.