Where to begin with animating over a 2D hyperbolic tessellation? I saw how to generate tessellation cells using the Poincare disk model? and Interactive model of the hyperbolic plane for a general public lecture
, which describe some projects which implement hyperbolic tessellations in various languages. I also landed on these as the primary projects which are somewhat comprehensible and able to be understood by a non-expert.

*

*roice3/Honeycombs (The "magic tile" abstraction)

*thoszhang/hyperbolic-tiling (demo)

*knexator/hyperbolic-tiling (very simple source code, though I'm not sure how far from "complete" it is, going by my definition below).

The last two links are low-level JavaScript/TypeScript implementations using matrices and WebGL. The shaders are a bit beyond my reach, so they are still a bit difficult to grasp, not being an expert in hyperbolic geometry (yet). The roice3/Honeycombs one I started to port to TypeScript:

*

*lancejpollard/honey.js
I have a long ways to go, still converting the CSharp to TypeScript, before I can get it to compile. But I'm realizing I don't quite understand how I am going to use the API. Hence this question.
My goal is to be able to do these things on a 2D hyperbolic tessellation:

*

*Show a static grid where I can control each tile, edge, and vertex (color, texture, text, etc., like a browser graphic), so I can tell when a vertex, edge, or face is clicked, or show an animation propagating down the faces, or down the vertices, etc..


*Animate the grid by dragging the mouse, sort of like this first image (but without the handles, just have it draggable), or this second image.




*"Throw" the grid so it spins and slows down with momentum sort of feel.


*Navigate the grid with the keyboard, moving from tile to tile, or vertex to vertex.


*Works for all (or most?) of the uniform tilings in the hyperbolic plane. (Do you need different algorithms for different types of hyperbolic plane tilings? It seems like that after perusing the magic tile in lancejpollard/honey.js.
I don't need to know how to do animation or mouse control or whatever, I can figure that out being a web developer. What I need to know is the gist of what I should be working with (hashmap of tiles somehow connected?) and what I should be updating in the render loop (do I just recompute the whole thing from a different angle? Or how do I keep track of the state of the old one (which tile is focused while navigating, etc.) and do an update transformation). Using one of these 3 projects, can you point me to the relevant pieces of code and perhaps point out what is missing from an API perspective? Doesn't have to be exact code API functions to call, just a high-level description of what I should be focusing my attention on.

*

*lancejpollard/honey.js

*thoszhang/hyperbolic-tiling

*knexator/hyperbolic-tiling
In the lancejpollard/honey.js (the one I'm most familiar with so far), the entry-point function I would imagine is the Tiling, with that GenerateInternal function showing how it will construct the tile data (I'm still not sure what the "data" is exactly, a "polygon" I think). A polygon is composed of segments (segment = 2 points), and a center. The tiling recursively goes through and generates these polygons somehow.
There is also the prototype of the mouse drag handler. That seems to be purely calculating how to spin the circle, not having anything to do with the tiling, so I'm not sure what would need to be done to update the tiling to reflect the latest state after mouse drag.
Then there is styling each the tile. What I would imagine is, take the "tiles" in the tiling, and use the points to figure out how to draw onto a graphics driver (like the HTML5 canvas). Not a big deal there. The question though is, when I rotate the tiling, how I keep the colors of each tile/edge/vertex stored in each proper tile, and have it update the projection. This means I store some extra "state" with each tile. The final problem is, then, what do I call in these libraries to "update" all the positions/shapes/projections of each tile on a frame-by-frame basis?
Is it possible to show me in the code of one of these 3 libraries what I would need to do, or explain at a high level how it should be done? I'm not sure how far these libraries have come, so not sure how much work I would need to do to implement these few features (animation/mouse trackability/keyboard trackability, etc.). I am not looking for a full programming answer, as this is mostly a math question, how the math is implemented and what operations get called to update the projection of the tiling. There are so many utility helper math functions in each of these libraries it's hard to tell what the meat on the bones is, and what is just helper functions.
 A: For reference for others, here is what I figured out.
The MagicTile project has a file called Puzzle.cs, and in it it goes to Build. Built calls this:
Tiling tiling = GenTiling( this.Config.NumTiles );

That GenTiling is the main thing, it generates the tiling polygon data (but no UI). It then progresses through the Build function to do some sort of stuff with Textures which I haven't figured out yet, and "twisting" rotations (part of their hyperbolic rubics cube game I think).
There are then two major pieces which I have yet to fully understand which happen at some point afterward, dealing with the Mobius and the Isometry classes (not sure what those do exactly, some sort of transformation). For example, in ApplyOneIsometry, it calls this:
    // New! Add it.
    Polygon boundary = parent.Boundary.Clone();
    boundary.Transform( conjugated );
    Cell slave = SetupCell( template, boundary, completed );
    AddSlave( master, slave );

I think this might load extra tiles at runtime, not 100% sure. Then in the MouseControl.cs file, deep down in PerformDrag2D on the mouse it does some Mobius transformations:
    Mobius pan = new Mobius();

    const double max = 0.98;
    if( point1.Abs() > max || point2.Abs() > max )
        break;
        
    pan.PureTranslation( Geometry.Hyperbolic, point1, point2 );
    m_isometry.Mobius = pan * m_isometry.Mobius;
    
    {
        Mobius temp = m_isometry.Mobius;
        temp.Round( digits: 5 );
        m_isometry.Mobius = temp;
    }

There is that m_isometry too, the isometry. Somehow I think this does the rotation adjustments, though I don't see something like tiling.update() or tiling.transformEachTile(matrix), which I would have expected. But it makes more sense!
Just calling that GenTiling does 90% of the work, and the rest is somehow dealing with these Isometries and Mobius transformations.
Oh I missed these two as well:

*

*DrawElements

*RenderDirectly in the PuzzleRenderer.cs.

That has the logic it seems for updating the transforms for each polygon, but still not quite sure how it will handle animation.
