0
\$\begingroup\$

I made a Rubik's cube by arranging smaller cubes. Now I want to apply animations to it. For that I am choosing to use the Rotate class and set the angle of rotation and the axis of rotation,like this

ar[12].setRotationAxis(Rotate.X_AXIS);//The array elements refer to the small cubes which make up the Rubik's cube.These elements represent the left face.
        ar[13].setRotationAxis(Rotate.X_AXIS);
        ar[14].setRotationAxis(Rotate.X_AXIS);
        ar[15].setRotationAxis(Rotate.X_AXIS);
        Rotate rotation1 = new Rotate(90);
        rotation1.setAxis(Rotate.X_AXIS);

Then I am applying the rotations as an animation,like this

Timeline timeline = new Timeline(
                new KeyFrame(Duration.seconds(2), new KeyValue(ar[12].rotateProperty(), 90)),
                new KeyFrame(Duration.seconds(2), new KeyValue(ar[13].rotateProperty(), 90)),
                    new KeyFrame(Duration.seconds(2), new KeyValue(ar[14].rotateProperty(), 90)),
                    new KeyFrame(Duration.seconds(2), new KeyValue(ar[15].rotateProperty(),  90)));
            timeline.stop();

            timeline.setCycleCount(Timeline.INDEFINITE);
            timeline.setAutoReverse(true);
            timeline.play();

But what I get is this The inner black sides are coming out. What mistake am I making and how to fix this ? Basically, I am getting this for each single cube enter image description here But I need this for each cube enter image description here

\$\endgroup\$
3
  • 1
    \$\begingroup\$ You are rotating around the central axis of each individual cube. Instead, you want to rotate around the point in between the four cubes on the side. \$\endgroup\$
    – bpgeck
    Dec 7, 2015 at 22:26
  • \$\begingroup\$ Yeah I understand that. But I am asking how can determine that point? After that I can set the pivotX, pivotY and pivot Z for the Rotation object and get my desired animation \$\endgroup\$ Dec 7, 2015 at 22:29
  • \$\begingroup\$ Alright give me a second and I'll write a detailed answer below \$\endgroup\$
    – bpgeck
    Dec 7, 2015 at 22:30

1 Answer 1

3
\$\begingroup\$

Okay so imagine the image below is the front view of one of your faces on your cube:

enter image description here

Ugly, I know. Currently when you do FACE.setRotationAxis(Rotate.X_AXIS) you are setting the rotation axis of that individual square to be the center of the square. The black dots in the image below are your rotation axes:

enter image description here

So when you say to rotate, each cube rotates around that central point as such:

enter image description here

Instead you need to have the central axis be that point in between all four cubes:

enter image description here

So, we need to set the axis of rotation for each individual cube to be that center point. I don't know what graphics library you're using but it should be relatively simple to do. Here is a visual representation of the cube's dimensions using XAxis as the central point because that is what your code apparently does currently:

enter image description here

So, for the red square, the x component of the point of rotation would be face.XAxis.x + 0.5 * face.width and the y component would be face.XAxis.y + 0.5 * face.height. For the blue square, this would be slightly different: face.XAxis.x + 0.5 * face.width and face.XAxis.y - 0.5 * face.height since its point of rotation is above the center point of the square.

\$\endgroup\$
6
  • 1
    \$\begingroup\$ Wow thank you ! If I further get into some problem I will consult you. \$\endgroup\$ Dec 7, 2015 at 23:11
  • \$\begingroup\$ can you give me a small source code for this in javafx ? \$\endgroup\$ Dec 8, 2015 at 4:27
  • \$\begingroup\$ @DebarunMukherjee yeah give me half an hour \$\endgroup\$
    – bpgeck
    Dec 8, 2015 at 4:33
  • 1
    \$\begingroup\$ @DebarunMukherjee try this answer stackoverflow.com/a/20875499/5087118 \$\endgroup\$
    – bpgeck
    Dec 8, 2015 at 7:05
  • 1
    \$\begingroup\$ That means if I keep the rotation axis the same (Rotate.X_AXIS, and so on..) and set pivot point anywhere on the edge of the cube I will get my desired result ? \$\endgroup\$ Dec 8, 2015 at 7:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .