Editing the cube colours

[GameEntity903]

Goal

I'd like to able to edit the colours of each piece on a cube so that I can change the cube to fit my requirements in case I do not have it in scrambled form.

Possible solution

No idea exactly how to do it, but one way I have seen it done is [(https://rubiks-cube-solver.com/)]

Alternatives

No response

[lgarron]

Could you describe your use case in more detail? Are you just looking for a way for people to "paint" a scramble, or something else? Do you want an interface for interacting with the cube, or are you expecting it to work directly in the player? Do you just need in 2D? For specific puzzles, or any puzzle?

How close does https://experiments.cubing.net/cubing.js/svg-state-editor/ get to the UI you need?

[GameEntity903]

Painting would be a more correct term, yes. As to how close it is to the experiments thing, the UI should allow you to individually change the colours rather than just swapping pieces or twisting. Or another input option could be as "painting" it as it is slightly confusing to do it by swapping. The main reason why I'm saying so is because sometimes I just like to do a scramble without looking at an algorithm and if I want to get that scramble in an algorithm way, then its kinda a hassle for me right now.

[rokicki]

So do you want to be able to paint an illegal position or unusual colors on the cube? For instance, do you want to be able to paint two different Red-Green-Yellow corners?

-tom

On Fri, Nov 4, 2022 at 9:23 AM GameEntity903 @.***> wrote:

Painting would be a more correct term, yes. As to how close it is to the experiments thing, the UI should allow you to individually change the colours rather than just swapping pieces or twisting. Or another input option could be as "painting" it as it is slightly confusing to do it by swapping. The main reason why I'm saying so is because sometimes I just like to do a scramble without looking at an algorithm and if I want to get that scramble in an algorithm way, then its kinda a hassle for me right now.

— Reply to this email directly, view it on GitHub https://github.com/cubing/cubing.js/issues/242#issuecomment-1303834113, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAMOLS35YHOIMBQDUV7SLMTWGU2BLANCNFSM6AAAAAARVJZN3I . You are receiving this because you are subscribed to this thread.Message ID: @.***>

--

• https://cube20.org/ http://cube20.org/ - https://golly.sf.net/ http://golly.sf.net/ - https://experiments.cubing.net/ -

[GameEntity903]

Oh yeah, I forgot to mention that after you hit confirm, it should show an error message of there are excess of any colour/illegal pieces like Yellow-White edge or Green-Blue-White corner.

[GameEntity903]

And after you hit confirm, it should generate an algorithm to generate that state of the cube. I know this is a lot to code in but it certainly would be useful.

[lgarron]

Alright, that sounds like we would need:

1. A custom element that allows painting individual face colors onto the SVG. (Ideally, in addition to ACube.js-like manipulations.
2. An algorithm that maps a partially painted puzzle onto an "actual" state mask.
3. A way to search the state mask for a solution.

We're pretty close to 3. thanks to twsearch, although that might take a few more weeks. I agree that 1. and 2. are useful, and we can keep this issue open for those. I can't promise a particular timeline on when we might implement those, though.

[luckasRanarison]

Hi, first thanks for this awesome library. Are there any updates on this? I also want something similar to this feature and https://experiments.cubing.net/cubing.js/svg-pattern-editor/ already looks good enough for the task, are there ways to use it now? Or is there a way to generate a TwistyPlayer state from some kind of representation instead of a scramble so I can make the editing frontend myself?

[lgarron]

Are there any updates on this?

We now have features that cover some use cases, but nothing general.

I also want something similar to this feature and https://experiments.cubing.net/cubing.js/svg-pattern-editor/ already looks good enough for the task, are there ways to use it now?

It depends on your use case. In theory you could reuse the code in an app, but I wouldn't recommend it.

Or is there a way to generate a TwistyPlayer state from some kind of representation instead of a scramble so I can make the editing frontend myself?

If the state can be obtainer from a KTransformation (not necessarily valid on a real-world 3x3x3), you can specify it by setting the experimental setupTransformation prop on the model:

import { KTransformation } from "cubing/kpuzzle";
import { cube3x3x3 } from "cubing/puzzles";
import { TwistyPlayer } from "cubing/twisty";

const player = document.body.appendChild(new TwistyPlayer());

const kpuzzle = await cube3x3x3.kpuzzle();
const newTransformation = new KTransformation(kpuzzle, {
  EDGES: {
    permutation: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
    orientationDelta: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  },
  CORNERS: {
    permutation: [3, 1, 2, 0, 4, 5, 6, 7], // Swap ULF and UFR
    orientationDelta: [0, 0, 0, 0, 0, 0, 0, 0],
  },
  CENTERS: {
    permutation: [0, 1, 2, 3, 4, 5],
    orientationDelta: [0, 0, 0, 0, 0, 0],
  },
});

player.experimentalModel.setupTransformation.set(newTransformation);

[lgarron]

Some day, we'll almost certainly have a way to set a KState as the anchor state.

If someone would like to contribute code for that, I think it would be relatively safe to add something similar to setupTransformation. You'd have to make sure the anchor state gets used as an input to https://github.com/cubing/cubing.js/blob/f7f5574f5cdf5937681b09c9381604ef0fc8879e/src/cubing/twisty/model/props/puzzle/state/IndexerProp.ts#L7-L11 and used by all the indexers. I can write out more details if that would help.

Note that this still wouldn't support arbitrary colorings of the stickers, though. (That is a much bigger API design challenge.)