How to draw a curve line through points

Question

I am looking for a way to make a curve line through several points. It would be preferable to use 3 points, although I believe that in order to give context to the corner of the line entering the point, it might take more to give the context of the curve, so to speak.

In general, the starting point P1, the control point P2 and the ending point P3, the line should be a curve P2 from P1, and then a curve from P2 to P3.

In fact, this is a great example of the effect I would like to achieve:

If I could do this, I would really be eternally grateful!

In Java, so far I have tried to play with things like QuadCurve2D.Double , Cub icCurve2D.Double , as well as Path2D.Double (using curveTo with Path2D.Double), but to no avail - the curves that are colored are not even close to passing through specified control point.

Here is an image of the methods I've tried so far:

And here is the code I used to create the points and curves in the image:

Graphics2D g = (Graphics2D) window.getGraphics(); g.setColor(Color.blue); int d = 4; // P0 int x0 = window.getWidth()/8; int y0 = 250; g.drawString("P0", x0, y0 + 4*d); g.fillRect(x0, y0, d, d); // P1 int x1 = (window.getWidth()/7)*2; int y1 = 235; g.drawString("P1", x1, y1 + 4*d); g.fillRect(x1, y1, d, d); // P2 int x2 = (window.getWidth()/2); int y2 = 200; g.drawString("P2", x2, y2 - 2*d); g.fillRect(x2, y2, d, d); // P3 int x3 = (window.getWidth()/7)*5; int y3 = 235; g.drawString("P3", x3, y3 + 4*d); g.fillRect(x3, y3, d, d); // P4 int x4 = (window.getWidth()/8)*7; int y4 = 250; g.drawString("P4", x4, y4 + 4*d); g.fillRect(x4, y4, d, d); g.setColor(Color.cyan); QuadCurve2D quadCurve = new QuadCurve2D.Double(x0, y0, x2, y2, x4, y4); g.draw(quadCurve); g.setColor(Color.YELLOW); CubicCurve2D.Double cubicCurve = new CubicCurve2D.Double((double)x0, (double)y0, (double)x1, (double)y1, (double)x2, (double)y2, (double)x4, (double)y4); g.draw(cubicCurve); g.setColor(Color.red); Path2D.Double path1 = new Path2D.Double(); path1.moveTo(x1, y1); path1.curveTo(x0, y0, x2, y2, x4, y4); g.draw(path1); 

My reasons why I need to go through the curve in order to go through the points is that I want to “smooth out” the transition between the vertices on the graph that I wrote. Before anyone notices this, the JFree Chart is not an option . I understand that there are different types of curves and splines that are used, but I’m not very lucky in that they understand exactly how they work, or how to implement what suits my needs.

I would be very grateful for any help offered - Thanks in advance.

Answer 1

I think you are missing the idea of ​​what a breakpoint is. Control points, as a rule, are not on the way. Instead, they control how a path curve is formed between points. See the splines tutorial for more details.

Now, to the problem, you have points on the curve, but there are no actual control points. There are some methods, such as Cardinal Spline, to get breakpoints, and then go to one of the curve-drawing APIs you mentioned. You probably need the Path2D.Double option so you can seamlessly merge individual curves.

So, for drawing from P1 to P2 to P3 instead

 Path2D.Double path1 = new Path2D.Double(); path1.moveTo(x1, y1); path1.curveTo(x0, y0, x2, y2, x4, y4); g.draw(path1); 

Do you want to

 Path2D.Double path1 = new Path2D.Double(); path1.moveTo(x1, y1); path1.curveTo(cx1a, cy1a, cx1b, cy1b, x2, y2); path1.curveTo(cx2a, cy2a, cx2b, cy2b, x3, y3); g.draw(path1); 

where the coordinates cx and cy are your derived control points, two control points per cubic spline segment. Maybe,

 cx1a = x1 + (x2 - x1) / 3; cy1a = y1 + (y2 - y1) / 3; cx1b = x2 - (x3 - x1) / 3; cy1b = y2 - (y3 - y1) / 3; cx2a = x2 + (x3 - x1) / 3; cy2a = y2 + (y3 - y1) / 3; cx2b = x3 - (x3 - x2) / 3; cy2b = y3 - (y3 - y2) / 3; 

The pattern here is that for the internal points (only P2 in this case), the control points before and after it (c1b and c2a) are offset by the slope of the line between the points before and after it (P1 and P3). For edge points, control points are based on the slope between this point and the nearest nearest point.

If you have information about a specific domain, you can select various breakpoints. For example, you can make slopes at the endpoints be 0.

Answer 2

maybe this might help: P

Catmull-Rom curves, for example, the same principles differ lang ... http://schepers.cc/svg/path/dotty.svg

Answer 3

Basically what you ask for is Cubic Spline Interpolation, I was able to find this program online Interp2.java . It actually includes a polynomial spline and a cubic spline.

Unfortunately, his applet, and not a real class, but you can still view the code, find out how they did it. This is always good.