Logo sketches: Trace

While designing some branding around my personal logo, I noticed the following in-spiral that felt like it was leading somewhere interesting:

If you continue tracing along the corners of each block of the structure, in a wonderful coincidence you can trace all the boundaries in one line. (roll credits ding)

I had some orthographic camera code floating around for rendering my original logo with Three.JS using forced perspective, and so I co-opted it for this tracing animation that extruded a block along the tracing path shown above. Note that going clockwise as above, the line only grows upwards towards the viewer. In order for the layering to make sense in actual 3D space, the line needs to be cut in three places so the proceeding part can be shoved far into the background. The loose ends meet from the camera's perspective by matching the displacement into the background via z and x with a downward y translation.

Making a snaking "line" out of boxes in Three is fairly straightforward but actually not totally trivial. In Three, the origin of boxes is at the bottom corner. When the line turns a corner, it's implemented as a new box with 0 scale along the new axis that's positioned as to be totally embedded within the previous line. Much fudging with line thicknesses later, we have Trace!