Chromata

Chromata is a small tool written in JavaScript which can turn any image into a unique, animated artwork. Path finders are seeded on a canvas and independently trace their own path through the image, reading the colour data of each pixel and altering their course based on a set of configurable rules.

Quick Start

1. Download the Chromata script

Download chromata.min.js

2. Include it in your HTML document

        <script src="path/to/chromata.min.js"></script>
    

3. Create a new Chromata instance

        var imageElement = document.querySelector('.my-image');
        var chromata = new Chromata(imageElement);
    

3. Start it

        chromata.start();
    

Compatibility

Chromata makes use of canvas blend modes, which are available in all major browsers except Internet Explorer. It will still run in IE, but won't look right.

Options

        // default options
        var defaults = {
            colorMode: 'color',
            compositeOperation: 'lighten',
            iterationLimit: 0,
            key: 'low',
            lineWidth: 2,
            lineMode: 'smooth',
            origin: ['bottom'],
            outputSize: 'original',
            pathFinderCount: 30,
            speed: 7,
            turningAngle: Math.PI
        };
    

• colorMode string

  Either color or greyscale.

• compositeOperation string

  Determines how colours interact when overlaid. While you may use any valid compositing operation, anything other than lighten will likely give unwanted results.

• iterationLimit number

  Stop the animation after this many iterations (frames). A value of 0 mean never stop. The current iteration count of a running animation can be discovered by the return value of the .stop() method.

• key string

  Either low or high. Low key causes the path finders to seek out areas of bright colour; high key causes them to seek out darker areas.

• lineWidth number

  The width in pixels of the line drawn by the path finders, or the radius of the circle if lineMode = 'point'.

• lineMode string

  Either smooth, square or point. Square mode causes each point of the path to be joined by a straight line with square ends. Smooth uses quadratic curves to give a more flowing effect. Point draws circles instead of lines.

• origin array(string [,...string])

  Specify the location(s) that the path finders are seeded on the canvas. Valid values are: bottom, top, left, right, or x% y%, where x and y represent positions from the left and top of the canvas respectively.

• outputSize string

  Either original or container. Original will cause the canvas to take on the same dimensions as the source image file. Container will cause the canvas to attempt to fill its containing element.

• pathFinderCount number

  The number of path finders that are created.

• speed number

  The speed of the path finders, equal to the distance (in pixels) travelled by each path finder per iteration (frame).

• turningAngle number

  An angle in radians. At each iteration, each path finder surveys its surrounding pixels to decide where to move next. The turningAngle determines how much it can look around. E.g. a value of 2*pi (equal to 360 degrees) allows the pathfinder to turn all the way around.