Show Hidden Facelets (back view)

Show Hidden Facelets
(back view)

This page uses a modified version of AnimCube to show the hidden facelets with a back view.

The following shows the AnimCube mods for use with a web page having two cubes with ids c1 and c2 in a combined cube area with id ca1 as shown above.

In function init, set initial position for second cube:

if (parNode.id == 'c2')
  initialPosition = 'rrdddddddddd';

In function paint, disable display of the progress/buttonbar for second cube. Add the following prior to code that displays the progressbar:
```
if (parNode.id == 'c2')
  return;
```
In function mousedown:
1. Use combined cube area for rotation by changing the declaration of rect as shown:
```
var rect = document.getElementById('ca1').getBoundingClientRect();
```
2. Change width to width*2 in this line:
```
if (x < left || x > left + width / dpr ||
```
3. Add the following after line: "mouseIsDown = true;":
```
mousedownId = e.target.parentNode.id;
if (mousedownId != 'c1' && mousedownId != 'c2')
  mousedownId = 'c1';
```
  note: also declare global variable mousedownId
4. Prevent progressbar from working beyond the display area by adding the following before line: "if (clickProgress)":
```
if (lastX > width)
  return;
```

In function mousemove, reverse direction of cube rotation for Y movements for second cube:

var dir = (parNode.id == mousedownId) ? 1 : -1;
vNorm(vAdd(eye, vScale(vCopy(eyeD, eyeY), dy * 0.016 * dir)));