PUBLICATION

The poly cube (PC) and poly ball puzzles (PB) have been created and published in 2015 at the Musée Suisse du Jeu in la Tour de Peiltz (next Vevey on the lake Geneva in Switzerland).  Prototype wood models have been presented during this conference.  As the prize of the puzzles would be prohibitive in form of wooden puzzles, we have virtualized the puzzles using WEBGL (web graphic language), JAVASCRIPT and SVG (scalable vector graphics).  This choice has the advantage that these scripted programming languages are widely standardized and run on most modern internet browsers.  The puzzles are thus highly transportable and run on all personal computers or mobile phone devices.  The individual program files can indeed be copy - pasted to any such device and opened off-line with any of the tested browsers (the MS internet explorer, however, distorts the objects in VR mode).  No APP is thus used. Any text editor such as the Microsoft Notepad used in UTF-8 mode can be used to open the program files.  Likewise any browser can of course also be used by selecting view source after a right mouse click on the opened programming page.  I am personal still using MS FrontPage to do all my coding along with the developers version of the Firefox browser which provides a WEB console for debugging. . No include files have been used in order to provide a full transparence of the code used for students.  Comments have sporadically been included, although not in a systematic educational fashion.

This work was undertaken as an working example of the excellent book WebGL Programming Guide, by K. Matsuda and R. Lea, 2015, Adison-Wesley, ISBN 978-0-321-90292-4.  These puzzles can be used as a computer based training method for improving the three dimensional comprehension, a faculty which is of great importance for pupils of natural sciences, technology and engineering, architects and many more.  I am personally a physical chemist and know well of the meritse to have a 3D mental vision!

Two types of three dimensional puzzles are treated here, poly cube and poly ball puzzles, as described in the mentioned publication. The puzzles are built up of assemblies of individual clusters going from monomers to pentamers in case of the poly cube puzzles, and from monomers to tetramers in case of the poly ball puzzles.   Various assemblies of the poly cube clusters allow to build up 2x2x2  to 6x6x6 edged poly cubes.   The poly cube puzzles are far simpler in principle and should be studied first as there is a direct match between the orthogonal system of the computer screen and the orthogonal system of the coordinates of a poly cube. The right handed orthogonal system of the computer screen consists of the x-axis growing from left to right in the horizontal direction, the y-axis growing from bottom to top in the vertical direction and the z-axis growing from the computer screen to the viewer, thus forming a right handed orthogonal coordinate system.  The 2x2x2 poly cubes are trivial to assemble but should be looked at in spite of this, as they are well suited to get familiarized with the graphical user interface and the translations (movements in z-, y-, and x- direction) and rotations (about the object based z-, y-, and x- axis) of the individual clusters.  They also permit to illustrate the difference of a particular physical solution, say built up of wooden poly cube clusters and virtualized equivalent in a computer. In the latter every constituting monomer cube has its own identity, coordinates and spatial rotations, which translate in to different model matrices and differences in the files of stored solutions. The 3x3x3 poly cubes are easy puzzles too, including the famous soma poly cube puzzle invented by Piet Hein.  The larger poly cubes are more challenging to find solutions and th 5x5x5 cube, as defined here, may well be one of the most difficult to solve puzzle ever introduced.  Indeed I worked during two solid month to find a single solution! The 6x6x6 cube is easier again as it contains small clusters. 

 

Exercises on poly cube assemblies and looking at the multiplicity of solutions with computer  virtualizations.

Lets first do some exercises using poly cube assemblies as the three dimensional coordinate system of these puzzles is orthogonal and is thus far simpler as for the poly balls.  There are several goals of these initial exercises: to familiarize with the graphical user interface,  to learn how to translate (move clusters around in space) and rotate (rotate clusters around their z-, y-, and x-axis), how to see the scene from different directions (tilt the view or rotate it around the world y- axis in 45 degree steps), how to store solutions in order to repeatedly save the progress when working up a solution, how to call up a programmed solution and how to map a final solution.  Several small, 2x2x2 or 3x3x3  poly cubes have been prepared for these exercises and the should help to familiarize the user with the different clusters of growing complexity going from a single cube over linear, to flat (PC_1F, PC_2F, PC_3F, PC_4F, PC_5F and PB_1F, PB_2F, PB_3F, PB_4F) to three dimensional (PC_4T,  PC_5T and PB_4T)    and finally to raceme pairs (PC_4R, PC_5R and PB_4R) (mirror images of three dimensional poly cube or poly ball assemblies which do not have an internal mirror plane - have a look on your left and right hand: they form a raceme pair).  The nomenclature used of the poly cube (PC) and poly ball (PB) clusters is indicated in brackets.  These exercises should most importantly train the student to learn to comprehend the three dimensional structure of the clusters and their interaction in space

The poly cubes are built up layer by layer starting with the lowest layer on the monitor in x- and y- direction.  Each additional layer is added in the z-direction towards the viewer.  When a finished poly cube is mapped by clicking ALIGN and then typing MAP into the File Text field and clicking the canvas ( or alternatively by typing PLAN into the File text field and clicking the canvas and then typing MAP into the File text field and clicking the canvas). In the mapped solution the different layers are also shown starting with the bottom layer going in direction to the viewer to the top layer. The finished cube is thus shown on the monitor by looking from top down onto the cube standing on the monitor.  It can be tilted down and up by repeatedly clicking Tilt , thus turning the assembly around the x-axis of the monitor. The assembly can also turned by - 90, - 45, + 45 or + 90 (degrees) around the y-axis of the monitor (world axis rotations). The first cube, of the first cluster listed in each puzzle, is shown in red in order to facilitate the orientation.  Whenever a cluster is selected / activated for translation or rotation operations, it is shown in green:  the first cube in intensive green, the second cube in blue green and the remaining cubes in light green.  This sequence of coloring helps to keep the spatial orientation for rotating operations about the z-, x- and x-axis of the chosen poly cube cluster (model axis rotations). All necessary rotations of poly cube clusters are limited to + or - 90 degrees, or  180 degrees rotations abound the model z, or y, or x-axis. The following simple poly cubes have been designed for the tutorial in order to become familiarized with the more complicated three dimensional clusters. All of the possible clusters to pentamers, including some doubles (...bis), are listed when clicking the HELP button. 

WEBGL_PC_2x2x2
WEBGL_PC_2x2x2a_cl8
WEBGL_PC_2x2x2b_cl4_11
WEBGL_PC_2x2x2c_cl10
WEBGL_PC_2x2x2d_cl11
WEBGL_PC_2x2x2e_cl12
WEBGL_PC_2x2x2f_cl26
WEBGL_PC_3x3x3
WEBGL_PC_3x3x3a_cl30_31_33_34
WEBGL_PC_3x3x3b_cl30_31_32_35
WEBGL_PC_3x3x3c_cl18_19_22_24
WEBGL_PC_3x3x3d_cl31_37_38_39
WEBGL_PC_3x3x3e_cl36_39_40_41
WEBGL_PC_3x3x3f_cl25_27_28_29_32
WEBGL_PC_3x3x3Soma

