implement mmmfs on real fs

2 files changed, 172 insertions, 0 deletions

diff --git a/root/experiments/center_of_mass/description: text$plain b/root/experiments/center_of_mass/description: text$plain
new file mode 100644
index 0000000..256df66
--- /dev/null
+++ b/root/experiments/center_of_mass/description: text$plain
@@ -0,0 +1 @@
+Fonts aligned by Center-of-Mass
diff --git a/root/experiments/center_of_mass/text$moonscript -> mmm$dom.moon b/root/experiments/center_of_mass/text$moonscript -> mmm$dom.moon
new file mode 100644
index 0000000..a43ea69
--- /dev/null
+++ b/root/experiments/center_of_mass/text$moonscript -> mmm$dom.moon
@@ -0,0 +1,171 @@
+assert MODE == 'CLIENT', '[nossr]'
+
+import CanvasApp from require 'mmm.canvasapp'
+import rgb from require 'mmm.color'
+import article, h1, p, div, span, input, button from require 'mmm.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
+
+_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