CanvasApp whammy.js webm exporting

8 files changed, 80 insertions, 37 deletions

diff --git a/app/init.moon b/app/init.moon
index e97d6cc..0cf846a 100644
--- a/app/init.moon
+++ b/app/init.moon
@@ -33,9 +33,9 @@ experiments =
     desc: 'Playground for Functional Tags'
     render: -> require '.tags'
   },
-  quasihilbert: {
+  koch: {
     desc: "lil' fractal thing",
-    render: -> require '.quasihilbert'
+    render: -> require '.koch'
   },
 
 destify = (name, route) ->
diff --git a/app/quasihilbert.moon b/app/koch.moon
index 92b7c2e..3a0ef29 100644
--- a/app/quasihilbert.moon
+++ b/app/koch.moon
@@ -4,13 +4,13 @@ on_client ->
   import CanvasApp from require 'lib.canvasapp'
   import hsl from require 'lib.color'
 
-  class TwistedDemo extends CanvasApp
+  class KochDemo extends CanvasApp
     width: 600
     height: 600
     length: math.pi * 2
 
     new: (@iterations=3, @scale=.5) =>
-      super!
+      super true
       hue = Math.random!
       @background = {1 - hue, .3, .3}
 
@@ -61,11 +61,4 @@ on_client ->
       @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!
-
+  append KochDemo!.node
diff --git a/app/twisted.moon b/app/twisted.moon
index 325d408..0ab30b1 100644
--- a/app/twisted.moon
+++ b/app/twisted.moon
@@ -9,7 +9,7 @@ on_client ->
     height: 400
     length: math.pi * 4
     new: =>
-      super!
+      super true
       @background = {Math.random!, Math.random!/3+.2, Math.random!/4}
       hue = Math.random!
       @shades = setmetatable {}, __index: (key) =>
@@ -35,6 +35,4 @@ on_client ->
         draw i
       draw 1
 
-  twisted = TwistedDemo!
-  document.body\appendChild twisted.canvas
-  twisted\start!
+  document.body\appendChild TwistedDemo!.node
diff --git a/dist b/dist
-Subproject 8325b7fb13f2bf6a9e153d8a934d3bc31b281d2
+Subproject 0475a7f1f0d17a2a3104860215c960b7ca036a0
diff --git a/lib/canvasapp.client.moon b/lib/canvasapp.client.moon
index 8db5682..ed1cfb7 100644
--- a/lib/canvasapp.client.moon
+++ b/lib/canvasapp.client.moon
@@ -1,12 +1,14 @@
 window = js.global
 js = require 'js'
 
+import a, canvas, div, button, script from require 'lib.html'
+
 class CanvasApp
   width: 500
   height: 400
-  new: =>
-    @canvas = window.document\createElement 'canvas'
-    @canvas.width, @canvas.height = @width, @height
+  new: (show_menu = false) =>
+    @canvas = canvas width: @width, height: @height
+
     @ctx = @canvas\getContext '2d'
     @time = 0
 
@@ -27,41 +29,54 @@ class CanvasApp
       lastMillis = millis
     window\requestAnimationFrame animationFrame
 
+    @node = if show_menu
+      div {
+        className: 'canvas_app'
+        @canvas
+        div {
+          className: 'overlay',
+          button 'render 30fps', onclick: -> @\render 30
+          button 'render 60fps', onclick: -> @\render 60
+        }
+      }
+    else
+      @canvas
+
+
   update: (dt) =>
     @time += dt
 
-  render: (fps=15) =>
+  render: (fps=60) =>
     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
+    actual_render = ->
+      writer = js.new window.Whammy.Video, fps
 
       doFrame = ->
         @update 1/fps
         @ctx\resetTransform!
         @draw!
 
-        writer\addFrame @canvas
-        print 'added a frame'
+        writer\add @canvas
 
         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'
+          blob = writer\compile!
+          name = "#{@@__name}_#{fps}fps.webm"
+          @node.lastChild\appendChild a name, download: name, href: window.URL\createObjectURL blob
         else
           window\setTimeout doFrame
 
+      @time = 0
       doFrame!
 
-    document.body\append script
+    if window.Whammy
+      actual_render!
+    else
+      window.global = window.global or window
+      document.body\appendChild script
+        onload: actual_render
+        src: 'https://cdn.jsdelivr.net/npm/whammy@0.0.1/whammy.min.js'
 
 {
   :CanvasApp
diff --git a/lib/html.client.moon b/lib/html.client.moon
index 45794da..098b974 100644
--- a/lib/html.client.moon
+++ b/lib/html.client.moon
@@ -29,7 +29,7 @@ add = (e) -> elements[e] = element e
 
 for e in *{'div', 'form', 'span', 'a', 'p', 'button', 'ul', 'ol', 'li', 'i', 'b', 'u', 'tt'} do add e
 for e in *{'article', 'section', 'header', 'footer', 'content', 'pre'} do add e
-for e in *{'br', 'hr', 'img', 'input', 'p', 'textarea'} do add e
+for e in *{'br', 'hr', 'img', 'input', 'p', 'canvas', 'textarea', 'script'} do add e
 for i=1,8 do add "h" .. i
 
 elements
diff --git a/lib/html.server.moon b/lib/html.server.moon
index 565867c..335e193 100644
--- a/lib/html.server.moon
+++ b/lib/html.server.moon
@@ -33,7 +33,7 @@ add = (e) -> elements[e] = element e
 
 for e in *{'div', 'form', 'span', 'a', 'p', 'button', 'ul', 'ol', 'li', 'i', 'b', 'u', 'tt'} do add e
 for e in *{'article', 'section', 'header', 'footer', 'content', 'pre'} do add e
-for e in *{'br', 'hr', 'img', 'input', 'p', 'textarea'} do add e
+for e in *{'br', 'hr', 'img', 'input', 'p', 'canvas', 'textarea', 'script'} do add e
 for i=1,8 do add "h" .. i
 
 elements
diff --git a/scss/main.scss b/scss/main.scss
index 9d23ceb..07c3260 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,3 +1,40 @@
 body {
   font-family: sans-serif;
 }
+
+.canvas_app {
+  position: relative;
+
+  display: inline-block;
+
+  .overlay {
+    position: absolute;
+    padding: 1rem;
+
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    opacity: 0;
+
+    background: rgba(0, 0, 0, 0.7);
+
+    transition: opacity 300ms;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    > * {
+      margin: 0.5em;
+    }
+
+    a {
+      display: block;
+      color: #eee;
+      font-family: inherit;
+    }
+  }
+}