begin of major refactoring:

- benchmarks added
- encoding perf doubled by avoiding re-eval of pixels for every color
- allow skipping ED calc with `safePalette`

Author: jerch

.gitignore

@@ -1,4 +1,7 @@
 /dist/
 /lib/
 /node_modules/
-/package-lock.json
+/package-lock.json
+/coverage
+/.nyc_output
+/benchmark

.npmignore

@@ -5,3 +5,11 @@ node_example*
 index.html
 sixel_textcursor.sh
 webpack.config.js
+coverage
+.nyc_output
+.nycrc
+benchmark
+lib/*.benchmark.*
+lib/*.test.*
+src/*.benchmark.*
+src/*.test.*

.nycrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@istanbuljs/nyc-config-typescript"
+}

README.md

@@ -97,6 +97,34 @@ of the npm package, clone the repo and run `npm install` if you want to see them
 
 Decoding can also be tested in the browser after `npm start` under `localhost:8080`.
 
+## Benchmarks
+Performance is measured for typical actions based on 9-bit palette image:
+![test image](palette.png "test image")
+
+The test image repeats the palette image 8 times to form a 640x480 image with 512 colors. The unusual (and not spec conform) high number of colors was choosen to explicit test for this as an upper bound.
+
+Results:
+```
+   Context "lib/index.benchmark.js"
+      Context "SixelImage"
+         Case "fromImageData - unsafe palette" : 10 runs - average runtime: 21.61 ms
+         Case "fromImageData - safe palette" : 10 runs - average runtime: 2.15 ms
+         Case "toImageData - with fillColor" : 10 runs - average runtime: 2.97 ms
+         Case "toImageData - without fillColor" : 10 runs - average runtime: 1.34 ms
+         Case "writeString" : 10 runs - average runtime: 39.39 ms
+         Case "write" : 10 runs - average runtime: 34.61 ms
+         Case "toSixelString" : 10 runs - average runtime: 77.32 ms
+         Case "toSixelBytes" : 10 runs - average runtime: 68.91 ms
+```
+
+Note the high values for:
+- "fromImageData - unsafe palette"  
+  Caused by the additional needed ED calculation and color palette replacement. Prolly can be made faster.
+- "write"  
+  The decode parser is not yet further optimized.
+- "toSixelBytes"  
+  Encoding shows a really bad growing behavior for dimension and colors and needs a major refactoring.
+
 ### Status
 Currently alpha, tests are yet to come.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sixel",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Sixel image format for node and browser.",
   "main": "./lib/index.js",
   "scripts": {
@@ -9,7 +9,9 @@
     "watch": "tsc -w",
     "lint": "tslint 'src/**/*.ts'",
     "start": "webpack-cli && http-server",
-    "prepublish": "npm run tsc"
+    "prepublish": "npm run tsc",
+    "coverage": "nyc --reporter=lcov --reporter=text --reporter=html npm test",
+    "benchmark": "xterm-benchmark $*"
   },
   "keywords": [
     "sixel",
@@ -23,22 +25,27 @@
   "author": "Joerg Breitbart <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "@types/node": "^10.12.18"
+    "@types/node": "^10.14.21"
   },
   "devDependencies": {
+    "@istanbuljs/nyc-config-typescript": "^0.1.3",
     "@types/chai": "^4.2.3",
     "@types/mocha": "^5.2.7",
     "canvas": "^2.6.0",
     "chai": "^4.2.0",
     "http-server": "^0.11.1",
     "mocha": "^5.2.0",
     "node-ansiparser": "^2.2.0",
+    "nyc": "^14.1.1",
     "open": "^6.4.0",
     "rgbquant": "^1.1.2",
-    "ts-loader": "^5.3.3",
+    "source-map-support": "^0.5.13",
+    "ts-loader": "^5.4.5",
+    "ts-node": "^8.4.1",
     "tslint": "^5.20.0",
-    "typescript": "^3.2.4",
-    "webpack": "^4.29.0",
-    "webpack-cli": "^3.2.1"
+    "typescript": "^3.6.4",
+    "webpack": "^4.41.1",
+    "webpack-cli": "^3.3.9",
+    "xterm-benchmark": "^0.1.3"
   }
 }

palette.png

