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:
- Each vertex is connected to some edges. In the case of a tetrahedron each vertex is connected to 3 edges.
- We pick one vertex called A.
- We start by splitting A three times since it is connected to 3 edges.
- The split vertices are called: A1, A2 & A3.
- They are connected to edges: L1, L2 & L3.
- To execute the truncation we simply move A1 along L1. Towards the mid-point of L1.
- 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:
- Construct the polygon using polar coordinates — an array of points.
- Calculate the mid-points of each side.
- 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).
- 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
- Finally, use liner interpolation to execute the truncation.
The end result is react component that requires two properties: vertex count & truncation amount.