ace-colorpicker-rpk 0.0.12

package/src/util/gl/filter/pixel/bitonal.js

@@ -0,0 +1,22 @@
+import Color from '../../../Color'
+import {
+    shader,
+    colorToVec4,
+    toFloatString
+} from '../util'
+
+export default function bitonal(darkColor, lightColor, threshold = 0.5) {
+    let checkVlue = toFloatString(threshold)
+    let darkColorString = colorToVec4(Color.parse(darkColor))
+    let lightColorString = colorToVec4(Color.parse(lightColor))
+
+    return shader(`
+        if ((pixelColor.r + pixelColor.g + pixelColor.b) > ${checkVlue}) {
+            outColor = vec4(${lightColorString}.rgb, pixelColor.a);
+        } else {
+            outColor = vec4(${darkColorString}.rgb, pixelColor.a);
+        }
+    `);
+}
+
+

package/src/util/gl/filter/pixel/brightness.js

@@ -0,0 +1,14 @@
+import {
+    shader, toFloatString, parseParamNumber
+} from '../util'
+
+/*
+ * @param {Number} amount  -1..1  ,  value < 0  is darken, value > 0 is brighten 
+ */
+export default function brightness (amount = 1) {
+    const C = toFloatString( parseParamNumber(amount) );
+
+    return shader(`
+        outColor = pixelColor + (${C});
+    `);
+}

package/src/util/gl/filter/pixel/brownie.js

@@ -0,0 +1,11 @@
+import matrix from './matrix'
+
+export default function brownie () { 
+
+    return matrix(
+        0.5997023498159715,0.34553243048391263,-0.2708298674538042,0,
+        -0.037703249837783157,0.8609577587992641,0.15059552388459913,0,
+        0.24113635128153335,-0.07441037908422492,0.44972182064877153,0,
+        0,0,0,1
+    )
+} 

package/src/util/gl/filter/pixel/chaos.js

@@ -0,0 +1,20 @@
+import {
+    shader,
+    parseParamNumber,
+    toFloatString
+} from '../util'
+
+export default function chaos (amount = 10) {
+    const C = toFloatString( parseParamNumber(amount) ); 
+
+    return shader(`
+        vec2 st = pixelColor.st;
+        st *= ${C};
+        
+        vec2 ipos = floor(st);  // get the integer coords
+
+        vec3 color = vec3(random( ipos ));
+
+        outColor = vec4(color, pixelColor.a);
+    `);
+}

package/src/util/gl/filter/pixel/clip.js

@@ -0,0 +1,20 @@
+
+import {
+    shader, toFloatString, parseParamNumber
+} from '../util'
+
+/*
+ * @param {Number} amount 0..1
+ */
+export default function clip (amount = 0) {
+    const C = toFloatString(parseParamNumber(amount))
+
+    return shader(`
+        outColor = vec4(
+            (pixelColor.r > 1.0 - ${C}) ? 1.0 : 0.0,
+            (pixelColor.g > 1.0 - ${C}) ? 1.0 : 0.0,
+            (pixelColor.b > 1.0 - ${C}) ? 1.0 : 0.0,
+            pixelColor.a 
+        );
+    `);
+}

package/src/util/gl/filter/pixel/contrast.js

@@ -0,0 +1,16 @@
+import {
+    shader,
+    parseParamNumber,
+    toFloatString   
+} from '../util'
+
+/*
+ * @param {Number} amount  0..1
+ */
+export default function contrast (amount = 1) {
+    const C = toFloatString(parseParamNumber(amount));
+
+    return shader(`
+        outColor = pixelColor * ${C};
+    `);
+}

package/src/util/gl/filter/pixel/gamma.js

@@ -0,0 +1,16 @@
+import {
+    shader,
+    parseParamNumber,    
+    toFloatString
+} from '../util'
+
+/*
+ * @param {Number} amount  -1..1  ,  value < 0  is darken, value > 0 is brighten 
+ */
+export default function gamma (amount = 1) {
+    const C = toFloatString( parseParamNumber(amount) )
+
+    return shader(`
+        outColor = vec4(pow(pixelColor.r, ${C}), pow(pixelColor.g, ${C}), pow(pixelColor.b, ${C}), pixelColor.a );
+    `);
+}

package/src/util/gl/filter/pixel/gradient.js

