Jan Kaufmann Jan Kaufmann - 13 days ago 5
Java Question

Figuring out QuadCurveTo's parameters

Could you guys help me figuring out

QuadCurveTo
's 4 parameters , I tried to find some information on
QuadCurveTo
, but it's hard to understand without a picture. I know those 4 parameters draw
2 lines
to control the path , but how we know/calculate exactly which coordinates the object will pass throught by only knowing those 2 path-controller. Are there some
formulas
?

import javafx.animation.PathTransition;
import javafx.animation.PathTransition.OrientationType;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

public class _6 extends Application {

public Rectangle r;

@Override
public void start(final Stage stage) {

r = new Rectangle(50, 80, 80, 90);
r.setFill(javafx.scene.paint.Color.ORANGE);
r.setStrokeWidth(5);
r.setStroke(Color.ANTIQUEWHITE);

Path path = new Path();
path.getElements().add(new MoveTo(100.0f, 400.0f));
path.getElements().add(new QuadCurveTo(150.0f, 60.0f, 100.0f, 20.0f));
PathTransition pt = new PathTransition(Duration.millis(1000), path);

pt.setDuration(Duration.millis(10000));
pt.setNode(r);
pt.setPath(path);
pt.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
pt.setCycleCount(4000);
pt.setAutoReverse(true);

pt.play();

stage.setScene(new Scene(new Group(r), 500, 700));
stage.show();
}

public static void main(String[] args) { launch(args); }
}


You can find those coordinates on this
new QuadCurveTo(150.0f, 60.0f, 100.0f, 20.0f)
line, and below is the sample picture of
Quadratic Bezier
.

enter image description here

Answer

From Wikipedia

B(t)=(1-t)*(1-t)*P0 + 2*(1-t)*t*P1 + t*t*P2, 0<=t<=1

Here P0 is the start point, P1 the control point, and P2 the end point. Note that t might not be equal to the time point of your transition, as the transition has a modifiable interpolator; however the path will pass through all points defined by this curve. In your example, P0=(100, 400), P1=(150, 60), and P2=(100, 20).

The interpretation is that you take a linear interpolation between the start point and the control point (call that Q0(t)) and a linear interpolation between the control point and the end point (Q1(t)); then the curve is the linear interpolation between Q0(t) and Q1(t) at t: B(t)=(1-t)*Q0(t)+t*Q1(t)

Comments