# Rotations of a Rubik's cube

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();


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 But I need this for each cube

• 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. Dec 7, 2015 at 22:26
• 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 Dec 7, 2015 at 22:29
• Alright give me a second and I'll write a detailed answer below Dec 7, 2015 at 22:30

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

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:

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

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

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:

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.

• Wow thank you ! If I further get into some problem I will consult you. Dec 7, 2015 at 23:11
• can you give me a small source code for this in javafx ? Dec 8, 2015 at 4:27
• @DebarunMukherjee yeah give me half an hour Dec 8, 2015 at 4:33
• @DebarunMukherjee try this answer stackoverflow.com/a/20875499/5087118 Dec 8, 2015 at 7:05
• 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 ? Dec 8, 2015 at 7:26