webm encoding for canvasapps

6 files changed, 145 insertions, 36 deletions

diff --git a/app/init.moon b/app/init.moon
index 6895782..e97d6cc 100644
--- a/app/init.moon
+++ b/app/init.moon
@@ -33,6 +33,10 @@ experiments =
     desc: 'Playground for Functional Tags'
     render: -> require '.tags'
   },
+  quasihilbert: {
+    desc: "lil' fractal thing",
+    render: -> require '.quasihilbert'
+  },
 
 destify = (name, route) ->
   name, with route
diff --git a/app/quasihilbert.moon b/app/quasihilbert.moon
new file mode 100644
index 0000000..92b7c2e
--- /dev/null
+++ b/app/quasihilbert.moon
@@ -0,0 +1,71 @@
+on_client ->
+  Math = window.Math
+
+  import CanvasApp from require 'lib.canvasapp'
+  import hsl from require 'lib.color'
+
+  class TwistedDemo extends CanvasApp
+    width: 600
+    height: 600
+    length: math.pi * 2
+
+    new: (@iterations=3, @scale=.5) =>
+      super!
+      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
+    cossin = (a) -> (math.cos a), math.sin a
+    triangle: (color) =>
+      @ctx.fillStyle = color
+      @ctx\beginPath!
+      @ctx\moveTo cossin 0
+      @ctx\lineTo cossin 2*a_sixth
+      @ctx\lineTo cossin 4*a_sixth
+      @ctx\fill!
+
+    update: (...) =>
+      super ...
+
+      @scale = 0.8 + 0.2 * math.cos @time
+
+    draw: =>
+      @ctx.fillStyle = hsl @background
+      @ctx\fillRect 0, 0, @width, @height
+
+      @ctx\translate @width/2, @height/2
+      scale = .3 * math.min @width, @height
+      @ctx\scale scale, scale
+
+      draw = (i, e=1) ->
+        @triangle @shades[i]
+
+        return unless i > 0
+
+        @ctx\save!
+        @ctx\rotate -3*a_sixth
+        @ctx\scale @scale, @scale
+
+        for o=-1,e,2
+          @ctx\save!
+          @ctx\rotate o * 2 * a_sixth
+          @ctx\translate .5 + .5/@scale, 0
+          draw i - 1
+          @ctx\restore!
+
+        @ctx\restore!
+
+      @ctx\rotate a_sixth/2
+      draw @iterations, 3
+
+  twisted = TwistedDemo!
+  document.body\appendChild twisted.canvas
+  -- window\setTimeout twisted\start, 500
+
+  { :location } = window
+  if location.search and location.search\find 'render'
+    twisted\render!
+
diff --git a/app/twisted.moon b/app/twisted.moon
index e90eda3..325d408 100644
--- a/app/twisted.moon
+++ b/app/twisted.moon
@@ -37,3 +37,4 @@ on_client ->
 
   twisted = TwistedDemo!
   document.body\appendChild twisted.canvas
+  twisted\start!
diff --git a/duct_tape.moon b/duct_tape.moon
index 3af7c30..b019ac8 100644
--- a/duct_tape.moon
+++ b/duct_tape.moon
@@ -17,8 +17,7 @@ lua = :loadstring, :load
 
 local *
 
-escape_str = (str) ->
-  (str\gsub('\\', '\\\\')\gsub '"', '\\"'), nil
+escape_str = (str) -> (str\gsub('\\', '\\\\')\gsub '"', '\\"'), nil
 
 deep_clone = (value) ->
   if 'table' == type value
diff --git a/lib/canvasapp.client.moon b/lib/canvasapp.client.moon
new file mode 100644
index 0000000..8db5682
--- /dev/null
+++ b/lib/canvasapp.client.moon
@@ -0,0 +1,68 @@
+window = js.global
+js = require 'js'
+
+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!
+
+    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
+
+  render: (fps=15) =>
+    assert @length, 'cannot render CanvasApp without length set'
+    @paused = true
+
+    script = window.document\createElement 'script'
+    script.src = "https://github.com/thenickdude/webm-writer-js/releases/download/0.2.0/webm-writer-0.2.0.js"
+    script.onload = ->
+      writer = js.new window.WebMWriter, with js.new window.Object
+        .quality = .9
+        .frameRate = fps
+
+      doFrame = ->
+        @update 1/fps
+        @ctx\resetTransform!
+        @draw!
+
+        writer\addFrame @canvas
+        print 'added a frame'
+
+        if @time >= @length
+          promise = writer\complete!
+          promise['then'] promise, (blob) =>
+            document.body\appendChild with document\createElement 'a'
+              .href = window.URL\createObjectURL blob
+              .download = 'rendered.webm'
+              .innerHTML = 'download'
+        else
+          window\setTimeout doFrame
+
+      doFrame!
+
+    document.body\append script
+
+{
+  :CanvasApp
+}
diff --git a/lib/canvasapp.shared.moon b/lib/canvasapp.shared.moon
deleted file mode 100644
index f05bfec..0000000
--- a/lib/canvasapp.shared.moon
+++ /dev/null
@@ -1,34 +0,0 @@
-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
-}