From 60c69fb8b3414d753cfefe187543957918606422 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sun, 6 Aug 2017 18:51:55 +0000 Subject: [PATCH] Possibly ideal uniform LUT size --- docs/lut.html | 7 +++ docs/lut.js | 116 ++++++++++++++++++++++++++++++-------------------- 2 files changed, 76 insertions(+), 47 deletions(-) diff --git a/docs/lut.html b/docs/lut.html index b9d12ad..678cb4b 100644 --- a/docs/lut.html +++ b/docs/lut.html @@ -19,6 +19,13 @@ th, td { padding: 5px; } +.swatch { + width: 5em; + text-align: center; + font-weight: bold; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: white; +} diff --git a/docs/lut.js b/docs/lut.js index ab999fe..068b260 100644 --- a/docs/lut.js +++ b/docs/lut.js @@ -23,6 +23,8 @@ class Point { this.g = g; this.b = b; + this.ref = 0; + this.HEX_DIV = 256; this.HEX_PAD = 2; } @@ -35,31 +37,40 @@ class Point { return leftPad(Math.floor(val / this.HEX_DIV).toString(16), this.HEX_PAD); } + incRef() { + this.ref++; + } + addSwatch(parentElement) { let elem = createElement(parentElement, 'td') - elem.style = 'width: 5em; text-align: center; text-shadow: 1px 1px 0 white; background-color: ' + this.getHexColor(); + elem.classList.add('swatch'); + elem.style = 'background-color: ' + this.getHexColor(); return elem; } - addColorCells(parentElement) { - this.addSwatch(parentElement); + addRgb(parentElement) { createElement(parentElement, 'td', leftPad(this.r.toString(16), 4)); createElement(parentElement, 'td', leftPad(this.g.toString(16), 4)); createElement(parentElement, 'td', leftPad(this.b.toString(16), 4)); } + + addRef(parentElement) { + createElement(parentElement, 'td', this.ref); + } } class LutExperiment { constructor(container) { this.container = container; - this.SIZE = 5; + this.SIZE_X = 4; // R + this.SIZE_Y = 3; // G + this.SIZE_Z = 3; // B this.NUM_COLOR = 2 ** 16; - this.PER_BLOCK = Math.floor(this.NUM_COLOR / (this.SIZE - 1)); this.generatePoints(); - this.colorChecker = [ + this.COLOR_CHECKER = [ new Point(0x7300, 0x5200, 0x4400), new Point(0xc200, 0x9600, 0x8200), new Point(0x6200, 0x7a00, 0x9d00), @@ -86,27 +97,48 @@ class LutExperiment { new Point(0x3400, 0x3400, 0x3400), ]; + this.CUBE_OFFSET = [ + [0, 0, 0], + [1, 0, 0], + [1, 1, 0], + [0, 1, 0], + [0, 0, 1], + [1, 0, 1], + [1, 1, 1], + [0, 1, 1], + ]; + this.showColorChecker(); this.showResults(); } generatePoints() { this.points = new Array(); - for (let x = 0; x < this.SIZE; ++x) { + for (let x = 0; x < this.SIZE_X; ++x) { this.points[x] = new Array(); - for (let y = 0; y < this.SIZE; ++y) { + for (let y = 0; y < this.SIZE_Y; ++y) { this.points[x][y] = new Array(); - for (let z = 0; z < this.SIZE; ++z) { - this.points[x][y][z] = new Point(this.getColorValue(x), this.getColorValue(y), this.getColorValue(z)); + for (let z = 0; z < this.SIZE_Z; ++z) { + this.points[x][y][z] = new Point( + this.getColorValue(x, this.SIZE_X), + this.getColorValue(y, this.SIZE_Y), + this.getColorValue(z, this.SIZE_Z), + ); } } } } - getColorValue(index) { - return Math.min(this.NUM_COLOR - 1, this.PER_BLOCK * index); + getColorValue(index, size) { + let per_block = Math.floor(this.NUM_COLOR / (size - 1)); + return Math.min(this.NUM_COLOR - 1, per_block * index); + } + + getIndex(val, size) { + let per_block = Math.floor(this.NUM_COLOR / (size - 1)); + return Math.min(Math.floor(val / per_block), size - 2); } showColorChecker() { @@ -117,29 +149,23 @@ class LutExperiment { createElement(headers, 'th', 'R'); createElement(headers, 'th', 'G'); createElement(headers, 'th', 'B'); - createElement(headers, 'th', 'Root'); - createElement(headers, 'th', 'x+1'); - createElement(headers, 'th', 'y+1'); - createElement(headers, 'th', 'z+1'); - createElement(headers, 'th', 'x+1,y+1'); - createElement(headers, 'th', 'x+1,z+1'); - createElement(headers, 'th', 'y+1,z+1'); + for (let offset of this.CUBE_OFFSET) { + createElement(headers, 'th', offset.join(',')); + } - for (let point of this.colorChecker) { + for (let point of this.COLOR_CHECKER) { let tr = createElement(table, 'tr'); - point.addColorCells(tr); + point.addSwatch(tr); + point.addRgb(tr); - let rootX = Math.min(Math.floor(point.r / this.PER_BLOCK), this.SIZE - 2); - let rootY = Math.min(Math.floor(point.g / this.PER_BLOCK), this.SIZE - 2); - let rootZ = Math.min(Math.floor(point.b / this.PER_BLOCK), this.SIZE - 2); + let x = this.getIndex(point.r, this.SIZE_X); + let y = this.getIndex(point.g, this.SIZE_Y); + let z = this.getIndex(point.b, this.SIZE_Z); - this.points[rootX][rootY][rootZ].addSwatch(tr).textContent = rootX + ',' + rootY + ',' + rootZ; - this.points[rootX + 1][rootY][rootZ].addSwatch(tr); - this.points[rootX][rootY + 1][rootZ].addSwatch(tr); - this.points[rootX][rootY][rootZ + 1].addSwatch(tr); - this.points[rootX + 1][rootY + 1][rootZ].addSwatch(tr); - this.points[rootX + 1][rootY][rootZ + 1].addSwatch(tr); - this.points[rootX][rootY + 1][rootZ + 1].addSwatch(tr); + for (let [ox, oy, oz] of this.CUBE_OFFSET) { + this.addSwatch(tr, x + ox, y + oy, z + oz); + this.points[x + ox][y + oy][z + oz].incRef(); + } } } @@ -147,30 +173,26 @@ class LutExperiment { let table = createElement(this.container, 'table'); let headers = createElement(table, 'tr'); - createElement(headers, 'th', 'X'); - createElement(headers, 'th', 'Y'); - createElement(headers, 'th', 'Z'); createElement(headers, 'th', 'Swatch'); createElement(headers, 'th', 'R'); createElement(headers, 'th', 'G'); createElement(headers, 'th', 'B'); + createElement(headers, 'th', 'Ref'); - for (let x = 0; x < this.SIZE; ++x) { - let square = this.points[x]; - - for (let y = 0; y < this.SIZE; ++y) { - let row = square[y]; - - for (let z = 0; z < this.SIZE; ++z) { - let point = row[z]; - + for (let x = 0; x < this.SIZE_X; ++x) { + for (let y = 0; y < this.SIZE_Y; ++y) { + for (let z = 0; z < this.SIZE_Z; ++z) { + let point = this.points[x][y][z]; let tr = createElement(table, 'tr'); - createElement(tr, 'td', x); - createElement(tr, 'td', y); - createElement(tr, 'td', z); - point.addColorCells(tr); + this.addSwatch(tr, x, y, z); + point.addRgb(tr); + point.addRef(tr); } } } } + + addSwatch(parentElement, x, y, z) { + this.points[x][y][z].addSwatch(parentElement).textContent = x + ',' + y + ',' + z; + } }