Simultaneous Rotate and Translate not working as expected in javafx - graphics

Question

I have built the following "system" from Circles and a Line.
I am trying to implement just following two transitions in the system.
When the Green Circle is dragged, both the Green and Blue circle should rotate about the Red center, in the direction of drag.
When the Red center is dragged, the whole system should get dragged with it accordingly(like a monolith).
I have tried to implement it but facing a problem.
Both the transitions are working fine when done alone.
i.e. When the application starts, and you try to drag Green circle, whole system perfectly rotates about Red circle. Similarly, on startup, when Red circle is dragged, everything gets dragged fine.
But
When either of these drags are tried after the other, shapes flow away from each other !!
Please suggest what may be causing this behavior.Any other way to implement the transitions is also welcomed, as I am still new to Animations in JavaFx and this obviously is not the best code to solve the problem.
following is my code:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
public class SpindleAndWheel extends Application
{
Circle circle;
Circle oppositeCircle;
Circle pivot;
Line spindle;
Rotate rotateCircle, rotateOppositeCircle;
Translate translateCircle, translateOppositeCircle;
Translate translateCircleBack, translateOppositeCircleBack;
Translate dragTranslateCircle, dragTranslatePivot, dragTranslateOppositeCircle, dragTranslateSpindle;
double dragInitX, dragInitY;
double dragInitTheta;
double theta1,theta2;
double angleOfRotation;
double dragPivotInitX,dragPivotInitY,systemDragOffsetX,systemDragOffsetY;
double dragTranslateCircleBackupX,dragTranslatePivotBackupX, dragTranslateOppositeCircleBackupX, dragTranslateSpindleBackupX;
double dragTranslateCircleBackupY,dragTranslatePivotBackupY, dragTranslateOppositeCircleBackupY, dragTranslateSpindleBackupY;
#Override
public void start(Stage primaryStage) throws Exception
{
Stage stage = new Stage();
stage.setMinHeight(500);
stage.setMinWidth(500);
Pane root = new Pane();
circle = new Circle(150, 150, 30);
oppositeCircle = new Circle(350, 350, 30);
pivot = new Circle(250, 250, 5);
spindle = new Line(150, 150, 350, 350);
/**************** Initializing Shapes **********/
circle.setFill(Color.GREEN.deriveColor(1, 1, 1, 0.35));
circle.setStroke(Color.GREEN);
oppositeCircle.setFill(Color.BLUE.deriveColor(1, 1, 1, 0.35));
oppositeCircle.setStroke(Color.BLUE);
pivot.setFill(Color.RED.deriveColor(1, 1, 1, 0.35));
pivot.setStroke(Color.RED);
spindle.setStrokeWidth(3);
spindle.setStroke(Color.BLACK.deriveColor(1, 1, 1, 0.35));
/****************************************************/
/**************** Initializing Animations **********/
rotateCircle = new Rotate(0, 0, 0);
translateCircle = new Translate(0, 0);
translateCircleBack = new Translate(0, 0);
dragTranslateCircle = new Translate(0, 0);
rotateOppositeCircle = new Rotate(0, 0, 0);
translateOppositeCircle = new Translate(0, 0);
translateOppositeCircleBack = new Translate(0, 0);
dragTranslateOppositeCircle = new Translate(0, 0);
dragTranslatePivot = new Translate(0, 0);
dragTranslateSpindle = new Translate(0, 0);
/****************************************************/
/**************** Adding Animations **************/
circle.getTransforms().addAll(translateCircle, rotateCircle, translateCircleBack, dragTranslateCircle);
oppositeCircle.getTransforms().addAll(translateOppositeCircle, rotateOppositeCircle, translateOppositeCircleBack, dragTranslateOppositeCircle);
pivot.getTransforms().addAll(dragTranslatePivot);
spindle.getTransforms().addAll(dragTranslateSpindle);
/****************************************************/
Scene scene = new Scene(root);
stage.setScene(scene);
root.getChildren().addAll(circle,oppositeCircle,pivot,spindle);
stage.show();
/** Get angle of point of click with
* point of rotation, before drag begins **/
circle.setOnMousePressed(event -> {
dragInitX = event.getSceneX();
dragInitY = event.getSceneY();
dragInitTheta = angleOfRotation + dragInitTheta;
double initialSlope;
double pointOfRotationX,pointOfRotationY;
pointOfRotationY = pivot.getCenterY() + dragTranslatePivot.getY();
pointOfRotationX = pivot.getCenterX() + dragTranslatePivot.getX();
initialSlope = Math.atan((dragInitY - (pointOfRotationX)) / (dragInitX - (pointOfRotationY)));
theta1 = Math.toDegrees(initialSlope);
if (dragInitX < pointOfRotationX)
theta1 = (360 + theta1) % 360;
else
theta1 = 180 + theta1;
});
/********************************************/
/** Get angle of point of drags with
* point of rotation, when the drag is on **/
circle.setOnMouseDragged(event -> {
double finalSlope;
double pointOfRotationX,pointOfRotationY;
pointOfRotationY = pivot.getCenterY() + dragTranslatePivot.getY();
pointOfRotationX = pivot.getCenterX() + dragTranslatePivot.getX();
finalSlope = Math.atan((event.getSceneY() - (pointOfRotationX)) / (event.getSceneX() - (pointOfRotationY)));
theta2 = Math.toDegrees(finalSlope);
if (event.getSceneX() < pointOfRotationX)
theta2 = (360 + theta2) % 360;
else
theta2 = 180 + theta2;
angleOfRotation = theta2 - theta1;
translateCircle.setX(pointOfRotationX);
translateCircle.setY(pointOfRotationY);
rotateCircle.setAngle(angleOfRotation + dragInitTheta);
translateCircleBack.setX(-pointOfRotationX);
translateCircleBack.setY(-pointOfRotationY);
translateOppositeCircle.setX(pointOfRotationX);
translateOppositeCircle.setY(pointOfRotationY);
rotateOppositeCircle.setAngle(angleOfRotation + dragInitTheta);
translateOppositeCircleBack.setX(-pointOfRotationX);
translateOppositeCircleBack.setY(-pointOfRotationY);
spindle.setRotate(angleOfRotation + dragInitTheta);
});
/********************************************/
/** Relocate the whole system when the point of
* rotation is dragged **/
pivot.setOnMousePressed(event -> {
dragPivotInitX = event.getSceneX();
dragPivotInitY = event.getSceneY();
dragTranslateCircleBackupX = dragTranslateCircle.getX();
dragTranslateCircleBackupY = dragTranslateCircle.getY();
dragTranslatePivotBackupX = dragTranslatePivot.getX();
dragTranslatePivotBackupY = dragTranslatePivot.getY();
dragTranslateOppositeCircleBackupX = dragTranslateOppositeCircle.getX();
dragTranslateOppositeCircleBackupY = dragTranslateOppositeCircle.getY();
dragTranslateSpindleBackupX = dragTranslateSpindle.getX();
dragTranslateSpindleBackupY = dragTranslateSpindle.getY();
});
pivot.setOnMouseDragged(event -> {
systemDragOffsetX = event.getSceneX() - dragPivotInitX;
systemDragOffsetY = event.getSceneY() - dragPivotInitY;
dragTranslateCircle.setX(dragTranslateCircleBackupX + systemDragOffsetX);
dragTranslateCircle.setY(dragTranslateCircleBackupY + systemDragOffsetY);
dragTranslatePivot.setX(dragTranslatePivotBackupX+ systemDragOffsetX);
dragTranslatePivot.setY(dragTranslatePivotBackupY+ systemDragOffsetY);
dragTranslateOppositeCircle.setX(dragTranslateOppositeCircleBackupX+ systemDragOffsetX);
dragTranslateOppositeCircle.setY(dragTranslateOppositeCircleBackupY+ systemDragOffsetY);
dragTranslateSpindle.setX(dragTranslateSpindleBackupX+ systemDragOffsetX);
dragTranslateSpindle.setY(dragTranslateSpindleBackupY + systemDragOffsetY);
});
/********************************************/
}
public static void main(String[] args)
{
launch(args);
}
}