Let us start with the 2x2x2 poly cube puzzles.  First a word on the notation: PC stands as mentioned for poly cubes, PC_2x2x2 indicates shat the assembled poly cube will measure two cubes each, in the x-, y- and z-direction of the model coordinate system; cl followed by a number, finally, indicates the particular cluster(s) treated in the example. It is important to realize that there is a major difference between physical, say wooden or plastic, poly cube assemblies and virtualized equivalents on a computer.  Positions matter in the computer version and different positions for one and the same solution can be mistaken as different solutions, as each position has its own particular model matrix describing the assembly of clusters.  Lets have a look at the following examples WEBGL_PC_2x2x2f_cl26, WEBGL_PC_2x2x2c_cl10, WEBGL_PC_2x2x2d_cl11, and WEBGL_PC_2x2x2e_cl12, which each permit only one solution.  Each of these puzzles has indeed 24 positions:  each of the 2x2x2 cubes can be positioned on 6 different surfaces (start, top, left, right, front and back face).  In addition each of these 6 positions the 2x2x2 cube can be turned into 4 different positions by turning the assembly by 0, 90, 180, or 270 degrees about the z-axis (note object turning is around the z- axis as the monitor is treated as the floor on which the solution is built up).

Right click and open in a new tab the puzzle WEBGL_PC_2x2x2f_cl26 .  The scroller to the right of the button called Block, will show a 1 after the first opening.  Change it to S=Sol. and move the mouse over the canvas - the clusters will jump into the unique solution of this puzzle.  Now click the button Align, then type MAP into the text filed next to File and then click the canvas.  A mapping of the solution will appear below the control buttons followed by a listing of the solution. Each cluster is listed with the model coordinates for each of its constituting cube, along with the x-, y-, z- rotations of the listed cluster. Note, the mapping is done layer by layer in horizontal x- and vertical y- direction, for z- = 0, z- = 1, and so on,  where the z- direction increases in direction of the viewer looking at the monitor. Now have a look at the content of the above mentioned scroller. The 24 possible positions of the unique solution to this puzzle are listed in the order of the initial solution S, followed by flipping to the right, left, front, back and top, with interleaved turns by 90 degrees clock wise to 90, 180, and 270 degrees.  Choose some positions and observe the 2x2x2 cube by selecting the clusters and turning / tilting about the world coordinates.  Also observe the different mappings by clicking Align and typing MAP into the text field.  As an exercise write out a mapping and try to reproduce some flips and turns of various positions of the single solution.  Always click the Erase ->  Store  ->  Text buttons in this order and observe the typed out text field which represents the repositioned solution of the puzzle.
 

Things get far more complicated with the seemingly very simple puzzle WEBGL_PC_2x2x2a_cl8, which combines twice the cyclic flat tetramer piece.  Looking at a solid wooden model, only one solution seems to be possible to form a 2x2x2 poly cube.  This object can then be flipped and turned as in the case discussed above.  Things are indeed far more complicated, as the constituting cubes of the tetramer clusters are numbered from 1 through 4, a fact which destroys the four fold symmetry of the clusters.  In a virtualized model using matrix calculus the numbering is of course essential.  Our clusters are checkered black and white, which reduces the symmetry of the clusters.  Only two of the possible four relative positions are valid, therefore,  to create a solution when turning one cluster against the other one around its four fold symmetry axis.  Either one of the two clusters can, however be flipped by 180 degrees about the x- or y- axis, which inverts the numbering from counter clockwise to clockwise.  We thus land up with 8 and not 2 possible solutions in the virtualized model.  All of the 8 solutions have been included in the bottom of the scroller listing.  You may note, that sometimes rotating the clusters around the four-fold axis seems impossible due to gyro-locking.  In this case flip the cluster by 90 degrees about the z- or y- axis, then turn it around the four-fold axis and finally flip it back in reversed direction around the z- or y-axis.

The non flat, three dimensional (WEBGL_PC_2x2x2c_cl10), the racemic ( WEBGL_PC_2x2x2d_cl11 and WEBGL_PC_2x2x2e_cl12 ) tertramers and only the clusters 25 and 26 ( WEBGL_PC_2x2x2f_cl26 ) of all pentamers can be used to build a 2x2x2 poly cube.  Two clusters 10 can be fitted to a 2x2x2 cube, but one cluster must have an inverted coloring pattern. The racemic pair of cluster 11 plus cluster 12 can not be assembled to a 2x2x2 cube.   However, for both of these clusters an identical pair each, can be used. Please note that the resulting 2x2x2 cubes of WEBGL_PC_2x2x2d_cl11 and WEBGL_PC_2x2x2e_cl12 form again a racemic pair and are thus mutual mirror images.

Several 3x3x3 poly cube puzzles have been prepared in order permit to test the individual three dimensional pentamer clusters, along with some of the flat pieces which have few internal symmetry elements. The famous Soma cube of Piet Hein has also been included here. The 3x3x3 poly cube puzzles are excellent exercises to learn how to solve virtualized poly cube and poly ball puzzles.   It is of course important to be able to save the progress while trying to solve a puzzle. Two local storage client-side data storage techniques have been included in the puzzles.  SessionStorage with the use of the document object model (DOM) has the advantage that it can be used while off line of the internet.  It is limited, however, by the fact that the same browser must be used to store and to retrieve the session.  A name can be given to the stored data so that various progress stages can be saved and retrieved.  The buttons labeled Store, Load, Text and Erase as well as the text field labeled File have been introduced for this purpose.  As an exercise load WEBGL_PC_3x3x3 then select S=Sol. in the scroller and move the curser over the canvas and whatch the solution jumping in.  Now click the upper right cube and move the curser pulling out cluster 6, click again to drop the cluster and click Store. Now refresh the browser, or  if present, click one of the separating lines ------ in the scroller, to load the initial presentation of non-assembled clusters and then click Load. Note that in this case no file name has been specified and the the session is stored under the "empty character"  name.  If you click Text you obtain an unparsed text string representing the state of the puzzle, in form of the object model matrix stack in JASON (JAva Script Object Notation).  This text string can then be copied and pasted into a pure text editor such as the Microsoft NOTEPAD.   With this we come to the second storage technique used which is less volatile and browser dependent than the described session storage in the DOM model.  Save the unchanged NOTEPAD content under a chosen file name in your folder system of your computer of phone.  Again refresh the browser to load the initial presentation of non-assembled clusters, and Browse... button following the sentence Import text file: and scroll in the before saved text file and move the cursor over the canvas to have your stored solution jump in.

