# polargrid

Generates a polar grid. Returns x y coordinates for each grid item plus corresponding item index.

function polargrid(
  count: number,
  radius: number,
  closed: boolean = false
): {
  x: number;
  y: number;
  angle: number;
  radius: number;
  index: number;
}[];

# Usage

> {{ polargrid(3,10) }}

[
  {
    "x": 6.123233995736766e-16,
    "y": -10,
    "angle": 0,
    "radius": 10,
    "innerradius": 10,
    "index": 0
  },
  {
    "x": 8.660254037844387,
    "y": 4.999999999999999,
    "angle": 120,
    "radius": 10,
    "innerradius": 10,
    "index": 1
  },
  {
    "x": -8.660254037844387,
    "y": 4.999999999999999,
    "angle": 240,
    "radius": 10,
    "innerradius": 10,
    "index": 2
  }
]

# Example I

Let's generate a polar grid with 8 items and map each item index to the hue value. Hovering / tapping on items shows its data.

<svg width="200" height="200">
  <circle
    v-for="g in polargrid(8,65)"
    :cx="g.x + 100"
    :cy="g.y + 100"
    :r="25"
    :fill="hue(map(g.index, 0, 8, 0, 360))"
    v-on:mouseover="v.g2 = g"
  />
</svg>

> {{ v.g2 }}

# Example II

Here's another example, a tribute to Braun T49.

<svg width="200" height="200">
  <g v-for="(count, r) in [1,6,12,20,24,32,36]">
    <circle
      v-for="g in polargrid(count,r * 15)"
      :cx="g.x + 100"
      :cy="g.y + 100"
      r="4"
    />
  </g>
</svg>

# Example III

Third example assigns the count parameter of the polar grid to a global variable v.count that allows to control the number of grid items:

<svg width="200" height="200">
  <line
    v-for="g in polargrid(v.count ?? 128,100)"
    x1="100"
    y1="100"
    :x2="g.x + 100"
    :y2="g.y + 100"
    :r="25"
    stroke="black"
  />
</svg>

<v-slider v-model="v.count" :value="128" max="256" />

> v.count: {{ v.count }}

v.count: 6

# Prior art

https://designstem.github.io/fachwerk/docs/#/f-circle-pattern

https://visualia.github.io/visualia_original/#helper-functions_circlepoints