@@ -0,0 +1,59 @@
+import Color from '../../../Color'
+import {
+    shader,
+    colorToVec4,
+    toFloatString
+} from '../util'
+/**
+ * F.gradient('red', 'blue', 'yellow', 'white', 10)
+ * F.gradient('red, blue, yellow, white, 10')
+ */
+export default function gradient () {
+    // 전체 매개변수 기준으로 파싱 
+    // 색이 아닌 것 기준으로 scale 변수로 인식 
+
+    let params = [...arguments];
+
+    if (params.length === 1 && typeof params[0] === 'string') {
+        params = Color.convertMatchesArray(params[0])
+    } 
+
+    params = params.map(arg => {
+        return arg
+    }).join(', ')
+
+    let colors = Color.parseGradient(params);
+
+    colors[0][1] = 0;
+    colors[colors.length-1][1] = 1; 
+
+    colors = colors.map(c => {
+        const {r, g, b, a} = Color.parse(c[0])
+        return [{r, g, b, a}, c[1]];
+    })
+
+    let temp = [] 
+
+    for(var i = 0, len = colors.length; i < len - 1; i++) {
+        const start = colors[i];
+        const end = colors[i+1];
+
+        const startColor = colorToVec4(start[0])
+        const endColor = colorToVec4(end[0])
+
+        const startRate = toFloatString (start[1]);
+        const endRate = toFloatString (end[1]);
+
+        temp.push(`
+            if (${startRate} <= rate && rate < ${endRate}) {
+                outColor = mix(${startColor}, ${endColor}, (rate - ${startRate})/(${endRate} - ${startRate}));
+            }
+        `)
+    }
+
+    return shader(`
+        float rate = (pixelColor.r * 0.2126 + pixelColor.g * 0.7152 + pixelColor.b * 0.0722); 
+
+        ${temp.join('\n')}        
+    `)
+}

package/src/util/gl/filter/pixel/grayscale.js

@@ -0,0 +1,22 @@
+import {
+    parseParamNumber
+} from '../util'
+
+import matrix from './matrix'
+
+/**
+ * 
+ * @param {Number} amount 0..1
+ */
+export default function grayscale (amount = 1) { 
+    let C = parseParamNumber(amount);
+
+    if (C > 1) C = 1; 
+
+    return matrix(
+        (0.2126 + 0.7874 * (1 - C)), (0.7152 - 0.7152 * (1 - C)), (0.0722 - 0.0722 * (1 - C)), 0,
+        (0.2126 - 0.2126 * (1 - C)), (0.7152 + 0.2848 * (1 - C)), (0.0722 - 0.0722 * (1 - C)), 0,
+        (0.2126 - 0.2126 * (1 - C)), (0.7152 - 0.7152 * (1 - C)), (0.0722 + 0.9278 * (1 - C)), 0,
+        0, 0, 0, 1
+    );
+} 

package/src/util/gl/filter/pixel/hue.js

@@ -0,0 +1,19 @@
+//http://lolengine.net/blog/2013/07/27/rgb-to-hsv-in-glsl
+import {
+    shader,
+    parseParamNumber,    
+    toFloatString
+} from '../util'
+
+/*
+ * @param {Number} amount  0..1  ,  (real value 0..360)
+ */
+export default function hue (amount = 1) {
+    const C = toFloatString( parseParamNumber(amount))
+
+    return shader(`
+        vec3 hsv = rgb2hsv(pixelColor.rgb);
+        hsv.x += ${C};
+        outColor = vec4(hsv2rgb(hsv).rgb, pixelColor.a);
+    `);
+}

package/src/util/gl/filter/pixel/index.js

@@ -0,0 +1,54 @@
+
+import bitonal from './bitonal'
+import brightness from './brightness'
+import brownie from './brownie'
+import clip from './clip'
+import chaos from './chaos'
+import contrast from './contrast'
+import gamma from './gamma'
+import gradient from './gradient'
+import grayscale from './grayscale'
+import hue from './hue'
+import invert from './invert' 
+import kodachrome from './kodachrome'
+import matrix from './matrix'
+import noise from './noise' 
+import opacity from './opacity' 
+import polaroid from './polaroid'
+import saturation from './saturation' 
+import sepia from './sepia'
+import shade from './shade'
+import shift from './shift'
+import solarize from './solarize'
+import technicolor from './technicolor'
+import threshold from './threshold'
+import thresholdColor from './threshold-color'
+import tint from './tint'
+
+export default {
+    bitonal, 
+    brightness,
+    brownie,
+    clip,
+    chaos,
+    contrast,
+    gamma,
+    gradient,
+    grayscale,
+    hue, 
+    invert,
+    kodachrome,
+    matrix,
+    noise, 
+    opacity,
+    polaroid,
+    saturation, 
+    sepia,
+    shade,
+    shift,
+    solarize,  
+    technicolor,
+    threshold,
+    'threshold-color': thresholdColor,
+    tint
+} 

package/src/util/gl/filter/pixel/invert.js

