We Keep Coding

Most simple rotate camera via mouse not working

Okay, this is driving me crazy. The documentation is pretty weak, the example application from Oracle is very weird, with a huge convoluted helper class, and even the questions about it on here have no answers!
I've largely followed and simplified this tutorial, but instead of rotating the object, I'm trying to rotate the camera, so when you drag the mouse, it should orbit the camera.
However, though I have confirmed via console logs and debugging that the event handlers are being called, and everything seems to have the right values, my rotates just never happen! What am I missing?
Furthermore, I can't manage to move the camera at all, even the (commented out) translateX and the like don't work either, so I am quite stumped, but can't get the axis to look like anywhere but the upper left corner!
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
public class RotateCameraExample extends Group {
private double anchorX, anchorY;
private double anchorAngleX = 0;
private double anchorAngleY = 0;
private DoubleProperty angleX = new SimpleDoubleProperty(0);
private DoubleProperty angleY = new SimpleDoubleProperty(0);
Camera camera;
Group axes;
public RotateCameraExample() {
axes = buildAxes();
getChildren().add(axes);
camera = new PerspectiveCamera(true);
camera.setFarClip(6000);
camera.setNearClip(0.01);
//camera.translateYProperty().set(300); // this doesn't do anything! why?
getChildren().add(camera);
initMouseControl();
}
private void initMouseControl() {
Rotate xRotate = new Rotate(0, Rotate.X_AXIS);
Rotate yRotate = new Rotate(0, Rotate.Y_AXIS);
camera.getTransforms().addAll(xRotate, yRotate);
xRotate.angleProperty().bind(angleX);
yRotate.angleProperty().bind(angleY);
setOnMousePressed(event -> {
anchorX = event.getSceneX();
anchorY = event.getSceneY();
anchorAngleX = angleX.get();
anchorAngleY = angleY.get();
});
setOnMouseDragged(event -> {
angleX.set(anchorAngleX - (anchorY - event.getSceneY()));
angleY.set(anchorAngleY + anchorX - event.getSceneX());
});
}
private Group buildAxes() {
final Box xAxis = new Box(1200, 10, 10);
final Box yAxis = new Box(10, 1200, 10);
final Box zAxis = new Box(10, 10, 1200);
xAxis.setMaterial(new PhongMaterial(Color.RED));
yAxis.setMaterial(new PhongMaterial(Color.GREEN));
zAxis.setMaterial(new PhongMaterial(Color.BLUE));
Group axisGroup = new Group();
axisGroup.getChildren().addAll(xAxis, yAxis, zAxis);
return axisGroup;
}
}
Here can see that the axis is visible in the upper left, and I want it to remain at (0, 0, 0) while moving the camera around it.
Here is the Application launch code, which is clearly not the issue:
public class TestApp extends Application {
#Override
public void start(Stage stage) throws IOException {
RotateCameraExample g = new RotateCameraExample();
Scene scene = new Scene(g, 800, 800, Color.BLACK);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch();
}
}

