animation

http://code.fed.wiki/assets/pages/lambda-talk-in-a-frame/repl.html HEIGHT 400

_h1 animation {canvas {@ id="demo" style="width:380px; height:300px; border:1px solid; box-shadow:0 0 8px;"}} {br} {input {@ type="submit" value="start" onclick="ANIMATION.start_stop(this, 'demo');"}} {script ;; var ANIMATION = (function () { var ctx, w, h, lastX, lastY, hue, delay_line, delay_blank; function line() { ctx.save(); ctx.translate(w/2, h/2); ctx.scale(0.9, 0.9); ctx.translate(-w/2, -h/2); ctx.beginPath(); ctx.lineWidth = 5 + Math.random() * 10; ctx.moveTo(lastX, lastY); lastX = w * Math.random(); lastY = h * Math.random(); ctx.bezierCurveTo( w * Math.random(), h * Math.random(), w * Math.random(), h * Math.random(), lastX, lastY); hue = hue + 10 * Math.random(); ctx.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; ctx.shadowColor = 'white'; ctx.shadowBlur = 10; ctx.stroke(); ctx.restore(); } function blank() { ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(0, 0, w, h); } function draw(can) { ctx = document.getElementById(can).getContext('2d'); w = ctx.canvas.width; h = ctx.canvas.height; lastX = w * Math.random(); lastY = h * Math.random(); hue = 0; delay_line = window.setInterval(line, 90); // 50 delay_blank = window.setInterval(blank, 100); // 40 } var start_stop = function(butt,can) { if (butt.value==="start") { butt.value = "stop"; document.getElementById(can).innerHTML = draw(can); } else { butt.value = "start"; window.clearTimeout( delay_line ); window.clearTimeout( delay_blank ); } }; return { start_stop:start_stop } })(); // end ANIMATION }