/pixel-artist

Create pixel-art from input pictures

Primary LanguageTypeScript

🚧 Pixel Artist - ALPHA 🚧

Create Pixel Art from input pictures

Introduction

The purpose of this Typescript node.js library is to transform pictures by adding a Pixel-Art touch.

The library has only one dependency on Jimp (used to import/export picture files).

Try the test web page hosted through GitHub pages to use the features of Pixel Artist without development.

Features

Different operations are available, which can be combined in a single rendering.

Arbitrary palettes

All transformations use colors exclusively from an arbitrary palette. The palette can be defined as a list of colors and/or as RGB bit depths.

Some well-known predefined palettes are available:

Name #Colors Reference picture
CPC 27 Example with CPC
AAP64 64 Example with AAP64
Apple2 15 Example with Apple2
CGA 16 Example with CGA
C64 16 Example with C64
Fantasy24 24 Example with Fantasy24
Jewel15 15 Example with Jewel15
MSX 15 Example with MSX
NES 53 Example with NES
RGB 16777216 Example with RGB
RGB332 256 Example with RGB332
RGB444 4096 Example with RGB444
RGB565 65536 Example with RGB565
Spectrum 15 Example with Spectrum
Steam16 16 Example with Steam16
Sweetie16 16 Example with Sweetie16
Tandy 59 Example with Tandy
Teletext 8 Example with Teletext
VIC20 16 Example with VIC20

Outline

An outline can be added around the non-transparent part of the image. The outline has a single color and is always drawn on transparent pixels.

The outline can be defined according to 2 variants. The first variant creates a single-pixel outline:

duck-outline-thin

The second variant creates a thicker outline (corner pixels are added in the diagonals):

duck-outline-thick

In addition, the number of layers of such an outline can be set, as well as the color, e.g. 3 layers on first variant in brown:

duck-outline-thin-3-pixels

Edge

An edge is similar to an outline but it is drawn on the interior, non-transparent pixels:

duck-edge-solid

duck-edge-solid

duck-edge-solid

API

The complete API of the library is available in doc. The main classes are:

  • Color: RGBA color in sRGB space with CIELAB distance
  • Palette: Palette based on bit depth and/or list of colors
  • PixelArtist: Picture transformation object

Usage in node.js with Typescript

The library is distributed primarily as an CommonJS module in an npm package. First of all, install the module in your project:

npm install pixel-art --save to use the library as part of the project at run-time or npm install pixel-art --save-dev to use it as development dependency

A typical Typescript usage looks like:

import Jimp from 'jimp';
import {PixelArtist, palettes} from 'pixel-artist';

Jimp.read('source.png').then(image =>
{
  let pa = new PixelArtist(palettes["AAP64"]);
  pa.setOutline(1, "Black", false);
  pa.render(image).write('result.png');
});

Usage in a web page

A webpack bundle is provided in dist to used directly with a <script> tag:

<!DOCTYPE html>
<html lang="en">
  <head><script src="dist/pixel-artist.bundle.js"></script></head>
  <body>
    <script>
Jimp.read("pics/duck.png").then(function (img)
{
  // Processes picture
  var pa = (new pixart.PixelArtist(pixart.palettes["AAP64"]));
  pa.setOutline(1, "Black", false);
  pa.setFinalFrame(2);
  let res = pa.render(img);

  // Adds processed picture to end of document
  res.getBase64(Jimp.AUTO, function (err, src)
  {
    var elem = document.createElement("img");
    elem.setAttribute("src", src);
    document.body.appendChild(elem);
  });
});
    </script>
  </body>
</html>

Compilation

To build the library, start by cloning the repository:

git clone https://github.com/bfxdev/pixel-artist.git

Change to directory pixel-artist and then download the dependencies:

npm install

Then start the compilation:

npm start

Several targets defined in package.json can be chosen to build only a part of the library.

During the compilation, the following folder are used:

  • lib: CommonJS modules
  • es6: ES6 modules for packaging
  • dist: Packaged modules
  • doc: Documentation generated by typedoc