Instead of adding the camera to the children of the Group,
getChildren().add(camera);
You should set the scene's camera.
scene.setCamera(g.camera);
You will immediately see the axes at the center of the screen. Similarly, mouse handler(s) should be applied to the scene. You can then update the group's transforms in your scene's handler(s).
As an example, the variation below alters the camera's rotation in response to mouse scroll events. Note how the vertical mouse scroll affects rotation about the X axis, while horizontal mouse scroll affects rotation about the Y axis. The same gestures also translate the group as a whole. An assortment of keyboard commands enable one to rotate the camera around the Z axis, dolly along the Z axis, and reset the scene.
You can translate and rotate about points on a circle, as illustrated here; in contrast, this related example animates the rotation of an object about a pivot.
import javafx.application.Application;
import javafx.scene.Camera;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.ScrollEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
/**
* #see https://stackoverflow.com/a/69260181/230513
*/
public class RotateCameraExample extends Application {
private static class RotateCamera extends Group {
private final Camera camera;
private final Rotate xRotate = new Rotate(0, Rotate.X_AXIS);
private final Rotate yRotate = new Rotate(0, Rotate.Y_AXIS);
private final Rotate zRotate = new Rotate(0, Rotate.Z_AXIS);
public RotateCamera() {
buildAxes();
camera = new PerspectiveCamera(true);
camera.setFarClip(6000);
camera.setNearClip(0.01);
camera.setTranslateZ(-2000);
camera.getTransforms().addAll(xRotate, yRotate, zRotate);
}
private void buildAxes() {
final Box xAxis = new Box(1200, 10, 10);
final Box yAxis = new Box(10, 1200, 10);
final Box zAxis = new Box(10, 10, 1200);
xAxis.setMaterial(new PhongMaterial(Color.RED));
yAxis.setMaterial(new PhongMaterial(Color.GREEN));
zAxis.setMaterial(new PhongMaterial(Color.BLUE));
Group axisGroup = new Group();
axisGroup.getChildren().addAll(xAxis, yAxis, zAxis);
this.getChildren().add(axisGroup);
}
}
#Override
public void start(Stage stage) {
RotateCamera g = new RotateCamera();
Scene scene = new Scene(g, 800, 800, Color.BLACK);
scene.setCamera(g.camera);
stage.setScene(scene);
stage.show();
scene.setOnScroll((final ScrollEvent e) -> {
g.xRotate.setAngle(g.xRotate.getAngle() + e.getDeltaY() / 10);
g.yRotate.setAngle(g.yRotate.getAngle() - e.getDeltaX() / 10);
g.setTranslateX(g.getTranslateX() + e.getDeltaX());
g.setTranslateY(g.getTranslateY() + e.getDeltaY());
});
scene.setOnKeyPressed((KeyEvent e) -> {
KeyCode code = e.getCode();
switch (code) {
case LEFT:
g.zRotate.setAngle(g.zRotate.getAngle() + 10);
break;
case RIGHT:
g.zRotate.setAngle(g.zRotate.getAngle() - 10);
break;
case UP:
g.setTranslateZ(g.getTranslateZ() - 100);
break;
case DOWN:
g.setTranslateZ(g.getTranslateZ() + 100);
break;
case HOME:
g.xRotate.setAngle(0);
g.yRotate.setAngle(0);
g.zRotate.setAngle(0);
g.setTranslateX(0);
g.setTranslateY(0);
g.setTranslateZ(0);
break;
default:
break;
}
});
}
public static void main(String[] args) {
launch();
}
}

Why does the addition of a SubScene change the localToScreen function output in JavFX?

I am trying to develop a tool with JavaFX that has multiple viewports and I think the best way to do that is through the use of SubScenes. One requirement I have is the ability to know where on a given plane in the scene corresponds to the pixel clicked by the mouse. I thought that I could use the Node.localToScreen() and Node.screenToLocal() functions to do this, however when adding a SubScene I get different values, despite nothing else changing.
Below is an example, where running the code with withSubScene = false, the console shows:
Point2D [x = 996.0, y = 514.8333400189878]
Point2D [x = 117.98005476276654, y = 514.8333400189878]
And running with withSubScene = true, the console shows:
Point2D [x = 997.0, y = 529.3333400189878]
Point2D [x = 64.91937872905163, y = 529.3333400189878]
Why would these values be different, when the camera is in the same location and looking at the same object?
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class ScreenToLocalTest extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
// Change this variable to swap to adding a SubScene
boolean withSubScene = false;
// Set the stage to be the same size each time
primaryStage.setWidth(1000);
primaryStage.setHeight(500);
Group root = new Group();
Scene rootScene = new Scene(root);
// Create out camera
Camera camera = new PerspectiveCamera(true);
camera.setTranslateZ(-1000);
camera.setNearClip(1);
camera.setFarClip(10000);
Group groupToAddRectangle;
if(withSubScene) {
Group sceneRoot = new Group();
SubScene subScene = new SubScene(sceneRoot, primaryStage.getWidth(), primaryStage.getHeight());
root.getChildren().add(subScene);
subScene.setCamera(camera);
groupToAddRectangle = sceneRoot;
} else {
rootScene.setCamera(camera);
groupToAddRectangle = root;
}
Rectangle rectangle = new Rectangle(1000, 300, Color.ALICEBLUE);
groupToAddRectangle.getChildren().add(rectangle);
rectangle.setTranslateZ(1);
root.setOnMouseMoved(event-> {
System.out.println(rectangle.screenToLocal(event.getScreenX(), event.getScreenY()));
});
primaryStage.setScene(rootScene);
primaryStage.show();
System.out.println(rectangle.localToScreen(0, 0));
rectangle.translateXProperty().set(-1000);
System.out.println(rectangle.localToScreen(0, 0));
}
public static void main(String[] args) {
launch(args);
}
}