Coming back to our discussion of the difference between solutions and positions for the 2x2x2 cube WEBGL_PC_2x2x2a_cl8 , one finds an analysis in the internet that shows that there are 240 solutions for the well known 3x3x3 Soma cube WEBGL_PC_3x3x3Soma of Piet Hein (http://puzzler.sourceforge.net/docs/polycubes.html  and http://puzzler.sourceforge.net/solutions/cubes/soma-3x3x3.txt  ).  On the other hand one finds a note in http://mathworld.wolfram.com/SomaCube.html stating that there are 1'105'920 solutions according to symmetry considerations.  In this latter case, it is clear, that solutions and positions are counted up.  For the Soma cube two solutions have been programmed in and can be selected in the scroller, next to the button Block.  The Soma cube is an excellent example to get familiarized with the user interface. In view of the existing 240 solutions existing, it is not a very difficult puzzle.  Go through the list of the 3x3x3 poly cube puzzles to get acquainted with the various three dimensional and racemic clusters:  WEBGL_PC_3x3x3WEBGL_PC_3x3x3a_cl30_31_33_34WEBGL_PC_3x3x3b_cl30_31_32_35WEBGL_PC_3x3x3c_cl18_19_22_24,   WEBGL_PC_3x3x3d_cl31_37_38_39WEBGL_PC_3x3x3e_cl36_39_40_41WEBGL_PC_3x3x3f_cl25_27_28_29_32WEBGL_PC_3x3x3Soma.

 

Cluster definitions and the order of rotations around Z-, then Y-, and lastly X-axsis

The geometrical framework is much more complex for poly ball puzzles as for poly cube ones. The present poly ball puzzles are built up in the cubic densest ball packing having layers in the sequence of abcabc... in a trigonal coordinate system. The angles between the x-, y- and z- axis are 60 degrees. In the following diagram the arrangement of the balls are illustrated showing the positions as a function of the coordinates x, y and z.  Light solid lines show balls in the plane of z=0 (layer a), while bold lines indicate balls with Z =+1 (layer b) and dotted ones with z=-1 (layer c). With poly cubes all coordinates of placed clusters remain in an orthogonal system aligned to the computer monitor axis x, y and z and thus all coordinates remain integers and all angles are multiples of 90 degrees.  Neither of these advantages remain with poly ball puzzles where all coordinates need constantly to be translated between the orthogonal and the trigonal axis in a vice versa manner.  A closer analysis shows that the rotation angles of the clusters are very complex indeed.  An additional complication stems from the fact that the clusters can have both trigonal (multiples of 30 degrees) and cubic angles (multiples of 90 degrees). The linear pieces, for instance, are members of both systems.   Examples of cubic clusters are 6, 10, 14, 17, 15 and others.   Examples with cubic and trigonal angles are for instance the racemic pairs 26 and 27, or 28 and 29.  The following table gives the conversion factors from the orthogonal coordinates X, Y and Z  to the trigonal ones  nx, ny and nz, and from the trigonal to the orthogonal ones, respectively.  Those interested in the JAVA Script programming can have a look at the function Align_keydown(ev, gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix) on lines 2260 to 2305, where these conversions are used, in the code of the puzzle WEBGL_PB_4x4x4, which you can see by right click outside of the canvas and View Page Source.  They are furthermore used in the function trigCoordinatesParser() on lines 3612 to 3646.

All poly ball clusters are defined with the first ball at 000 (x=0, y=0, z=0) and the second ball always at 100 (x=1, y=0, z=0).   This system results in a privileged importance of the z- and y- coordinates of the second ball, which defines the orientation of the cluster in the trigonal coordinate system.  Once placed in this way, the cluster can then be turned about the x-axis only, in order to place all of the balls of a given cluster in the cubic densest ball packing.  We discovered, that by inverting the rotation sequence from x, y, z to z, y, x in the application of the rotation matrix to the object model matrix, we indeed arrive at a decoupling of the x-axis rotation from the status of the previously done rotations about the z-, and the y-axis.  With other words, when not following this convention in the definition of the clusters, the rotations of x and y, and of x and z are coupled which means that the y and z angles are also changed when rotating around the x-axis. These considerations are important for the manner of how to solve a puzzle:  one should keep in mind to first correctly place the initial two balls (colored bright green and bluish green) by turning first around z and then around y. Only after correctly placing the initial two balls correctly in the crystal lattice by clicking Align should one proceed to turn the cluster around the object x-axis in order to place and Align the rest of the cluster in the lattice.

The following figure shows a diagram of the cubic densest ball packing and lists all possible trigonal and cubic angles for turning clusters in the x-y surface. 60 degree angles are applied when placing the second  ball in the z=1 or z=-1 surface.  These angles are further modified when going into the third dimension by the tetraeder angles between edges and adjacent surfaces (54.74 degrees) and between neighboring surfaces (70.53 degrees).  The latter angles come into play when rotating the reminder of the cluster into the cubic densest crystal lattice by turning about the object axis x.  Puzzle solutions for all clusters presented in 3x3x3, 4x4x4 and 5x5x5 poly ball pyramids, have been modified by a systematic change of the pyramid positions to test all resulting angles and the predominant angles are given in red in the table below the diagram.  As the exact angles of rotations are essential to be able to build up the cubic densest ball packing, a mechanism has been programmed, which allows to snap approximate angles into the sharply defined correct angles by pressing the button Align. Only when the first two balls are correctly placed in the trigonal lattice, one changes over to turning around x - axis by clicking the z>x button, which then changes to x>z, now allowing to turn the cluster around the x-axis.  When the angles are far from the allowed trigonal angles leading to coordinates which are not allowed in the cubic densest ball packing a warning alert appears, such as  "1 Bad trigonal orientation dX=0.5 dY=0 dZ=1 of Clust._5"  .  The trials are counted from 1 to 3, and after the third bad trial the y- and z- rotations are reset to 0 degrees. Those interested in the JAVA Script programming, can find this Align mechanism in function drawBox(gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix) on lines lines 2989 to 3539 of the html file of the puzzle WEBGL_PB_4x4x4 which you can see by right click outside of the canvas and View Page Source.

 

 

Possible Angles Trigonal     30 60 90 120 150 180
Possible Angles Cubic         90     180
All Possible Angles     30 60 90 120 150 180
Angle edge-surface =  54.74 plus 84.74 114.7 144.7 174.7 204.7 234.7
  360 minus 335.3 5.26 35.26 65.26 95.26 125.3
Angle surface-surface =  70.53 plus 100.5 130.5 160.5 190.5 220.5 250.5
neg   +  360 minus 319.5 349.5 19.47 49.47 79.47 109.5
                 
                 
All Possible Angles     210 240 270 300 330 360
Angle edge-surface =  54.74 plus 264.7 294.7 324.7 354.7 384.7 54.74
    minus 155.3 185.3 215.3 245.3 275.3 305.3
Angle surface-surface =  70.53 plus 280.5 310.5 340.5 370.5 400.5 430.5
    minus 139.5 169.5 199.5 229.5 259.5 289.5

 

Exercises on poly ball assemblies and getting acquainted with the cubic densest ball packing.

Please open first the simplest of all poly ball  puzzles  WEBGL_PB_2x2x2 and try to build by transferring the second dimer cluster from the right to left in order to form a triangle from the red the white and the now bright green ball and then click the Align button. Now click the Rot button and with the mouse place the blue green ball above (meaning in your direction when looking at the monitor) the red-white-bright green triangle.  Click Align again and note that if the bright green ball has been placed above (in positive y-axis direction of the monitor) the blue green ball jumps into the correct position forming a pyramid.  If, however the bright blue ball was placed below the red-green dimer you will get the following error message upon clicking Align;  "1 Bad trigonal orientation dX=-1 dY=1 dZ=1 of Clust._48".  This indicates, that in this case, the direction between the bright green ball and the blue green ball is not compatible with the cubic densest ball packing.  Have a look at the above diagram in order to understand this fact.  The trigonal x-axis is congruent with the orthogonal x-axis, the horizontal line on your monitor pointing from left to right from the ball 000 to the ball 100. Secondly the trigonal y-axis is not congruent vertical y axis of your monitor but is in the plane of the monitor but at an angle of 60 degrees to the x-axis and points from the ball 000 to 010. The bottom face of the pyramid must thus be congruent to the three balls 000, 100 and 010. Thirdly the trigonal z-axis points towards you the viewer at angles of 60 degrees each between the x- and the z- axis and between the y- and the z-axis, or at an angle of 54.74 degrees to the bottom surface in the orthogonal pane to the bottom surface.  The correct direction between the bright green and the blue green ball, points thus from 010 to 001, which means from 000 to 0-11.  The 2x2x2 pyramid could of course also have been built by rather raising the second ball of the cluster with the red ball in z-direction and thus in direction of 000 to 001.  Note this complication is a consequence of the abcabc... sequence of the layers in the cubic densest ball packing.  To summarize the ball pyramid must always be placed above the x-axis with the lowest edge along the x-axis.

WEBGL_PB_2x2x2
WEBGL_PB_3x3x3
WEBGL_PB_3x3x3a_cl7_cl10.html
WEBGL_PB_3x3x3b_cl26_cl27
WEBGL_PB_3x3x3c_cl30_cl31
WEBGL_PB_4x4x4
WEBGL_PB_4x4x4a
WEBGL_PB_4x4x4b
WEBGL_PB_4x4x4c
WEBGL_PB_4x4x4d_cl1_4_8_9_12_16
WEBGL_PB_4x4x4e_cl2_4_5_12_13_16
WEBGL_PB_4x4x4f_cl22_cl23
WEBGL_PB_4x4x4g_cl24_cl25
WEBGL_PB_4x4x4h_cl28_cl29
WEBGL_PB_4x4x4i_cl26_cl27
WEBGL_PB_4x4x4k_cl30_cl31
WEBGL_PB_4x4x4l_cl15_cl17
WEBGL_PB_5x5x5a_cl1_3_6_7_9_10_14_15_17

The exercise puzzle WEBGL_PB_3x3x3 builds a ball pyramid from the three non cyclic trimers and is a demonstrator of how to place trigonal (cluster_5 = PB_3F_120) versus cubic clusters (cluster_6 = PB_3F_90). Here a short description of how to build up the solution programmed in.  First move the red ball to the left and then pull up the linear trimer (cluster_3) placing the bright green ball on the green cross and click Align.  Next move the right angled trimer, cluster_6, to place its bright green first ball above the first (bright green) and second ball (blue green when selected) of cluster 3.  Click the Rot or Rotate button, then click the z>x button, as the first two balls are already correctly placed in the densest ball packing.  Now turn cluster_6 around the x-axis by moving the cursor in a straight line up exactly parallel to the y-axis of the monitor, thus in the positive sense of the right handed coordinate system. This in order to place the moving third ball, in a rotating movement around the x-axis, above ball 2 and 3 of the cluster_3 and then click Align to precisely place the ball over the two balls mentioned.  Next click the Trs or Translate button in order to translate cluster_5 in order to place its bright green first ball above the first and second ball of cluster_6 (note as the translate mode buttons shows z>x and Z->X . The cluster remains in the ground layer of the growing pyramid.  Note: the first balls of the cluster_3, cluster_6 and cluster_5 should be in a straight line after clicking Align, in the positive direction of the trigonal y axis, thus having the trigonal coordinates 000,  010, and 020 (x=0, y=2, z=0).

As a next thing we must place the second blue green ball of cluster_5 in the trigonal coordinate position 011, that means over its own first ball and the first and second ball of cluster_6.  For this we click Rot or Rotate and leave  z>x and Z->X in the z-position, in order to rotate about z any y only.  This can be done by moving the mouse and then clicking the cluster, or by clicking the cluster once to have the status line in red below on the canvas saying Rotate active cluster_5 .  This liberates the cursor from the cluster alowing now to click the z slider and then either slide the slider using the mouse or better move the slider using the right and left cursor keys on the keyboard.  Move the blue green second ball to exactly above the bright green ball (in positive sense of the monitor y-axis). This corresponds to a plus 90 degree turn of the cluster_5 around the orthogonal z-axis of the cluster, the model based orthogonal coordinate system.  After this click on the y-slider and move the slider all the way to the right side and then push the left cursor key until thre rotating second ball is placed above the first ball of cluster_5, and the first and second ball of cluster_6. Then click Align.  Clicking the x slider allows to rotate the cluster around its x-axis using the cursor keys. Or, alternatively, after clicking the  z>x and Z->X button one can also turn the cluster around its x-axis using the mouse.  Click Align and then repeatedly click +45 in order to turn the World View around the y-axis of the monitor in order to inspect the puzzle from all sides.  We finally have to move the single red ball to the top of the growing pyramid. For this click Trs or Translate button to switch back from the blue rotation mode canvas to the black translation mode canvas.  >When moving the ball through the pyramid it disapears below the already stacked up clusters as it moves on the lowest layer or the trigonal z=0 layer.  In order to move it up the x>z  or X->Z button can be clicked.  One could alternatively turn the world view by 90 degrees and then move the ball up. In a third approach one could select the single ball and then type the trigonal coordinates 002 into the text field and enter theis result by pressing the ENTER key of the keyboard. Note that we have included a second solution into the scroller of the puzzle WEBGL_PB_3x3x3 anfd that the ball 101 is slightly moved by switching between the two solutions, a problem related to rounding errors involving the right angled cluster_6  = PB_3F_90.

The WEBGL_PB_3x3x3a_cl7_cl10.html is an non complete pyramid assembly as a demonstration of a possible placement of the right angled clusters in the cubic densest ball packing. WEBGL_PB_3x3x3b_cl26_cl27  and  WEBGL_PB_3x3x3c_cl30_cl31 are interesting in this context as both of these assemblies contain each a pair of mixed angles, meaning 90 degrees (cubic) and 60 or 120 degree (trigonal) angles.  As an exercise load one of these assemblies, chose the solution in the scroller and move the mouse over the canvas.  Then click Align and type MAP into the text field. Take a screen shot of the mapping and try to build up the solution after having clicked the "-----" in the scroller.  All of the remaining 4x4x4 and the 5x5x5 poly ball puzzles listed above, have been used to determine the exact z-, y-, and x- axis rotation angles about the orthogonal model coordinate system of all clusters.  This inform Have a look at the scroller and you will notice that there are of course fewer possible positions for a chosen solution for a poly ball tetraeder than for a poly cube as studied above.  This permits a simpler nomenclature with S for the solution as originally built up, and R, L and F for flipping the pyramid to the right side, to the left side and to the front.  Each of these positions can then be turned by 60 degrees either clock wise (S60cw, R60cw, L60cw, F60cw) or counter clock wise (S60ccw, R60ccw, L60cw, F60ccw).  Note that the "external" positioning of the pyramidal solution, thus of the tetraeder, is considered here only, and not "internal" positional differences due to various possibilities of the placement of symmetric clusters in a given solution (ie clusters 4, 14, 18 and many others). You can download the angle analysis if you are interested in the details of the analysis:

 Download WEBGL_PB_AnglesAnalysis in EXCEL for Windows:  WEBGL_PB_AnglesAnalysis.xls

Lets first have a look at the simpler flat clusters and WEBGL_PB_4x4x4a is a special case at it is built up from five times the same non symmetric P - shaped tetramer cluster (cluster_8, _34, _35, _36, _37).  The assemblies WEBGL_PB_4x4x4b  and  WEBGL_PB_4x4x4c where important for the angle analysis, as they contain the linear tertramer cluster_7, which is of course invariant to rotations around the model object axis x.  They permit to learn how to correctly position a cluster in the cubic densest ball packing by z- and y-rotations.  As an exercise load the solution R in the scroller of WEBGL_PB_4x4x4b and print out the mapping by clicking Align and then type MAP into the text field.  Copy this out on a piece of paper and draw the versions turned by 60 degrees cw or ccw. Now try to modify the R to R60cw or R60ccw by moving (translation) and  rotating (z, y, and x rotations) each cluster into the new position.  Keep in mind to click Align and the Erase, Store after each step of progress. The same exercise also been done using WEBGL_PB_4x4x4c on F. Once finished, one can reset the puzzle by scrolling in the separating line ----- and rebuild the same once more from scratch.  Remember tat the first, bright green ball can be placed (translated) by entering the trigonal coordinates into the text field and clicking the ENTER key on your keyboard.  For instance in all discussed cases 003 for the linear tetramer cluster_7.

The next two assemblies, WEBGL_PB_4x4x4d_cl1_4_8_9_12_16  and  WEBGL_PB_4x4x4e_cl2_4_5_12_13_16 , introduce the easy to place cluster_12 and the more difficult to place clusters_16 and _13.  The flat clusters_15 and _17, which have orthogonal angles are contained in the assembly of WEBGL_PB_4x4x4l_cl15_cl17.  Remaining flat clusters are assembled in WEBGL_PB_5x5x5a_cl1_3_6_7_9_10_14_15_17.   The thee dimensional racemic pairs are introduced with WEBGL_PB_4x4x4f_cl22_cl23, and WEBGL_PB_4x4x4g_cl24_cl25, which have trigonal angles, and with WEBGL_PB_4x4x4h_cl28_cl29WEBGL_PB_4x4x4i_cl26_cl27 and WEBGL_PB_4x4x4k_cl30_cl31, which have trigonal and orthogonal angles.  The three dimensional clusters having an internal mirror plane, clusters_18, _19, _20, _21 do not form racemic pairs and the last three of them form part of  WEBGL_PB_4x4x4.  The cluster_18 is itself already a tetraedric 2x2x2 pyramid and is trivial to place as its placement requires only translation and no rotation.

As a great exercise to end with, try to build up the published solutions of the 5 layered to 8 layered balls pyramids ( WEBGL_PB_5x5x5WEBGL_PB_6x6x6WEBGL_PB_7x7x7 and WEBGL_PB_8x8x8 ). Please note that there is a mistake in the published soliution of the 7x7x7 pyramide:  the 004 ball is of cluster 13 and the 024 ball is of cluster 25, rather than of 25 and 13, respectively, as published. The following indicates how, for instance, I built up the WEBGL_PB_8x8x8 ball pyramide: I move away the two monomer clusters 1 and 32 and place the brightt green ball of 13 on the green cross of 000 (trigonal coordinate of the initial ball of cluster 13) and click Align. I move away cluster 4 and click 13 again and the Rotate (Rot). I click the Z slider and rotate by about + 30 degrees around the Z achsis by holding down the right cursor key.   I then click the Y slider, move the slider to its maximum 360 degrees and dress up the cluster by reducing the angle by holding down the left cursor key.  I then click Align, then the X slider , move the slider to 360 and hold down the left cursor key, to rotate the cluster by about 30 degrees in counter clock sense, then click Align.   I click Translate (Trs), than Erase and Store. I move cluster 4 with itsd first ball to 100 and click Rotate (Rot) and turn the cluster using the Z slider by about +30 degrees ans click Align, then Translate.  I move cluster 2 to the left and replace it by cluster 16. I turn 16 by + 30 degrees around the Z achsis using the Z slider and the right cursor key, click Align, Translate, Erase and Store.  I move down 3 and activate 23 by two click the enter the trigonal coordinate 410 and press the ENTER key. Then I rotate active cluster_23 by 360 - 120 or +240 degrees around the Z achsis using the slider and cursor key, then Align, Trtanslate, Erase and Store.  I move away 7, activat 8 and enter the coordinates 520, move the curso over the canvas, then Rotate (Rot) around Z by 360 - 60 degrees, and around x by 180 degrees, Align, Translate, Erase and Store, after having erased the 520 in the File field, as else you store the game under the name of 520 (I will henceforth no longer mention these routine clicks).  Note that you can check the established angles by clicking Text where you will find the following sequence: [8,8,"4F_180_60",0.969,0,18,5.19618,0,180,0,300, ....  Xorth=18, Yorth=5.19618,Zorth=0, Xrot=180, Yrot=0, Zrot=300 (note, Xorth, Yorth, Zorth are the orthogonal and not the trigonal coordinates of the initial ball 520 with, for instance X=6 x 3 = 18 as the balls measure 3 units each).

Cluster 6 goes to 420 and is rotated by around 54.74 around the X-axis (the cubic cluster lies parallel to the edge in the tetraeder and has an angle of 54.74 degrees with respect to the surface of the base).  Activate cluster 20 and move it to 411 (Enter). Rotate by Zrot = 300 and then Xrot = 180.  Move 31 to 430, then set Zrot to around 120 degrees and Align.  Move 22 to 130 and turn the cluster into position by Zrot (300 degrees or 360 - 60 degrees).  Move 24 to 020 and rotate by 60 around Zrot and then by roughla 110 around Xrot (109.47 degrees). Cluster 29 goes to trigonal coordinates 230, and is rotated about Zrot by 120 degrees.  27 goes to 040 and Zrot = 60 degrees.  Only 15, 30 and 9 are still missing in the base surface Ztrig = 0. Careful, balls 1 and 2 of cluster 30 are on the ground surface and ball 1 needs to go to 240 Z rot to 60 and Xrot to 109.4 degrees.  Cluster 30 is indeed a most challenging cluster to be placed and you may have to play around a bit to discover all of the bad placements of the cluster in its positoning in the 8x8x8 poly ball pyramide.  15 goes to 020 and must be built with the first two balls in directoion of the left rising edge of the pyramide as it is a cubic cluster, and thus with with Zrot = 180 and  Yrot = 360 - 54.74 = 305.26 degrees.  15 is finaly spun around the Xrot axis to 30 degrees (note the "horizontal" placement of 15_4 right of 13_4 in the 3rd layer of the pyramide).  9 goes to 070 and is rotated to Zrot = 90 and Yrot = 180 + 54.74 = 234.74.  The cluster is adjusted into the crystzal latice by turning around Xrot to 90 degrees. 

The bottom layer being finished ( repeatedly click +45) we can now complete the second layer.  2 goes to 101 and Zrot = 30 and Yrot = 305.26.  7 likewise goes to 002 and  Zrot = 30 and Yrot = 305.26.  19 goes to 601, Zrot = 150, Yrot = 305.26 and Xrot = 240.  17 goes to 301 with Zrot = 120 and Xrot = 125.26.   10 goes to 231 with Zrot = 300 and  Xrot = 54.74.   Cluster 21 goes to 042 (and not to 122 !), Zrot = 250 and Xrot = 250.53.  25 goes  to 132, Zrot = 300 and Xrot = 180.  28 goes to 128, Zrot = 300  and  Xrot = 174.74.  Cluster 11 goes to 202 and must be spun to Zrot = 150  Yrot = 305.26   Xrtot = 240 (which is a little difficult as badly visible).  14 goes to 303 with Zrot = 60  and Xrot = 54.74.   Cluster 18 goes to 113, with Zrot = 270, Yrot = 05.26 and Xrot = 54.74.  The monomer 1 goes to 023.  Cluster 5 goes to 232 with Zrot = 150, Yrot = 305.26 and Xrot = 234.74.   26 goes to 223  (and not 033) with Zrot = 330, Yrot  = 234.74 and Xrot = 54.74.  1' goes to 024.  3 goes to 403  Zrot = 150 and Yrot = 305.26.  12 goes to 015 with Zrot =  60 degrees. The second tetraeder 18', finally, goes to 006, which finishes the 8x8x8 poly ball pyramide.

 

HELP  - see below for the specific Polycube and Polyball Helps including the cluster definitions, as the appear in the loadad html pages of the puzzles.

In all of the Puzzles you will a help text upon clicking the button HELP.  An example is the following text.

Short instructions on how to use the graphical user interface is given here although most of the functionality can easily be grasped by playing around with the user interface.  It is best to open the 2x2x2Cube in order to get acquainted with the graphical user interface.

Below the canvas one will find a number of buttons and sliders to allow the 3D manipulation of the poly cube clusters.  The first and most important button on the top left side indicates Rotate and permits to switch the movement mode from Transfer to Rotate mode.  In the transfer mode the canvas background is black and in the rotate mode it is blue.  

Mouse controlled transfer or rotation movements are activated upon clicking as chosen cluster.  Upon a second click of the mouse the motion control by the mouse is terminated but the cluster remains activated as indicated by the red status line on the button of the canvas. It indicates Translate active cluster n, or Rotate active cluster n, respectively, with n indicating the chosen cluster number and name. The three sliders labeled X, Y and Z are active in this state for the active cluster.  A cluster remains active until the canvas background or another cluster is clicked.

A major problem of playing 3D puzzles on computers stem from the fact that computer monitors are two dimensional only.   One of the dimensions is thus in principal always hidden and it is important to be able to freely turning view around the to be built up puzzle.  This is achieved by the View buttons  +90  +45  Tilt  -45  -90 , which allow to turn the world by plus or minus 90 or 45 degrees.  The Tilt button toggles between 45 degree views from above, from below, or from front.  The tilted view is reset to front view upon changing the angle of the view.  Constantly switching back and forth the viewing angle is important while building up the puzzle in order to observe the spatial position of a cluster to be placed on the to be completed poly cube.

The Align button next to the Z- slider is an essential help in order to precisely position a cluster  on the growing poly cube.  Below the Y-Slider is another very important toggle 2 states button X->Z and Z->X, respectively, which permits to interchange the horizontal mouse movement between X and Z control.  Please note that the the X and Y ax is are coupled in the 45, 135, 225 and 315 degree diagonal view positions. This means that a horizontal mouse movement impacts both the X and Z position at the same time.

The Lock and Block buttons, plus the number scroll field, allows to lock selected clusters in a chosen block from 1 to 5, where 1 is reserved for the final solution.  The locking status is indicated on the red status line on the canvas.  Locking selected clusters in blocks allows to transfer them as an assembly upon clicking the button Block.  Typing LOCK into the File text field discussed below allows to lock all clusters (the finished assembly) to block 1.  Typing UNLOCK allows to unlock all clusters again. 

The last two rows of controls permit to store intermediate solutions, which is essential when trying to solve one of the challenging puzzles 5x5x5Cube or 6x6x6Cube.  Two storage methods are implemented;  the rather volatile local storage mechanism in the browser itself.  Please test it with your browser on the 2x2x2 cube as does not work with all browsers. Store, Load and Erase are present for this local storage and concern this storage and not the cluster assembly shown on the canvas.  The File text field permits to give a name to the local stored game. Typing SOLUTION into the text field  or scrolling in one of the stored solutions in the scroller, brings forth the solution of each cube puzzle.

Clicking the Load button and then the Text button also permit to display a JASON (Java Script Object Notation) version of your progressing solution of the puzzle below the HELP button.  Copy this text from the starting edged double bracket to the ending edged double bracket ( from [[   to   ]]  ) with Ctrl C and paste it into MS-Notepad or similar pure text editor with Ctrl V. Save this your computer as a text file (ie 2x2x2cube.txt).  You can then recover your saved puzzle at any time by clicking the Browse...  button and selecting your file in your file system.  This second non volatile storage method is more complicated as Java Script does not allow us to directly save content to the file system for security reasons.

Typing VR into the TEXT FIELD whi ch follows the header File allows to switch over to Virtual Reality view for phones in goggles. Store your progress state before switching to VR, to be able to load your game status in VR.   Do not use Internet Explorer IE11 for VR (or load VR_WEBGL_2x2x2Cube.html) as Microsoft has not properly implemented the function gl.viewport!

For educational purposes all code has been included into each time a single html page.  No file includes or APIs have been used.   Rather standard Java Script has been used in combination with the 2015 introduced WEBGL version of Open Graphic Language (OpenGL).  The puzzles run therefore only on recent browsers.   I have tested the code on Mozzila Firefox, Chrome, normal and Development versions, on Opera and on MS Explorer and Microsoft Edge.

The following books have been used to develop the code:

E. Angel and D. Shreiner, Interactive Computer Graphics, Pearson, 7th Ed. 2015, ISBN 10: 978-1-292-01934-5.

D. Cantor and B. Jones, WEBGL Beginners Guide, 2012, PACKT, ISBN 978-1-84969-172-7.

K. Matsuda and R. Lea, WebGL Programming Guide, 2015, Adison-Wesley, ISBN 978-0-321-90292-4

 

Puzzles as defined in the PUBLICATION

 
2x2x2Cube
3x3x3Cube
3x3x3Soma
4x4x4Cube
5x5x5Cube
6x6x6Cube
 
3x3x3Ball
4x4x4Ballsimple
4x4x4Ballchallenging
5x5x5Ball
6x6x6Ball
7x7x7Ball
8x8x8Ball

Help Polycubes

2x2x2Cube   3x3x3Cube   3x3x3Soma   4x4x4Cube   5x5x5Cube   6x6x6Cube

 
  

HELP
Goal of the puzzle is to build up the NxNxN poly cubes with N = 3, 4, 5, or 6 depending on which puzzle selected. The front, bottom edge is always aligned with the X-achsis with the bottom surface lying on the X-Y plane (the surface of the computer screen). The cube grows thus layer by layer in direction of the Z-achsis, thus in direction of the viewer. As the not yet rotated clusters are alligned by definition along the X-achsis it is logical that the Z- and Y-achsis rotations define the orthogonal orientation of each cluster in the cubic crystal structure. It is therefore necesssary to first orient a cluster correctly in the Z - Y rotation direction and finaly turn around the X-achsis to position the 3rd and fourth cubes for non-linear polycube clusters. As an aid to translate the first cube of an activated (colored) cluster precisely to a desired orthogonal position, the file-name text field can be used to ENTER an orthogonal coordinate such as 112 standing for X = 1, Y = 1, Z = 2. See below under Orthogonal coordinates input.

Note: so called gimbal locks are encountered when alligning two rotation achsis x or y or z = + or - 90 degrees, leading to identical or opposed rotations when moving the mouse in vertical and horizontal direction. A simple work around consists of reversing the responsible rotations and inverting their order, and/or activating the x>z - z>x button. Gimbal locks have here been reduced to a minimum by rotating first around the Z-achsis, followed by Y rotation and at last about the X-achsis in all rendering operations. This, as the first and second ball of each cluster lie on the X-achsis by definition.

Moving Clusters
Translate < - > Rotate
Mouse controlled transfer or rotation movements are activated upon clicking as chosen cluster. Upon a second click of the mouse the motion control by the mouse is terminated but the cluster remains activated as indicated by the red status line on the button of the canvas. It indicates Translate active cluster n, or Rotate active cluster n, respectively, with n indicating the chosen cluster number and name. The three sliders labeled X, Y and Z are active in this state for the active cluster. A cluster remains active until the canvas background or another cluster is clicked.

View
buttons +90 +45 Tilt -45 -90 allow to turn the world by plus or minus 90 or 45 degrees.

Tilt
button toggles between 45 degree views from above, from below, or from front. The tilted view is reset to front view upon changing the angle of the view. Constantly switching back and forth the viewing angle is important while building up the puzzle in order to observe the spatial position of a cluster to be placed on the to be completed poly cube.

Align
button next to the Z- slider is an essential help in order to precisely position a cluster on the growing poly cube.

X->Z and Z->X
Below the Y-Slider is another very important toggle 2 states button X->Z and Z->X, respectively, which permits to interchange the horizontal mouse movement between X and Z control. Please note that the the X and Y -achsis are coupled in the 45, 135, 225 and 315 degree diagonal view positions. This means that a horizontal mouse movement impacts both the X and Z position at the same time.

Lock and Block
buttons, plus the number scroll field, allows to lock selected clusters in a chosen block from 1 to 5, where 1 is reserved for the final solution. The locking status is indicated on the red status line on the canvas. Locking selected clusters in blocks allows to transfer them as an assembly upon clicking the button Block. Typing LOCK into the File text field discussed below allows to lock all clusters (the finished assembly) to block 1. Typing UNLOCK allows to unlock all clusters again.

Store solutions
The last two rows of controls permit to store intermediate solutions, which is essential when trying to solve one of the most challenging puzzles the 5x5x5Cube, or also the 6x6x6Cube. Two storage methods are implemented; the rather volatile local storage mechanism in the browser itself. Please test it with your browser on the 2x2x2 cube as does not work with all browsers. Store, Load and Erase are present for this local storage and concern this storage and not the cluster assembly shown on the canvas. The File text field permits to give a name to the local stored game. Typing SOLUTION into the text field brings forth the solution of each cube puzzle.

Load and Text
permit to display a JASON (Java Script Object Notation) version of your progressing solution of the puzzle. Copy this text from [[ to ]] with Ctrl C and paste it into MS-Notepad or similar pure text editor with Ctrl V. Save this your computer as a text file (ie 2x2x2cube. txt). You can then recover your saved puzzle at any time by clicking the Browse... button and selecting your file in your file system. This second non volatile storage method is more complicated as Java Script does not allow us to directly save content to the file system for security reasons.

Entry into TEXT FIELD of the following control words - AND THEN CLICK THE CANVAS:

SOLUTION to see the solution

VR to switch over to Virtual Reality view for phones in goggles. Store your progress state before switching to VR, to be able to load your game status in VR
Do not use Internet Explorer IE11 for VR (or load VR_WEBGL_2x2x2Cube.html) as Microsoft has not properly implemented the function gl.viewport!

LOCK to lock all clusters (the finished assembly) to block 1.

UNLOCK to unlock all clusters again.

PLAN to replace ALIGN to store the present cluster positions for mapping if a non aligned configuration needs to be mapped

MAP to map the present cluster positions - must be preceded by ALIGN

Empty Text Field -- > to erase text below HELP button. Note the input occurs upon a change in the text field.

HELP -- > to show the help text and glossary

Orthogonal coordinates such as 112, 001, 103, -001 ... -- > to precisely place a cluster in the poly cube. A) activate the chosen cluster. B) move the cursor into the file name text field and type the orthogonal coordinate by a three digit number (the coordinates go from 0 to 9, a leading minus sign makes all three values go negative), C) hit the ENTER key of your computer, and D) move the cursor over the canvas.