@@ -0,0 +1,110 @@
+import { RuntimeCase, perfContext, beforeEach } from 'xterm-benchmark';
+import { toRGBA8888, SixelImage, RGBA8888, fromRGBA8888 } from './index';
+
+
+// test data: 9-bit palette in 10x10 tiles (512 colors: 8*8*8) - 640x80 -> 6 rows => 640x480
+const {SOURCE32, SOURCE8, PALETTE, TEST_IMAGE, SIXELSTRING, SIXELBYTES} = (() => {
+  const channelValues = Array.from(Array(8).keys()).map(v => v * 32);
+  const palette: RGBA8888[] = [];
+  for (let r = 0; r < channelValues.length; ++r) {
+    for (let g = 0; g < channelValues.length; ++g) {
+      for (let b = 0; b < channelValues.length; ++b) {
+        palette.push(toRGBA8888(channelValues[r], channelValues[g], channelValues[b]));
+      }
+    }
+  }
+  const source32 = new Uint32Array(512 * 10 * 10 * 6);
+  for (let row = 0; row < 6; ++row) {
+    for (let colorIdx = 0; colorIdx < 512; ++colorIdx) {
+      const cy = colorIdx % 8;
+      const cx = Math.floor(colorIdx / 8);
+      for (let y = 0; y < 10; ++y) {
+        for (let x = 0; x < 10; ++x) {
+          source32[row * 640 * 80 + cy * 8 * 8 * 10 * 10 + y * 8 * 8 * 10 + cx * 10 + x] = palette[colorIdx];
+        }
+      }
+    }
+  }
+  const source8 = new Uint8Array(source32.buffer);
+  const testImage = SixelImage.fromImageData(source8, 640, 480, palette);
+  const sixelString = testImage.toSixelString();
+  const bytes = new Uint8Array(sixelString.length);
+  for (let i = 0; i < sixelString.length; ++i) bytes[i] = sixelString.charCodeAt(i);
+  return {
+    SOURCE32: source32,
+    SOURCE8: source8,
+    PALETTE: palette,
+    TEST_IMAGE: testImage,
+    SIXELSTRING: sixelString,
+    SIXELBYTES: bytes
+  };
+})();
+const TARGET = new Uint8ClampedArray(512 * 10 * 10 * 6 * 4);
+
+// preview test image
+function preview(sixelImage: SixelImage): void {
+  const { createCanvas, createImageData } = require('canvas');
+  const fs = require('fs');
+  const open = require('open');
+  const width = sixelImage.width;
+  const height = sixelImage.height;
+  const imageData = createImageData(width, height);
+  sixelImage.toImageData(imageData.data, width, height);
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext('2d');
+  ctx.putImageData(imageData, 0, 0);
+  const targetFile = __dirname + '/testimage.png';
+  const out = fs.createWriteStream(targetFile);
+  const stream = canvas.createPNGStream();
+  stream.pipe(out);
+  out.on('finish', () => open(targetFile));
+}
+
+function previewTerminal(sixelImage: SixelImage): void {
+  console.log(SixelImage.introducer(1));
+  console.log(sixelImage.toSixelString());
+  console.log(SixelImage.finalizer());
+}
+//preview(TEST_IMAGE);
+//previewTerminal(TEST_IMAGE);
+//console.log(TEST_IMAGE.toSixelString().length);
+
+
+perfContext('SixelImage', () => {
+  new RuntimeCase('fromImageData - unsafe palette', () => {
+    const img = SixelImage.fromImageData(SOURCE8, 640, 480, PALETTE, false);
+    return img.width;
+  }, {repeat: 10}).showAverageRuntime();
+  new RuntimeCase('fromImageData - safe palette', () => {
+    const img = SixelImage.fromImageData(SOURCE8, 640, 480, PALETTE, true);
+    return img.width;
+  }, {repeat: 10}).showAverageRuntime();
+
+  new RuntimeCase('toImageData - with fillColor', () => {
+    return TEST_IMAGE.toImageData(TARGET, 640, 480, 0, 0, 0, 0, 640, 480, toRGBA8888(0, 0, 0));
+  }, {repeat: 10}).showAverageRuntime();
+  new RuntimeCase('toImageData - without fillColor', () => {
+    return TEST_IMAGE.toImageData(TARGET, 640, 480, 0, 0, 0, 0, 640, 480, 0);
+  }, {repeat: 10}).showAverageRuntime();
+
+  new RuntimeCase('writeString', () => {
+    const img = new SixelImage();
+    img.writeString(SIXELSTRING);
+    return img.width;
+  }, {repeat: 10}).showAverageRuntime();
+  new RuntimeCase('write', () => {
+    const img = new SixelImage();
+    img.write(SIXELBYTES);
+    return img.width;
+  }, {repeat: 10}).showAverageRuntime();
+
+  new RuntimeCase('toSixelString', () => {
+    return TEST_IMAGE.toSixelString().length;
+  }, {repeat: 10}).showAverageRuntime();
+  new RuntimeCase('toSixelBytes', () => {
+    let length = 0;
+    TEST_IMAGE.toSixelBytes(c => { length += c.length; });
+    return length;
+  }, {repeat: 10}).showAverageRuntime();
+  // }, {repeat: 1, fork: true, forkOptions: {execArgv: ['--inspect-brk']}}).showAverageRuntime();
+});

src/index.benchmark.ts

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { SixelImage, fromRGBA8888, toRGBA8888 } from './index';
+import { SixelImage, fromRGBA8888, toRGBA8888, RGBA8888 } from './index';
 
 const BIG_ENDIAN = new Uint8Array(new Uint32Array([0xFF000000]).buffer)[0] === 0xFF;
 
@@ -57,6 +57,16 @@ describe('RGBA8888 native colors', () => {
   });
 })
 
+class ChunkWriter {
+  public pos = 0;
+  constructor(public target: Uint8Array) {}
+  public write(chunk: Uint8Array): number {
+    this.target.set(chunk, this.pos);
+    this.pos += chunk.length;
+    return this.pos;
+  }
+}
+
 describe('SixelImage', () => {
   let img: SixelImage;
   beforeEach(() => {
@@ -223,4 +233,105 @@ describe('SixelImage', () => {
       });
     });
   });
