Skip to content
ixfx

Overview

Module Geometry.Grids contains a bunch of functions for working with grid representations. These grids are uniform, meaning all rows have the same number of columns. Much like a spreadsheet.

ixfx’s grids aren’t associated with data or visual representation. It’s a way of working with a logical grid.

The type of a Grid is:

type Grid = Readonly<{
  cols: number // Number of columns
  rows: number // Number of rows
}>

And continuing the similarity with spreadsheets, each position in the grid is a GridCell, made up of an integer x and y value.

type GridCell = Readonly<{
  x: number // Column (starting at 0)
  y: number // Row (starting at 0)
}>

Below is a demo to play with some of the grid features.

  • Visit: Traverse through each cell according to some logic
  • Offset: Calculate an offset from a cell position. Includes logic for how to wrap at the grid boundary. In the demo, checking ‘Cardinals’ produces cell position for all cardinal directions.
  • Line: Using a start and end cell, calculate all the cells connecting them in a straight line

Practical uses

Section titled “Practical uses”

Grids are useful for:

Note that many practical uses of grids don’t actually show or work with a grid visually. Rather, it’s the logical, spatial arrangement of data that is helpful in some situations.

In the demo below a grid is used to lay things out on a canvas

Importing

Section titled “Importing”
// Sub module
import { Grids } from "@ixfx/geometry.js"
// Eg: Grids.offset();


// Whole module
import * as Geometry from "@ixfx/geometry.js"
// Eg: Geometry.Grids.offset();


// From bundle
import { Geometry } from "@ixfx"
// Eg: Geometry.Grids.offset();


// And within your HTML's <HEAD> </HEAD> block:
<script type="importmap">{ "imports": { "@ixfx":"/ixfx/index.js", "@ixfx/": "/ixfx/" } }</script>