3 files changed, 191 insertions, 0 deletions
diff --git a/root/animations/init.moon b/root/animations/init.moon
new file mode 100644
index 0000000..ba8cb91
--- /dev/null
+++ b/root/animations/init.moon
@@ -0,0 +1,27 @@
+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': 'animations',
+  'title: text/plain': 'canvas animations',
+  '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 child.path
+          },
+          ': ', desc
+        }
+    }
+
+  require '.twisted'
+  require '.koch'
+}
diff --git a/root/animations/koch.moon b/root/animations/koch.moon
new file mode 100644
index 0000000..9b8217d
--- /dev/null
+++ b/root/animations/koch.moon
@@ -0,0 +1,113 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+with Fileder {
+    'name: alpha': 'koch',
+    'description: text/plain': "lil' fractal thing",
+  }
+
+  if MODE == 'CLIENT'
+    Math = window.Math
+
+    import CanvasApp from require 'lib.canvasapp'
+    import hsl from require 'lib.color'
+
+    class KochDemo extends CanvasApp
+      width: 600
+      height: 600
+      length: math.pi * 2
+
+      new: (@iterations=3) =>
+        super true
+        hue = Math.random!
+        @background = {1 - hue, .3, .3}
+
+        @shades = setmetatable {}, __index: (tbl, key) ->
+          with val = hsl { hue, .7, .9 - .5 * (key / @iterations)} do rawset tbl, key, val
+
+      a_sixth = math.pi / 3
+      a_third = 2 * a_sixth
+      cossin = (a) -> (math.cos a), math.sin a
+      triangle: (color) =>
+        @ctx.fillStyle = color
+        @ctx\beginPath!
+        @ctx\moveTo cossin 0
+        @ctx\lineTo cossin a_third
+        @ctx\lineTo cossin 2*a_third
+        @ctx\fill!
+
+      update: (dt) =>
+        super dt * 1.6
+
+      draw: =>
+        @ctx.fillStyle = hsl @background
+        @ctx\fillRect 0, 0, @width, @height
+
+        @ctx\translate @width/2, @height/2
+        s = .3 * math.min @width, @height
+        @ctx\scale s, s
+
+        _scale = 0.8 + 0.2 * math.sin math.pi + @time
+
+        ttime = @time - math.pi/2
+        transfer, flipped = 0
+        if ttime > 0 and ttime < math.pi
+          transfer = .5 - .5 * math.cos ttime
+          flipped = true
+
+        draw = (i, pop) ->
+          @triangle @shades[i]
+
+          extra = not pop and flipped
+          return unless i > (if extra then -1 else 0)
+
+          scale = _scale
+          if (pop and i < 1) or (not pop and i < 0)
+            scale = transfer
+
+          @ctx\save!
+          @ctx\rotate -(a_sixth + a_third)
+          @ctx\scale scale, scale
+
+          for o=1,2
+            @ctx\rotate a_third
+            @ctx\save!
+            @ctx\translate .5 + .5/scale, 0
+            draw i - 1, pop
+            @ctx\restore!
+
+          @ctx\restore!
+
+        @ctx\rotate a_sixth/2
+        @ctx\translate -transfer, 0
+        @ctx\rotate a_sixth * transfer
+
+        @triangle @shades[3 - transfer]
+
+        @ctx\save!
+        @ctx\rotate a_sixth
+        @ctx\scale _scale, _scale
+
+        @ctx\save!
+        @ctx\translate .5 + .5/_scale, 0
+        draw 2 - transfer
+        @ctx\restore!
+
+        @ctx\rotate a_third
+
+        @ctx\save!
+        @ctx\translate .5 + .5/_scale, 0
+        draw 2 - transfer
+        @ctx\restore!
+
+        @ctx\rotate a_third
+
+        @ctx\save!
+        @ctx\translate .5 + .5/_scale, 0
+        draw 2 + transfer, true
+        @ctx\restore!
+
+        @ctx\restore!
+
+    -- .props['preview: moon -> mmm/component'] = => TwistedDemo true
+    .props['moon -> mmm/component'] = => KochDemo!
diff --git a/root/animations/twisted.moon b/root/animations/twisted.moon
new file mode 100644
index 0000000..9e97738
--- /dev/null
+++ b/root/animations/twisted.moon
@@ -0,0 +1,51 @@
+import define_fileders from require 'lib.mmmfs'
+Fileder = define_fileders ...
+
+with Fileder {
+    'name: alpha': 'twisted',
+    'description: text/plain': "pseudo 3d",
+  }
+
+  if MODE == 'CLIENT'
+    import CanvasApp from require 'lib.canvasapp'
+    import hsl from require 'lib.color'
+
+    Math = window.Math
+
+    class TwistedDemo extends CanvasApp
+      width: 500
+      height: 400
+      length: math.pi * 4
+      new: (preview) =>
+        if preview
+          @width, @height = 120, 120
+          super false, true
+        else
+          super true
+        @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
+
+    .props['preview: moon -> mmm/component'] = => TwistedDemo true
+    .props['moon -> mmm/component'] = => TwistedDemo!