ace-colorpicker-rpk 0.0.12

package/src/util/filter/multi/kirsch.js

@@ -0,0 +1,7 @@
+import {
+    filter
+} from '../functions'
+
+export default function kirsch () {
+    return filter('kirsch-horizontal kirsch-vertical');
+}

package/src/util/filter/multi/sobel.js

@@ -0,0 +1,7 @@
+import {
+    filter
+} from '../functions'
+
+export default function sobel () {
+    return filter('sobel-horizontal sobel-vertical');
+}

package/src/util/filter/multi/vintage.js

@@ -0,0 +1,7 @@
+import {
+    filter
+} from '../functions'
+
+export default function vintage () {
+    return filter(`brightness(15) saturation(-20) gamma(1.8)`)
+}

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

@@ -0,0 +1,24 @@
+import Color from '../../Color'
+import { pixel  } from '../functions'
+
+
+export default function bitonal(darkColor, lightColor, threshold = 100) {
+    let $darkColor = Color.parse(darkColor);
+    let $lightColor = Color.parse(lightColor);
+    let $threshold = threshold
+
+    return pixel(`
+        const thresholdColor = ( $r + $g + $b ) <= $threshold ? $darkColor : $lightColor
+
+        $r = thresholdColor.r
+        $g = thresholdColor.g 
+        $b = thresholdColor.b 
+    `, {
+        $threshold
+    }, {
+        $darkColor,
+        $lightColor
+    })
+}
+
+

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

@@ -0,0 +1,19 @@
+import {
+    parseParamNumber,
+    pixel,
+    colorMatrix
+} from '../functions'
+
+/*
+ * @param {Number} amount  -100..100  ,  value < 0  is darken, value > 0 is brighten 
+ */
+export default function brightness (amount = 1) {
+    amount = parseParamNumber(amount)    
+    const $C = Math.floor(255 * (amount / 100));
+
+    return pixel(`
+        $r += $C 
+        $g += $C 
+        $b += $C 
+    `,{ $C })
+}

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

@@ -0,0 +1,23 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function brownie () {
+
+    const $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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,21 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+/**
+ * 
+ * @param {Number} amount from 0 to 100 
+ */
+export default function clip (amount = 0) {
+    amount = parseParamNumber(amount)    
+    const $C = Math.abs(amount) * 2.55
+
+    return pixel(`
+
+        $r = ($r > 255 - $C) ? 255 : 0
+        $g = ($g > 255 - $C) ? 255 : 0
+        $b = ($b > 255 - $C) ? 255 : 0
+
+    `, { $C })
+}

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

@@ -0,0 +1,18 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+/**
+ * 
+ * @param {*} amount   min = -128, max = 128 
+ */
+export default function contrast(amount = 0) {
+    amount = parseParamNumber(amount)       
+    const $C = Math.max((128 + amount) / 128, 0);
+
+    return pixel(`
+        $r *= $C
+        $g *= $C
+        $b *= $C
+    `, { $C })
+}

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

@@ -0,0 +1,13 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function gamma (amount = 1) {
+    const $C = parseParamNumber(amount)    
+    return pixel(`
+        $r = Math.pow($r / 255, $C) * 255
+        $g = Math.pow($g / 255, $C) * 255
+        $b = Math.pow($b / 255, $C) * 255
+    `, { $C })
+}

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

@@ -0,0 +1,52 @@
+import Color from '../../Color'
+import {
+    // clamp,
+    pixel
+} from '../functions'
+/**
+ * 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 => {
+        const res = Color.matches(arg)
+
+        if (!res.length) {
+            return { type: 'scale', value : arg }
+        }
+
+        return { type: 'param', value : arg }
+    })
+
+    let $scale = params.filter(it => { return it.type == 'scale' })[0]
+    $scale = $scale ? +$scale.value : 256
+
+    params = params.filter(it => { return it.type == 'param' }).map( it => {
+        return it.value 
+    }).join(',')
+
+    let $colors = Color.gradient(params, $scale).map(c => { 
+        const { r, g, b, a } = Color.parse(c)
+        return  {r, g, b, a} 
+    })
+
+    return pixel(`
+        const colorIndex = clamp(Math.ceil($r * 0.2126 + $g * 0.7152 + $b * 0.0722))
+        const newColorIndex = clamp(Math.floor(colorIndex * ($scale / 256)))
+        const color = $colors[newColorIndex]
+
+        $r = color.r 
+        $g = color.g 
+        $b = color.b 
+        $a = clamp(Math.floor(color.a * 256))
+    `, { }, { $colors, $scale })
+}

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

@@ -0,0 +1,27 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function grayscale (amount) { 
+    amount = parseParamNumber(amount)          
+    let C = amount / 100;
+
+    if (C > 1) C = 1; 
+
+    const $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
+    ]
+    
+    return pixel(/*javascript*/`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a
+    `, {
+        $matrix 
+    });
+} 

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

@@ -0,0 +1,28 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+/*
+ * @param {Number} amount   0..360  
+ */
+export default function hue (amount = 360) {
+    const $C = parseParamNumber(amount)          
+    return pixel(`
+        var hsv = Color.RGBtoHSV($r, $g, $b);
+
+        // 0 ~ 360 
+        var h = hsv.h;
+        h += Math.abs($C)
+        h = h % 360
+        hsv.h = h
+
+        var rgb = Color.HSVtoRGB(hsv);
+
+        $r = rgb.r
+        $g = rgb.g
+        $b = rgb.b
+    `, {
+        $C
+    })
+}

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

