Make your own free website on
rubicDiag5 How do I make Rubic cube

When I finish the flash movie about rotating 3d cube by skew and rotation technique, I decide to try myself to extend the rotating 3d cube into a rubic cube. The technique to construct a rotating 3d cube is discussed in another session.  I will explain only the manipulation of pieces of rubic cube and the construction of rubic cube rotation. To make 3d points rotating around an arbituray axis is discussed in another session too.

There are 6 faces for rubic cube. Each face consists of 9 squares. I make a 100x100 movieClip, with 9 small square movieClips. To make the face skewable, I put it into an empty movie holder.

When the rubic cube is rotated by the user, the specific "blocks ring" will move and the color arrangement of each face will change. Well, in fact, to script to make square move is complicated. I dont move the square movieClip. I just change its color.

There are ways to change the color of a square movieClip. I construct a square movieClip by 8 frames, each frame is a different color. To set it to show color no. 3 , I just make square.gotoAndStop(3); To get what color it is, I just peek square._currentframe. Another important reason for this is that, one of these frames is blank empty. If I make it gotoAndStop("blank"), the square is invisible.  My square consists of a transparent button, setting it invisible is not enough to hide it from clicking or dragging.

OK, now it is the trivial work to script what pieces, what color should change in responce to a specific move. It is trivial work and is complex. This work made me crazy until Mark in Xpress told me an idea: to draw a diagram. So, I make a diagram like below and print it out and put it by my desk. Then I could easily think what is the moving ring and face and what are those squares that are moving.

Now, see the diagram above.  I define White color as color no. 2.

When the upper most blocks rotate clockwisely, it involves 1 face and 1 ring. The rotate face is the white face, the face ring that rotating is white sq(0-1-2-5-8-7-6-3) with (4) in the center. The side ring, if start frome the red face, it will be (red sq 6-7-8, green sq 0-3-6, orange sq 2-1-0, blue sq 8-5-2); This sequence data is stored with the id of the face. The id of white face is 1, then these data are stored in faceRing1, and sideRing1.

I dont know how to "generalize" the data. I did not succeed in writing a function to generate the side ring and face ring by number id. So I build them manually, with this diagram by the desk. So, I got 6 sets of these sequence data.

Believe me or not, all manipulation of the rubic cube can be done by these 6 sets of data. Simple enough, right ? OK, when the color no. 1 face is turned, I take reference of the faceRing1 and sideRing1.  I read the values of faceRing into a data and then do shift- push- shift- push- shift-push of this array and then store it back to faceRing. Again, I take reference of the sideRing and also reads _currentframe of these square into array and do shift-push and store it back by gotoAndStop(value). That will be the result of the rotation.

In fact, all moves are combination or variant of this move. It maybe clockwise or counterClockwise. If it is middle ring rotation, the effect is the same as opposite rotation of both upper face and lower face.

Well the last step is setting up the  link between button in square and the rotation face.  If the button in the square is pressed and drag, we know which square it is. Search the faceRing and sideRing data,  it will be found in two independent Ring. For example, the orange corner square appears in  faceRing of orange color and also in the sideRing of green color. But, if we consider the direction of dragging, we can take it orange faceRing rotation or green sideRing rotation.

Now, the rubic cube game is nearly completed.

What I want to do is, add animation to this cube. This animation does not disturb what I described above. I just duplicate a cube and give it a rotation animation. The duplicated cube only copies colors of the original cube and do animation then remove itself. It does nothing to color manipulation scheme.

Below is the step about setting up a duplicated cube to show the illusion of rotation animation. Simple enough, right ? 

Try to click the button to show construction step by step. 

Well, if you are smart enough, you would ask a question: How to rotate that duplicate cube ? Defintely, it is not rotating around X,or Y or Z axis. So, how to ratae it ?

Good question. You should go further to see the session: Rotation around 3d Axis.