I expected the following code to translate the ColorCube, and then rotate it around itself, instead it doesn't translate, it just rotates around the origin. What am I doing wrong here?
import javax.media.j3d.Alpha;
import javax.media.j3d.BoundingSphere;
import javax.media.j3d.BranchGroup;
import javax.media.j3d.RotationInterpolator;
import javax.media.j3d.Transform3D;
import javax.media.j3d.TransformGroup;
import javax.media.j3d.View;
import javax.vecmath.Vector3f;
import com.sun.j3d.utils.geometry.ColorCube;
import com.sun.j3d.utils.universe.SimpleUniverse;
public class TestRotTrans {
public TestRotTrans(){
SimpleUniverse su = new SimpleUniverse();
BranchGroup root = new BranchGroup();
TransformGroup tg = new TransformGroup();
tg.setCapability(TransformGroup.ALLOW_TRANSFORM_WRITE);
root.addChild(tg);
// Move to center
Transform3D translater = new Transform3D();
translater.setTranslation(new Vector3f(-0.3f, -0.3f, -0.3f));
tg.setTransform(translater);
// Rotate around y
TransformGroup tgRot = new TransformGroup();
RotationInterpolator rotator = new RotationInterpolator(new Alpha(-1,5000), tg);
BoundingSphere bounds = new BoundingSphere();
rotator.setSchedulingBounds(bounds);
tgRot.addChild(rotator);
tg.addChild(tgRot);
tg.addChild(new ColorCube(0.4f));
su.addBranchGraph(root);
su.getViewingPlatform().setNominalViewingTransform();
su.getViewer().getView().setProjectionPolicy(View.PERSPECTIVE_PROJECTION);
}
public static void main(String[] args) {
new TestRotTrans();
}
}
Well... It does seem to translate for a split second, before the rotation kicks in and undoes the translation.
The solution to the problem was to make tgRot the parent of tg, and make rotator look at tgRot, so that the tree ends up looking like this:
BranchGroup root
---- TransformGroup tgRot
---- RotationInterpolator rotator
---- TransformGroup tg
---- ColorCube cube
---- Transform3D translator
Related
I am trying to animate a series of nodes one after the other in a loop. The goal is to have the first node begin its animation, followed by a short pause before the next node begins to animate.
However, when running this within a loop, it executes too fast and all nodes appear to be animating at the same time.
For simplicity, I am using the AnimateFX library to handle the animations, but I assume the functionality needed here would apply in other situations?
How would I add a pause between each of the HBox animations?
import animatefx.animation.Bounce;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class AnimationTest extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
final VBox root = new VBox(10);
root.setAlignment(Pos.CENTER);
final HBox tiles = new HBox(5);
tiles.setAlignment(Pos.CENTER);
// Create 5 tiles
for (int i = 0; i < 5; i++) {
HBox tile = new HBox();
tile.setPrefSize(50, 50);
tile.setStyle("-fx-border-color: black; -fx-background-color: lightblue");
tiles.getChildren().add(tile);
}
Button button = new Button("Animate");
button.setOnAction(event -> {
// Animate each tile, one at a time
for (Node child : tiles.getChildren()) {
Bounce animation = new Bounce(child);
animation.play();
}
});
root.getChildren().add(tiles);
root.getChildren().add(button);
primaryStage.setWidth(500);
primaryStage.setHeight(200);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
}
I don't know AnimateFX, but using the standard libraries you can add animations to a SequentialTransition.
For example, to animate each node but starting at a later time, add PauseTransitions of increasing duration and the desired animation to SequentialTransitions, and play the SequentialTransitions.
As I said, I'm not familiar with the library you're using, but I think it would look like this:
Button button = new Button("Animate");
button.setOnAction(event -> {
Duration offset = Duration.millis(500);
Duration start = new Duration();
// Animate each tile, one at a time
for (Node child : tiles.getChildren()) {
Bounce bounce = new Bounce(child);
PauseTransition delay = new PauseTransition(start);
SequentialTransition animation = new SequentialTransition(delay, bounce.getTimeline());
animation.play();
start = start.add(offset);
}
});
I have simple demo project. Image moved along screen follow mouse point.
LibGDX Image instance jump to default x coordinate along x axis, determined inside MainMenuScreen.kt show method, every time i click on screen, and start from default position moving. But i expect Image will continue/start new moving from last position before click on screen. How fix it, and what problem?
Code is simple and short, and i can't understand what can be wrong.
pastebin link to full project code:
https://pastebin.com/4UQDjSWa
github link to project:
https://github.com/3dformortals/demo-libgdx/tree/master/DemoMovingImageOnScreen
full project code:
//-------
//KDA.kt
//-------
package com.kda
import com.badlogic.gdx.Game
import com.badlogic.gdx.Gdx
import com.badlogic.gdx.graphics.GL20
import gui.AnimationSkin as AniSkin
class KDA : Game() {
internal var screenWidth:Float = 0.0f
internal var screenHeight:Float = 0.0f
internal val aniskin:AniSkin = AniSkin() //incuded human.atlas TextureAtlas for animation
override fun create() {
screenWidth = Gdx.graphics.width.toFloat()
screenHeight = Gdx.graphics.height.toFloat()
aniskin.prepare() //call preparing method for connect human.atlas for later using for animation
}
override fun render() {
Gdx.gl.glClearColor(1f, 0f, 0f, 1f)
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT)
if (Gdx.input.justTouched()){
setScreen(MainMenuScreen(this))
}
super.render()
}
}
//-------------------
//AnimationSkin.kt
//-------------------
package gui
import com.badlogic.gdx.Gdx
import com.badlogic.gdx.graphics.g2d.TextureAtlas
import com.badlogic.gdx.scenes.scene2d.ui.Skin
class AnimationSkin : Skin() {
fun prepare(){
addRegions(TextureAtlas(Gdx.files.internal("animation/human.atlas")))
}
}
//----------------------
//MainMenuScreen.kt
//----------------------
package com.kda
import animated.ImageMoving
import com.badlogic.gdx.Gdx
import com.badlogic.gdx.ScreenAdapter
import com.badlogic.gdx.graphics.GL20
import com.badlogic.gdx.scenes.scene2d.Stage
import com.badlogic.gdx.utils.viewport.FitViewport
class MainMenuScreen(private val game: KDA) : ScreenAdapter() {
private val stage: Stage = Stage(FitViewport(game.screenWidth, game.screenHeight))
private val player = ImageMoving(game)
private val sprite = player.viewBox()
override fun show() {
Gdx.input.inputProcessor = stage
stage.isDebugAll = true //turn on frames around objects
sprite.x = 500f
//------------------------------------------------------------------------------------
//later, every mouse click on screen sprite jump to x500 position, and i can't fix it
//if i don't execute `sprite.x = 500f` , then sprite jump to x0 position, every click on screen
//--------------------------------------------------------------------------------------------
stage.addActor(sprite)
}
override fun resize(width: Int, height: Int) {
stage.viewport.update(width, height, true)
}
override fun render(delta: Float) {
super.render(delta)
Gdx.gl.glClearColor(0f, 0.5f, 0.5f, 1f)
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT)
if(Gdx.input.justTouched()) println("before calculateAction box.x= "+sprite.x.toString()) //500 always
player.calculateAction(delta) //call player method for calculation moving on screen
println(sprite.x) //print normal as expected
stage.act(delta)
stage.draw()
}
}
//-----------------
//ImageMoving.kt
//-----------------
package animated
import com.badlogic.gdx.Gdx
import com.badlogic.gdx.scenes.scene2d.ui.Image
import com.kda.KDA
class ImageMoving(game: KDA) {
fun viewBox() = img
private val img = Image(game.aniskin.getDrawable("move-skin-male-back-R-0"))
fun calculateAction(delta:Float){
if (img.x > Gdx.input.x) img.x-=(100*delta).toInt().toFloat()
else if (img.x < Gdx.input.x) img.x+=(100*delta).toInt().toFloat()
}
}
//----------------------
//DesktopLauncher.kt
//---------------------
package com.kda.desktop
import com.badlogic.gdx.backends.lwjgl.LwjglApplication
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration
import com.kda.KDA
object DesktopLauncher {
#JvmStatic
fun main(arg: Array<String>) {
val config = LwjglApplicationConfiguration()
config.height = 720
config.width = 1280
LwjglApplication(KDA(), config)
}
}
gif animation demo of jumping image to default position x=500 after clicking on screen
I am trying to get this simple animation to play over an image background however I cannot get it to start.
I have tried adding in a button as well as using playFromStart() instead of play().
I also tried adding in the set orientation to the path, I didn't think it would do anything because I'm just moving a circle, and it hasn't helped.
I also tried messing with the timing and number of repetitions of the animation just in case somehow it was just all happening really quickly or slowly and I just missed it.
I feel like I'm probably missing something really simple but from everything that I've looked at, all the things that the examples have, I also have.
The background image also went away when I added the button, for that I have tried moving it up and other things but I feel like this is also a simple issue that my brain has just glazed over.
package javafxapplication10;
import javafx.animation.PathTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;
public class JavaFXApplication10 extends Application {
#Override
public void start(Stage stage) {
stage.setScene(scene);
stage.setResizable(false);
stage.sizeToScene();
ImagePattern pattern = new ImagePattern(image);
scene.setFill(pattern);
stage.setScene(scene);
stage.show();
Circle cir = new Circle (19);
cir.setLayoutX(170);
cir.setLayoutY(100);
cir.setFill(Color.KHAKI);
pane.getChildren().add(cir);
Path path1 = new Path();
path1.getElements().add(new MoveTo(170,650));
path1.getElements().add(new MoveTo(1335,650));
path1.getElements().add(new MoveTo(1335,100));
PathTransition pl = new PathTransition();
pl.setDuration(Duration.seconds(8));
pl.setPath(path1);
pl.setNode(cir);
pl.setCycleCount(1);
//pl.setOrientation(OrientationType.ORTHOGONAL_TO_TANGENT);
pl.setAutoReverse(false);
//pl.play();
Button begin = new Button("Begin");
begin.setLayoutX(780);
begin.setLayoutY(105);
begin.setOnAction(new EventHandler<ActionEvent> () {
#Override
public void handle(ActionEvent press) {
pl.play();
}
});
pane.getChildren().add(begin);
}
Image image = new Image("file:Figure one.png");
Pane pane = new Pane();
Scene scene = new Scene (pane,1474,707);
public static void main(String[] args) {
launch(args);
}
}
PathTransition only moves the node along a path that would actually be drawn. MoveTo elements do not draw anything, but simply set the current position. You need to use LineTo (and/or ClosePath) to draw something in the Path. Furthermore PathTransition sets the translate poperties, not the layout properties, i.e. final position of the circle is determined by adding the layout coordinates to the coodrinates provided by the Path. Therefore you should either position the Circle using the translate properties or start the path at (0, 0):
Path path1 = new Path(
new MoveTo(0, 0),
new LineTo(0, 550),
new LineTo(1165, 550),
new LineTo(1165, 0),
new ClosePath()
);
// path1.getElements().add(new MoveTo(170,650));
// path1.getElements().add(new MoveTo(1335,650));
// path1.getElements().add(new MoveTo(1335,100));
I'm trying to do some basic animations, but am failing at the most simple things:
Rectangle rect = new Rectangle(100.0, 10.0);
mainPane.getChildren().add(rect); //so the rectangle is on screen
Animation anim = new Timeline(new KeyFrame(Duration.seconds(30.0),
new KeyValue(rect.widthProperty(), 0.0, Interpolator.LINEAR)));
rect.setOnMouseClicked(e -> {
if (anim.getStatus() == Status.RUNNING) {
anim.pause();
} else {
anim.setRate(Math.random() * 5.0);
anim.play();
System.out.println(anim.getRate());
}
});
The problem I am facing is that when I click the rectangle multiple times, the size will randomly jump around, instead of just changing the speed at which it drops. So for example, I let it run to about 50% size at speed ~2.5 and then stop it. When I start it up again, it will jump to a totally different size, smaller for a lower speed, bigger for a higher speed, so for example to ~20% for ~1.0 speed or ~80% for ~4.5 speed.
At first I thought animation was pre-calculated for the new speed and thus jumped to the position at which it would be, had it been played with the new speed from the beginning for the time that it was already playing before the pause, but it's bigger for a smaller speed, which doesn't really make sense then.
How do I change the speed/rate of an animation without having it jump around?
I think your diagnosis is correct: the current value is interpolated given the current time and current rate. If you decrease the rate without changing the current time, you are then earlier in the animation. Since the animation is shrinking this has the effect of making the rectangle bigger.
The easiest way is probably just to start a new animation each time:
import javafx.animation.Animation;
import javafx.animation.Animation.Status;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class VariableRateAnimation extends Application {
private Animation anim ;
#Override
public void start(Stage primaryStage) {
Pane mainPane = new Pane();
Rectangle rect = new Rectangle(100.0, 10.0);
mainPane.getChildren().add(rect); //so the rectangle is on screen
rect.setOnMouseClicked(e -> {
if (anim != null && anim.getStatus() == Status.RUNNING) {
System.out.println("Paused (" + anim.getTotalDuration().subtract(anim.getCurrentTime())+ " remaining)");
anim.pause();
} else {
Duration duration = Duration.seconds(30.0 * rect.getWidth() / (100 * Math.random() * 5.0));
System.out.println("Starting: ("+duration+ " to go)");
double currentWidth = rect.getWidth() ;
if (anim != null) {
anim.stop();
}
anim = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(rect.widthProperty(), currentWidth, Interpolator.LINEAR)),
new KeyFrame(duration, new KeyValue(rect.widthProperty(), 0.0, Interpolator.LINEAR)));
anim.play();
}
});
primaryStage.setScene(new Scene(mainPane, 600, 600));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
so quicky, I am doing program which demonstrate methods used for computer graph drawing. I need to create timeline or history of actions like ( placeVertex(x,y), moveVertex(newX,newY) etc. ) and iterate through (forward and backwards, automatically or manual)
I already achieved that by using command design pattern but few of these commands are using transitions. First idea was to use Condition interface's lock, await and signal in setOnFinished between each commands but it led to gui freezing.
I tryed SequentialTransition but it's no use for my problem - can't change properties dynamically between transitions.
Is there a possibility to somehow inform generation that one transition ended and next can run without GUI freezing and drawing?
Thanks!
edit: I ll try to simplify it all
Here is my Command interface and one of these commands:
public interface Command {
public void execute();
}
public class MoveVertex implements Command {
public MoveVertex(Data d, Vertex v, double changedX, double changedY){..};
#Override
public void execute() {
Path path = new Path();
path.getElements().add(new MoveTo(v.getCenterX(), v.getCenterY()));
path.getElements().add(new LineTo(changedX, changedY));
PathTransition pathTransition = new PathTransition();
pathTransition.setDuration(Duration.millis(velocity));
pathTransition.setPath(path);
pathTransition.setNode(v.getVertex());
pathTransition.play(); }
}
These Commands are stored in my history class which is basically
private List<Command> history;
And I do going through the list and executing Commands
public boolean executeNext() {
if (history.size() != position) {
history.get(position).execute();
position++;
return true;
}
return false;
}
And I am trying to achieve state when next Command is started only if previous finished. Tryed to put await/signal in between without success.
The solution below uses Itachi's suggestion of providing an onFinished handler to move to a node to a new (random) location after we get to the next location.
It could probably be made more efficient (and simpler to understand) by re-using a single Transition rather than using recursion within the event handler. It is probably unnecessary to create a new Transition for each movement - but, as long as there aren't hundreds of thousands of movement iterations, it should be acceptable as is.
import javafx.animation.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.geometry.Point2D;
import javafx.scene.*;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.util.Random;
// animates moving a node forever in a random walk pattern.
public class RandomWalk extends Application {
private static final Random random = new Random(42);
private static final double W = 200;
private static final double H = 200;
private static final double R = 10;
private static final Node node = new Circle(
R, Color.FORESTGREEN
);
#Override
public void start(Stage stage) {
// start from the center of the screen.
node.relocate(W / 2 - R, H / 2 - R);
stage.setScene(new Scene(new Pane(node), W, H));
stage.show();
walk();
}
// start walking from the current position to random points in sequence.
private void walk() {
final Point2D to = getRandomPoint();
final Transition transition = createMovementTransition(
node,
to
);
transition.setOnFinished(
walkFrom(to)
);
transition.play();
}
private EventHandler<ActionEvent> walkFrom(final Point2D from) {
return event -> {
// Finished handler might be called a frame before transition complete,
// leading to glitches if we relocate in the handler.
// The transition works by manipulating translation values,
// so zero the translation out before relocating the node.
node.setTranslateX(0);
node.setTranslateY(0);
// After the transition is complete, move the node to the new location.
// Relocation co-ordinates are adjusted by the circle's radius.
// For a standard node, the R adjustment would be unnecessary
// as most nodes are located at the top left corner of the node
// rather than at the center like a circle is.
node.relocate(
from.getX() - R,
from.getY() - R
);
// Generate the next random point and play a transition to walk to it.
// I'd rather not use recursion here as if you recurse long enough,
// then you will end up with a stack overflow, but I'm not quite sure
// how to do this without recursion.
final Point2D next = getRandomPoint();
final Transition transition = createMovementTransition(node, next);
transition.setOnFinished(walkFrom(next));
transition.play();
};
}
// We use a PathTransition to move from the current position to the next.
// For the simple straight-line movement we are doing,
// a straight TranslateTransition would have been fine.
// A PathTransition is just used to demonstrate that this
// can work for the generic path case, not just straight line movement.
private Transition createMovementTransition(Node node, Point2D to) {
Path path = new Path(
new MoveTo(
0,
0
),
new LineTo(
to.getX() - node.getLayoutX(),
to.getY() - node.getLayoutY()
)
);
return new PathTransition(
Duration.seconds(2),
path,
node
);
}
// #return a random location within a bounding rectangle (0, 0, W, H)
// with a margin of R kept between the point and the bounding rectangle edge.
private Point2D getRandomPoint() {
return new Point2D(
random.nextInt((int) (W - 2*R)) + R,
random.nextInt((int) (H - 2*R)) + R
);
}
public static void main(String[] args) {
launch(args);
}
}