@@ -0,0 +1,52 @@
+
+import bitonal from './bitonal'
+import brightness from './brightness'
+import brownie from './brownie'
+import clip from './clip'
+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,
+    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/filter/pixel/invert.js

@@ -0,0 +1,16 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+export default function invert (amount = 100) {
+    amount = parseParamNumber(amount)    
+    const $C = amount / 100; 
+
+    return pixel(`
+        $r = (255 - $r) * $C
+        $g = (255 - $g) * $C
+        $b = (255 - $b) * $C
+    `, {
+        $C
+    })
+}

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

@@ -0,0 +1,23 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function kodachrome () {
+
+    const $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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,28 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,24 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+/**
+ * 
+ * @param {Number} amount 1..100
+ */
+export default function noise (amount = 1) {
+    const $C = parseParamNumber(amount)    
+    return pixel(`
+        const C = Math.abs($C) * 5
+        const min = -C
+        const max = C 
+        const noiseValue = Math.round(min + (Math.random() * (max - min)))
+
+        $r += noiseValue
+        $g += noiseValue
+        $b += noiseValue
+    `, {
+        $C
+    })
+}

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

@@ -0,0 +1,14 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+
+export default function opacity (amount = 100) {
+    amount = parseParamNumber(amount)   
+    const $C = amount / 100; 
+
+    return pixel(`
+        $a *= $C 
+    `, { $C })
+}

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

@@ -0,0 +1,23 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function polaroid () {
+
+    const $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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,30 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+/*
+ * @param {Number} amount  -100..100 
+ */
+export default function saturation (amount = 100) {
+    amount = parseParamNumber(amount)    
+    const C = amount / 100 
+    const L = 1 - Math.abs(C);
+
+    const $matrix = [
+        L, 0, 0, 0,
+        0, L, 0, 0,
+        0, 0, L, 0,
+        0, 0, 0, L
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix 
+    })
+
+}

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

@@ -0,0 +1,28 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+/*
+ * @param {Number} amount  0..1 
+ */
+export default function sepia (amount = 1) {
+    let C = parseParamNumber(amount);
+    if (C > 1) C = 1; 
+
+    const $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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,21 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function shade(redValue = 1, greenValue = 1, blueValue = 1) {
+    const $redValue = parseParamNumber(redValue)        
+    const $greenValue = parseParamNumber(greenValue)        
+    const $blueValue = parseParamNumber(blueValue)      
+
+    return pixel(`
+        $r *= $redValue
+        $g *= $greenValue
+        $b *= $blueValue
+    `, {
+        $redValue,
+        $greenValue,
+        $blueValue
+    })
+
+}

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

@@ -0,0 +1,23 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function shift () {
+
+    const $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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,23 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+/**
+ * change the relative darkness of (a part of an image) by overexposure to light.
+ * @param {*} r 
+ * @param {*} g 
+ * @param {*} b 
+ */
+export default function solarize (redValue, greenValue, blueValue) {
+    const $redValue = parseParamNumber(redValue)    
+    const $greenValue = parseParamNumber(greenValue)    
+    const $blueValue = parseParamNumber(blueValue)    
+    return pixel(`
+        $r = ($r < $redValue) ? 255 - $r: $r
+        $g = ($g < $greenValue) ? 255 - $g: $g
+        $b = ($b < $blueValue) ? 255 - $b: $b
+    `, {
+        $redValue, $greenValue, $blueValue
+    })
+
+}

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

@@ -0,0 +1,23 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+export default function technicolor () {
+
+    const $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
+    ]
+
+    return pixel(`
+        $r = $matrix[0] * $r + $matrix[1] * $g + $matrix[2] * $b + $matrix[3] * $a
+        $g = $matrix[4] * $r + $matrix[5] * $g + $matrix[6] * $b + $matrix[7] * $a
+        $b = $matrix[8] * $r + $matrix[9] * $g + $matrix[10] * $b + $matrix[11] * $a
+        $a = $matrix[12] * $r + $matrix[13] * $g + $matrix[14] * $b + $matrix[15] * $a        
+    `, {
+        $matrix
+    })
+}

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

@@ -0,0 +1,35 @@
+import {
+    parseParamNumber,
+    pixel
+} from '../functions'
+
+
+export default function thresholdColor (scale = 200, amount = 100, hasColor = true) {
+    const $scale = parseParamNumber(scale)    
+    amount = parseParamNumber(amount)    
+    const $C = amount / 100;
+    const $hasColor = hasColor
+
+    return pixel(`
+        // refer to Color.brightness 
+        const v = ($C * Math.ceil($r * 0.2126 + $g * 0.7152 + $b * 0.0722) ) >= $scale ? 255 : 0;
+
+        if ($hasColor) {
+
+            if (v == 0) {
+                $r = 0 
+                $g = 0 
+                $b = 0
+            }
+            
+        } else {
+            const value = Math.round(v)
+            $r = value 
+            $g = value 
+            $b = value 
+        }
+        
+    `, {
+        $C, $scale, $hasColor
+    })
+}

package/src/util/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/filter/pixel/tint.js

@@ -0,0 +1,20 @@
+import { pixel, parseParamNumber } from "../functions";
+
+
+export default function (redTint = 1, greenTint = 1, blueTint = 1) {
+    const $redTint = parseParamNumber(redTint)       
+    const $greenTint = parseParamNumber(greenTint)       
+    const $blueTint = parseParamNumber(blueTint)       
+    return pixel(`
+
+        $r += (255 - $r) * $redTint
+        $g += (255 - $g) * $greenTint
+        $b += (255 - $b) * $blueTint
+
+    `, {
+        $redTint, 
+        $greenTint,
+        $blueTint
+    })
+
+}