matthewhudson/pxon

👾 A JavaScript module for importing, creating, manipulating, and exporting PXON schema.

PXON

A JavaScript module for importing, creating, manipulating, and exporting PXON data.

Full API Documentation →

Installation

npm install pxon

And then import it:

// using es modules
import PXON from "pxon";

// common.js
const PXON = require("pxon").default;

// AMD
// I've forgotten but it should work.

Or use script tags and globals.

<script src="https://unpkg.com/pxon/umd/pxon.min.js"></script>

And then grab it off the global like so:

const PXON = PXON.default;

Example Usage

const PXON = require("pxon").default;
const pxon = new PXON();

// Import PXON-formatted JSON.
pxon.import({ ... });

// Set some EXIF data.
pxon.artist = "Matthew Hudson";
pxon.software = "https://make8bitart.com/";

// Set a single pixel's value.
pxon.setPixel(x, y, color, size);

// Iterate over an ES6 HashMap of all pixels.
for (let [key, pixel] of pxon.pixels) {
  console.log(`${key}, ${pixel}`);
  // <- 0:0, { x: 0, y: 0, size: 1, color: 'rgba(0, 0, 0, 1)' }
}

// Returns a PXON-formatted object.
console.log(pxon.export());

Full API Documentation →

Additional Resources

• PXON Specification - specs for the "pixel art object notation" format
• make8bitart.com - pixel art painting app
• pxonloop - a pxon playground
• image-to-pxon - app that converts image to pxon

Notes

• The non-canonical dataURL field is not currently supported.
• The non-canonical size field defaults to 1.