Skip to content

Commit

Permalink
closes #447 de-linting ColorBlindCorrector
Browse files Browse the repository at this point in the history
  • Loading branch information
@jedeen
jedeen committed Jul 30, 2015
1 parent 24974f0 commit a6242ad
Showing 1 changed file with 73 additions and 73 deletions.
146 changes: 73 additions & 73 deletions src/engine/PostProcessing/ColorBlindCorrector.ts
View file
Expand Up @@ -5,7 +5,7 @@ module ex {
declare var ImageData: {
prototype: ImageData;
new (width: number, height: number): ImageData;
}
};

export enum ColorBlindness {
Protanope,
Expand All @@ -17,87 +17,87 @@ module ex {
export class ColorBlindCorrector implements IPostProcessor {

private _vertexShader =
"attribute vec2 a_position;"+
"attribute vec2 a_texCoord;"+
'attribute vec2 a_position;' +
'attribute vec2 a_texCoord;' +

"uniform vec2 u_resolution;"+
'uniform vec2 u_resolution;' +

"varying vec2 v_texCoord;"+
'varying vec2 v_texCoord;' +

"void main() {"+
'void main() {' +
// convert the rectangle from pixels to 0.0 to 1.0
"vec2 zeroToOne = a_position / u_resolution;"+
'vec2 zeroToOne = a_position / u_resolution;' +

// convert from 0->1 to 0->2
"vec2 zeroToTwo = zeroToOne * 2.0;"+
'vec2 zeroToTwo = zeroToOne * 2.0;' +

// convert from 0->2 to -1->+1 (clipspace)
"vec2 clipSpace = zeroToTwo - 1.0;"+
'vec2 clipSpace = zeroToTwo - 1.0;' +

"gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);"+
'gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);' +

// pass the texCoord to the fragment shader
// The GPU will interpolate this value between points.
"v_texCoord = a_texCoord;"+
"}";
'v_texCoord = a_texCoord;' +
'}';

private _fragmentShader =
"precision mediump float;"+
'precision mediump float;' +
// our texture
"uniform sampler2D u_image;"+
'uniform sampler2D u_image;' +
// the texCoords passed in from the vertex shader.
"varying vec2 v_texCoord;" +
'varying vec2 v_texCoord;' +

// Color blind conversions
/*"mat3 m[9] ="+
"{"+
"mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ),"+ // normal
"mat3(0.567, 0.433, 0.0, 0.558, 0.442, 0.0, 0.0, 0.242, 0.758),"+ // protanopia
"mat3(0.817, 0.183, 0.0, 0.333, 0.667, 0.0, 0.0, 0.125,0.875),"+ // protanomaly
"mat3(0.625, 0.375, 0.0, 0.7, 0.3, 0.0, 0.0, 0.3,0.7 ),"+ // deuteranopia
"mat3(0.8, 0.2, 0.0, 0.258, 0.742, 0.0, 0.0, 0.142,0.858),"+ // deuteranomaly
"mat3(0.95, 0.05, 0.0, 0.0, 0.433, 0.567, 0.0, 0.475,0.525),"+ // tritanopia
"mat3(0.967, 0.033, 0.0, 0.0, 0.733, 0.267, 0.0, 0.183,0.817),"+ // tritanomaly
"mat3(0.299, 0.587, 0.114, 0.299, 0.587, 0.114, 0.299, 0.587,0.114),"+ // achromatopsia
"mat3(0.618, 0.320, 0.062, 0.163, 0.775, 0.062, 0.163, 0.320,0.516)"+ // achromatomaly
"};"+*/
/*'mat3 m[9] =' +
'{' +
'mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0 ),' + // normal
'mat3(0.567, 0.433, 0.0, 0.558, 0.442, 0.0, 0.0, 0.242, 0.758),' + // protanopia
'mat3(0.817, 0.183, 0.0, 0.333, 0.667, 0.0, 0.0, 0.125,0.875),' + // protanomaly
'mat3(0.625, 0.375, 0.0, 0.7, 0.3, 0.0, 0.0, 0.3,0.7 ),' + // deuteranopia
'mat3(0.8, 0.2, 0.0, 0.258, 0.742, 0.0, 0.0, 0.142,0.858),' + // deuteranomaly
'mat3(0.95, 0.05, 0.0, 0.0, 0.433, 0.567, 0.0, 0.475,0.525),' + // tritanopia
'mat3(0.967, 0.033, 0.0, 0.0, 0.733, 0.267, 0.0, 0.183,0.817),' + // tritanomaly
'mat3(0.299, 0.587, 0.114, 0.299, 0.587, 0.114, 0.299, 0.587,0.114),' + // achromatopsia
'mat3(0.618, 0.320, 0.062, 0.163, 0.775, 0.062, 0.163, 0.320,0.516)' + // achromatomaly
'};' +*/


"void main() {" +
'void main() {' +

"vec4 o = texture2D(u_image, v_texCoord);" +
'vec4 o = texture2D(u_image, v_texCoord);' +
// RGB to LMS matrix conversion
"float L = (17.8824 * o.r) + (43.5161 * o.g) + (4.11935 * o.b);"+
"float M = (3.45565 * o.r) + (27.1554 * o.g) + (3.86714 * o.b);"+
"float S = (0.0299566 * o.r) + (0.184309 * o.g) + (1.46709 * o.b);"+
'float L = (17.8824 * o.r) + (43.5161 * o.g) + (4.11935 * o.b);' +
'float M = (3.45565 * o.r) + (27.1554 * o.g) + (3.86714 * o.b);' +
'float S = (0.0299566 * o.r) + (0.184309 * o.g) + (1.46709 * o.b);' +

// Simulate color blindness

"//MODE CODE//"+
'//MODE CODE//' +

/* Deuteranope for testing
"float l = 1.0 * L + 0.0 * M + 0.0 * S;"+
"float m = 0.494207 * L + 0.0 * M + 1.24827 * S;"+
"float s = 0.0 * L + 0.0 * M + 1.0 * S;"+*/
'float l = 1.0 * L + 0.0 * M + 0.0 * S;' +
'float m = 0.494207 * L + 0.0 * M + 1.24827 * S;' +
'float s = 0.0 * L + 0.0 * M + 1.0 * S;' +*/

// LMS to RGB matrix conversion
"vec4 error;"+
"error.r = (0.0809444479 * l) + (-0.130504409 * m) + (0.116721066 * s);"+
"error.g = (-0.0102485335 * l) + (0.0540193266 * m) + (-0.113614708 * s);"+
"error.b = (-0.000365296938 * l) + (-0.00412161469 * m) + (0.693511405 * s);"+
"error.a = 1.0;" +

"vec4 diff = o - error;" +
"vec4 correction;" +
"correction.r = 0.0;" +
"correction.g = (diff.r * 0.7) + (diff.g * 1.0);" +
"correction.b = (diff.r * 0.7) + (diff.b * 1.0);" +
"correction = o + correction;" +
"correction.a = o.a;"+

"//SIMULATE//" +
'vec4 error;' +
'error.r = (0.0809444479 * l) + (-0.130504409 * m) + (0.116721066 * s);' +
'error.g = (-0.0102485335 * l) + (0.0540193266 * m) + (-0.113614708 * s);' +
'error.b = (-0.000365296938 * l) + (-0.00412161469 * m) + (0.693511405 * s);' +
'error.a = 1.0;' +

'vec4 diff = o - error;' +
'vec4 correction;' +
'correction.r = 0.0;' +
'correction.g = (diff.r * 0.7) + (diff.g * 1.0);' +
'correction.b = (diff.r * 0.7) + (diff.b * 1.0);' +
'correction = o + correction;' +
'correction.a = o.a;' +

'//SIMULATE//' +

"}";
'}';



Expand All @@ -106,7 +106,7 @@ module ex {
private _program: WebGLProgram;


constructor(public engine: Engine, public simulate:boolean = false, public colorMode: ColorBlindness = ColorBlindness.Protanope) {
constructor(public engine: Engine, public simulate: boolean = false, public colorMode: ColorBlindness = ColorBlindness.Protanope) {
this._internalCanvas = document.createElement('canvas');
this._internalCanvas.width = engine.getWidth();
this._internalCanvas.height = engine.getHeight();
Expand All @@ -122,38 +122,38 @@ module ex {
this._gl.linkProgram(this._program);

if (!this._gl.getProgramParameter(this._program, this._gl.LINK_STATUS)) {
ex.Logger.getInstance().error("Unable to link shader program!");
ex.Logger.getInstance().error('Unable to link shader program!');
}

this._gl.useProgram(this._program);
}

private _getFragmentShaderByMode(colorMode: ColorBlindness) {
var code = "";
var code = '';
if (colorMode === ColorBlindness.Protanope) {
code =
"float l = 0.0 * L + 2.02344 * M + -2.52581 * S;" +
"float m = 0.0 * L + 1.0 * M + 0.0 * S;" +
"float s = 0.0 * L + 0.0 * M + 1.0 * S;";
'float l = 0.0 * L + 2.02344 * M + -2.52581 * S;' +
'float m = 0.0 * L + 1.0 * M + 0.0 * S;' +
'float s = 0.0 * L + 0.0 * M + 1.0 * S;';
} else if (colorMode === ColorBlindness.Deuteranope) {
code =
"float l = 1.0 * L + 0.0 * M + 0.0 * S;" +
"float m = 0.494207 * L + 0.0 * M + 1.24827 * S;" +
"float s = 0.0 * L + 0.0 * M + 1.0 * S;";
'float l = 1.0 * L + 0.0 * M + 0.0 * S;' +
'float m = 0.494207 * L + 0.0 * M + 1.24827 * S;' +
'float s = 0.0 * L + 0.0 * M + 1.0 * S;';
}else if (colorMode === ColorBlindness.Tritanope) {
code =
"float l = 1.0 * L + 0.0 * M + 0.0 * S;" +
"float m = 0.0 * L + 1.0 * M + 0.0 * S;" +
"float s = -0.395913 * L + 0.801109 * M + 0.0 * S;";
'float l = 1.0 * L + 0.0 * M + 0.0 * S;' +
'float m = 0.0 * L + 1.0 * M + 0.0 * S;' +
'float s = -0.395913 * L + 0.801109 * M + 0.0 * S;';
}

if (this.simulate) {
this._fragmentShader = this._fragmentShader.replace("//SIMULATE//", "gl_FragColor = error.rgba;");
this._fragmentShader = this._fragmentShader.replace('//SIMULATE//', 'gl_FragColor = error.rgba;');
} else {
this._fragmentShader = this._fragmentShader.replace("//SIMULATE//", "gl_FragColor = correction.rgba;");
this._fragmentShader = this._fragmentShader.replace('//SIMULATE//', 'gl_FragColor = correction.rgba;');
}

return this._fragmentShader.replace("//MODE CODE//", code);
return this._fragmentShader.replace('//MODE CODE//', code);

}

Expand All @@ -178,25 +178,25 @@ module ex {
}else if (type === 'Vertex') {
shader = this._gl.createShader(this._gl.VERTEX_SHADER);
} else {
ex.Logger.getInstance().error("Error unknown shader type", type);
ex.Logger.getInstance().error('Error unknown shader type', type);
}


this._gl.shaderSource(shader, program);
this._gl.compileShader(shader);

if (!this._gl.getShaderParameter(shader, this._gl.COMPILE_STATUS)) {
ex.Logger.getInstance().error("Unable to compile shader!", this._gl.getShaderInfoLog(shader));
ex.Logger.getInstance().error('Unable to compile shader!', this._gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

public process(image: ImageData, out: CanvasRenderingContext2D){
public process(image: ImageData, out: CanvasRenderingContext2D) {
// look up where the vertex data needs to go.
var positionLocation = this._gl.getAttribLocation(this._program, "a_position");
var texCoordLocation = this._gl.getAttribLocation(this._program, "a_texCoord");
var positionLocation = this._gl.getAttribLocation(this._program, 'a_position');
var texCoordLocation = this._gl.getAttribLocation(this._program, 'a_texCoord');

var texCoordBuffer = this._gl.createBuffer();
this._gl.bindBuffer(this._gl.ARRAY_BUFFER, texCoordBuffer);
Expand Down Expand Up @@ -225,7 +225,7 @@ module ex {
this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, image);

// lookup uniforms
var resolutionLocation = this._gl.getUniformLocation(this._program, "u_resolution");
var resolutionLocation = this._gl.getUniformLocation(this._program, 'u_resolution');

// set the resolution
this._gl.uniform2f(resolutionLocation, this._internalCanvas.width, this._internalCanvas.height);
Expand Down

0 comments on commit a6242ad

Please sign in to comment.