@@ -0,0 +1,18 @@
+import {
+    shader,
+    parseParamNumber,
+    toFloatString
+} from '../util'
+
+export default function invert (amount = 1) {
+    const C = toFloatString( parseParamNumber(amount) ); 
+
+    return shader(`
+        outColor = vec4(
+            (1.0 - pixelColor.r) * ${C},
+            (1.0 - pixelColor.g) * ${C},
+            (1.0 - pixelColor.b) * ${C},
+            pixelColor.a
+        );
+    `);
+}

package/src/util/gl/filter/pixel/kodachrome.js

@@ -0,0 +1,11 @@
+import matrix from './matrix'
+
+export default function kodachrome () {
+
+    return matrix(
+        1.1285582396593525,-0.3967382283601348,-0.03992559172921793,0,
+        -0.16404339962244616,1.0835251566291304,-0.05498805115633132,0,
+        -0.16786010706155763,-0.5603416277695248,1.6014850761964943,0,
+        0,0,0,1
+    )
+} 

package/src/util/gl/filter/pixel/matrix.js

@@ -0,0 +1,29 @@
+import {
+    shader,
+    toFloatString
+} from '../util'
+
+export default function matrix (
+    $a = 0, $b = 0, $c = 0, $d = 0, 
+    $e = 0, $f = 0, $g = 0, $h = 0, 
+    $i = 0, $j = 0, $k = 0, $l = 0, 
+    $m = 0, $n = 0, $o = 0, $p = 0
+) {
+
+    const matrix = [
+        $a, $b, $c, $d, 
+        $e, $f, $g, $h, 
+        $i, $j, $k, $l, 
+        $m, $n, $o, $p
+    ].map(toFloatString)
+    
+    return shader(`
+
+        outColor = vec4(
+            ${matrix[0]} * pixelColor.r + ${matrix[1]} * pixelColor.g + ${matrix[2]} * pixelColor.b + ${matrix[3]} * pixelColor.a,
+            ${matrix[4]} * pixelColor.r + ${matrix[5]} * pixelColor.g + ${matrix[6]} * pixelColor.b + ${matrix[7]} * pixelColor.a,
+            ${matrix[8]} * pixelColor.r + ${matrix[9]} * pixelColor.g + ${matrix[10]} * pixelColor.b + ${matrix[11]} * pixelColor.a,
+            ${matrix[12]} * pixelColor.r + ${matrix[13]} * pixelColor.g + ${matrix[14]} * pixelColor.b + ${matrix[15]} * pixelColor.a
+        ); 
+    `);
+} 

package/src/util/gl/filter/pixel/noise.js

@@ -0,0 +1,18 @@
+import { shader, parseParamNumber, toFloatString } from '../util';
+
+
+/**
+ * 
+ * @param {Number} amount 0..1
+ */
+export default function noise (amount = 1) {
+
+    const C = Math.abs( parseParamNumber(amount))
+    const min = toFloatString( -C )
+    const max = toFloatString( C ) 
+    return shader(`
+        float rnd = ${min} + random( pixelColor.st ) * (${max} - ${min});
+
+        outColor = vec4(pixelColor.rgb + rnd, 1.0);
+    `);
+}

package/src/util/gl/filter/pixel/opacity.js

@@ -0,0 +1,17 @@
+import {
+    shader,
+    parseParamNumber,    
+    toFloatString
+} from '../util'
+
+/**
+ * 
+ * @param {Number} amount 0..1
+ */
+export default function opacity (amount = 1) {
+    const C = toFloatString( parseParamNumber(amount)); 
+
+    return shader(`
+        outColor = vec4(pixelColor.rgb, pixelColor.a * ${C});
+    `);
+}

package/src/util/gl/filter/pixel/polaroid.js

@@ -0,0 +1,11 @@
+import matrix from './matrix'
+
+export default function polaroid () {
+
+    return matrix(
+        1.438,-0.062,-0.062,0,
+        -0.122,1.378,-0.122,0,
+        -0.016,-0.016,1.483,0,
+        0,0,0,1
+    )
+}

package/src/util/gl/filter/pixel/saturation.js

@@ -0,0 +1,20 @@
+import {
+    parseParamNumber
+} from '../util'
+import matrix from './matrix'
+
+
+/*
+ * @param {Number} amount  0..1 
+ */
+export default function saturation (amount = 0) {
+    const L = 1 - Math.abs(parseParamNumber(amount));
+
+    return matrix(
+        L, 0, 0, 0,
+        0, L, 0, 0,
+        0, 0, L, 0,
+        0, 0, 0, L
+    )
+
+}

package/src/util/gl/filter/pixel/sepia.js

