Making-of: circle fill on a grid

28 Mar 2020

Last year I wrote a quick page about filling a circle on a grid^[1]. As this one of the fastest pages I've implemented, I wanted to write down what I did.

Org mode
Vue
Scope - cut circle outline section
Input / output of diagram
Add more diagrams
YAGNI for abstractions; wait until I actually need it
Willing to copy/paste, discover the pattern
Polish, including draggable marker instead of slider

Sometimes I want to find find all grid locations in a circular area. For example, if a player is standing in a field and we want to know every tile the player can toss a ball to, we'll want to find all locations within a certain distance:

#+begin_export html
<figure>
  <svg viewBox="-0.55 -0.55 20.2 10.2">
    <a-tiles v-bind:filled="in_circle(radius)" v-bind:cols="20" v-bind:rows="10"/>
    <a-circle v-bind:center="center" v-bind:radius="radius"/>
    <a-radius v-bind:center="center" v-bind:radius="radius"/>
    <a-center v-bind:center="center" v-bind:snap-to-grid="true"/>
  </svg>
  <figcaption>Circular fill to radius {{radius.toFixed(2)}}</figcaption>
</figure>
#+end_export

How can we implement this?

Endnotes