Answer 1

Nice approach, but as you have already found out, it has a main drawback: after applying one transformation, the other is not well performed. The reason for that is on the way you define the transformations. Besides, assigning so many transformations leads to a complex system, hard to mantain.
My proposal is far more simple: just wrap all your shapes in one Group, and only transform this group, translating it when you drag the pivot, or rotating it over the pivot, when you drag the circle. Note that you can use here setPivotX() and setPivotY() to indicate the actual point of rotation.
As you can see, you will need just two transformations, and more important, you won't have any side effect of applying in any order any of them.
EDIT
As the OP correctly states, there was a mistake in the rotation calculations. For the sake of completeness, I've edited my answer to show the correct code.
private Circle circle;
private Circle oppositeCircle;
private Circle pivot;
private Line spindle;
private Group group;
private Rotate rotateGroup;
double dragInitTheta;
double theta1,theta2;
double angleOfRotation;
private Translate translateGroup;
private double dragTranslateGroupBackupX, dragTranslateGroupBackupY;
private double dragPivotInitX,dragPivotInitY,systemDragOffsetX,systemDragOffsetY;
#Override
public void start(Stage stage){
circle = new Circle(150, 150, 30);
oppositeCircle = new Circle(350, 350, 30);
pivot = new Circle(250, 250, 5);
spindle = new Line(150, 150, 350, 350);
group = new Group(circle,oppositeCircle,pivot,spindle);
/**************** Initializing Shapes **********/
circle.setFill(Color.GREEN.deriveColor(1, 1, 1, 0.35));
circle.setStroke(Color.GREEN);
oppositeCircle.setFill(Color.BLUE.deriveColor(1, 1, 1, 0.35));
oppositeCircle.setStroke(Color.BLUE);
pivot.setFill(Color.RED.deriveColor(1, 1, 1, 0.35));
pivot.setStroke(Color.RED);
spindle.setStrokeWidth(3);
spindle.setStroke(Color.BLACK.deriveColor(1, 1, 1, 0.35));
/****************************************************/
/**************** Initializing Transforms **********/
rotateGroup = new Rotate(0, 0, 0);
translateGroup = new Translate(0, 0);
/****************************************************/
/**************** Adding Transforms **************/
group.getTransforms().addAll(translateGroup,rotateGroup);
/****************************************************/
Pane root = new Pane(group);
Scene scene = new Scene(root,500,500);
stage.setScene(scene);
stage.show();
/** Get angle of point of click with
* point of rotation, before drag begins **/
circle.setOnMousePressed(event -> {
dragInitTheta = angleOfRotation + dragInitTheta;
double pointOfRotationX = pivot.getCenterX() + translateGroup.getX();
double pointOfRotationY = pivot.getCenterY() + translateGroup.getY();
double initialSlope = Math.atan((event.getSceneY() - pointOfRotationY) / (event.getSceneX() - pointOfRotationX));
theta1 = Math.toDegrees(initialSlope);
if (event.getSceneX() < pointOfRotationX)
theta1 = (360 + theta1) % 360;
else
theta1 = 180 + theta1;
});
/********************************************/
/** Get angle of point of drags with
* point of rotation, when the drag is on **/
circle.setOnMouseDragged(event -> {
double pointOfRotationX = pivot.getCenterX() + translateGroup.getX();
double pointOfRotationY = pivot.getCenterY() + translateGroup.getY();
double finalSlope = Math.atan((event.getSceneY() - pointOfRotationY) / (event.getSceneX() - pointOfRotationX));
theta2 = Math.toDegrees(finalSlope);
if (event.getSceneX() < pointOfRotationX)
theta2 = (360 + theta2) % 360;
else
theta2 = 180 + theta2;
angleOfRotation = theta2 - theta1;
rotateGroup.setPivotX(pivot.getCenterX());
rotateGroup.setPivotY(pivot.getCenterY());
rotateGroup.setAngle(angleOfRotation + dragInitTheta);
});
/********************************************/
/** Relocate the whole system when the point of
* rotation is dragged **/
pivot.setOnMousePressed(event -> {
dragPivotInitX = event.getSceneX();
dragPivotInitY = event.getSceneY();
dragTranslateGroupBackupX = translateGroup.getX();
dragTranslateGroupBackupY = translateGroup.getY();
});
pivot.setOnMouseDragged(event -> {
systemDragOffsetX = event.getSceneX() - dragPivotInitX;
systemDragOffsetY = event.getSceneY() - dragPivotInitY;
translateGroup.setX(dragTranslateGroupBackupX + systemDragOffsetX);
translateGroup.setY(dragTranslateGroupBackupY + systemDragOffsetY);
});
/********************************************/
}

