Awesome
pixel-grid
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.
install
Add to your project with
npm install pixel-grid
example
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
usage
var pixels = require('pixel-grid')(data, opts)
The data
are the values to render in each square, and can be passed in two ways
- flat array
[a, b, c, d]
- nested array
[[a, b], [c, d]]
Each value a, b, ...
can be specified in several ways
- an rgb color
[0, 1, 1]
- a single number
0.5
which will be interpreted as[0.5, 0.5, 0.5]
- a color string like
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, default10
padding
space between each square in pixels, default2
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
- If a nested array is passed, its shape is used to get the number of rows and columns
- If a flat array is passed, its shape is based on
opts.rows
andopts.columns
- If those are unspecified, we use the largest square grid that contains all values
properties
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)
methods
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()]])
})