script-arts

Script arts

Another one npm package :) Encode any text files into images and decode them back.

If you ask "Why"?

"Code like no one's watching." @noopkat From #jsconf Budapest "Formulartic Spectrum".

Just imagine

• transform your code into images
• apply instagram filters
• BOOM! Your code is refactored now :)

Usage

npm install -g script-arts

script-arts --help
script-arts encode --help
script-arts decode --help

Glossary

• Theme - is a symbol encode (symbol to rgb) / decode (rgb to symbol) rule.

  {
    encode: function(symbol),
    decode: function(rgb)
  }
  

• Iterator - is how we will iterate image and source file. Could be linear, or by lines or even radial. Also responsible on image size and form.

  {
    iterateSource: function(source, encode),
    iterateImage: function(image, decode)
  }
  

Iterators

• linear (default) script-arts encode source output -i linear. Iterate by symbols

• lines script-arts encode source output -i lines. Iterate by lines

Themes

• char code (default) script-arts encode source output -t char-code. Translate symbol code to hex. -d <number> code offset. If delta was used for encode - same value should be used for decode.

• spaces and semicolons script-arts encode source output -t spaces-and-semicolons. Highlite spaces and semicolons. Other symbols will be encoded with char-code theme.

• js script-arts encode source output -t js. Highlite js keywords.

• md script-arts encode source output -t md. Highlite md keywords.

Custom theme

Existing themes:

• char-code-theme
• js-theme
• md-theme
• spaces-and-semicolons

import chartCodeTheme from 'script-arts/themes/char-code-theme';
import { add as addTheme } from 'script-arts/src/themes';
import encode from 'script-arts/encode';

const myTheme = options => {
  return chartCodeTheme({
    ...options,
    matches: {
      // encode whole words with specific colors
      'constructor': '#ffcc33',
      'var': '#cc0000',
      'const': '#54DE43',
      'new': '#54DE43',
      // encode each symbol of "decode" word with specific color
      'for': ['#E74C3C', '#ECF0F1', '#ECF0F1']
    }
  }),
}

addTheme('my-theme', {
  create: myTheme,
  // bottom left image corner will be marked with this color
  // will be used for decode() - automatically detect encoded theme.
  color: '#47D0DB'
});

encode('path/to/source-file', 'path/to/output-image', {
  theme: 'my-theme',
  iterator: 'lines',
  delta: 2512 // if you want to make char code offset
}).then(() => {
  console.log('done');
})

Custom iterator

Sames as custom themes. Default iterators example:

• Linear iterator
• Lines iterator
• How to Add iterator

Contribute

You are welcome to this useless app better :)

Use npm run dev to start watchers and convert ES6 code from /src/ dir. Use npm run test - to run tests. Use npm run test-dev - to start tests with watchers.

Encode examples: parts of lodash source with different options

• Additional exmaple#1
• Additional exmaple#2

Encode examples of this README file

Tests

Tests are ok. But travis fails. And I dont care :)