From 72829c68ec50c432b38fefcb28613c75657fb2bb Mon Sep 17 00:00:00 2001 From: s-ol Date: Tue, 23 Oct 2018 00:36:24 +1100 Subject: CanvasApp whammy.js webm exporting --- app/init.moon | 4 +-- app/koch.moon | 64 ++++++++++++++++++++++++++++++++++++++++++ app/quasihilbert.moon | 71 ----------------------------------------------- app/twisted.moon | 6 ++-- dist | 2 +- lib/canvasapp.client.moon | 53 ++++++++++++++++++++++------------- lib/html.client.moon | 2 +- lib/html.server.moon | 2 +- scss/main.scss | 37 ++++++++++++++++++++++++ 9 files changed, 142 insertions(+), 99 deletions(-) create mode 100644 app/koch.moon delete mode 100644 app/quasihilbert.moon 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/koch.moon b/app/koch.moon new file mode 100644 index 0000000..3a0ef29 --- /dev/null +++ b/app/koch.moon @@ -0,0 +1,64 @@ +on_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, @scale=.5) => + 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 + 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 + + append KochDemo!.node diff --git a/app/quasihilbert.moon b/app/quasihilbert.moon deleted file mode 100644 index 92b7c2e..0000000 --- a/app/quasihilbert.moon +++ /dev/null @@ -1,71 +0,0 @@ -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 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 index 8325b7f..0475a7f 160000 --- a/dist +++ b/dist @@ -1 +1 @@ -Subproject commit 8325b7fb13f2bf6a9e153d8a934d3bc31b281d2a +Subproject commit 0475a7f1f0d17a2a3104860215c960b7ca036a02 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; + } + } +} -- cgit v1.2.3