initial commit

5 files changed, 214 insertions, 0 deletions

diff --git a/app/canvasapp.moon b/app/canvasapp.moon
new file mode 100644
index 0000000..f05bfec
--- /dev/null
+++ b/app/canvasapp.moon
@@ -0,0 +1,34 @@
+window = js.global
+
+class CanvasApp
+  width: 500
+  height: 400
+  new: =>
+    @canvas = window.document\createElement 'canvas'
+    @canvas.width, @canvas.height = @width, @height
+    @ctx = @canvas\getContext '2d'
+    @time = 0
+
+    @canvas.tabIndex = 0
+    @canvas\addEventListener 'click', (_, e) -> @click and @click e.offsetX, e.offsetY, e.button
+    @canvas\addEventListener 'keydown', (_, e) -> @keydown and @keydown e.key, e.code
+
+    lastMillis = window.performance\now!
+    t = @
+    animationFrame = (_, millis) ->
+      if not @paused
+        @update (millis - lastMillis) / 1000
+        @ctx\resetTransform!
+        @draw!
+        window\setTimeout (->
+          window\requestAnimationFrame animationFrame
+        ), 0
+      lastMillis = millis
+    window\requestAnimationFrame animationFrame
+
+  update: (dt) =>
+    @time += dt
+
+{
+  :CanvasApp
+}
diff --git a/app/centerofmass.moon b/app/centerofmass.moon
new file mode 100644
index 0000000..d206fc4
--- /dev/null
+++ b/app/centerofmass.moon
@@ -0,0 +1,96 @@
+window = js.global
+document = window.document
+
+import CanvasApp from require './canvasapp.moon'
+import rgb from require './color.moon'
+import h1, p, div, span, input, button from require './html.moon'
+
+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
+    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 - 8
+  height: window.innerHeight * 0.6
+  new: (@text, @font, @size) => super!
+
+  keydown: (key) =>
+    if key == "Backspace" or key == "Delete"
+      @text = @text\sub 1, #@text - 1
+    elseif string.len(key) == 1
+      @text ..= key
+
+  draw: =>
+    @ctx\clearRect 0, 0, @width, @height
+
+    @ctx.font = "#{@size}px #{@font}"
+    @ctx.textBaseline = 'top'
+
+    x, y = 0, @size/2
+    for i=1, #@text
+      char = @text\sub i, i
+      cx, cy, w = center_char char, @font, @size
+
+      if x + w > @width
+        x = 0
+        y += @size * 1.2
+
+      @ctx\fillText char, x + w/2 - cx, y - cy
+      x += w
+
+document.body\appendChild h1 'Fonts aligned by Center-of-Mass'
+document.body\appendChild p 'Click below and type away :)'
+
+app = CenterOfMass "What's up", "Times New Roman", 40
+document.body\appendChild app.canvas
+app.canvas.style.backgroundColor = '#eee'
+
+font_input = input type: 'text', value: 'Times New Roman'
+document.body\appendChild div {
+  span 'font: ',
+  font_input,
+  button {
+    onclick: (e) => app.font = font_input.value,
+    'set'
+  }
+}
+
+size_label = span '40'
+document.body\appendChild div {
+  span 'font: ',
+  input type: 'range', min: 2, max: 120, value: 40, onchange: (e) =>
+    size_label.innerText = e.target.value
+    app.size = e.target.value
+  size_label
+}
diff --git a/app/color.moon b/app/color.moon
new file mode 100644
index 0000000..6233b47
--- /dev/null
+++ b/app/color.moon
@@ -0,0 +1,20 @@
+rgb = (r, g, b) ->
+  r, g, b = table.unpack r if 'table' == type r
+  "rgb(#{r * 255}, #{g * 255}, #{b * 255})"
+
+rgba = (r, g, b, a) ->
+  r, g, b, a = table.unpack r if 'table' == type r
+  "rgba(#{r * 255}, #{g * 255}, #{b * 255}, #{a or 1})"
+
+hsl = (h, s, l) ->
+  h, s, l = table.unpack h if 'table' == type h
+  "hsl(#{h * 360}, #{s * 100}%, #{l * 100}%)"
+
+hsla = (h, s, l, a) ->
+  h, s, l, a = table.unpack h if 'table' == type h
+  "hsla(#{h * 360}, #{s * 100}%, #{l * 100}%, #{a or 1})"
+
+{
+  :rgb, :rgba,
+  :hsl, :hsla,
+}
diff --git a/app/html.moon b/app/html.moon
new file mode 100644
index 0000000..b89344c
--- /dev/null
+++ b/app/html.moon
@@ -0,0 +1,23 @@
+document = js.global.document
+
+element = (element) -> (attrs = {}, ...) ->
+  if 'table' != type attrs
+    attrs = { attrs, ... }
+  with e = document\createElement element
+    for k,v in pairs(attrs)
+      continue unless 'string' == type k
+      e[k] = v
+    for child in *attrs
+      if 'string' == type child
+        e.innerHTML ..= child
+      else
+        e\appendChild child
+
+elements = {}
+add = (e) -> elements[e] = element e
+
+for e in *{'div', 'span', 'a', 'p', 'button', 'ul', 'li'} do add e
+for e in *{'br', 'img', 'input', 'p'} do add e
+for i=1,8 do add "h" .. i
+
+elements
diff --git a/app/twisted.moon b/app/twisted.moon
new file mode 100644
index 0000000..f9ff282
--- /dev/null
+++ b/app/twisted.moon
@@ -0,0 +1,41 @@
+window = js.global
+document = window.document
+
+Math = window.Math
+
+import CanvasApp from require './canvasapp.moon'
+import hsl from require './color.moon'
+
+class TwistedDemo extends CanvasApp
+  width: 500
+  height: 400
+  length: math.pi * 4
+  new: =>
+    super!
+    @background = {Math.random!, Math.random!/3+.2, Math.random!/4}
+    hue = Math.random!
+    @shades = setmetatable {}, __index: (key) =>
+      with val = { hue, .7, key * .3 + .1} do rawset @, key, val
+
+  draw: =>
+    @ctx.fillStyle = hsl @background
+    @ctx\fillRect 0, 0, @width, @height
+    @ctx\translate @width/2, @height/2 + 70
+
+    draw = (i) ->
+      @ctx\save!
+      @ctx\translate 0, -120*i
+      s = 1 - 0.1 * math.sin @time + i*2
+      s *= 0.8 - i * .4 * math.cos @time
+      @ctx\scale s, s/2
+      @ctx\rotate @time/4 + i * .6 * math.cos @time
+      @ctx.fillStyle = hsl table.unpack @shades[i]
+      @ctx\fillRect -80, -80, 160, 160
+      @ctx\restore!
+
+    for i=0,1,1/(20 + 19 * math.sin(@time / 2))
+      draw i
+    draw 1
+
+twisted = TwistedDemo!
+document.body\appendChild twisted.canvas