For educational purposes all code has been included into, each time, a single html page. No file includes or APIs have been used. Rather standard Java Script has been used in combination with the 2015 introduced WEBGL version of Open Graphic Language (OpenGL). The puzzles run therefore only on recent browsers. I have tested the code on Mozzila Firefox, Chrome, normal and Development versions, on Opera and on MS Explorer and Microsoft Edge.

The following books have been used to develop the code:

E. Angel and D. Shreiner, Interactive Computer Graphics, Pearson, 7th Ed. 2015, ISBN 10: 978-1-292-01934-5.

D. Cantor and B. Jones, WEBGL Beginners Guide, 2012, PACKT, ISBN 978-1-84969-172-7.

K. Matsuda and R. Lea, WebGL Programming Guide, 2015, Adison-Wesley, ISBN 978-0-321-90292-4




GLOSSARY Cluster_number <-> Cluster_names
1=cluster   2=clustname

1    PC_1F       
2    PC_2F       
3    PC_3F_180       
4    PC_3F_90       
5    PC_4F_180_180       
6    PC_4F_180_90       
7    PC_4F_90_270       
8    PC_4F_90_90       
9    PC_4F_180y90       
10    PC_4T_90y0       
11    PC_4R_90_0       
12    PC_4R_270_0       
13    PC_5F_180_180_180       
14    PC_5F_180_180_90       
15    PC_5F_180_90_180       
16    PC_5F_180_90_270       
17    PC_5F_90_180_90       
18    PC_5F_90_180_270       
19    PC_5F_90_270_90       
20    PC_5F_180_90_90       
21    PC_5F_180_180y90       
22    PC_5F_90y180y270       
23    PC_5F_180_90y270       
24    PC_5F_90y180y270       
25    PC_5T_90_90_0       
26    PC_5T_90_0_90           equals: 
27    PC_5T_180_90y0       
28    PC_5T_180y90_0       
29    PC_5T_180y90y0       
30    PC_5R_180_90_0       
31  PC_5R_180_270_0       
32    PC_5R_90_270_0       
33    PC_5R_270_90_0       
34    PC_5R_90_180y0       
35    PC_5R_270_180y0       
36    PC_5R_90_270y0       
37    PC_5R_270_90y0       
38    PC_5R_90_180_0       
39    PC_5R_270_180_0       
40    PC_5R_90_0_270       
41 = 1bis     PC_1Fbis       
42 = 2bis     PC_2Fbis
43 = reserve not used       
44 = 13bis     PC_5F_180_180_180bis
45 = 25bis     PC_5T_90_90_0bis       
46 = 26bis     PC_5T_90_0_90bis       
47 = 27bis     PC_5T_180_90y0bis       
48 = 28bis     PC_5T_180y90_0bis       
49 = 29bis     PC_5T_180y90y0bis       

 

