Making-of: circle fill on a grid

from Red Blob Games
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.

  1. Org mode
  2. Vue
  3. Scope - cut circle outline section
  4. Input / output of diagram
  5. Add more diagrams
  6. YAGNI for abstractions; wait until I actually need it
  7. Willing to copy/paste, discover the pattern
  8. 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?

Email me , or tweet @redblobgames, or comment: