Skip to content

freeman-lab/pixel-grid

Repository files navigation

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

  • 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 grid
  • root a root element to which to append the created canvas
  • size 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

  • 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 and opts.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()]])
})

About

render a grid of small squares

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published