1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
window = js.global
js = require 'js'
import a, canvas, div, button, script from require 'lib.html'
class CanvasApp
width: 500
height: 400
new: (show_menu=false, @paused) =>
@canvas = canvas width: @width, height: @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
@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
if @length and @time > @length
@time -= @length
true
render: (fps=60) =>
assert @length, 'cannot render CanvasApp without length set'
@paused = true
actual_render = ->
writer = js.new window.Whammy.Video, fps
doFrame = ->
done = @update 1/fps
@ctx\resetTransform!
@draw!
writer\add @canvas
if done or @time >= @length
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!
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
}
|