Answer 2

José Pereda, Great Answer!! Way better approach.Learned MANY new thing from it.
Just need to make a simple correction. During the calculation of slope of point of drag, you also need to consider the offset due to (translateGroup.getY(),translateGroup.getX()) in the (pivot.getCenterY(),pivot.getCenterX()).
Following is José's Code with the above mentioned corrections.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
import javafx.scene.Group;
public class SpindleAndWheelGroup extends Application
{
private Circle circle;
private Circle oppositeCircle;
private Circle pivot;
private Line spindle;
private Group group;
private Rotate rotateGroup;
double dragInitTheta;
double theta1, theta2;
double angleOfRotation;
private Translate translateGroup;
private double dragTranslateGroupBackupX, dragTranslateGroupBackupY;
private double dragPivotInitX, dragPivotInitY, systemDragOffsetX, systemDragOffsetY;
double pointOfRotationX,pointOfRotationY;
#Override
public void start(Stage stage)
{
circle = new Circle(150, 150, 30);
oppositeCircle = new Circle(350, 350, 30);
pivot = new Circle(250, 250, 5);
spindle = new Line(150, 150, 350, 350);
group = new Group(circle, oppositeCircle, pivot, spindle);
/**************** Initializing Shapes **********/
circle.setFill(Color.GREEN.deriveColor(1, 1, 1, 0.35));
circle.setStroke(Color.GREEN);
oppositeCircle.setFill(Color.BLUE.deriveColor(1, 1, 1, 0.35));
oppositeCircle.setStroke(Color.BLUE);
pivot.setFill(Color.RED.deriveColor(1, 1, 1, 0.35));
pivot.setStroke(Color.RED);
spindle.setStrokeWidth(3);
spindle.setStroke(Color.BLACK.deriveColor(1, 1, 1, 0.35));
/****************************************************/
/**************** Initializing Transforms **********/
rotateGroup = new Rotate(0, 0, 0);
translateGroup = new Translate(0, 0);
/****************************************************/
/**************** Adding Transforms **************/
group.getTransforms().addAll(translateGroup, rotateGroup);
/****************************************************/
Pane root = new Pane(group);
Scene scene = new Scene(root, 800, 700);
stage.setScene(scene);
stage.show();
/** Get angle of point of click with
* point of rotation, before drag begins **/
circle.setOnMousePressed(event -> {
dragInitTheta = angleOfRotation + dragInitTheta;
pointOfRotationY = pivot.getCenterY() + translateGroup.getY();
pointOfRotationX = pivot.getCenterX() + translateGroup.getX();
double initialSlope = Math.atan((event.getSceneY() - pointOfRotationY) / (event.getSceneX() - pointOfRotationX));
theta1 = Math.toDegrees(initialSlope);
if (event.getSceneX() < pointOfRotationX)
theta1 = (360 + theta1) % 360;
else
theta1 = 180 + theta1;
});
/********************************************/
/** Get angle of point of drags with
* point of rotation, when the drag is on **/
circle.setOnMouseDragged(event -> {
pointOfRotationY = pivot.getCenterY() + translateGroup.getY();
pointOfRotationX = pivot.getCenterX() + translateGroup.getX();
double finalSlope = Math.atan((event.getSceneY() - pointOfRotationY) / (event.getSceneX() - pointOfRotationX));
theta2 = Math.toDegrees(finalSlope);
if (event.getSceneX() < pointOfRotationX)
theta2 = (360 + theta2) % 360;
else
theta2 = 180 + theta2;
angleOfRotation = theta2 - theta1;
rotateGroup.setPivotX(pivot.getCenterX());
rotateGroup.setPivotY(pivot.getCenterY());
rotateGroup.setAngle(angleOfRotation + dragInitTheta);
});
/********************************************/
/** Relocate the whole system when the point of
* rotation is dragged **/
pivot.setOnMousePressed(event -> {
dragPivotInitX = event.getSceneX();
dragPivotInitY = event.getSceneY();
dragTranslateGroupBackupX = translateGroup.getX();
dragTranslateGroupBackupY = translateGroup.getY();
});
pivot.setOnMouseDragged(event -> {
systemDragOffsetX = event.getSceneX() - dragPivotInitX;
systemDragOffsetY = event.getSceneY() - dragPivotInitY;
translateGroup.setX(dragTranslateGroupBackupX + systemDragOffsetX);
translateGroup.setY(dragTranslateGroupBackupY + systemDragOffsetY);
});
/********************************************/
}
}