Home

Awesome

pixel-grid

Latest Version Build Status

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.

gif

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

png

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

Each value a, b, ... can be specified in several ways

All the options in opts are optional, and include

Grid dimensions are determined as follows

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()]])
})