├── .gitignore
├── LICENSE.md
├── README.md
├── demo.js
├── image.png
├── index.html
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | bundle.js
2 | node_modules
3 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | This software is released under the MIT license:
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
7 | the Software, and to permit persons to whom the Software is furnished to do so,
8 | subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # lut #
2 |
3 | 
4 |
5 | Renders [RGB lookup tables](http://the-witness.net/news/2012/08/fun-with-in-engine-color-grading/) to a canvas element.
6 |
7 | ## Installation ##
8 |
9 | ``` bash
10 | npm install lut
11 | ```
12 |
13 | ## Usage ##
14 |
15 | `lut(red, green, blue, canvas)`
16 |
17 | ``` javascript
18 | var lut = require('lut')
19 | , canvas = document.createElement('canvas')
20 |
21 | // Defaults to 32x32x32, creating a new canvas element:
22 | document.body.appendChild(lut())
23 |
24 | // But you can render on top of an existing canvas,
25 | // and specify the resolution (number of shades) for
26 | // each colour too:
27 | document.body.appendChild(canvas)
28 | lut(64, 8, 128, canvas)
29 | ```
--------------------------------------------------------------------------------
/demo.js:
--------------------------------------------------------------------------------
1 | var lut = require('./')
2 | , canvas = lut()
3 |
4 | document.body.appendChild(canvas)
5 |
--------------------------------------------------------------------------------
/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hughsk/lut/346ddae0d393031db26991433b024293bdb6c11e/image.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Lookup Tables
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | function lut(red, green, blue, canvas) {
2 | var red = red || 32, green = green || 32, blue = blue || 32
3 |
4 | if (!canvas) {
5 | canvas = document.createElement('canvas')
6 | canvas.width = red * blue
7 | canvas.height = green
8 | }
9 |
10 | var r, g, b, x, y
11 | var ctx = canvas.getContext('2d')
12 | , width = red * blue
13 | , height = green
14 | , data = ctx.getImageData(0, 0, width, height)
15 |
16 | for (r = 0; r < red; r += 1) {
17 | for (g = 0; g < green; g += 1) {
18 | for (b = 0; b < blue; b += 1) {
19 | x = r + b * red
20 | y = green - g - 1
21 | data.data[(x + y * width)*4 ] = 255 * (r+0.5) / red
22 | data.data[(x + y * width)*4 + 1] = 255 * (g+0.5) / green
23 | data.data[(x + y * width)*4 + 2] = 255 * (b+0.5) / blue
24 | data.data[(x + y * width)*4 + 3] = 255 // Alpha Channel
25 | }
26 | }
27 | }
28 |
29 | ctx.putImageData(data, 0, 0)
30 |
31 | return canvas
32 | };
33 |
34 | module.exports = lut
35 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "lut",
3 | "version": "0.2.0",
4 | "description": "Render RGB lookup tables to a canvas",
5 | "main": "index.js",
6 | "scripts": {
7 | "prepublish": "node_modules/.bin/browserify demo.js -o bundle.js"
8 | },
9 | "keywords": [
10 | "canvas",
11 | "rgb",
12 | "lookup",
13 | "table",
14 | "colour",
15 | "grading",
16 | "graphics"
17 | ],
18 | "author": "Hugh Kennedy (http://hughskennedy.com)",
19 | "license": "MIT",
20 | "repository": {
21 | "type": "git",
22 | "url": "git://github.com/hughsk/lut.git"
23 | },
24 | "devDependencies": {
25 | "browserify": "~1.17.2"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------