almost there tbh

4 files changed, 205 insertions, 0 deletions

diff --git a/root/experiments/center_of_mass.moon b/root/experiments/center_of_mass.moon
new file mode 100644
index 0000000..e5eceab
--- /dev/null
+++ b/root/experiments/center_of_mass.moon
@@ -0,0 +1,179 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+with Fileder {
+    'name: alpha': 'center_of_mass',
+    'description: text/plain': "Fonts sorted by Center-of-Mass",
+}
+
+  if MODE == 'CLIENT'
+    import CanvasApp from require 'lib.canvasapp'
+    import rgb from require 'lib.color'
+    import article, h1, p, div, span, input, button from require 'lib.dom'
+
+    fast = true
+    center = true
+    center_char = do
+      canvas = document\createElement 'canvas'
+      ctx = canvas\getContext '2d'
+
+      cache = {}
+
+      (char, font, height) ->
+        name = "#{char} #{height} #{font}"
+        return table.unpack cache[name] if cache[name]
+
+        ctx\resetTransform!
+        ctx.font = "#{height}px #{font}"
+        width = (ctx\measureText char).width
+        canvas.width, canvas.height = width, height * 1.2
+
+        ctx.font = "#{height}px #{font}"
+        ctx.textBaseline = 'top'
+        ctx.fillStyle = rgb 0, 0, 0
+        ctx\fillText char, 0, 0
+
+        data = ctx\getImageData 0, 0, width, height * 1.2
+
+        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
+
+    class CenterOfMass extends CanvasApp
+      width: window.innerWidth - 20
+      height: 300
+      new: (text, @font, @size) =>
+        super!
+        @text = {}
+        for i = 1,#text
+          @add text\sub i, i
+
+      add: (char) =>
+        rcx, rcy, w = center_char char, @font, @size
+        cx, cy = w/2, @size/2
+        vx, vy = 0, 0
+        table.insert @text, {
+          :char, :rcx, :rcy, :w
+          :cx, :cy, :vx, :vy
+        }
+
+      refresh: =>
+        for char in *@text
+          char.rcx, char.rcy, char.w = center_char char.char, @font, @size
+
+      keydown: (key) =>
+        if key == "Backspace" or key == "Delete"
+          table.remove @text
+        elseif string.len(key) == 1
+          @add key
+
+      update: (dt) =>
+        super dt
+
+        ACCEL = 4 * dt
+        DAMPING = 8 * dt
+
+        for char in *@text
+          { :rcx, :rcy, :cx, :cy, :w } = char
+          if not center
+            rcx, rcy = w/2, @size/2
+          dx, dy = rcx - cx, rcy - cy
+          char.vx += dx * ACCEL
+          char.vy += dy * ACCEL
+          char.cx += char.vx
+          char.cy += char.vy
+          char.vx *= DAMPING
+          char.vy *= DAMPING
+
+      draw: =>
+        @ctx\clearRect 0, 0, @width, @height
+
+        @ctx.font = "#{@size}px #{@font}"
+        @ctx.textBaseline = 'top'
+
+        x, y = @size * .1, @size
+        for { :char, :cx, :cy, :w } in *@text
+          if x + w > @width
+            x = 0
+            y += @size * 1.2
+
+          @ctx\fillText char, x + w/2 - cx, y - cy
+          x += w
+
+    .props['moon -> mmm/dom'] = ->
+      _content = {}
+      append = (x) -> table.insert _content, x
+
+      append h1 'Fonts aligned by Center-of-Mass'
+      app = CenterOfMass "Click here and type Away!", "Times New Roman", 40
+      append app.canvas
+      app.canvas.style.backgroundColor = '#eee'
+
+      add = =>
+        append div {
+          span 'font: ',
+          with @font_input = input!
+            .type = 'text'
+            .value = 'Times New Roman'
+          with button 'set'
+            .onclick = (_, e) ->
+              app.font = @font_input.value
+              app\refresh!
+        }
+
+        append div {
+          span 'size: ',
+          input type: 'range', min: 2, max: 120, value: 40, onchange: (_, e) ->
+            size = e.target.value
+            @size_label.innerText = size
+            app.size = size
+            app\refresh!
+          with @size_label = span '40'
+            ''
+        }
+
+        append div {
+          span 'center characters by weight: ',
+          input type: 'checkbox', checked: center, onchange: (_, e) ->
+            center = e.target.checked
+        }
+
+        append div {
+          span 'optimize inner loop: ',
+          input type: 'checkbox', checked: fast, onchange: (_, e) ->
+            fast = e.target.checked
+        }
+      add {}
+
+      article _content
diff --git a/root/experiments/init.moon b/root/experiments/init.moon
new file mode 100644
index 0000000..0beb78c
--- /dev/null
+++ b/root/experiments/init.moon
@@ -0,0 +1,26 @@
+import div, h3, ul, li, a from require 'lib.dom'
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+require = relative ...
+
+Fileder {
+  'name: alpha': 'experiments',
+  'title: text/plain': 'various experiments',
+  'moon -> mmm/dom': (path) => div {
+      h3 @gett 'title: text/plain', style: { 'margin-bottom': '-.5em' },
+      ul for child in *@children
+        name = child\gett 'name: alpha'
+        desc = child\gett 'description: text/plain'
+        li {
+          a name, {
+            href: child.path,
+            onclick: (e) =>
+              e\preventDefault!
+              BROWSER\navigate "animations | #{name}",
+          },
+          ': ', desc
+        }
+    }
+
+  require '.center_of_mass'
+}
diff --git a/app/tags/init.moon b/root/experiments/tags/init.moon
index e3198f8..e3198f8 100644
--- a/app/tags/init.moon
+++ b/root/experiments/tags/init.moon
diff --git a/app/tags/tags.moon b/root/experiments/tags/tags.moon
index 198392e..198392e 100644
--- a/app/tags/tags.moon
+++ b/root/experiments/tags/tags.moon