@@ -0,0 +1,19 @@
+import {
+    parseParamNumber
+} from '../util';
+import matrix from "./matrix";
+
+/*
+ * @param {Number} amount  0..100 
+ */
+export default function sepia (amount = 1) {
+    let C = parseParamNumber(amount);
+    if (C > 1) C = 1; 
+
+    return matrix(
+        (0.393 + 0.607 * (1 - C)), (0.769 - 0.769 * (1 - C)), (0.189 - 0.189 * (1 - C)), 0,
+        (0.349 - 0.349 * (1 - C)), (0.686 + 0.314 * (1 - C)), (0.168 - 0.168 * (1 - C)), 0,
+        (0.272 - 0.272 * (1 - C)), (0.534 - 0.534 * (1 - C)), (0.131 + 0.869 * (1 - C)), 0,
+        0, 0, 0, 1
+    )
+}

package/src/util/gl/filter/pixel/shade.js

@@ -0,0 +1,20 @@
+import {
+    shader,
+    parseParamNumber,
+    toFloatString
+} from '../util'
+
+export default function shade(redValue = 1, greenValue = 1, blueValue = 1) {
+    const r = toFloatString(parseParamNumber(redValue) / 255)
+    const g = toFloatString(parseParamNumber(greenValue) /255)
+    const b = toFloatString(parseParamNumber(blueValue) /255)   
+
+    return shader(`
+        outColor = vec4(
+            pixelColor.r * ${r},
+            pixelColor.g * ${g},
+            pixelColor.b * ${b},
+            pixelColor.a
+        );
+    `);
+}

package/src/util/gl/filter/pixel/shift.js

@@ -0,0 +1,11 @@
+import matrix from './matrix'
+
+export default function shift () {
+
+    return matrix(
+        1.438,-0.062,-0.062,0,
+        -0.122,1.378,-0.122,0,
+        -0.016,-0.016,1.483,0,
+        0,0,0,1
+    );
+}

package/src/util/gl/filter/pixel/solarize.js

@@ -0,0 +1,21 @@
+import {
+    shader,
+    parseParamNumber,    
+    toFloatString
+} from '../util'
+
+export default function solarize (redValue, greenValue, blueValue) {
+    const r = toFloatString( parseParamNumber(redValue) )
+    const g = toFloatString( parseParamNumber(greenValue) )
+    const b = toFloatString( parseParamNumber(blueValue) )
+
+    return shader(`
+        outColor = vec4(
+            (pixelColor.r < ${r}) ? 1.0 - pixelColor.r: pixelColor.r,
+            (pixelColor.g < ${g}) ? 1.0 - pixelColor.g: pixelColor.g,
+            (pixelColor.b < ${b}) ? 1.0 - pixelColor.b: pixelColor.b,
+            pixelColor.a
+        );
+    `);
+}
+

package/src/util/gl/filter/pixel/technicolor.js

@@ -0,0 +1,11 @@
+import matrix from './matrix'
+
+export default function technicolor () {
+
+    return matrix(
+        1.9125277891456083,-0.8545344976951645,-0.09155508482755585,0,
+        -0.3087833385928097,1.7658908555458428,-0.10601743074722245,0,
+        -0.231103377548616,-0.7501899197440212,1.847597816108189,0,
+        0,0,0,1
+    )
+}

package/src/util/gl/filter/pixel/threshold-color.js

@@ -0,0 +1,15 @@
+import {
+    parseParamNumber,
+    shader,
+    toFloatString
+} from '../util'
+
+export default function thresholdColor (scale = 1) {
+    scale = toFloatString( parseParamNumber(scale) )
+
+    return shader(`
+        float c = ( (pixelColor.r * 0.2126 + pixelColor.g * 0.7152 + pixelColor.b * 0.0722) ) >= ${scale} ? 1.0 : 0.0;
+
+        outColor = vec4(c, c, c, pixelColor.a);
+    `)
+}

package/src/util/gl/filter/pixel/threshold.js

@@ -0,0 +1,7 @@
+import thresholdColor from './threshold-color'
+/*
+ * @param {Number} amount  0..100 
+ */
+export default function threshold (scale = 200, amount = 100) {
+    return thresholdColor(scale, amount, false)
+}

package/src/util/gl/filter/pixel/tint.js

@@ -0,0 +1,25 @@
+import {
+    shader,
+    parseParamNumber    
+} from '../util'
+
+/**
+ * 
+ * @param {*} redTint  0..1
+ * @param {*} greenTint 0..1
+ * @param {*} blueTint 0..1
+ */
+export default function (redTint = 0, greenTint = 0, blueTint = 0) {
+    const r = parseParamNumber(redTint)       
+    const g = parseParamNumber(greenTint)       
+    const b = parseParamNumber(blueTint)  
+
+    return shader(`
+        outColor = vec4(
+            pixelColor.r += (1 - pixelColor.r) * ${r},
+            pixelColor.g += (1 - pixelColor.g) * ${g},
+            pixelColor.b += (1 - pixelColor.b) * ${b},
+            pixelColor.a
+        );
+    `);
+}