The cube configuration (facelets) can be accessed directly in the simulator
by declaring the following in a web page:
var acjs_cube = [];
The facelets are stored as a two dimensional array.
The first dimension is the face number which is 0-5 for up, down, front,
back, left & right respectively.
The second dimension is the facelet number as shown in the layout in
the facelets section of the documentation (adjust the numbers so they start
from zero on each face).
The colors are stored as the numbers 10-15 for white, yellow, orange, red,
green & blue respectively (see the colors array in the init function of
AnimCube3.js for the complete list).
The following simple example changes the center facelet on the front face to
blue on a cube displayed in div c1.
The acjs_paint function is used to update the cube display after the change
is made.
<html>
<script src=AnimCube3.js></script>
<div id=c1 style="width:200px; height:219px"></div>
<button onclick="update_facelet()">Update</button>
<script>
var acjs_cube = [];
var acjs_paint = [];
AnimCube3('id=c1');
function update_facelet() {
// 2=front face, 4=center facelet, 15=blue
acjs_cube['c1'][2][4] = 15;
acjs_paint['c1']();
}
</script>
</html>
The first cube below does the above update but the change is lost when the reset button (in cube area) is pressed. The second cube also updates acjs_initialCube so that the change is not lost by resetting, this is the same functionality as passing a new facelets parameter to AnimCube.
The following examples show how to save and restore both the configuration (facelets) and position of the cube. To see how it works, make some random twists to layers and also rotate the whole cube, then press Save. Press the reset button in the cube area and then press Restore which will return the cube to the position and configuration that was saved.
|
|
|
The following code shows how the above save & restore is done.
var acjs_cube = []; // cube facelets array
var acjs_scube = []; // supercube facelets array
var acjs_paint = []; // paint function (redisplay cube)
var acjs_eye = []; // observer co-ordinate axes (view)
var acjs_eyeX = [];
var acjs_eyeY = [];
var tmp_cube = []; // temp storage for saved info
var tmp_scube = [];
var tmp_pos = {eye:[], eyeX:[], eyeY:[]};
function save(id) {
save_pos(id); // save cube position
copy_cube(tmp_cube, acjs_cube[id]); // save cube facelets
if (id == 'c2') // id c2 is the supercube
copy_cube(tmp_scube, acjs_scube[id]); // save supercube facelets
}
function restore(id) {
restore_pos(id); // restore cube position
copy_cube(acjs_cube[id], tmp_cube); // restore cube facelets
if (id == 'c2')
copy_cube(acjs_scube[id], tmp_scube); // restore supercube facelets
acjs_paint[id](); // redisplay cube
}
function save_pos(id) {
vCopy(tmp_pos.eye, acjs_eye[id]);
vCopy(tmp_pos.eyeX, acjs_eyeX[id]);
vCopy(tmp_pos.eyeY, acjs_eyeY[id]);
}
function restore_pos(id) {
vCopy(acjs_eye[id], tmp_pos.eye);
vCopy(acjs_eyeX[id], tmp_pos.eyeX);
vCopy(acjs_eyeY[id], tmp_pos.eyeY);
acjs_paint[id]();
}
function copy_cube(dest, src) { // copy 6x9 array of 54 facelets
for (var i=0; i < src.length; i++)
dest[i] = src[i].slice();
}
The above code can be combined with a call to AnimCube such than any parameter can be changed without affecting the cube position & config which would normally be reset. With the following two cubes, pressing Update will change the background color. The first one does not restore the position/config so the cube will be reset, the second one does the restore so it will not reset. Make some twists and rotate the cube before pressing the button and compare the results between the two cubes.
The following code shows how to apply params to a cube and keep the
position and config unchanged.
New listeners are created each time AnimCube is called so they are removed
as shown.
var acjs_removeListeners = [];
function change_params(id, params) {
var tmp_cube = [];
save_pos(id);
copy_cube(tmp_cube, acjs_cube[id]);
acjs_removeListeners[id]();
AnimCube3('id=' + id + params);
restore_pos(id);
copy_cube(acjs_cube[id], tmp_cube);
acjs_paint[id]();
}
Another way to make the change is to use the acjs_get_var & acjs_put_var
functions as shown in the following example.
var color1 = '#cccccc';
var color2 = '#888888';
function change_bgcolor(id) {
var color = toggle_color(acjs_get_var[id]('bgColor'));
acjs_put_var[id]('bgColor', color, 's');
acjs_paint[id]();
}
function toggle_color(c) {
return ((c == color1) ? color2 : color1);
}