+  describe('encode - decode', () => {
+    let source32: Uint32Array;
+    let source8: Uint8ClampedArray;
+    let target32: Uint32Array;
+    let target8: Uint8ClampedArray;
+    let sixels: Uint8Array;
+    let writer: ChunkWriter;
+    beforeEach(() => {
+      // test with max 100x100 pixel data
+      source32 = new Uint32Array(100 * 100);
+      source8 = new Uint8ClampedArray(source32.buffer);
+      target32 = new Uint32Array(100 * 100);
+      target8 = new Uint8ClampedArray(target32.buffer);
+      sixels = new Uint8Array(1000000); // hard to precalc
+      writer = new ChunkWriter(sixels);
+    });
+    it('10x1 black', () => {
+      // prepare data
+      for (let i = 0; i < 10; ++i) source32[i] = toRGBA8888(0, 0, 0);
+      // encode
+      const imgEnc = SixelImage.fromImageData(source8.subarray(0, 10 * 4), 10, 1, [toRGBA8888(0, 0, 0)]);
+      imgEnc.toSixelBytes(chunk => writer.write(chunk));
+      // decode
+      const imgDec = new SixelImage(0);
+      imgDec.write(sixels, 0, writer.pos);
+      imgDec.toImageData(target8.subarray(0, 10 * 4), 10, 1);
+      // compare
+      assert.equal(imgEnc.toSixelString(), imgDec.toSixelString());
+      assert.deepEqual(target8, source8);
+      assert.equal(imgEnc.width, 10);
+      assert.equal(imgEnc.height, 1);
+      assert.equal(imgDec.width, 10);
+      assert.equal(imgDec.height, 1);
+    });
+    it('10x1 with 8 colors', () => {
+      // prepare data
+      const palette: RGBA8888[] = [
+        toRGBA8888(0, 0, 0),
+        toRGBA8888(255, 0, 0),
+        toRGBA8888(0, 255, 0),
+        toRGBA8888(0, 0, 255),
+        toRGBA8888(255, 255, 0),
+        toRGBA8888(255, 0, 255),
+        toRGBA8888(0, 255, 255),
+        toRGBA8888(255, 255, 255)
+      ];
+      for (let i = 0; i < 8; ++i) source32[i] = palette[i];
+      // encode
+      const imgEnc = SixelImage.fromImageData(source8.subarray(0, 8 * 4), 8, 1, palette);
+      imgEnc.toSixelBytes(chunk => writer.write(chunk));
+      // decode
+      const imgDec = new SixelImage(0);
+      imgDec.write(sixels, 0, writer.pos);
+      imgDec.toImageData(target8.subarray(0, 8 * 4), 8, 1);
+      // compare
+      assert.equal(imgEnc.toSixelString(), imgDec.toSixelString());
+      assert.deepEqual(target8, source8);
+      assert.equal(imgEnc.width, 8);
+      assert.equal(imgEnc.height, 1);
+      assert.equal(imgDec.width, 8);
+      assert.equal(imgDec.height, 1);
+    });
+    it('100x100 with 256 random colors (noise)', () => {
+      // prepare data
+      // generate 256 random colors
+      const strippedPal: number[] = [];
+      while (strippedPal.length < 256) {
+        const v = Math.floor(Math.random() * (255 << 16 | 255 << 8 | 255));
+        if (!~strippedPal.indexOf(v)) strippedPal.push(v);
+      }
+      // convert to sixel palette
+      const palette: RGBA8888[] = [];
+      for (let i = 0; i < 256; ++i) {
+        const v = strippedPal[i];
+        // we have to do a normalization to 100 steps in between
+        // channels values between cannot be expressed in SIXEL (lower color resolution)
+        const r = Math.round(Math.round((v >> 16) / 255 * 100) / 100 * 255);
+        const g = Math.round(Math.round(((v >> 8) & 0xFF) / 255 * 100) / 100 * 255);
+        const b = Math.round(Math.round((v & 0xFF) / 255 * 100) / 100 * 255);
+        palette.push(toRGBA8888(r, g, b));
+      }
+      // apply to input data
+      for (let i = 0; i < 100 * 100; ++i) {
+        source32[i] = palette[Math.floor(Math.random() * 256)];
+      }
+      // encode
+      const imgEnc = SixelImage.fromImageData(source8, 100, 100, palette);
+      imgEnc.toSixelBytes(chunk => writer.write(chunk));
+      // decode
+      const imgDec = new SixelImage(0);
+      imgDec.write(sixels, 0, writer.pos);
+      imgDec.toImageData(target8, 100, 100);
+      // compare
+      assert.equal(imgEnc.toSixelString(), imgDec.toSixelString());
+      assert.deepEqual(target8, source8);
+      assert.equal(imgEnc.width, 100);
+      assert.equal(imgEnc.height, 100);
+      assert.equal(imgDec.width, 100);
+      assert.equal(imgDec.height, 100);
+    });
+  });
 });