cubing
Steps Feature
Would it be possible to implement a steps feature? The user can define a series of facelet definitions and a step rate. Then the cube applet will automatically cycle through each facelet definition every second or based on the user determined step rate. Upon reaching the end step, the applet cycles back to step 1 and continues to repeat. This would be useful for displaying the steps of a cube solving method in a single cube, cycling through interesting patterns, etc.
Example parameters of the idea:
"step1=ddddydddddwdwwwdwdddddbbdddddddggdddddddoddodddddrrddd&step2=ddddyddddwwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr&step3=yyyyyyyyywwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr&step4=yyyyyyyyywwwwwwwwwbbbbbbbbbgggggggggooooooooorrrrrrrrr&steprate=1"
It can be done using method described in Enhancement section in AnimCubeJS Doc, here is an example of how to do it:
<!doctype html>
<html>
<head>
<script src=AnimCube3.js></script>
</head>
<body>
<center>
<br>
<div id=c1 style=width:200px;height:200px></div>
<script>
var acjs_removeListeners = [];
var arr = [
'ddddydddddwdwwwdwdddddbbdddddddggdddddddoddodddddrrddd',
'ddddyddddwwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr',
'yyyyyyyyywwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr',
'yyyyyyyyywwwwwwwwwbbbbbbbbbgggggggggooooooooorrrrrrrrr'
];
var rate = 1;
var n = 0;
AnimCube3('id=c1');
f();
function f() {
acjs_removeListeners['c1']();
var params = 'id=c1&facelets=' + arr[n++%4];
AnimCube3(params);
setTimeout(f, rate*1000);
}
</script>
</center>
</body>
</html>
Here is a slightly modified version that shows how to do multiple cubes, if needed.
<!doctype html>
<html>
<head>
<script src=AnimCube3.js></script>
</head>
<body>
<center>
<br>
<table>
<tr>
<td><div id=c1 style=width:200px;height:200px></div></td>
<td width=40>
<td><div id=c2 style=width:200px;height:200px></div></td>
</tr>
</table>
<script>
var acjs_removeListeners = [];
var arr1 = [
'ddddydddddwdwwwdwdddddbbdddddddggdddddddoddodddddrrddd',
'ddddyddddwwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr',
'yyyyyyyyywwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr',
'yyyyyyyyywwwwwwwwwbbbbbbbbbgggggggggooooooooorrrrrrrrr'
];
var arr2 = [
'rlrlrlrlrrlrlrlrlrllllllllllllllllllllllllllllllllllll',
'rlrlrlrlrrlrlrlrlrylylylylyylylylylyblblblblbblblblblb',
'lrlrrrlrllrlrrrlrllylyyylyllylyyylyllblbbblbllblbbblbl',
'rrrrrrrrrrrrrrrrrryyyyyyyyyyyyyyyyyybbbbbbbbbbbbbbbbbb'
];
var rate = 1;
AnimCube3('id=c1');
AnimCube3('id=c2');
demo('c1', arr1, 0);
demo('c2', arr2, 0);
function demo(id, arr, n) {
acjs_removeListeners[id]();
var params = 'id=' + id + '&facelets=' + arr[n++%arr.length];
AnimCube3(params);
setTimeout(demo, rate*1000, id, arr, n);
}
</script>
</center>
</body>
</html>
I implemented a local copy of your website and got a demo working by doing the following:
In dir src/components, copy AnimCube dir to AnimCubeDemo and modify index.js as shown:
export default function AnimCubeDemo({
params,
facelets,
width = "200px",
height = "219px",
}) {
const id = "animcube_" + useId();
const divRef = useRef();
useEffect(() => {
if (typeof acjs_removeListeners == 'undefined')
window.acjs_removeListeners = [];
var n = 0;
var arr = facelets.split(',');
var p = `id=${id}&${params}`;
demo();
function demo() {
if (acjs_removeListeners[id])
acjs_removeListeners[id]();
AnimCube3(`${p}&facelets=${arr[n++%arr.length]}`);
if (n < 3*arr.length) // # of iterations
setTimeout(demo, 1000); // delay in milliseconds
}
const canvas = divRef.current?.childNodes[0];
if (canvas) {
canvas.style.maxWidth = "100%";
}
}, [params]);
return <div ref={divRef} style={{ width, height, maxWidth: "100%" }} id={id} />;
}
Modify .md file in docs/3x3/Methods as shown, facelets is passed as a separate parameter with multiple strings separated by commas.
import AnimCubeDemo from "@site/src/components/AnimCubeDemo";
<AnimCubeDemo params="buttonbar=0&position=lluuu&scale=6&hint=10&hintborder=1&borderwidth=10" width="400px" height="400px" facelets="ddddydddddwdwwwdwdddddbbdddddddggdddddddoddodddddrrddd,ddddyddddwwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr,yyyyyyyyywwwwwwwwwdbbdbbdbbdggdggdggdddoooooodrrdrrdrr,yyyyyyyyywwwwwwwwwbbbbbbbbbgggggggggooooooooorrrrrrrrr"/>