Tetras

A generative tetrahedral landscape proliferated with chromatic radiation.

This is a recreation of a design I made while taking Color and Design at the New Orleans Academy of Fine Arts. The original I drew with a ruler and compass and illustrated with gouache. To create the scene in SVG I followed more or less the same steps as I did sketching it by hand, just with a lot more attention paid to numerical coordinates.

Tile plane diagram Diagram showing the coordinate system and the relationship between the tile plane and the viewport tile plane viewport

The first step was to create a map of rhombus-shaped tiles to serve as a coordinate system for placing the tetrahedral mountains (I'll be referring to them as "tetras" for short). The number of columns and rows are calculated so that the map is always slightly larger than the viewport.

Tetra diagram Diagram of a single tetra showing its construction using two faces connected to a tile. b a c d e f g

The tetras themselves are generated as two polygons that share a side. They increase in height towards the top of the viewport and decrease in contrast to create a sense of depth through atmospheric perspective.

Ellipse diagram Diagram of an ellipse constructed from the arcs of four circles a b c d

In the original compass-drawn design, the ellipses were approximated using a construction of circular arcs. After trying and failing to recreate this by adding and intersecting circles, I referred to the SVG documentation. It turns out SVG has a path syntax specifically for describing curves as a series of elliptical arcs, which was the perfect tool for the job.

Radiation Diagram of radiation bands emminating from epicenter epicenter

These pseudo-ellipses then become bands in a radiation field. The epicenter is chosen from a random intersection at the corner of four tetras. One band radiates out every two seconds. It expands until it reaches a maximum size and then it returns to the bottom of the stack to radiate all over again.

Lessons Learned

Snap.svg is an amazing library for creating generative and interactive vector graphics for the web. It greatly simplified the process of creating this design and I feel like I barely scratched the surface of what it can do.

Snap.svg animates using JavaScript, which is great for many use cases, really any situation that doesn't demand GPU acceleration. In this case, because the ellipses grow so large, on larger screens I see some performance issues, and it makes the fan on my laptop kick into high gear in Firefox. If one was inclined they could rebuild this in a way that uses CSS animation or WebGL which both approaches take advantage of hardware acceleration.

← Fun with Arrays
Isosphere →