Skip to content

geolab-UVA/unfoldedCubeAutoFaceChange

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

Arranging the faces of the unfolding of the cube through code

This is a starting point for arranging the faces of the cube's unfolding through code.

The start for the code is in ./js/cube-face-arranger.js.

Here are some things to know:

The standard unfolding of the cube is

 *********  *********  *********  *********

*********  TOP(2)     *********  *********

LEFT(3)    FRONT(0)   RIGHT(1)   BACK(5)

*********  BOTTOM(4)  *********  *********
        
*********  *********  *********  *********

If we make the unfolding of the cube be centered at the face RIGHT(1) we would expect something like

*********  *********  *********  *********

*********  ?????(?)   *********  *********

FRONT(0)   RIGHT(1)   BACK(5)    LEFT(3)

*********  ??????(?)  *********  *********
        
*********  *********  *********  *********

Note that some faces should also be rotated.

The desired "center" face is passed to the component by the parameter currentFace as in this line:

<a-entity id="cube-geometry" cube-face-arranger="currentFace: 0">

The entity cube-geometry contains as "children" all faces of the cube:

    <!-- FRONT(0) (green)-->
      <a-entity id="face_0" geometry="primitive: plane; width: 10; height: 10" material="color: green; side: double"
        rotation="90 0 0"></a-entity>

      <!-- RIGHT(1) (orange) -->
      <a-entity id="face_1" geometry="primitive: plane; width: 10; height: 10" material="color: orange; side: double"
        rotation="90 0 0"></a-entity>

However the positions of those children are not specified in the HTML. We want to assign them through the javascript code in ./js/cube-face-arranger.js.

The component cube-face-arranger.js

Upon intialization cube-face-arranger stores the parameter passed to it as a member variable this.currentFace. This happens in this line in the init code

    this.currentFace = this.data.currentFace;

The array this.faces stores references to the 6 faces of the cube.

this.faces = []; // This array (arrays are indexed from 0) will store the faces. 

The function responsible for arranging the faces should be arrangeFaces. Currently it is mainly empty

Goals and steps

Write a function arrangeFaces that reads this.currentFace and based on its values sets the correct position and rotation of each face.

STEP 0

Comment understand what the meaning of the example code in the function arrangeFaces is. Then comment it out. You can try modifying the value of currentFace in the line


    <a-entity id="cube-geometry" cube-face-arranger="currentFace: 0">

in the HTML to see the effect on the code

STEP 1

Write a sequence of commands

this.faces[0].object3D.position.x = 0;
this.faces[0].object3D.position.z = 0;
this.faces[1].object3D.position.x = 123;
this.faces[1].object3D.position.z = 456;

that correctly arranges the faces in the "standard" desposition centered at the face 0

STEP 2

Write a switch statement that analyzes this.currentFace. Move the code of STEP1 into the

case 0:
// CODE HERE
break;

For cases 1 to 5 just run

console.log("NOT YET IMPLEMENTED")

STEP 3

Add the code for cases 1 to 5 into the switch statement to arrange the faces. For now do not worry about rotation. Make sure to check your progress step by step.

STEP 4:

Go back to the HTML and add some sub-shapes to each face. This will allow you to track the rotation of the faces.

Make sure everything works

STEP 5:

add the code that controls rotation.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 60.9%
  • HTML 39.1%