Is there any way for me to interact with the cube programatically?

[jerpint]

Hello!

I would like to use a cube on my page and interact with it programatically. The goal is to implement algorithms to solve the cube such that any user could scramble the cube and then my solver would solve it.

My question is:

1) how can I access the state of the cube at any given moment? 2) How can I move the cube using code?

My page currently looks like this:

    <div class="cube" style="width:160px; height:179px">
     <script>AnimCube2()</script>
    </div>

I'd like to somehow access the state of the cube using something like cube.state() and then act on the state, for example some pseudo code:

state = cube.state()
next_move = solver(cube.state())
move_cube(next_move)

Any help is appreciated :)

[lgarron]

cubing.js is meant to address those kinds of use cases.

Do you have a particular application in mind?

What you're describing can be done like this: https://codepen.io/lgarron/pen/oNezavJ?editors=0010

import { randomScrambleForEvent } from "cubing/scramble";
import { experimentalSolve3x3x3IgnoringCenters } from "cubing/search";
import { TwistyPlayer } from "cubing/twisty";

(async () => {
  const player = document.body.appendChild(
    new TwistyPlayer({
      alg: await randomScrambleForEvent("333"),
    }),
  );
  const state = await player.experimentalModel.currentTransformationProp.get();
  const solution = await experimentalSolve3x3x3IgnoringCenters(state);
  solution.log();

  const currentAlg = (await player.experimentalModel.algProp.get()).alg;
  player.timestamp = (
    await player.experimentalModel.detailedTimelineInfoProp.get()
  ).timestamp;
  player.alg = currentAlg.concat(solution);
})();

As you can see, a lot of the functionality is still experimental. But that's because we're trying to figure out exactly what apps need! Are you looking for particular functionality beyond what you asked for?

[jerpint]

Hey, thanks, but what I would like is for the user to interact and move the cube dynamically, which I don't think can be done in the example you sent?

[jerpint]

I would also like to somehow translate the state as the actual state of the cube as an array, e.g. for a NxN cube I would get a NxNx6 array with the color index at each point of the array

[lgarron]

Hey, thanks, but what I would like is for the user to interact and move the cube dynamically, which I don't think can be done in the example you sent?

Ah, I see. That's definitely possible; we do it in Twizzle Explorer: https://alpha.twizzle.net/explore/?puzzle=3x3x3

But it'll be at least a few months until that becomes more convenient. (Unless you'd like to contribute canvas input code sooner. That would definitely be welcome!)

I would also like to somehow translate the state as the actual state of the cube as an array, e.g. for a NxN cube I would get a NxNx6 array with the color index at each point of the array

cubing.js could definitely help with that! You can see such a translation in action at https://experiments.cubing.net/cubing.js/3x3x3-formats/

If AnimCubeJS works for you then it might be worth sticking with it for now. But we do aim for cubing.js to subsume all AnimCubeJS functionality, so I'd encourage considering it in the long term.

[bcube2]

Hi jerpint,

although I can not solve your problem, at least I can point you to the right sources.

You can interact with the cube programatically for sure, check out the Interactive section (you could also find the Solving Demos section useful) at https://mfeather1.github.io/3ColorCube/idx.html by Michael Feather.

More examples have been recently added to the Enhancement section at https://cubing.github.io/AnimCubeJS/animcubejs.html#enhancement, read the "More advanced use of JavaScript [...]" paragraph.

[bcube2]

Closing, because:

1. a demonstrative solution is outlined in the previous post, and
2. there have not been any new posts in more than 1 year