diff --git a/README.md b/README.md index 7261ac0..d7bde48 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,34 @@ -# Easy Javascript Colormaps - -[![Build Status](https://travis-ci.org/bpostlethwaite/colormap.png)](https://travis-ci.org/bpostlethwaite/colormap) +# colormap [![Build Status](https://travis-ci.org/bpostlethwaite/colormap.png)](https://travis-ci.org/bpostlethwaite/colormap) ![all colormap output](./example/colormaps.png) -## Simple example +## Usage -```javascript -var colormap = require('colormap') -options = { - colormap: 'jet', // pick a builtin colormap or pass your own - nshades: 72, // how many divisions - format: 'hex', // "hex" or "rgb" or "rgbaString" - alpha: 1 // set an alpha value or a linear alpha mapping [start, end] -} -cg = colormap(options) +[![npm install colormap](https://nodei.co/npm/colormap.png?mini=true)](https://npmjs.org/package/colormap/) + +```js +let colormap = require('colormap') + +let colors = colormap({ + colormap: 'jet' + nshades: 72, + format: 'hex', + alpha: 1 +}) ``` +## API + +### colormap(options) + +| Property | Default | Meaning | +|---|---|---| +| `colormap` | `'jet'` | | +| `nshades` | `72` | | +| `format` | `'hex'` | | +| `alpha` | `1` | | +| `interpolate` | `'smoothstep'` | `smoothstep` or `linear` interpolation between steps. | + where leaving `options = {}` or `undefined` results in the defaults given above. There is a minimum number of `nshades` divisions you can select since the algorithms for each colormap have different requirements. `colormap` throws an error if there are too few divisions for the chosen colormap and gives the minimum number required. You should be safe with `n > 10` for all the colormaps, though some require much less (much simpler to implemenent). ## Options @@ -104,4 +116,4 @@ Then just [browserify](https://github.com/substack/node-browserify) it and throw ## Credits -Color maps are inspired by [matplotlib](https://github.com/d3/d3-scale#sequential-color-scales) color scales, [cmocean](https://github.com/matplotlib/cmocean) oceanographic colormaps, [cosine gradients](https://github.com/thi-ng/color/blob/master/src/gradients.org) and others. Thanks to authors of these libs for their invaluable work. \ No newline at end of file +Color maps are inspired by [matplotlib](https://github.com/d3/d3-scale#sequential-color-scales) color scales, [cmocean](https://github.com/matplotlib/cmocean) oceanographic colormaps, [cosine gradients](https://github.com/thi-ng/color/blob/master/src/gradients.org) and others. Thanks to authors of these libs for their invaluable work. diff --git a/colorScales.js b/colormap.js similarity index 100% rename from colorScales.js rename to colormap.js diff --git a/example/colormaps.png b/colormaps.png similarity index 100% rename from example/colormaps.png rename to colormaps.png diff --git a/example/example.js b/example.js similarity index 90% rename from example/example.js rename to example.js index e916df2..4f040dd 100644 --- a/example/example.js +++ b/example.js @@ -1,6 +1,6 @@ -var cmap = require('./..'), - canvas = document.getElementById('canvas'), - img = document.getElementById('background'), +var cmap = require('.'), + img = document.body.appendChild(document.createElement('img')), + canvas = document.body.appendChild(document.createElement('canvas')), c = canvas.getContext('2d'), n = 48, colormaps = [ @@ -15,12 +15,15 @@ var cmap = require('./..'), 'cubehelix' ]; +img.width = 480; img.onload = run; +img.src = './night.jpg' function drawColorMaps (colormap, name, height) { /* * Build up the color ranges and add text */ + for (var j = 0; j < n; j++) { c.fillStyle = colormap[j]; // start ind at index 0 c.fillRect(j*10, height, 10, 40); diff --git a/example/example.html b/example/example.html deleted file mode 100644 index 53d20d6..0000000 --- a/example/example.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/index.js b/index.js index cedd205..e886279 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,10 @@ var at = require('arraytools'); var clone = require('clone'); -var colorScale = require('./colorScales'); +var colorScale = require('./colormap'); +var isPlainObject = require('is-plain-obj'); +var clamp = require('clamp'); +var lerp = require('lerp') module.exports = createColormap; @@ -23,7 +26,7 @@ function createColormap (spec) { b = [], a = []; - if ( !at.isPlainObject(spec) ) spec = {}; + if ( !isPlainObject(spec) ) spec = {}; nshades = spec.nshades || 72; format = spec.format || 'hex'; @@ -38,7 +41,7 @@ function createColormap (spec) { throw Error(colormap + ' not a supported colorscale'); } - cmap = clone(colorScale[colormap]); + cmap = colorScale[colormap]; } else if (Array.isArray(colormap)) { cmap = clone(colormap); @@ -69,50 +72,50 @@ function createColormap (spec) { alpha = clone(spec.alpha); } - /* - * map index points from 0->1 to 0 -> n-1 - */ + // map index points from 0..1 to 0..n-1 indicies = cmap.map(function(c) { return Math.round(c.index * nshades); }); - /* - * Add alpha channel to the map - */ - if (alpha[0] < 0) alpha[0] = 0; - if (alpha[1] < 0) alpha[0] = 0; - if (alpha[0] > 1) alpha[0] = 1; - if (alpha[1] > 1) alpha[0] = 1; + // Add alpha channel to the map + alpha[0] = clamp(alpha[0], 0, 1); + alpha[1] = clamp(alpha[1], 0, 1); - for (i = 0; i < indicies.length; ++i) { - index = cmap[i].index; - rgba = cmap[i].rgb; + var steps = cmap.map(function(c, i) { + var index = cmap[i].index + + var rgba = cmap[i].rgb.slice(); // if user supplies their own map use it - if (rgba.length === 4 && rgba[3] >= 0 && rgba[3] <= 1) continue; + if (rgba.length === 4 && rgba[3] >= 0 && rgba[3] <= 1) { + return rgba + } rgba[3] = alpha[0] + (alpha[1] - alpha[0])*index; - } + + return rgba + }) + /* * map increasing linear values between indicies to * linear steps in colorvalues */ + var colors = [] for (i = 0; i < indicies.length-1; ++i) { nsteps = indicies[i+1] - indicies[i]; - fromrgba = cmap[i].rgb; - torgba = cmap[i+1].rgb; - r = r.concat(at.linspace(fromrgba[0], torgba[0], nsteps ) ); - g = g.concat(at.linspace(fromrgba[1], torgba[1], nsteps ) ); - b = b.concat(at.linspace(fromrgba[2], torgba[2], nsteps ) ); - a = a.concat(at.linspace(fromrgba[3], torgba[3], nsteps ) ); + fromrgba = steps[i]; + torgba = steps[i+1]; + + for (var j = 0; j < nsteps; j++) { + var amt = j / nsteps + colors.push([ + Math.round(lerp(fromrgba[0], torgba[0], amt)), + Math.round(lerp(fromrgba[1], torgba[1], amt)), + Math.round(lerp(fromrgba[2], torgba[2], amt)), + lerp(fromrgba[3], torgba[3], amt) + ]) + } } - - r = r.map( Math.round ); - g = g.map( Math.round ); - b = b.map( Math.round ); - - colors = at.zip(r, g, b, a); - if (format === 'hex') colors = colors.map( rgb2hex ); if (format === 'rgbaString') colors = colors.map( rgbaStr ); diff --git a/license.txt b/license.md similarity index 100% rename from license.txt rename to license.md diff --git a/example/satellite-view-of-earth-at-night.jpg b/night.jpg similarity index 100% rename from example/satellite-view-of-earth-at-night.jpg rename to night.jpg diff --git a/package.json b/package.json index 1b3f82c..0b6ac35 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,10 @@ "author": "bpostlethwaite", "dependencies": { "arraytools": "^1.1.2", - "clone": "^1.0.2" + "clamp": "^1.0.1", + "clone": "^1.0.2", + "is-plain-obj": "^1.1.0", + "lerp": "^1.0.3" }, "devDependencies": { "color-space": "^1.14.3", diff --git a/test/draw.js b/res/draw.js similarity index 100% rename from test/draw.js rename to res/draw.js diff --git a/test/res/CDOM.js b/res/res/CDOM.js similarity index 100% rename from test/res/CDOM.js rename to res/res/CDOM.js diff --git a/test/res/PAR.js b/res/res/PAR.js similarity index 100% rename from test/res/PAR.js rename to res/res/PAR.js diff --git a/test/res/bathymetry.js b/res/res/bathymetry.js similarity index 100% rename from test/res/bathymetry.js rename to res/res/bathymetry.js diff --git a/test/res/chlorophyll.js b/res/res/chlorophyll.js similarity index 100% rename from test/res/chlorophyll.js rename to res/res/chlorophyll.js diff --git a/test/res/cool.png b/res/res/cool.png similarity index 100% rename from test/res/cool.png rename to res/res/cool.png diff --git a/test/res/density.js b/res/res/density.js similarity index 100% rename from test/res/density.js rename to res/res/density.js diff --git a/test/res/freesurface-blue.js b/res/res/freesurface-blue.js similarity index 100% rename from test/res/freesurface-blue.js rename to res/res/freesurface-blue.js diff --git a/test/res/freesurface-red.js b/res/res/freesurface-red.js similarity index 100% rename from test/res/freesurface-red.js rename to res/res/freesurface-red.js diff --git a/test/res/inferno.js b/res/res/inferno.js similarity index 100% rename from test/res/inferno.js rename to res/res/inferno.js diff --git a/test/res/magma.js b/res/res/magma.js similarity index 100% rename from test/res/magma.js rename to res/res/magma.js diff --git a/test/res/oxygen.js b/res/res/oxygen.js similarity index 100% rename from test/res/oxygen.js rename to res/res/oxygen.js diff --git a/test/res/phase.js b/res/res/phase.js similarity index 100% rename from test/res/phase.js rename to res/res/phase.js diff --git a/test/res/plasma.js b/res/res/plasma.js similarity index 100% rename from test/res/plasma.js rename to res/res/plasma.js diff --git a/test/res/rainbow.png b/res/res/rainbow.png similarity index 100% rename from test/res/rainbow.png rename to res/res/rainbow.png diff --git a/test/res/salinity.js b/res/res/salinity.js similarity index 100% rename from test/res/salinity.js rename to res/res/salinity.js diff --git a/test/res/temperature.js b/res/res/temperature.js similarity index 100% rename from test/res/temperature.js rename to res/res/temperature.js diff --git a/test/res/turbidity.js b/res/res/turbidity.js similarity index 100% rename from test/res/turbidity.js rename to res/res/turbidity.js diff --git a/test/res/velocity-blue.js b/res/res/velocity-blue.js similarity index 100% rename from test/res/velocity-blue.js rename to res/res/velocity-blue.js diff --git a/test/res/velocity-green.js b/res/res/velocity-green.js similarity index 100% rename from test/res/velocity-green.js rename to res/res/velocity-green.js diff --git a/test/res/viridis.js b/res/res/viridis.js similarity index 100% rename from test/res/viridis.js rename to res/res/viridis.js diff --git a/test/res/vorticity-pink.js b/res/res/vorticity-pink.js similarity index 100% rename from test/res/vorticity-pink.js rename to res/res/vorticity-pink.js diff --git a/test/res/vorticity-turquoise.js b/res/res/vorticity-turquoise.js similarity index 100% rename from test/res/vorticity-turquoise.js rename to res/res/vorticity-turquoise.js diff --git a/test/res/warm.png b/res/res/warm.png similarity index 100% rename from test/res/warm.png rename to res/res/warm.png diff --git a/test/rgba-colorscale-test.js b/test.js similarity index 60% rename from test/rgba-colorscale-test.js rename to test.js index 3bf480c..cd22488 100644 --- a/test/rgba-colorscale-test.js +++ b/test.js @@ -1,6 +1,25 @@ var colormap = require('../.'), test = require('tape').test; + +test('is object - object', function(t) { + t.plan(1); + var n = 15, + cg, + check = true; + + // Display all the colormaps + var cms = ['jet', 'hsv' ,'hot', 'cool', 'spring', 'summer', 'autumn', + 'winter', 'greys', 'bone', 'copper']; + + for (var i = 0; i < cms.length; i++) { + cg = cmap({'colormap': cms[i], 'nshades': n }); + check = check & (cg.length == n); + } + + t.ok(check); +}); + test('alpha config creates rgba arrays with correct alpha', function (t) { var alpha = 0.5; @@ -45,12 +64,12 @@ test('user colormap alpha values override alpha config', function (t) { t.end(); }); -test('alphamap values are computed independently between runs', function(t) { - var blueRed = colormap({ - colormap: "bluered", - format: "rgba", - alpha: [0, 1] - }); +test.only('alphamap values are computed independently between runs', function(t) { + // var blueRed = colormap({ + // colormap: "bluered", + // format: "rgba", + // alpha: [0, 1] + // }); var blueRed2 = colormap({ colormap: "bluered", @@ -58,8 +77,12 @@ test('alphamap values are computed independently between runs', function(t) { alpha: [0, 0.5] }); - t.same(blueRed[blueRed.length - 1], [ 255, 0, 0, 1 ]); + // t.same(blueRed[blueRed.length - 1], [ 255, 0, 0, 1 ]); t.same(blueRed2[blueRed2.length - 1], [ 255, 0, 0, 0.5 ]); t.end(); }); + +test('repeating values', function(t) { + t.end() +}); diff --git a/test/output-length-test.js b/test/output-length-test.js deleted file mode 100644 index 903804b..0000000 --- a/test/output-length-test.js +++ /dev/null @@ -1,21 +0,0 @@ -var cmap = require('./..'), - tap = require('tape'); - - -tap.test('is object - object', function(t) { - t.plan(1); - var n = 15, - cg, - check = true; - - // Display all the colormaps - var cms = ['jet', 'hsv' ,'hot', 'cool', 'spring', 'summer', 'autumn', - 'winter', 'greys', 'bone', 'copper']; - - for (var i = 0; i < cms.length; i++) { - cg = cmap({'colormap': cms[i], 'nshades': n }); - check = check & (cg.length == n); - } - - t.ok(check); -});