Improve performance

kode-team · Aug 8, 2018 · dbc20d9 · dbc20d9
1 parent 895aca9
commit dbc20d9
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 184 deletions.
diff --git a/addon/codemirror-colorpicker.js b/addon/codemirror-colorpicker.js
@@ -2194,7 +2194,13 @@ function gradient() {
     }).join(',');
 
     var $colors = color.gradient(params, $scale).map(function (c) {
-        return color.parse(c);
+        var _Color$parse = color.parse(c),
+            r = _Color$parse.r,
+            g = _Color$parse.g,
+            b = _Color$parse.b,
+            a = _Color$parse.a;
+
+        return { r: r, g: g, b: b, a: a };
     });
 
     return pixel(function () {
@@ -2379,7 +2385,8 @@ function thresholdColor() {
     var $hasColor = hasColor;
 
     return pixel(function () {
-        var v = $C * color.brightness($r, $g, $b) >= $scale ? 255 : 0;
+        // refer to Color.brightness 
+        var v = $C * Math.ceil($r * 0.2126 + $g * 0.7152 + $b * 0.0722) >= $scale ? 255 : 0;
 
         if ($hasColor) {
 
@@ -2536,17 +2543,6 @@ function negative() {
     return convolution(weight([-1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1], amount / 100));
 }
 
-function random() {
-    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : createRandomCount();
-
-    amount = parseParamNumber$1(amount);
-    return function (pixels, width, height) {
-        var rand = createRandRange(-1, 5, count);
-        return convolution(rand)(pixels, width, height);
-    };
-}
-
 function sepia2() {
     var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
 
@@ -3088,7 +3084,6 @@ var matrix = {
      motionBlur3: motionBlur3,
      'motion-blur-3': motionBlur3,
      negative: negative,
-     random: random,
      sepia2: sepia2,
      sharpen: sharpen,
      sobelHorizontal: sobelHorizontal,
@@ -3527,46 +3522,44 @@ function fillPixelColor(targetPixels, targetIndex, sourcePixels, sourceIndex) {
     fillColor(targetPixels, targetIndex, sourcePixels[sourceIndex], sourcePixels[sourceIndex + 1], sourcePixels[sourceIndex + 2], sourcePixels[sourceIndex + 3]);
 }
 
+
+
+function createSubPixelWeightFunction(weights, width, height, opaque) {
+    var side = Math.round(Math.sqrt(weights.length));
+    var halfSide = Math.floor(side / 2);
+    var alphaFac = opaque ? 1 : 0;
+
+    var FunctionCode = 'let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ';
+
+    weights.forEach(function (wt, index) {
+        var cy = Math.floor(index / side);
+        var cx = index % side;
+        var distY = cy - halfSide;
+        var distX = cx - halfSide;
+
+        FunctionCode += 'scy = $sy + (' + distY + '); scx = $sx + (' + distX + ');  if (scy >= 0 && scy  < ' + height + ' && scx >= 0 && scx < ' + width + ') { si = (scy * ' + width + ' + scx) << 2;  r += $sp[si] * (' + wt + '); g += $sp[si + 1] * (' + wt + '); b += $sp[si + 2] * (' + wt + '); a += $sp[si + 3] * (' + wt + ');  }\n        ';
+    });
+
+    FunctionCode += '$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + (' + alphaFac + ')*(255-a); ';
+
+    var subPixelFunction = new Function('$dp', '$sp', '$di', '$sx', '$sy', FunctionCode);
+
+    return subPixelFunction;
+}
+
 function convolution(weights) {
+    var opaque = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
     return function (bitmap, done) {
         var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-        var side = Math.round(Math.sqrt(weights.length));
-        var halfSide = Math.floor(side / 2);
-
-        var w = bitmap.width;
-        var h = bitmap.height;
-        var sw = w;
-        var sh = h;
         var newBitmap = createBitmap(bitmap.pixels.length, bitmap.width, bitmap.height);
-        packXY(function (pixels, dstIndex, x, y) {
-            var sy = y;
-            var sx = x;
-            // const dstIndex = (y * w + x) * 4;
-
-            var r = 0,
-                g = 0,
-                b = 0,
-                a = 0;
-            for (var cy = 0; cy < side; cy++) {
-                for (var cx = 0; cx < side; cx++) {
-
-                    var scy = sy + cy - halfSide;
-                    var scx = sx + cx - halfSide;
-
-                    if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
-                        var srcIndex = (scy * sw + scx) * 4;
-                        var wt = weights[cy * side + cx];
-                        r += pixels[srcIndex] * wt;
-                        g += pixels[srcIndex + 1] * wt;
-                        b += pixels[srcIndex + 2] * wt;
-                        a += pixels[srcIndex + 3] * wt; // weight 를 곱한 값을 계속 더한다. 
-                    }
-                }
-            }
 
-            fillColor(newBitmap.pixels, dstIndex, r, g, b, a);
-        })(bitmap, function () {
+        var subPixelWeightFunction = createSubPixelWeightFunction(weights, bitmap.width, bitmap.height, opaque);
+
+        packXY(function (pixels, i, x, y) {
+            subPixelWeightFunction(pixels, bitmap.pixels, i, x, y);
+        })(newBitmap, function () {
             done(newBitmap);
         }, opt);
     };

diff --git a/dist/codemirror-colorpicker.js b/dist/codemirror-colorpicker.js
@@ -2212,7 +2212,13 @@ function gradient() {
     }).join(',');
 
     var $colors = color.gradient(params, $scale).map(function (c) {
-        return color.parse(c);
+        var _Color$parse = color.parse(c),
+            r = _Color$parse.r,
+            g = _Color$parse.g,
+            b = _Color$parse.b,
+            a = _Color$parse.a;
+
+        return { r: r, g: g, b: b, a: a };
     });
 
     return pixel(function () {
@@ -2416,7 +2422,8 @@ function thresholdColor() {
     var $hasColor = hasColor;
 
     return pixel(function () {
-        var v = $C * color.brightness($r, $g, $b) >= $scale ? 255 : 0;
+        // refer to Color.brightness 
+        var v = $C * Math.ceil($r * 0.2126 + $g * 0.7152 + $b * 0.0722) >= $scale ? 255 : 0;
 
         if ($hasColor) {
 
@@ -2581,17 +2588,6 @@ function negative() {
     return convolution(weight([-1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1], amount / 100));
 }
 
-function random() {
-    var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-    var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : createRandomCount();
-
-    amount = parseParamNumber$1(amount);
-    return function (pixels, width, height) {
-        var rand = createRandRange(-1, 5, count);
-        return convolution(rand)(pixels, width, height);
-    };
-}
-
 function sepia2() {
     var amount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
 
@@ -3133,7 +3129,6 @@ var matrix = {
      motionBlur3: motionBlur3,
      'motion-blur-3': motionBlur3,
      negative: negative,
-     random: random,
      sepia2: sepia2,
      sharpen: sharpen,
      sobelHorizontal: sobelHorizontal,
@@ -3572,46 +3567,44 @@ function fillPixelColor(targetPixels, targetIndex, sourcePixels, sourceIndex) {
     fillColor(targetPixels, targetIndex, sourcePixels[sourceIndex], sourcePixels[sourceIndex + 1], sourcePixels[sourceIndex + 2], sourcePixels[sourceIndex + 3]);
 }
 
+
+
+function createSubPixelWeightFunction(weights, width, height, opaque) {
+    var side = Math.round(Math.sqrt(weights.length));
+    var halfSide = Math.floor(side / 2);
+    var alphaFac = opaque ? 1 : 0;
+
+    var FunctionCode = 'let r = 0, g = 0, b = 0, a = 0, scy = 0, scx =0, si = 0; ';
+
+    weights.forEach(function (wt, index) {
+        var cy = Math.floor(index / side);
+        var cx = index % side;
+        var distY = cy - halfSide;
+        var distX = cx - halfSide;
+
+        FunctionCode += 'scy = $sy + (' + distY + '); scx = $sx + (' + distX + ');  if (scy >= 0 && scy  < ' + height + ' && scx >= 0 && scx < ' + width + ') { si = (scy * ' + width + ' + scx) << 2;  r += $sp[si] * (' + wt + '); g += $sp[si + 1] * (' + wt + '); b += $sp[si + 2] * (' + wt + '); a += $sp[si + 3] * (' + wt + ');  }\n        ';
+    });
+
+    FunctionCode += '$dp[$di] = r; $dp[$di+1] = g;$dp[$di+2] = b;$dp[$di+3] = a + (' + alphaFac + ')*(255-a); ';
+
+    var subPixelFunction = new Function('$dp', '$sp', '$di', '$sx', '$sy', FunctionCode);
+
+    return subPixelFunction;
+}
+
 function convolution(weights) {
+    var opaque = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
     return function (bitmap, done) {
         var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-        var side = Math.round(Math.sqrt(weights.length));
-        var halfSide = Math.floor(side / 2);
-
-        var w = bitmap.width;
-        var h = bitmap.height;
-        var sw = w;
-        var sh = h;
         var newBitmap = createBitmap(bitmap.pixels.length, bitmap.width, bitmap.height);
-        packXY(function (pixels, dstIndex, x, y) {
-            var sy = y;
-            var sx = x;
-            // const dstIndex = (y * w + x) * 4;
-
-            var r = 0,
-                g = 0,
-                b = 0,
-                a = 0;
-            for (var cy = 0; cy < side; cy++) {
-                for (var cx = 0; cx < side; cx++) {
-
-                    var scy = sy + cy - halfSide;
-                    var scx = sx + cx - halfSide;
-
-                    if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {
-                        var srcIndex = (scy * sw + scx) * 4;
-                        var wt = weights[cy * side + cx];
-                        r += pixels[srcIndex] * wt;
-                        g += pixels[srcIndex + 1] * wt;
-                        b += pixels[srcIndex + 2] * wt;
-                        a += pixels[srcIndex + 3] * wt; // weight 를 곱한 값을 계속 더한다. 
-                    }
-                }
-            }
 
-            fillColor(newBitmap.pixels, dstIndex, r, g, b, a);
-        })(bitmap, function () {
+        var subPixelWeightFunction = createSubPixelWeightFunction(weights, bitmap.width, bitmap.height, opaque);
+
+        packXY(function (pixels, i, x, y) {
+            subPixelWeightFunction(pixels, bitmap.pixels, i, x, y);
+        })(newBitmap, function () {
             done(newBitmap);
         }, opt);
     };

diff --git a/dist/codemirror-colorpicker.min.js b/dist/codemirror-colorpicker.min.js
diff --git a/index.html b/index.html
@@ -651,6 +651,30 @@ <h1> Image Filter </h1>
                 <div>
                     <button type="button" onclick="view_histogram()">Histogram</button>
                 </div>                
+                <div>
+                    <button type="button" onclick="filter_image('motionBlur')">motion blur</button>
+                </div>                   
+                <div>
+                    <button type="button" onclick="filter_image('motionBlur2')">motion blur 2</button>
+                </div>                     
+                <div>
+                    <button type="button" onclick="filter_image('motionBlur3')">motion blur 3</button>
+                </div>                                                   
+                <div>
+                    <button type="button" onclick="filter_image(['brightness', +document.getElementById('brightness_value').value])">brightness</button>
+                    <input type="range" id="brightness_value" value="10" min="-100" max="100" step="1" />
+                </div>   
+                <div>
+                    <button type="button" onclick="filter_image(['sepia', +document.getElementById('sepia_value').value])">sepia</button>
+                    <input type="range" id="sepia_value" value="10" min="-100" max="100" step="1" />
+                </div>   
+                <div>
+                    <button type="button" onclick="filter_image(['threshold', +document.getElementById('threshold_value').value])">threshold</button>
+                    <input type="number" id="threshold_value" value="100" min="0" max="255" step="1" />
+                </div>                                                                  
+                <div>
+                    <button type="button" onclick="filter_image('sobel')">sobel</button>
+                </div>                       
                 <div>
                     <button type="button" onclick="filter_image(['rotate', 150])">rotate 150</button>
                     <button type="button" onclick="filter_image(['rotate', 75])">rotate 75</button>
@@ -666,7 +690,7 @@ <h1> Image Filter </h1>
                     <button type="button" onclick="filter_image(['vintage'])">vintage</button>
                 </div>          
                 <div>
-                    <button type="button" onclick="filter_image(['stack-blur', '10px'])">stack-blur(5px)</button>
+                    <button type="button" onclick="filter_image(['stack-blur', '100px'])">stack-blur(100px)</button>
                 </div>                                                    
                 <div>
                     <button type="button" onclick="filter_image(['flipH'])">flipH</button>
@@ -714,9 +738,6 @@ <h1> Image Filter </h1>
                 <div>
                     <button type="button" onclick="filter_image('emboss')">emboss</button>
                 </div>                   
-                <div>
-                    <button type="button" onclick="filter_image('random')">random filter</button>
-                </div>   
                 <div>
                     <button type="button" onclick="filter_image('vintage')">vintage</button>
                 </div>                                   
@@ -732,30 +753,7 @@ <h1> Image Filter </h1>
                     <button type="button" onclick="filter_image(['blur', +document.getElementById('blur-value').value])">blur</button>
                     <input type="range" min="1" max="100" step="1" value="3" id="blur-value" />
                 </div>                     
-                <div>
-                    <button type="button" onclick="filter_image('motionBlur')">motion blur</button>
-                </div>                   
-                <div>
-                    <button type="button" onclick="filter_image('motionBlur2')">motion blur 2</button>
-                </div>                     
-                <div>
-                    <button type="button" onclick="filter_image('motionBlur3')">motion blur 3</button>
-                </div>                                                   
-                <div>
-                    <button type="button" onclick="filter_image(['brightness', +document.getElementById('brightness_value').value])">brightness</button>
-                    <input type="range" id="brightness_value" value="10" min="-100" max="100" step="1" />
-                </div>   
-                <div>
-                    <button type="button" onclick="filter_image(['sepia', +document.getElementById('sepia_value').value])">sepia</button>
-                    <input type="range" id="sepia_value" value="10" min="-100" max="100" step="1" />
-                </div>   
-                <div>
-                    <button type="button" onclick="filter_image(['threshold', +document.getElementById('threshold_value').value])">threshold</button>
-                    <input type="number" id="threshold_value" value="100" min="0" max="255" step="1" />
-                </div>                                                                  
-                <div>
-                    <button type="button" onclick="filter_image('sharpen', 'blur', 'sobel')">sobel</button>
-                </div>                                                                                                            
+
 
             </div>            
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codemirror-colorpicker",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "colorpicker for codemirror",
   "main": "./dist/codemirror-colorpicker.js",
   "scripts": {