Help Poly Balls

3x3x3Ball   4x4x4Ballsimp   4x4x4Ballchall   5x5x5Ball  6x6x6Ball   7x7x7Ball   8x8x8Ball

HELP
Goal of the puzzle is to build up the NxNxN Poly Ball tetraeder with N = 3, 4, 5, 6, 7 or 8 depending on which puzzle selected. The front, bottom edge is always aligned with the X-achsis with the bottom surface lying on the X-Y plane (the surface of the computer screen). The pyramid grows thus layer by layer in direction of the Z-achsis, thus in direction of the viewer. As the not yet rotated clusters are alligned by definition along the X-achsis it is logical that the Z- and Y-achsis rotations define the trigonal orientation of each cluster in the cubic densest ball packing - crystal structure. It is therefore necesssary to first orient a cluster correctly in the Z - Y rotation direction and finaly turn around the X-achsis to position the 3rd and fourth ball for non-linear ball clusters. As an aid to translate the first ball of a activated (colored) cluster precisely to a desired trigonal position, the file-name text field can be used to ENTER a trigonal coordinate such as 112 standing for Xtrig = 1, Ytrig = 1, Ztrig = 2. See below under Trigonal coordinates input.

Note: so called gimbal locks are encountered when alligning two rotation achsis x or y or z = + or - 90 degrees, leading to identical or opposed rotations when moving the mouse in vertical and horizontal direction. A simple work around consists of reversing the responsible rotations and inverting their order, and/or activating the x>z - z>x button. Gimbal locks have here been reduced to a minimum by rotating first around the Z-achsis, followed by Y rotation and at last about the X-achsis in all rendering operations. This, as the first and second ball of each cluster lie on the X-achsis by definition.

