add aspect ratios

6 files changed, 280 insertions, 0 deletions

diff --git a/root/blog/aspect_ratios/interactive/_base: text$moonscript -> table.moon b/root/blog/aspect_ratios/interactive/_base: text$moonscript -> table.moon
new file mode 100644
index 0000000..d348f4b
--- /dev/null
+++ b/root/blog/aspect_ratios/interactive/_base: text$moonscript -> table.moon
@@ -0,0 +1,92 @@
+assert MODE == 'CLIENT', '[nossr]'
+
+import CanvasApp from require 'mmm.canvasapp'
+import div from require 'mmm.dom'
+
+class UIDemo extends CanvasApp
+  width: nil
+  height: nil
+  new: () =>
+    super!
+
+    @canvas.width = nil
+    @canvas.height = nil
+    @canvas.style.width = '100%'
+    @canvas.style.height = '100%'
+    @canvas.style.border = '2px solid var(--gray-dark)'
+
+    @node = div @canvas, style: {
+      position: 'relative'
+      resize: 'horizontal'
+      overflow: 'hidden'
+
+      width: '576px'
+      height: '324px'
+      minWidth: '324px'
+      maxWidth: '742px'
+
+      margin: 'auto'
+      padding: '10px'
+      boxSizing: 'border-box'
+    }
+
+  -- match size of current parent element and return it (for interactive resizing in the demo)
+  updateSize: =>
+    { :clientWidth, :clientHeight } = @canvas.parentElement
+    @canvas.width, @canvas.height = clientWidth, clientHeight
+    @canvas.width, @canvas.height
+
+  -- set up a coordinate system such that the virtual viewport
+  -- of size (w, h) is centered on (0,0) and fills the canvas
+  -- returns remaining margins on the two axes
+  fit: (w, h) =>
+    width, height = @updateSize!
+    @ctx\translate width/2, height/2
+
+    -- maximum scale without cropping either axis
+    scale = math.min (width/w), (height/h)
+    @ctx\scale scale, scale
+
+    -- calculate remaining space on x/y axis
+    rx = (width/scale) - w
+    ry = (height/scale) - h
+
+    -- margins are half of the remaining space
+    rx / 2, ry / 2
+
+  strokeRect: (cx, cy, w, h) =>
+    lw = @ctx.lineWidth / 2
+    @ctx\strokeRect cx - w/2 + lw, cy - h/2 + lw,
+                    w - 2*lw,      h - 2*lw,
+
+class Box
+  new: (@cx, @cy, @w, @h) =>
+
+  rect: =>
+    @cx, @cy, @w, @h
+
+class Example extends UIDemo
+  click: =>
+    if @naive
+      @naive = false
+    else
+      if @show_boxes
+        @naive = true
+      @show_boxes = not @show_boxes
+
+  text: (box, text, align='center', my=.5) =>
+    mx = .1
+    @ctx.textAlign = align
+
+    if align == 'left'
+      @ctx\fillText text, box.cx + mx - box.w/2, box.cy + my
+    else if align == 'center'
+      @ctx\fillText text, box.cx,                box.cy + my
+    if align == 'right'
+      @ctx\fillText text, box.cx - mx + box.w/2, box.cy + my
+
+{
+  :UIDemo
+  :Example
+  :Box
+}
diff --git a/root/blog/aspect_ratios/interactive/fit: text$moonscript -> fn -> mmm$component.moon b/root/blog/aspect_ratios/interactive/fit: text$moonscript -> fn -> mmm$component.moon
new file mode 100644
index 0000000..499f9aa
--- /dev/null
+++ b/root/blog/aspect_ratios/interactive/fit: text$moonscript -> fn -> mmm$component.moon
@@ -0,0 +1,17 @@
+=>
+  assert MODE == 'CLIENT', '[nossr]'
+
+  import UIDemo from @get '_base: table'
+
+  class FitDemo extends UIDemo
+    draw: =>
+      @fit 16, 9
+      @ctx.fillStyle = 'red'
+      @ctx\fillRect -8, -4.5, 16, 9
+
+      @ctx.fillStyle = 'black'
+      @ctx.font = '6px Arial'
+      @ctx.textAlign = 'center'
+      @ctx\fillText '16:9', 0, 2
+
+  FitDemo!
diff --git a/root/blog/aspect_ratios/interactive/perforate: text$moonscript -> fn -> mmm$component.moon b/root/blog/aspect_ratios/interactive/perforate: text$moonscript -> fn -> mmm$component.moon
new file mode 100644
index 0000000..38aeac1
--- /dev/null
+++ b/root/blog/aspect_ratios/interactive/perforate: text$moonscript -> fn -> mmm$component.moon
@@ -0,0 +1,36 @@
+=>
+  assert MODE == 'CLIENT', '[nossr]'
+
+  import UIDemo from @get '_base: table'
+
+  arr = (args) ->
+    with js.new js.global.Array
+      for i in *args
+        \push i
+
+  class PerforateDemo extends UIDemo
+    draw: =>
+      @fit 16, 9
+
+      @ctx.lineWidth = 0.15
+      @ctx.strokeStyle = 'green'
+      @strokeRect 0, -3.5, 16, 2
+      @strokeRect 0,  3.5, 16, 2
+
+      @ctx\setLineDash arr { 0.4 }
+      @ctx\beginPath!
+      @ctx\moveTo 0, -4.5
+      @ctx\lineTo 0, -2.5
+      @ctx\moveTo 0,  2.5
+      @ctx\lineTo 0,  4.5
+      @ctx\stroke!
+      @ctx\setLineDash arr {}
+
+      @ctx.strokeStyle = 'blue'
+      @strokeRect 0, 0, 16, 5
+
+      @ctx.font = '4px Arial'
+      @ctx.textAlign = 'center'
+      @ctx\fillText '16:5', 0, 1.5
+
+  PerforateDemo!
diff --git a/root/blog/aspect_ratios/interactive/sidebar: text$moonscript -> fn -> mmm$component.moon b/root/blog/aspect_ratios/interactive/sidebar: text$moonscript -> fn -> mmm$component.moon
new file mode 100644
index 0000000..2017e20
--- /dev/null
+++ b/root/blog/aspect_ratios/interactive/sidebar: text$moonscript -> fn -> mmm$component.moon
@@ -0,0 +1,48 @@
+=>
+  assert MODE == 'CLIENT', '[nossr]'
+
+  import Box, Example from @get '_base: table'
+
+  class Sidebar extends Example
+    draw: =>
+      margin_x, margin_y = @fit 16, 9
+      if @naive
+        margin_x, margin_y = 0, 0
+
+      @ctx.font = '1.5px Arial'
+      sidebar   = Box -7 - margin_x, -1, 2, 7
+      @text sidebar, 'A', 'center', -1.8
+      @text sidebar, 'B', 'center', -0.3
+      @text sidebar, 'C', 'center',  1.2
+      @text sidebar, 'D', 'center',  2.7
+
+      bottom_l  = Box -4 - margin_x,  3.5 + margin_y, 8, 2
+      bottom_r  = Box  4 + margin_x,  3.5 + margin_y, 8, 2
+
+      @text bottom_l, 'levelname', 'left'
+      @text bottom_r, 'info a b c', 'right'
+
+      main      = Box 1, -1, 14, 7
+      @ctx.lineWidth = 0.1
+      @ctx.strokeStyle = 'black'
+      @ctx\beginPath!
+      for x=-5.5, 7.5
+        @ctx\moveTo x, -4.5
+        @ctx\lineTo x,  2.5
+
+      for y=-4, 2
+        @ctx\moveTo -6, y
+        @ctx\lineTo  8, y
+      @ctx\stroke!
+
+      if @show_boxes
+        @ctx.lineWidth = 0.1
+        @ctx.strokeStyle = 'green'
+        @strokeRect sidebar\rect!
+        @strokeRect bottom_l\rect!
+        @strokeRect bottom_r\rect!
+
+        @ctx.strokeStyle = 'blue'
+        @strokeRect main\rect!
+
+  Sidebar!
diff --git a/root/blog/aspect_ratios/interactive/tear: text$moonscript -> fn -> mmm$component.moon b/root/blog/aspect_ratios/interactive/tear: text$moonscript -> fn -> mmm$component.moon
new file mode 100644
index 0000000..f108e0f
--- /dev/null
+++ b/root/blog/aspect_ratios/interactive/tear: text$moonscript -> fn -> mmm$component.moon
@@ -0,0 +1,30 @@
+=>
+  assert MODE == 'CLIENT', '[nossr]'
+
+  import UIDemo from @get '_base: table'
+
+  arr = (args) ->
+    with js.new js.global.Array
+      for i in *args
+        \push i
+
+  class TearDemo extends UIDemo
+    draw: =>
+      margin_x, margin_y = @fit 16, 9
+
+      @ctx.lineWidth = 0.15
+      @ctx.strokeStyle = 'green'
+      @strokeRect -4 - margin_x, -3.5 - margin_y, 8, 2
+      @strokeRect  4 + margin_x, -3.5 - margin_y, 8, 2
+
+      @strokeRect -4 - margin_x,  3.5 + margin_y, 8, 2
+      @strokeRect  4 + margin_x,  3.5 + margin_y, 8, 2
+
+      @ctx.strokeStyle = 'blue'
+      @strokeRect 0, 0, 16, 5
+
+      @ctx.font = '4px Arial'
+      @ctx.textAlign = 'center'
+      @ctx\fillText '16:5', 0, 1.5
+
+  TearDemo!
diff --git a/root/blog/aspect_ratios/interactive/vtk: text$moonscript -> fn -> mmm$component.moon b/root/blog/aspect_ratios/interactive/vtk: text$moonscript -> fn -> mmm$component.moon
new file mode 100644
index 0000000..dae4dfb
--- /dev/null
+++ b/root/blog/aspect_ratios/interactive/vtk: text$moonscript -> fn -> mmm$component.moon
@@ -0,0 +1,57 @@
+=>
+  assert MODE == 'CLIENT', '[nossr]'
+
+  import Box, Example from @get '_base: table'
+
+  class VTK extends Example
+    draw: =>
+      margin_x, margin_y = @fit 16, 9
+      if @naive
+        margin_x, margin_y = 0, 0
+
+      levelname = Box -4 - margin_x, -3.5 - margin_y, 8, 2
+      settings  = Box  4 + margin_x, -3.5 - margin_y, 8, 2
+      infobar   = Box -4 - margin_x,  3.5 + margin_y, 8, 2
+      exit      = Box  4 + margin_x,  3.5 + margin_y, 8, 2
+
+      main      = Box 0, 0, 16, 5
+
+      @ctx.font = '1.5px Arial'
+      @text levelname, 'levelname', 'left'
+      @text infobar, 'info a b c', 'left'
+      @text settings, 'settings', 'right'
+      @text exit, 'exit', 'right'
+
+      @ctx.lineWidth = 0.2
+      @ctx.strokeStyle = 'black'
+      @ctx\beginPath!
+      @ctx\moveTo -8 - margin_x, -2.5 - margin_y
+      @ctx\lineTo  8 + margin_x, -2.5 - margin_y
+      @ctx\moveTo -8 - margin_x,  2.5 + margin_y
+      @ctx\lineTo  8 + margin_x,  2.5 + margin_y
+      @ctx\stroke!
+
+      @ctx.lineWidth = 0.1
+      @ctx.strokeStyle = 'gray'
+      @ctx\beginPath!
+      for x=-7.5, 7.5
+        @ctx\moveTo x, -2.5
+        @ctx\lineTo x,  2.5
+
+      for y=-2, 2
+        @ctx\moveTo -8, y
+        @ctx\lineTo  8, y
+      @ctx\stroke!
+
+      if @show_boxes
+        @ctx.lineWidth = 0.1
+        @ctx.strokeStyle = 'green'
+        @strokeRect levelname\rect!
+        @strokeRect settings\rect!
+        @strokeRect infobar\rect!
+        @strokeRect exit\rect!
+
+        @ctx.strokeStyle = 'blue'
+        @strokeRect main\rect!
+
+  VTK!