If you've followed my work you know I'm a fan of grids. I had a page I wrote in 2006 that I decided to update. Those were the days before html5, and even before SVG was reliable in browsers, so I had made images using some Ruby code to generate SVG, and then ImageMagick to turn SVG into PNG. If I'm going to update this page, what might I want? I made a list of possibilities:

  1. Change of focus. The old page spends a lot of time talking about the properties of grids in the abstract, and how different grid types relate to each other. When I visit the page for my own needs, I don't care about that. What I do want to see is the formulas. I use this page as a reference. I want to change it to make the formulas the main focus of the page.
  2. Interactivity. I could make all the diagrams interactive. That's what people expect from me, after all!
  3. High resolution diagrams. We're not living with 800⨉600 desktop monitors anymore. With "HiDPI" screens including 4K, I wanted to use SVG everywhere so that the diagrams are sharp.
  4. Put coordinates into the diagrams instead of only off on the side.
  5. Make the relationship diagrams for all three grid types. On the original page I have diagrams only for squares.
  6. Animations showing how square grids relate to triangle and hexagon grids.
  7. Animation showing how square grids relate to isometric grids (which are really isometric views of a square grid).
  8. More algorithms including distances, to screen coordinates, from screen coordinates.
  9. Sample code generation, so that you could select a programming language and see sample code in your favorite language.

The most ambitious idea I had was to make the entire page animate. I wanted to start with the entire page being about square grids, and then the page itself would transition into a page about triangle or hexagon grids. I experimented with a three-way animation too, making hybrids between different grid types. In the end I decided that was a waste of time. The in-between grids were ill-defined, and making them look good would take a lot of work for something that would be on the screen for only a fraction of a second.

I started this project in March and have wondered where the time went. I went through my notes and found places I wasted time:

  1. I started with code I wrote in 2011, when I first tried rewriting this page to be interactive. I had just started with html5 at that point and I didn't quite have the skills I needed. That code was written in Haxe + d3.js v2. I just wanted to get something going, but I should've thrown away all the diagram code and started over, as it was quite messy.
  2. I cleaned up all the Haxe-generated code, as it produced some ugly JavaScript. The two main problems were that Haxe for loops turn into while loops in JavaScript, with a bunch of temporary variables named _g1, _g2, etc., and Haxe maps turn into their own object instead of JavaScript Map. I ended up rewriting a lot of the generated code into idiomatic JavaScript. This was a waste of time, as the generated code worked fine, but I couldn't resist cleaning it up.
  3. I spent a lot of time trying to make a three-way grid interpolation animation. This was mostly a waste of time, as it was only needed if the whole page animated. It would have been much simpler to make separate square—triangle and square—hexagon animations.
  4. Even after giving up on the idea of the entire page animating, I implemented all the diagrams as interactive diagrams in Vue.js, hoping to put in some animations. And then I rewrote the diagrams again to be static once I realized the static diagrams would work better.
  5. I wrote code to automatically size the diagrams. Then I threw it all away when I realized it was better to pick the sizes manually to make related diagrams match up. If I had tried sizing the diagrams manually from the start I would've realized no algorithm would pick what I wanted, and it wasn't that much work to size 45 diagrams.
  6. I wrote code to automatically place the labels. Then I added tons of special cases. And that wasn't enough so I added even more special cases. Wow, what a pain labeling is! I want them to show some symmetry but also be placed not to go outside the bounding box and also not overlap.

There were a lot of false starts on this project, and I had to cut the scope quite a bit to make progress. In the end, simple, mostly static diagrams worked best, and simple, mostly manually set sizes and labels worked best. I could've saved a lot of time by trying the simplest thing first. There's more I could do but I'm tired of working on this, and am ready to move on to something else.

Take a look at the new page!

Labels:

– Amit – Thursday, May 27, 2021

0 comments:

Subscribe to: Post Comments ( Atom )