I recently discovered the idea of truncation. It is a fascinating concept. You rip apart a vertex to create a new facet and in turn more complex geometry. This pen by Ana Tudor shows the truncation of a tetrahedron:

You start with a simple tetrahedron. As you execute the truncation you can create some fairly complex shapes. So, what exactly is happening here? Let us break this down step by step:

  1. Each vertex is connected to some edges. In the case of a tetrahedron each vertex is connected to 3 edges.
  2. We pick one vertex called A.
  3. We start by splitting A three times since it is connected to 3 edges.
  4. The split vertices are called: A1, A2 & A3.
  5. They are connected to edges: L1, L2 & L3.
  6. To execute the truncation we simply move A1 along L1. Towards the mid-point of L1.
  7. We do the same for A2 and A3.

A fairly simple algorithm that can be generalise for the entire shape/solid. You can even generalize it for a set of shapes, such as 2D polygons. Which is exactly what I did for my demo.

I used React and SVG for this project too. A quick overview of the code:

  1. Construct the polygon using polar coordinates an array of points.
  2. Calculate the mid-points of each side.
  3. To split the vertices we create a new array with duplicates of each vertex (each vertex is only connected to 2 sides in this case).
  4. Then we have to link each split vertex to a mid-point. For this we create another array where each item has two properties:
    • the split vertex
    • mid-point of the line it belongs to
  5. Finally, use liner interpolation to execute the truncation.

The end result is react component that requires two properties: vertex count & truncation amount.

Questions, Comments or Suggestions? Open an Issue