Moving Clusters
Translate < - > Rotate
Mouse controlled transfer or rotation movements are activated upon clicking as chosen cluster. Upon a second click of the mouse the motion control by the mouse is terminated but the cluster remains activated as indicated by the green coloring of the selected cluster and the as indicated by the red status line on the button of the canvas. It indicates Translate active cluster n, or Rotate active cluster n, respectively, with n indicating the chosen cluster number and name. The three sliders labeled X, Y and Z are active in this state for the active cluster. A cluster remains active until the canvas background or another cluster is clicked. Please click the canvas before switching from Rotate to Translate mode.

View
buttons +90 +45 Tilt -45 -90 allow to turn the world by plus or minus 90 or 45 degrees.

Tilt
button toggles between 45 degree views from above, from below, or from front. The tilted view is reset to front view upon changing the angle of the view. Constantly switching back and forth the viewing angle is important while building up the puzzle in order to observe the spatial position of a cluster to be placed on the to be completed poly cube.

Align
button next to the Z- slider is an essential help in order to precisely position a cluster on the growing poly cube.

X->Z and Z->X
Below the Y-Slider is another very important toggle 2 states button X->Z and Z->X, respectively, which permits to interchange the horizontal mouse movement between X and Z control. Please note that the the X and Y -achsis are coupled in the 45, 135, 225 and 315 degree diagonal view positions. This means that a horizontal mouse movement impacts both the X and Z position at the same time.

