diff options
Diffstat (limited to 'root/blog/aspect_ratios/interactive')
6 files changed, 0 insertions, 297 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 deleted file mode 100644 index 0219af6..0000000 --- a/root/blog/aspect_ratios/interactive/_base: text$moonscript -> table.moon +++ /dev/null @@ -1,119 +0,0 @@ -import div, a from require 'mmm.dom' -import interactive_link from (require 'mmm.mmmfs.util') require 'mmm.dom' - -if MODE ~= 'CLIENT' - class Dummy - render: => - div { - style: - position: 'relative' - resize: 'horizontal' - overflow: 'hidden' - - width: '480px' - height: '270px' - 'min-width': '270px' - 'max-width': '100%' - - margin: 'auto' - padding: '10px' - boxSizing: 'border-box' - background: 'var(--gray-bright)' - - interactive_link '(click here for the interactive version of this article)' - } - - return { - UIDemo: Dummy - Example: Dummy - } - -import CanvasApp from require 'mmm.canvasapp' - -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: '480px' - height: '270px' - minWidth: '270px' - maxWidth: '100%' - - 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 deleted file mode 100644 index 33478bf..0000000 --- a/root/blog/aspect_ratios/interactive/fit: text$moonscript -> fn -> mmm$component.moon +++ /dev/null @@ -1,15 +0,0 @@ -=> - 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 deleted file mode 100644 index 905c313..0000000 --- a/root/blog/aspect_ratios/interactive/perforate: text$moonscript -> fn -> mmm$component.moon +++ /dev/null @@ -1,34 +0,0 @@ -=> - 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 deleted file mode 100644 index 56e6cea..0000000 --- a/root/blog/aspect_ratios/interactive/sidebar: text$moonscript -> fn -> mmm$component.moon +++ /dev/null @@ -1,46 +0,0 @@ -=> - 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 deleted file mode 100644 index 1705b80..0000000 --- a/root/blog/aspect_ratios/interactive/tear: text$moonscript -> fn -> mmm$component.moon +++ /dev/null @@ -1,28 +0,0 @@ -=> - 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 deleted file mode 100644 index c2d17d0..0000000 --- a/root/blog/aspect_ratios/interactive/vtk: text$moonscript -> fn -> mmm$component.moon +++ /dev/null @@ -1,55 +0,0 @@ -=> - 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! |