THE FINISHED APP
An animated 3D Rubik’s Cube in Power Apps.
The fully working Power App app can be download from GitHub.

BACKGROUND
Following on from my previous post on creating a Rubik’s Cube emulator in Power Apps, the next logical step was to have the cube sides animate on rotate. There is a draggable 3D cube in this website – which renders in real-time, but I don’t think this is yet within the realms of Power Apps.

I had the idea of rendering each frame of a side rotating and then switching these frames within Power Apps resulting in the animation. The frame would also need to reflect the colours of the pieces, which would be possible using the same method as for the static cube, i.e., replacing the polygon colours in the SVG with the appropriate piece colour stored in the Collection.

Also, as the sides are rotated the notations are stored in a collection, and then an ‘Unscramble’ button will replay all the moves in reverse resulting in a completed Rubik’s Cube.
The standard notations for Rubik’s Cube movements are taken from this page.

CREATING THE FRAMES
After a bit of searching online – Blender seemed to offer an SVG export feature as an add-on. Downloading and using Blender was a bit alien to me as I’m accustomed to Autodesk Maya and 3D Studio Max. So instead, a trial of Autodesk Maya was installed, and on looking at the render engines available I found that there is one called Maya Vector renderer which is able to export to SVGs – this sounded perfect.

Next, I found a YouTube tutorial and created the Rubik’s Cube in Maya, even though it’s not a particularly complex shape to model. In terms of the colouring of the pieces they each have to be unique so that the colour code can be replaced in Power Apps. This was achieved by using a fixed colour for each side and then lowering the saturation on each piece, so that none of the colours would be repeated. This is the completed model rendered in Maya Vector, and Arnold (the built-in Maya ray tracing renderer)

I decided that 5 frames in the animation steps would be sufficient as this would result in 3 frames between the start and end. Any less wouldn’t look very realistic, and using more might slow down the animation as Power Apps would have to render all of the frames behind the scenes even if they’re not visible.
I won’t go into detail of the process of animating each side move in Autodesk Maya. As a summary the steps are:

1. Group the pieces of the side.
2. Move the rotation pivot point to the centre of the side.
3. Set a keyframe as a start point
4. Move the animation to Frame 5, set the rotation in the required axis to -90 or 90.
5. Set another keyframe.
6. For frames 2-4 render each using Maya Vector and save the SVG.

The SVGs created from Maya weren’t very well formatted, or easy to read. Importing them into Adobe Illustrator and re-exporting them resulting in them being half the file size, and also the SVG colour “styles” being created at the top of the file – which makes things a lot simpler.

The next step is to replace the appropriate piece colour in the SVG file with the Power Apps lookup code for the corresponding side and piece. Through a process of importing the SVG into Power Apps and then changing each style colour to black I was able to create the below spreadsheet with the piece colour and its matching Power Apps code:

The process of searching and replacing the colour codes with the Power Apps codes initially wasn’t straightforward. This page describes how to perform multiple text replacements in in Excel using VBA code.

The final steps for preparing the Maya SVGs for Power Apps are:

1. Open and export from Adobe Illustrator (adding IL to the file name).
2. Replace all double-quotes with single quotes, as this is how they need to be formatted for Power Apps.
3. Using Excel replace the piece colours with the Power Apps code (as above).

POWER APPS
There is not much in the App that is overly complex – I’ll cover anything that might require an explanation on how it works.
Several variables are used in the side animation and the cube unscramble routines. These variables values can be hidden or displayed using the Debug toggle control:

Two timers are used – the first to increment the variable controlling the animation frame displayed, and the second controlling the Unscramble routine.
On Version 1 of the app I’d forgotten to rotate the colours on the actual side of the cube which is being rotated. This has now been fixed.
Image controls including SVG for the Image properties were added for all of the frames of the side move animations. The images Visibility is set by the several variables indicating if an Animation is in progress, the move notation, and the frame of the animation.

FINAL THOUGHTS
It would be great to be able to render the Rubik’s cube in real time in 3D. This may be possible by creating an SVG on the fly to draw lines and polygons. I’m not sure if this could be done in Power Apps but I like a challenge 😊.

Photo by Fakurian Design on Unsplash

BACKGROUND
Is it possible to create a Rubiks Cuber emulator in Power Apps?

Recently a Twitter post from Mr Dang piqued my interest.  It was a retweet of a tweet which showed an Excel spreadsheet with a 3D Rubiks Cube which could be rotated by using buttons around the cube.  I had been looking for a new idea for a new Power Apps project and this looked ideal.

When I was about 10, I became interested in the Rubiks Cube, and spent many hours learning how to solve it in under a minute, and amazed anyone who was willing to watch me do it.  

TERMINOLOGY
These are the terms used when referencing the parts of a Rubiks Cube:
Cube – the whole cube.
Face – a single face, or side of the cube.
Piece – a single piece on a face, which can be one of six colours.

APP/CODE
The “code” snippets in this post will be minimal as the full working App is in Github here. 

INITIAL THOUGHTS
Ideally, the goal was to create a fully 3D rendered cube which could be rotated, and the sides moved by dragging – as here. I believe this is beyond what Power Apps can do – for now..
I wanted to use as much Power Apps core functionality as I could in the App, to display, store, and move the faces.  To store the piece colours the plan was to use Collections but was unsure if the performance would be adequate – turns out it was no issue.

FIRST STEPS CREATING THE APP
Created a ‘Reset Cube’ button and code in the OnSelect to create a Collection to store the 6 faces and 9 piece colours. Also, a gallery to display the Collection data on screen.