Lock and Block
buttons, plus the number scroll field, allows to lock selected clusters in a chosen block from 1 to 5, where 1 is reserved for the final solution. The locking status is indicated on the red status line on the canvas. Locking selected clusters in blocks allows to transfer them as an assembly upon clicking the button Block. Typing LOCK into the File text field discussed below allows to lock all clusters (the finished assembly) to block 1. Typing UNLOCK allows to unlock all clusters again.

Store solutions
The last two rows of controls permit to store intermediate solutions, which is essential when trying to solve the large puzzles such as PB_5x5x5- to PB_8x8x8- Pyramides. Two storage methods are implemented; the rather volatile local storage mechanism in the browser itself. Please test it with your browser on the PB_3x3x3 - Pyramid, as this method does not work with all browsers. Store, Load and Erase are present for this local storage and concern this storage and not the cluster assembly shown on the canvas. The File text field permits to give a name to the local stored game. Typing SOLUTION into the text field brings forth the solution of each cube puzzle. See the comment below under SOLUTION, for the case that several solutions are stored for the puzzle

Load and Text
permit to display a JASON (Java Script Object Notation) version of your progressing solution of the puzzle. Copy this text from [[ to ]] with Ctrl C and paste it into MS-Notepad or similar pure text editor with Ctrl V. Save this your computer as a text file (ie PB_3x3x3.txt). You can then recover your saved puzzle at any time by clicking the Browse... button and selecting your file in your file system. This second non volatile storage method is more complicated as Java Script does not allow us to directly save content to the file system for security reasons.

