Geodesic Polyhedrons

I'm interested in exploring some more experimental and aesthetic ideas on this site, so here I'm rendering an interesting, albiet random 3D object.

From wikipedia, "Geodesic Polyhedrons are constructed by subdividing faces of simpler polyhedra, and then projecting the new vertices onto the surface of a sphere." The simplest polyhedra to model with code is the tetrahedron, which consists of four equilateral triangles. I started with an equilateral triangle.

I visualised these points by projecting them into a 2D coordinate space, then plotting them with canvas.

The fourth vertex can be constructed by going 4/sqrt(2) up from the origin. This gives us our starting tetrahedron.

This site (which details many interesting shapes) shows an elegant alternative method for constructing a tetrahedron: remove every second vertex of a cube. That method doesn't naturally form an axis aligned face, but if you were to hard-code the starting tetrahedron, it has far cleaner vertex positions. I didn't bother changing my tetrahedron code.

We can form other geodesic polyhedrons with more complex starting shapes, but for now I'm just working with this.

To subdivide the faces, I originally did the following:

1. Find the midpoint of each face (average the vertices).
2. Interpret these four points as three new triangles - each original edge connected by two new edges to our new vertex.
3. Given these three triangles, repeat the subdivision process recursively n more times

Instead, subdivide into equillateral triangles. Take the midpoint of each edge, use these new points to construct four equal triangles.

Then, form a sphere by projecting them outwards onto the sphere. I didn't have a midpoint of the original simple shape, so I first found that by averaging the four starting vertices. Then I got our implied radius, by measuring the distance from mid point to any of our starting points. Then, for every vertex, I get the vector between it's position and our centre position, and normalised the vector.

From here, there are a few things I want to explore.

• Rendering with WebGL instead of Canvas. Profiling with Firefox shows almost frame time is made up near entirely by Firefox's circle drawing methods, and the JS based vertex projection (which could be done on the GPU with a WebGL vertex shader).
• Using web assembly, and comparing development experience.
• Aesthetic experimentation - different starting shapes, modulating the length of points to warp the sphere, building up more of a scene, animation, etc.