Customizing our Rubik dice
The opposite week I revealed a chunk on constructing a Rubik cube using SceneKit and SwiftUI. I stated in that article it wasn’t completed. A completion I spend some days attending to work over the next week. That is half two of that work.
Partly considered one of this paper, I described the fundamental construct, the digital camera views, and a method to implement the gestures wanted to alter the orientation of the faces. On this paper, I look into making the dice transfer in the identical approach as an actual one would.
- I wish to make my dice transfer like a Rubik dice, tilting the whole facet as I realign the faces.
- I would like to have the ability to scramble my dice with the shake of the system and certainly reset it in an excellent world.
This wasn’t simple. It was a problem as a result of the cubes in query must rotate as an entire in teams of 9 — linked to multiple heart, relying on which edge you need to flip. There are three edges on a typical 54 field dice on every nook, so you bought not less than 48 instructions it’s good to take into consideration.
Now rotating a node round single edge is easy — you need to use the identical method as I did with the digital camera. I hyperlink all of the nodes to the middle one which I then rotate. So code like this. Code that may construct a part of one facet of my Rubik.
let centerCube = addBox(xAxis: 0, yAxis: 0, zAxis: 0)
greenCube = addColorBox(xAxis: 1, yAxis: -1, zAxis: 0, colour:UIColor.inexperienced)
whiteCube = addColorBox(xAxis: 1, yAxis: 1, zAxis: 0, colour:UIColor.white)
redCube = addColorBox(xAxis: -1, yAxis: 1, zAxis: 0, colour:UIColor.purple)
blueCube = addColorBox(xAxis: -1, yAxis: -1, zAxis: 0, colour:UIColor.blue)
centerCube.addChildNode(whiteCube)
centerCube.addChildNode(greenCube)
centerCube.addChildNode(redCube)
centerCube.addChildNode(blueCube)
Nonetheless, the true problem is illustrated by the animated GIF of a subset of wireframe cubes.
Watch the white dice journey throughout three plains, across the purple heart nodes within the Rubik dice. The issue is, in essence, that utilizing the code I’ve proven, the dice is certain to a single course. A major drawback since, as you see, it wants to maneuver in three fairly totally different planes. Now I’m certain if I had a Ph.D. in arithmetic, I may have give you an attractive components to do that — however my math is remotely nearly as good as that.
As I stated within the first paper, this did require some out of field pondering. I solved it by creating shadow constructions that I’ll illustrate on this GIF. Every plain had a shadow set of cubes, represented by wireframes on this animated GIF. For those who have a look at look intently, you’ll see the frames — A white one, a purple one and a inexperienced one.
However there may be, I confess, yet one more complication right here. Since I’ve to checklist all of the nodes in the whole scene to search out the shadows, I wanted the means to differentiate between shadows and cubes. A complication I solved by subclassing SCNNode with this code.
You’ll be able to see the outcome right here, this time I stuffed the cubes with some colours. The middle cubes multi-colored.
Deal with the white dice. You see it follows the identical path I confirmed earlier. However wait — can you notice the trick with the wireframes. It isn’t simple to see I confess.
I’ve for either side created shadow variations of the nodes. Once I click on on the rotate button, it runs a SCNAction that rotates the wireframe. Synchronizing the positions of the bins contained inside these wireframes because it does so.
Therefore I depart all the maths to the SceneView framework, accurately. I run a second customized SCNAction in parallel to do the work. The code for these appears like this.
The Value
That achieved, I found it could be far tougher to make use of gestures, a activity I made a decision to cowl in a 3rd paper.
Bon, implementing the final a part of this problem I did with my eyes closed. To make this work, I created a subscription to which I hooked up the calls to maneuver the dice in a single course or one other.
All of which brings me to the tip of this text. I hope you discovered it as pleasurable to learn as I did to jot down. I plan to proceed investigating writing video games on SceneKit over the approaching week. Subscribe to medium and observe me to get extra updates on my adventures with SceneKit and certainly the ultimate replace on the Rubik problem.
