66 lines
1.7 KiB
CoffeeScript
66 lines
1.7 KiB
CoffeeScript
|
require '../scripts/vendor/mootools.js'
|
||
|
|
ready = require '../scripts/vendor/ready.js'
|
||
|
|
|
||
|
|
num_frames = 20
|
||
|
|
width = 600
|
||
|
|
height = 300
|
||
|
|
text = 'HYPNO TOAD'
|
||
|
|
textSize = 70
|
||
|
|
|
||
|
|
now = window.performance?.now?.bind(window.performance) or Date.now
|
||
|
|
|
||
|
|
rgb = (rgb...) -> "rgb(#{ rgb.map((v) -> Math.floor(v * 255)).join(',') })"
|
||
|
|
hsl = (hsl...) ->
|
||
|
|
hsl = hsl.map (v, i) -> if i is 0 then v * 360 else "#{ v * 100 }%"
|
||
|
|
return "hsl(#{ hsl.join(',') })"
|
||
|
|
|
||
|
|
ready ->
|
||
|
|
canvas = document.createElement 'canvas'
|
||
|
|
canvas.width = width
|
||
|
|
canvas.height = height
|
||
|
|
|
||
|
|
startTime = null
|
||
|
|
ctx = canvas.getContext '2d'
|
||
|
|
info = document.id 'info'
|
||
|
|
|
||
|
|
gif = new GIF
|
||
|
|
workers: 4
|
||
|
|
workerScript: '/gif.js/gif.worker.js'
|
||
|
|
width: width
|
||
|
|
height: height
|
||
|
|
|
||
|
|
gif.on 'start', -> startTime = now()
|
||
|
|
|
||
|
|
gif.on 'progress', (p) -> info.set 'text', Math.round(p * 100)+'%'
|
||
|
|
|
||
|
|
gif.on 'finished', (blob) ->
|
||
|
|
img = document.id 'result'
|
||
|
|
img.src = URL.createObjectURL(blob)
|
||
|
|
delta = now() - startTime
|
||
|
|
info.set 'text', """
|
||
|
|
100%
|
||
|
|
#{ (delta / 1000).toFixed 2 }sec
|
||
|
|
#{ (blob.size / 1000).toFixed 2 }kb
|
||
|
|
"""
|
||
|
|
|
||
|
|
ctx.font = "bold #{ textSize }px Helvetica"
|
||
|
|
ctx.textAlign = 'center'
|
||
|
|
ctx.textBaseline = 'middle'
|
||
|
|
ctx.lineWidth = 3
|
||
|
|
w2 = width / 2
|
||
|
|
h2 = height / 2
|
||
|
|
for i in [0...num_frames]
|
||
|
|
p = i / (num_frames - 1)
|
||
|
|
grad = ctx.createRadialGradient w2, h2, 0, w2, h2, w2
|
||
|
|
grad.addColorStop 0, hsl p, 1, 0.5
|
||
|
|
grad.addColorStop 1, hsl (p + 0.2) % 1, 1, 0.4
|
||
|
|
ctx.fillStyle = grad
|
||
|
|
ctx.fillRect 0, 0, width, height
|
||
|
|
ctx.fillStyle = hsl (p + 0.5) % 1, 1, 0.7
|
||
|
|
ctx.strokeStyle = hsl (p + 0.8) % 1, 1, 0.9
|
||
|
|
ctx.fillText text, w2, h2
|
||
|
|
ctx.strokeText text, w2, h2
|
||
|
|
gif.addFrame ctx, {copy: true, delay: 20}
|
||
|
|
|
||
|
|
gif.render()
|