3D Vector Animations in Elm
Having fun with the new OpenSolid package
In this post, I want to give a short demo implementing 3D vector visualizations in Elm, rendered as pure SVGs.
You can find a live demo here:
OpenSolid
The code is mainly based on the new OpenSolid packages. I was really thrilled to see a full featured vector library in Elm popping up. The package documentation is excellent and there are a lot of examples for its basic functionality. I missed only concrete code samples utilizing the 3D functions and that was the main intent doing this demo.
OpenSolid consists of a set of Elm libraries for working with geometry. It is intended to provide a solid foundation for HTML-based applications in areas such as CAD (computer-aided design), CAM (computer-aided manufacturing), and 2D/3D visualization.
Dive into Code …
You can find the complete code at our GitHub repo, linked at the end of this article. Therefore I will only point you to some of the more interesting parts.
... lets generate some Geometry
First, we need an interesting object to visualize. OpenSolid provides plenty of basic 2D/3D geometry types such as points, polygons, planes and much more, which can be used to construct any scene you can imagine.
For the demo, we define a custom Face type which simply is a list of 3D points plus a color. The grid function then generates the actual geometry as a fixed-size list of faces. The individual faces are arranged within a 25 x 25 grid where z and the color are calculated by a parametric function based on x, y and time.
Projection to 2D
Sketch planes are the primary tool for converting back and forth between 2D and 3D
To actually draw something on the screen, each 3D point is projected into the SketchPlane, which maps 3D to 2D coordinates. The resulting 2D polygons can then easily transformed into an SVG.
For animation purposes this SketchPlane is rotated around its x- and y-axis by time. So we are virtually moving our head around an object which has a fixed position and orientation in space.
Sorting by Distance to Viewer
To ensure eventually overlapping geometry has the correct drawing order, we have to sort each face by its distance to the viewer, in this case to the SketchPlane. As you see, OpenSolid provides functions for calculating distances in 3D between points and planes and much more.
The remaining implementation is just for embedding the SVG within the Virtual DOM and the typical “The Elm Architecture” type of setup.
You can find the full implementation at our GitHub repo: https://github.com/ninjaconcept/elm-vector-demo-1
Conclusion
Doing visualizations with Elm is such a rewarding experience.
Seeing fantastic libraries as the ones from OpenSolid emerging from this amazing community is wonderful. As with most Elm packages its highly reusable and feels super stable. A further confirmation in our belief at NinjaConcept that Elm is going to change the world.
This was my first post, so if you like it please ❤ it :-) Thanks!