Ball that fades away as it goes to the right

My task is to write a program that makes a circle ball that gradually fades away as the ball moves to the right. But it's not working, I can make the ball move when the mouse is dragged but the opacity is the same. Can you guys help me? I don't know how to convert the opacity value into double
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
public class Project3 extends Application
{
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) {
Pane root = createRootPane();
Scene scene1 = new Scene(root);
primaryStage.setScene(scene1);
primaryStage.setTitle(" Hai Vo ");
primaryStage.show();
}
public Pane createRootPane()
{
Circle ball = new Circle (100,50,25);
Pane root = new Pane(ball);
root.setMinSize(300,300);
root.setOnMouseDragged (
event ->
{
double x = event.getX();
ball.setCenterX(event.getX());
ball.setCenterY(event.getY());
ball.opacityProperty().bind(ball.centerXProperty());
double opacity = ball.opacityProperty();
ball.setOpacity(opacity);
} );
return root;
}
}

First, move the binding out of the event handler. The binding will ensure the opacity is always updated when the centerX property updates.
Second, don't set bound values; the last two lines of the event handler just set the opacity to its current value anyway.
Third, the opacity should be between 0 and 1. You want it to be 1 when centerX is 0 and 0 when centerX is 300 (or, generally, the width of the pane).
What you need is (in pseudocode)
opacity = 1 - ball.centerX / root.width
= (ball.centerX / root.width) * (-1) + 1
which you can express in bindings with
ball.centerXProperty()
.divide(root.widthProperty())
.multiply(-1)
.add(1)
So put together, you need:
public Pane createRootPane() {
Circle ball = new Circle (100,50,25);
Pane root = new Pane(ball);
ball.opacityProperty().bind(
ball.centerXProperty()
.divide(root.widthProperty())
.multiply(-1)
.add(1)
);
root.setMinSize(300,300);
root.setOnMouseDragged (
event ->
{
ball.setCenterX(event.getX());
ball.setCenterY(event.getY());
} );
return root;
}

How to drag a `Shape` that is below anther `shape` in JavaFX scene graph?

