Hover over the menu bar to pick a physics animation.

Define an assembly from parts in javascript

Our goal is to first define two 3D parts and then assemble them so that both move or rotate when one does. The parts can each be cubes but of different sizes. So first we need to define a parametric cube with side length `s=2a`; As we know, a cube has 8 vertices and 6 faces. The vertices in [x,y,z] coordinates can be:

`Va_i=[x,y,z]_i=[[-a,-a,-a],[a,-a,-a],[-a,-a,a],[a,-a,a],[-a,a,-a],[a,a,-a],[-a,a,a],[a,a,a]]`

The second cube can, for example, have side length `s=2b`.

`Vb_i=[x,y,z]_i=[[-b,-b,-b],[b,-b,-b],[-b,-b,b],[b,-b,b],[-b,b,-b],[b,b,-b],[-b,b,b],[b,b,b]]`

In order to display the cubes, it is necessary to define the indices of their faces. We do that by choosing 4 vertices for each face counting clockwise looking from the outside of the cubes.

`face_i=[[1,3,4,2],[1,5,7,3],[2,4,8,6],[1,2,6,5],[3,7,8,4],[5,6,8,7]]`

We will join the cubes so that the bottom `y` face of the `s=2b` cube is centered on the top `y` face of the `s=2a` cube. We also need to compute the normal vector for each face of the cube. This is done by the function normalArray which has arguments `(bba,bb"b",bbc)` where `bba,bb"b",bbc` are consecutive vertex vectors of the face. We take differences `bbv_1=bbc-bb"b"` and `bbv_2=bb"b"-bba` and then take the cross product of the difference vectors so the normal vector `bbn` is.

`bbn=bbv_1xxbbv_2`

The result is not a unit vector so you would need to divide it by its magnitude to make it a unit vector.

Wikipedia provides a really great treatise on Rotating Vectors.
If you scroll about half way down you will find the following expression for rotation about an arbitrary axis . In this expression c is the cosine of the Rotation angle `phi` and s is the sine of that angle. The unit vector of the axis to be rotated about is `bbu=[ux,uy,uz]`

`mRu=[[c+ux*ux*(1-c),ux*uy*(1-c)-uz*s,ux*uz*(1-c)+uy*s], [uy*ux*(1-c)+uz*s,c+uy*uy*(1-c),uy*uz*(1-c)-ux*s], [uz*ux*(1-c)-uy*s,uz*uy*(1-c)+ux*s,c+uz*uz*(1-c)]]`

`mRu` is used in the animation to rotate the b cube about the normal vector to the top of the cube. Another feature of the animation is the variation of height of the `b` cube above the `a` cube. That also uses the unit vector of the normal to the top face of the `b` cube.


Levitate
Rotate
Rotate AND Levitate