// Create new collection and create Face 1
ClearCollect (
	CubeColours,
	{
		FaceNumber: 1,
		Piece1: 1,
		Piece2: 1,
		Piece3: 1,
		Piece4: 1,
		Piece5: 1,
		Piece6: 1,
		Piece7: 1,
		Piece8: 1,
		Piece9: 1
	}
);
// Append Face 2
Collect (
	CubeColours,
	{
		FaceNumber: 2,
		Piece1: 2,
		Piece2: 2,
etc.

Added 9 Text boxes for each of the 3 visible cube sides, and a Lookup in each Text box to show the text value from the Collection:

So far so good – we can see the values of all the pieces, and the 3 cube sides on screen (although not in a very user friendly format).

ADDING COLOUR
A Collection was created to store the colour numbers 1 to 6 with their corresponding HTML colour values. The below code was put into the ‘Reset Cube’ button for ease.

ClearCollect (
    TemplateColours,
    {
        ColourNumber: 1,
        ColourValue: "#00FF00"// Green
    },
    {
        ColourNumber: 2,
        ColourValue: "#FF0000"// Red
    },
    {
        ColourNumber: 3,
        ColourValue: "#FFFFFF"// White
    },
    {
        ColourNumber: 4,
        ColourValue: "#FF8040"// Orange
    },
    {
        ColourNumber: 5,
        ColourValue: "#FFFF00"// Yellow
    },
    {
        ColourNumber: 6,
        ColourValue: "#0000FF"// Blue
    }
);

The cube text boxes Text values were all set to “” (Blank) to clear them, and then the Fill property was changed as below to lookup the correct colour from the Collection:

ColorValue(
    LookUp(
        TemplateColours,
        ColourNumber = LookUp(
            CubeColours,
            FaceNumber = 1,
            Piece1
        ),
        ColourValue
   )

Resulting in coloured squares as below!

Adding the feature to turn the cube sides turned out to be one of the most difficult parts of this App. Once I’d drawn a sketch of the cube on paper it was a lot simpler:

This is the code to rotate the top side anti-clockwise. The code for the rest of the sides are slight variations on this.

// Store 1
Set(TempPiece1,LookUp( CubeColours, FaceNumber = 1, Piece1));
Set(TempPiece2,LookUp( CubeColours, FaceNumber = 1, Piece2));
Set(TempPiece3,LookUp( CubeColours, FaceNumber = 1, Piece3));

// Patch 1 from 4
ClearCollect(TempCubeColours, First(Filter(CubeColours,FaceNumber=4)));
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=1)),
    {Piece1:First(TempCubeColours).Piece1,
        Piece2:First(TempCubeColours).Piece2, 
        Piece3:First(TempCubeColours).Piece3});

// Patch 4 from 6
ClearCollect(TempCubeColours, First(Filter(CubeColours,FaceNumber=6)));
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=4)),
    {Piece1:First(TempCubeColours).Piece1,
        Piece2:First(TempCubeColours).Piece2, 
        Piece3:First(TempCubeColours).Piece3});

// Patch 6 from 2
ClearCollect(TempCubeColours, First(Filter(CubeColours,FaceNumber=2)));
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=6)),
    {Piece1:First(TempCubeColours).Piece1,
        Piece2:First(TempCubeColours).Piece2, 
        Piece3:First(TempCubeColours).Piece3});

// Patch 2 from 1 (Stored)
Patch(CubeColours,First(Filter(CubeColours,FaceNumber=2)),
    {Piece1:TempPiece1,
        Piece2:TempPiece2, 
        Piece3:TempPiece3});

So, finally there is a fully working Cube which can be used, although it needs a bit of work to make it 3D.

3D CUBE
Initially I thought this would take a lot of time. There are no polygons in standard controls in Power Apps so consideration was given to each piece being made of one or more SVGs. An SVG is a scalable vector image file. For further information see Wikipedia and Matthew Devaneys blog post.

After a bit of searching online I found the perfect answer – a ready made Rubiks Cube in SVG format where I could modify the piece colours using Power Apps code. This is how the original SVG looks:

From here it was quite straightforward to change the SVG string and replace any piece colours using Lookups on the collection. I’m no expert in SVG but was able to work out that each piece polygon is a separate section in the SVG file, and has a corresponding colour value in it – see below.

By changing a colour to yellow I could see where it was on the cube as Power Apps renders SVGs in real time. Then I would simply put the lookup for the piece in the SVG code section – as below in Power Apps:

FINAL STEPS
Once this was complete proper buttons to rotate the cube were created (using SVGs from Bootstrap Icons).
Also a view of the reverse of the cube was created. This was simply a copy of the SVG, using the same technique as above mapping each piece in the SVG to it’s corresponding piece on the reverse of the cube. It took a bit of thinking to view the cube in reverse, and I ended up using a Rubiks Cube box and writing the piece numbers on it.

THE FINISHED APP
Here is the completed app in action:

FUTURE ENHANCEMENTS
These are some possible enhancements I’ll likely work on in the next version:
1. Animating the faces as they move. Possibly using Blender to create a 3D cube (I have experience in 3D modelling and rendering – see my Stills and Videos). Exporting each frame to SVG, adding piece colours, and then displaying it in Power Apps. There is quite a lot of work involved with this, and I’m unsure how feasible it will be to do in real time in Power Apps.
2. Solving a cube from a scrambled state. It’s unclear how this would be done but will enjoy investigating it.
3. Using a physical cube connected to the app. There is a bluetooth cube available from here. (Thanks to Andrew Rimell for spotting this).

FINAL THOUGHTS
I’m very excited for the future of Power Apps – it really is limited only by your imagination. I hope you enjoyed reading this, and look forward to any comments.

Cover Photo by Jadson Thomas from Pexels