I'm writing an educational application using JavaFX in which the user can draw and manipulate Bezier curves Line, QuadCurve, and CubicCurve. These curves should have the capability to be dragged with mouse. I've got two options available:
1- Using classes Line, QuadCurve, and CubicCurve, and then filling them with transparent color, and stroke them with another color, say black. The problem that arises for this option is that the user wants to drag a curve, but sees that another curve is dragged. The reason for this is that the curve that user is going to drag, resides below another one in the scene graph. For example, in the following figure the smaller curve is not capable of dragging, since it is below the larger one in the scene graph.
2- Using class javafx.scene.shape.Path, in which case the problem is that manipulating such a path is a little bit more complicated, since it's composed of some PathElements, and simply manipulating the elements does not change the Path, unless we remove an element from its elements property, and add a new one. Therefore I prefer approach 1.
How can I Overcome the problem arising in the first approach?
Thank you in advance for your help. A simplified version of my program code is as follows.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.CubicCurve;
import javafx.scene.shape.QuadCurve;
import javafx.stage.Stage;
public class SampleForStackOverflow extends Application
{
double lastMouseX;
double lastMouseY;
double lastTranslateX;
double lastTranslateY;
#Override
public void start(Stage window)
{
final double STROKE_WIDTH = 5;
QuadCurve quad = new QuadCurve(100, 200, 150, 50, 200, 200);
quad.setFill(Color.TRANSPARENT);
quad.setStroke(Color.BLACK);
quad.setStrokeWidth(STROKE_WIDTH);
quad.setOnMousePressed(e -> {
lastMouseX = e.getSceneX();
lastMouseY = e.getSceneY();
lastTranslateX = quad.getTranslateX();
lastTranslateY = quad.getTranslateY();
});
quad.setOnMouseDragged(e -> followMouse(quad, e));
CubicCurve cubic = new CubicCurve(0, 300, 100, 0, 300, 0, 300, 300);
cubic.setFill(Color.TRANSPARENT);
cubic.setStroke(Color.BLACK);
cubic.setStrokeWidth(STROKE_WIDTH);
cubic.setOnMousePressed(e -> {
lastMouseX = e.getSceneX();
lastMouseY = e.getSceneY();
lastTranslateX = cubic.getTranslateX();
lastTranslateY = cubic.getTranslateY();
});
cubic.setOnMouseDragged(e -> followMouse(cubic, e));
Group root = new Group(quad, cubic);
Scene scene = new Scene(root, 500, 500);
window.setScene(scene);
window.show();
}
private void followMouse(Node node, MouseEvent e)
{
double deltaX = e.getSceneX() - lastMouseX;
double deltaY = e.getSceneY() - lastMouseY;
node.setTranslateX(deltaX + lastTranslateX);
node.setTranslateY(deltaY + lastTranslateY);
}
public static void main(String[] args) {
launch(args);
}
}

Instead of using a transparent color in your first scenario, you should explicitly set the fill color of your curves to null and set pickOnBounds to false. A transparent color will still catch the mouse events but null will not and when pickOnBounds if false the mouse events will be caught only if you are exactly over the colored parts of your shape.

Creating the QuadCurve and the CubicCurve using Paths seems to work fine for me. Here is a complete example :
import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.shape.CubicCurveTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.QuadCurveTo;
import javafx.stage.Stage;
public class SampleForStackOverflow extends Application {
private final double STROKE_WIDTH = 5;
private double lastMouseX;
private double lastMouseY;
private double lastTranslateX;
private double lastTranslateY;
#Override
public void start(Stage window) {
Path quad = initQuadCurve(100, 200, 200, 200, 150, 50);
Path cubic = initCubicCurve(0, 300, 300, 300, 100, 0, 300, 0);
Pane root = new Pane(cubic, quad);
Scene scene = new Scene(root, 500, 500);
window.setScene(scene);
window.show();
}
private Path initQuadCurve(int xStart, int yStart, int xEnd, int yEnd, int controlX, int controlY) {
Path curvePath = new Path();
curvePath.setStrokeWidth(STROKE_WIDTH);
MoveTo moveTo = new MoveTo(xStart, yStart);
QuadCurveTo quadTo = new QuadCurveTo();
quadTo.setControlX(controlX);
quadTo.setControlY(controlY);
quadTo.setX(xEnd);
quadTo.setY(yEnd);
curvePath.getElements().addAll(moveTo, quadTo);
curvePath.setOnMousePressed(e -> {
lastMouseX = e.getSceneX();
lastMouseY = e.getSceneY();
lastTranslateX = curvePath.getTranslateX();
lastTranslateY = curvePath.getTranslateY();
});
curvePath.setOnMouseDragged(e -> followMouse(curvePath, e));
return curvePath;
}
private Path initCubicCurve(int xStart, int yStart, int xEnd, int yEnd, int x1Control, int y1Control, int x2Control,
int y2Control) {
Path curvePath = new Path();
curvePath.setStrokeWidth(STROKE_WIDTH);
MoveTo moveTo = new MoveTo(xStart, yStart);
CubicCurveTo cubicTo = new CubicCurveTo();
cubicTo.setControlX1(x1Control);
cubicTo.setControlY1(y1Control);
cubicTo.setControlX2(x2Control);
cubicTo.setControlY2(y2Control);
cubicTo.setX(xEnd);
cubicTo.setY(yEnd);
curvePath.getElements().addAll(moveTo, cubicTo);
curvePath.setOnMousePressed(e -> {
lastMouseX = e.getSceneX();
lastMouseY = e.getSceneY();
lastTranslateX = curvePath.getTranslateX();
lastTranslateY = curvePath.getTranslateY();
});
curvePath.setOnMouseDragged(e -> followMouse(curvePath, e));
return curvePath;
}
private void followMouse(Node node, MouseEvent e) {
double deltaX = e.getSceneX() - lastMouseX;
double deltaY = e.getSceneY() - lastMouseY;
node.setTranslateX(deltaX + lastTranslateX);
node.setTranslateY(deltaY + lastTranslateY);
}
public static void main(String[] args) {
launch(args);
}
}
To be honest my first attempt was to call quad.setPickOnBounds(false); (and for the cubic as well ) as suggested on both post below :
Mouse Events get Ignored on the Underlying Layer
JavaFX Pass MouseEvents through Transparent Node to Children
But its not working or I miss something, but if creating the path by yourself works find its unnecessary to complicate thing more. In any case I recommend to have a look on the links if you want to follow the first approach. In case you are going to follow the second approach manipulating the paths is not going to be very difficult in my opinion.

