4 ms·

Vue is pretty good at generating SVG (I use Vue+SVG on https://www.redblobgames.com/grids/hexagons/ https://www.redblobgames.com/grids/hexagons/) but there's a

by amitp 6y ago

Vue is pretty good at generating SVG (I use Vue+SVG on https://www.redblobgames.com/grids/hexagons/ https://www.redblobgames.com/grids/hexagons/) but there's a trick for making it work with Canvas too. https://simblob.blogspot.com/2018/03/using-vue-with-canvas.html https://simblob.blogspot.com/2018/03/using-vue-with-canvas.h... — it will make the canvas drawing function depend on the right data in Vue, so that if any of that data changes, it re-draws the canvas automatically.

mmanfrin 6y ago
Oh excellent, thank you, I didn't know you had written about hexes + vue -- your site has been absolutely invaluable to me and is one of the primest examples of visualization done well. One problem I remember running in to (drawing hexes) is that the redraw of one hex overwrote what had been drawn in another, causing corners of the bounding box of a hex to clear its neighbors. Did you run in to any issues like that, or was that likely just a quirk of how I coded it (I am amateur with canvas, so it's a likely cause).
- amitp 6y ago
  There are some gotchas when using sprites/images for hexagons. 1. The bounding boxes overlap, so you'll want to make sure that the sprites have transparent corners so that they don't overwrite what's in the next hexagon. 2. The images won't be exactly regular (equal sided) hexagons because regular hexagons have an irrational side width or height. The image size will be rounded off to the nearest pixel. You'll need to adjust for this in your hexagon calculations, either shrinking or expanding one of the axes a tiny bit so that both axes are integer sized. For example if your hexagon spacing is 173.20508 x 150 then you'll change your spacing to be 173 x 150, or whatever matches your image size.
timvdalen 6y ago
Sorry for the off-topic comment but I just want to thank you for your site (and in particular that article). I've been using your site for years and it's an invaluable resource to me.
- amitp 6y ago
  Thank you! Glad to hear it!

by amitp 6y ago

mmanfrin 6y ago

Oh excellent, thank you, I didn't know you had written about hexes + vue -- your site has been absolutely invaluable to me and is one of the primest examples of visualization done well. One problem I remember running in to (drawing hexes) is that the redraw of one hex overwrote what had been drawn in another, causing corners of the bounding box of a hex to clear its neighbors. Did you run in to any issues like that, or was that likely just a quirk of how I coded it (I am amateur with canvas, so it's a likely cause).

amitp 6y ago
There are some gotchas when using sprites/images for hexagons. 1. The bounding boxes overlap, so you'll want to make sure that the sprites have transparent corners so that they don't overwrite what's in the next hexagon. 2. The images won't be exactly regular (equal sided) hexagons because regular hexagons have an irrational side width or height. The image size will be rounded off to the nearest pixel. You'll need to adjust for this in your hexagon calculations, either shrinking or expanding one of the axes a tiny bit so that both axes are integer sized. For example if your hexagon spacing is 173.20508 x 150 then you'll change your spacing to be 173 x 150, or whatever matches your image size.

timvdalen 6y ago

Sorry for the off-topic comment but I just want to thank you for your site (and in particular that article). I've been using your site for years and it's an invaluable resource to me.

amitp 6y ago
Thank you! Glad to hear it!