Entry into TEXT FIELD of the following control words - AND THEN CLICK THE CANVAS:

SOLUTION to see the solution. Click on the Block Scroller to see if several solutions have been stored. S stands for the regular solution, S60cw and S60ccw stand for the same solution turned by 60 degrees clock wise and counter clock wise, respectively. R, L and F indicate the same solution upon flipping the tetraeder to the right, left, or front, respectively. Selecting any solution in the scroller, different from the block numbers 1 to 5, will display the chosen solution.

VR to switch over to Virtual Reality view for phones in goggles. Store your progress state before switching to VR, to be able to load your game status in VR
Do not use Internet Explorer IE11 for VR (or load VR_WEBGL_PB_3x3x3.html) as Microsoft has not properly implemented the function gl.viewport!

LOCK to lock all clusters (the finished assembly) to block 1.

UNLOCK to unlock all clusters again.

PLAN to replace ALIGN to store the present cluster positions for mapping if a non aligned configuration needs to be mapped

MAP to map the present cluster positions - must be preceded by ALIGN

Empty Text Field -- > to erase text below HELP button. Note the input occurs upon a change in the text field.

HELP -- > to show the help text and glossary

Trigonal coordinates such as 112, 001, 103, -001 ... -- > to precisely place a cluster in the tetraeder pyramid. A) activate the chosen cluster. B) move the cursor into the file name text field and type the trigonal coordinate by a three digit number (the coordinates go from 0 to 9, a leading minus sign makes all three values go negative), C) hit the ENTER key of your computer, and D) move the cursor over the canvas.

For educational purposes all code has been included into, each time, a single html page. No file includes or APIs have been used. Rather standard Java Script has been used in combination with the 2015 introduced WEBGL version of Open Graphic Language (OpenGL). The puzzles run therefore only on recent browsers. I have tested the code on Mozzila Firefox, Chrome, normal and Development versions, on Opera and on MS Explorer and Microsoft Edge.

The following books have been used to develop the code:

E. Angel and D. Shreiner, Interactive Computer Graphics, Pearson, 7th Ed. 2015, ISBN 10: 978-1-292-01934-5.

D. Cantor and B. Jones, WEBGL Beginners Guide, 2012, PACKT, ISBN 978-1-84969-172-7.

K. Matsuda and R. Lea, WebGL Programming Guide, 2015, Adison-Wesley, ISBN 978-0-321-90292-4



GLOSSARY Cluster_number <-> Cluster_names
1=cluster   2=clustname

1   PB_1F       
2   PB_2F           
3   PB_3F_180   
4   PB_3F_60      
5   PB_3F_120   
6   PB_3F_90      
7   PB_4F_180_180   
8   PB_4F_180_60     
9   PB_4F_180_120   
10   PB_4F_180_90   
11   PB_4F_120_120   
12   PB_4F_60y120     
13   PB_4F_120_240   
14   PB_4F_90_90       
15   PB_4F_90_270     
16   PB_4F_120y240   
17   PB_4F_90y180      
18   PB_4T_60y60     
19   PB_4T_60y120   
20   PB_4T_60_90      
21   PB_4T_90y120     
22   PB_4R_120_120   
23   PB_4R_240_240   
24   PB_4R_120_240   
25   PB_4R_240_120   
26   PB_4R_90_120     
27   PB_4R_270_240   
28   PB_4R_90_240     
29   PB_4R_270_120   
30   PB_4R_60y90      
31   PB_4R_300y270   
32   PB_1Fa              
33   PB_4T_60_60a     
34   PB_4F_180_60b   
35   PB_4F_180_60c   
36   PB_4F_180_60c   
37   PB_4F_180_60d