render a grid of little squares
Small module for rendering a grid of squares. Handles a wide variety of inputs, and supports custom sizing and spacing. Use it for data visualization, for art, or just for fun! Built with webgl and regl
so it's pretty fast.
Add to your project with
npm install pixel-grid
Run this
var grid = require('pixel-grid')
var data = [
[0, 1, 1, 0],
[1, 0, 0, 1],
[0, 1, 0, 0]
]
var pixels = grid(data, {
root: document.body,
size: 25
})
To see
var pixels = require('pixel-grid')(data, opts)
The data
are the values to render in each square, and can be passed in two ways
[a, b, c, d]
[[a, b], [c, d]]
Each value a, b, ...
can be specified in several ways
[0, 1, 1]
0.5
which will be interpreted as [0.5, 0.5, 0.5]
rgb(0, 255, 255)
or #ffa500
All the options in opts
are optional, and include
rows
columns
number of rows and columns in the gridroot
a root element to which to append the created canvassize
size of each square in pixels, default 10
padding
space between each square in pixels, default 2
background
color of the background as rgb or string, default [0.25, 0.25, 0.25]
formatted
set to true if data is already in canonical form (flat array of rgb colors)Grid dimensions are determined as follows
opts.rows
and opts.columns
pixels.canvas
The created canvas element for appending to the DOM yourself as in
var grid = require('pixel-grid')
var pixels = grid([[0, 1], [1, 0]])
document.body.appendChild(pixels.canvas)
pixels.update(data)
Update the pixel grid with new data
var grid = require('pixel-grid')
var pixels = grid([[0, 1], [1, 0]], {root: document.body})
pixels.update([[1, 0], [0, 1]])
pixels.frame(cb)
Provide a callback for each frame refresh (via raf). Allows you to sync updates with monitor refreshes
var grid = require('pixel-grid')
var pixels = grid([[0, 1], [1, 0]], {root: document.body})
pixels.frame(function () {
pixels.update([[Math.random(), Math.random()], [Math.random(), Math.random()]])
})