JavaFX TranslateTransition doesn't go to the point definied

I want my blue circle go from one light blue circle to another, but only does half.
The coordinates appear being the same:
initial_lightblue: 211.7,230.5
blue: 193.7,239.1
final_lighblue: 193.7,239.1
My code
TranslateTransition transition = new TranslateTransition();
transition.setToX(c.getX());
transition.setToY(c.getY());
transition.setNode(view);
transition.setInterpolator(Interpolator.LINEAR);
transition.play();
Any sugestions?

From documentation
TranslateTransition : This Transition creates a move/translate animation that spans its duration. This is done by updating the
translateX, translateY and translateZ variables of the node at regular
interval.
So it's going to use the translate properties in order to relocate the actual node inside your pane. With that being said if you locate your node at x=50 and y=50 by setting its layoutX and layoutY properties their translation values will be 0, so if you actually try to set the end coordinates of the TranslateTransition to be ex. x = 100 y = 100 then its going to move your Node to the x = 150 and y = 150 and not to the (x,y) = (100,100) cause its going to change the translation property (x and y) from 0 to 100 which will move the node eventually to (x,y) = 150,150.
With that been said here is an example :
import javafx.animation.Interpolator;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
public class Test extends Application {
private Circle c1;
private Circle c2;
#Override
public void start(Stage stage) throws Exception {
AnchorPane pane = new AnchorPane();
// Set only the radius
c1 = new Circle(5);
c1.setFill(Color.BLUE);
// Let's translate the c1 to the location we want
c1.setTranslateX(50);
c1.setTranslateY(60);
// The same for circle2
c2 = new Circle(5);
c2.setFill(Color.RED);
c2.setTranslateX(120);
c2.setTranslateY(200);
pane.getChildren().addAll(c1, c2);
pane.setOnMouseClicked(e -> {
startAnimation();
});
stage.setScene(new Scene(pane, 400, 500));
stage.show();
}
private void startAnimation() {
TranslateTransition transition = new TranslateTransition();
transition.setNode(c1);
transition.setToX(c2.getTranslateX());
transition.setToY(c2.getTranslateY());
transition.setInterpolator(Interpolator.LINEAR);
transition.play();
}
public static void main(String[] args) {
launch(args);
}
}
P.S : In your code example you are referring to circles but you call c.getX() to actually take the x of the circle, that is quite strange cause the Circle class doesn't have method getX() I am quessing you are referreing to getCenterX() or those are not Circles .