# rectgrid

rectgrid() generates a rectangular grid. Returns array of x y coordinates for each grid item plus corresponding col, row and index values.

function rectgrid(
  countX: number,
  countY: number,
  step: number = 1
): {
  x: number;
  y: number;
  col: number;
  row: number;
  index: number;
}[];

# Usage

> {{ rectgrid(2,2,10) }}

[ { "x": 0, "y": 0, "row": 0, "col": 0, "index": 0 }, { "x": 10, "y": 0, "row": 0, "col": 1, "index": 1 }, { "x": 0, "y": 10, "row": 1, "col": 0, "index": 2 }, { "x": 10, "y": 10, "row": 1, "col": 1, "index": 3 } ]

# Example

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

<svg width="200" height="200">
  <circle
    v-for="g in rectgrid(4,4,50)"
    :cx="g.x + 25"
    :cy="g.y + 25"
    :r="25"
    :fill="hue(map(g.index, 0, 4 * 4, 0, 360))"
    v-on:mouseover="v.g = g"
  />
</svg>

> {{ v.g }}

# Prior art

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

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