Esoteric Update #258 - Lamenting The Lack Of Preserved Transforms

Today's update will be to the point, but further down, there's some technical detail that might interest you or not, so read at your own discretion.

Firstly, as mentioned last week, we are working on the adventure itself now. Currently, we don't have anything we want to show as the part of the adventure we worked on is something we want to be a surprise. Still, it's another few thousand words onto the word pile.

Now for the more technical stuff. There were a few things I wanted to implement or at least attempt, and this includes...

A) Autosmoothing for SVG splines. This went fine. I made an error at one point but got help with sorting it out, and it turned out I was just stupid. The algorithm I implemented is a standard one used in professional vectoring applications. Ultimately, I ended up with variants that produce an isolated smooth spline, a looped smooth spline, or inserts smoothed nodes into an existing spline. It works well, and I gave it my own twist, making it a little bit more parametric.

B) Spiral primitive for SVG. Using the above code, I quickly made an automated spiral construction. It's used in magic circles (replacing hard-coded spirals):

C) A long time ago, I failed at making a properly animating "3D" flip-card. After some work and finally understanding the issues I've had before. Once I understood it, I managed to prepare very generalised code that handles four different styles of 3D flips and functions correctly with mouse events on both sides of the flippable card. It's hard to show this in action on a static screenshot, but I hope this gives a general idea of what these are:

D) There was one other attempt I made at "3D" transformations a while ago, and that was making a box or a cube. Having understood more of what's happening with the properties. It started not that great:

And yes, that is a Lament Configuration; thank you for noticing. And no, it's not in the game. I was just having some fun. Anyway, the key to making this look better was first fully understanding why my perspective transformation didn't work, which was simply due to being placed on the wrong DOM object. Fixing that made it a bit better:

This still looks really flat, so let's add some light by using SVG filter rendering:

Amusingly enough, while I could have added geometrically accurate lighting to this, it actually looks better when it isn't accurate. So, the directionality of the light is a bit scuffed but produces what I personally consider a better result. Let's ditch the box and instead use some of our assets:

Now, I want to explain something for those of you who might be a bit more in the know about web technology. This is done purely using markup (HTML, SVG, CSS); there's no JS involved in this, there's no WebGL. It's all a trick using affine and perspective transformations. But it does look somewhat 3D, and it can sliiightly animate, as long as you don't want to see the other faces of the box. It can otherwise render a series of arbitrarily rotated boxes and jiggle them around a little bit. I'm not sure if I'll use this for anything; I just wanted to prove to myself that I can.

Next week, we're continuing with the adventure, and I might work a bit more on automated handwriting systems.