Pretty Grid

Create and manipulate grids using javascript.

Documentation

Setup and documentation at the prety-grid docsite ✨

Quick install

Browser

<script src="https://cdn.jsdelivr.net/npm/pretty-grid"></script>

Node

npm install pretty-grid

Introduction

Creating and manipulating a grid layout on an x-y-z plane requires repetative code involving nested for loops and n-d arrays. pretty-grid makes this process more straight-forward, readable and versatile.

Using pretty-grid, this simplifies to:

import { createGrid } from "pretty-grid";

const grid = createGrid({cols: 5, rows: 8, width: 1920, height: 1080});

for 3-Dimensional grid, use the createGrid3d method

import { createGrid3D } from "pretty-grid";

const grid = createGrid3D({cols: 3, rows: 5, layers: 8, width: 300, height: 500, depth: 800});

Using a couple of pretty-grid's helper methods you can already create a complex looking grid layout in only a few lines of code:

import {Grid, and, oddRows, oddCols, evenRows} from 'pretty-grid'
// Grid (cols, rows, width, height)
const grid = new Grid(20, 10, 500, 500);
grid.every(point => whiteDot(point.x, point.y));
grid.every(point => orangeCircle(point.x, point.y), and(oddRows(), oddCols()));
grid.translate(10,10)
    .every(point => blueDot(point.x, point.y), evenRows());
...

.

This results in:

To make this example unopinionated, we illustrate this example using the whiteDot, orangeCircle and blueDot pseudo methods to draw a grid on an html canvas. You as the developer, implement your own functions to draw to your target of choice. I use the amazing p5.js library for most of my examples.

The full documentation can be found here ✨

Examples

• Hello World
• Translating
• Operators: AND
• Operators: OR
• Operators: NOT
• Operators: AND OR NOT Combined
• Custom Operators
• Shapes: Ellipse Grids
• Shape Origins: Rectangle Grid
• Shape Origins: Ellipse Grid
• README example

These editable code examples are created using p5.js editor. Feel free to use pretty-grid in combination with other js (drawing) libraries. The full p5.js editor collection can be found here.

Contributing

The goal of pretty-grid is to make grid drawing easier for everybody. If you have a suggestion about the docs, API, tutorials or somethıng else, please post it in one of the folowing ways:

• Open an issue on GitHub and tag it with the green "Suggestion" label