optimization for center-of-mass

3 files changed, 42 insertions, 15 deletions

diff --git a/app/centerofmass.moon b/app/centerofmass.moon
index 1251096..6348937 100644
--- a/app/centerofmass.moon
+++ b/app/centerofmass.moon
@@ -5,6 +5,7 @@ import CanvasApp from require './canvasapp.moon'
 import rgb from require './color.moon'
 import h1, p, div, span, input, button from require './html.moon'
 
+fast = true
 center_char = do
   canvas = document\createElement 'canvas'
   ctx = canvas\getContext '2d'
@@ -26,17 +27,39 @@ center_char = do
     ctx\fillText char, 0, 0
 
     data = ctx\getImageData 0, 0, width, height * 1.2
-    xx, yy, n = 0, 0, 0
-    for x = 0, data.width - 1
-      for y = 0, data.height - 1
-         i = y * (data.width * 4) + x * 4
-         alpha = data.data[i + 3] / 255
-         xx += x * alpha
-         yy += y * alpha
-         n += alpha
-
-    xx /= n
-    yy /= n
+
+    local xx, yy
+    if fast
+      loop = window\eval '(function(data) {
+        var xx = 0, yy = 0, n = 0;
+        for (var x = 0; x < data.width - 1; x++) {
+          for (var y = 0; y < data.height - 1; y++) {
+            var i = y * (data.width * 4) + x * 4;
+            var alpha = data.data[i + 3] / 255;
+            xx += x * alpha;
+            yy += y * alpha;
+            n += alpha;
+          }
+        }
+
+        xx /= n;
+        yy /= n;
+        return [xx, yy];
+      })'
+      res = loop nil, data
+      xx, yy = res[0], res[1]
+    else
+      xx, yy, n = 0, 0, 0
+      for x = 0, data.width - 1
+        for y = 0, data.height - 1
+           i = y * (data.width * 4) + x * 4
+           alpha = data.data[i + 3] / 255
+           xx += x * alpha
+           yy += y * alpha
+           n += alpha
+
+      xx /= n
+      yy /= n
     cache[name] = { xx, yy, width }
     xx, yy, width
 
@@ -85,11 +108,9 @@ add = =>
     with button 'set'
       .onclick = (_, e) -> app.font = @font_input.value
   }
-add {}
 
-add = =>
   document.body\appendChild div {
-    span 'font: ',
+    span 'size: ',
     input type: 'range', min: 2, max: 120, value: 40, onchange: (_, e) ->
       size = e.target.value
       @size_label.innerText = size
@@ -97,4 +118,10 @@ add = =>
     with @size_label = span '40'
       ''
   }
+
+  document.body\appendChild div {
+    span 'optimize inner loop: ',
+    input type: 'checkbox', checked: fast, onchange: (_, e) ->
+      fast = e.target.checked
+  }
 add {}
diff --git a/dist b/dist
-Subproject 114f08fbeb076f247d7e9b960444171f2f6d961
+Subproject 58a4468e7e2ab737c12d3c46770462294fceb00
diff --git a/package.json b/package.json
index c0afeb0..6916402 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mmm",
   "scripts": {
-    "start:dev": "webpack-dev-server -w",
+    "start": "webpack-dev-server -w",
     "build": "NODE_ENV=production webpack --config ./webpack.config.js --mode production --progress --colors"
   },
   "devDependencies": {