1<script>/*
2 * fil.min.js – FIL (The Front-end Interactive Libraries)
3 * Copyright (c) 2012, Danny Garcia. All rights reserved.
4 * Code licensed under the MIT License
5 * https://github.com/dannygarcia/fil/
6 */var fil=fil||{};(function(e){"use strict";var t=function(){var e,t={context:"2d",container:document.body,width:"auto",height:"auto",resize:!1,ratio:!1},n=null,r=null,i=1;return{width:null,height:null,init:function(e){return typeof e!="undefined"&&this.options(e),typeof window.devicePixelRatio!="undefined"&&t.ratio&&(i=window.devicePixelRatio),n=t.container.appendChild(document.createElement("canvas")),r=this.context(t.context),this.resize(null,t.width,t.height),t.resize&&window.addEventListener("resize",this.resize,!1),this},options:function(e){if(typeof e=="undefined")e=t;else for(var n in t)t.hasOwnProperty(n)&&typeof e[n]!="undefined"&&(t[n]=e[n]);return e},context:function(e){return typeof e=="undefined"?r:(r=n.getContext(e),r)},resize:function(e,s,o){if(typeof s=="undefined"||s==="auto")s=t.container.offsetWidth;if(typeof o=="undefined"||o==="auto")o=t.container.offsetHeight;s*=i,o*=i,this.width=r.canvas.width=s,this.height=r.canvas.height=o,n.style.width=s/i,n.style.height=o/i},clear:function(){r.clearRect(0,0,this.width,this.height)},destroy:function(){t.resize&&window.removeEventListener("resize",this.resize,!1),n&&t.container.removeChild(n),t={context:"2d",container:document.body,width:"auto",height:"auto",resize:!1},n=null,r=null,i=1}}};e.Canvas=t,typeof this.define=="function"&&this.define.amd&&this.define("Canvas",[],function(){return e.Canvas})}).call(this,function(){return this.fil=this.fil||{},this.fil}.call(this)),function(e){"use strict";var t=function(){return{active:!1,request:null,frame:0,step:function(e){},start:function(){if(!this.active){var e=this,t=function(){e.request=window.requestAnimationFrame(t),e.step(e.frame),e.frame++};typeof window.requestAnimationFrame=="undefined"&&(window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}()),typeof window.cancelAnimationFrame=="undefined"&&(window.cancelAnimationFrame=function(){return window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||window.oCancelAnimationFrame||window.msCancelAnimationFrame}()),t(),this.active=!0}},stop:function(){this.active&&window.cancelAnimationFrame(this.request)}}};e.Frame=t,typeof this.define=="function"&&this.define.amd&&this.define("Frame",[],function(){return e.Frame})}.call(this,function(){return this.fil=this.fil||{},this.fil}.call(this)),function(e){"use strict";var t=function(){var e={element:document.body,preventDefault:!1,ratio:!1,forceTouch:!1,type:"object"},t=1,n=!1,r=!1,i=function(e,t){var n,r,i;return typeof t=="string"&&(n=e[t],t=e,e=n),typeof e!="function"?undefined:(r=Array.prototype.slice.call(arguments,2),i=function(){return e.apply(t,r.concat(Array.prototype.slice.call(arguments)))},i.guid=e.guid=e.guid||i.guid,i)};return{inputs:[],average:{},init:function(n){return typeof n!="undefined"&&this.options(n),typeof window.devicePixelRatio!="undefined"&&e.ratio&&(t=window.devicePixelRatio),r=e.forceTouch||this.supportsTouch(),this.bindAllInputs(),this},options:function(t){if(typeof t=="undefined")return e;for(var n in e)e.hasOwnProperty(n)&&typeof t[n]!="undefined"&&(e[n]=t[n])},setCoordinates:function(n){e.preventDefault&&n.preventDefault();var i=[],s=e.type==="object"?{x:0,y:0}:[0,0];if(r)for(var o=0;o<n.touches.length;o++)i[o]=e.type==="object"?{x:n.touches[o].pageX*t,y:n.touches[o].pageY*t}:[n.touches[o].pageX*t,n.touches[o].pageY*t],e.type==="object"?(s.x+=i[o].x,s.y+=i[o].y):(s[0]+=i[o][0],s[1]+=i[o][1]);else i[0]=e.type==="object"?{x:n.pageX*t,y:n.pageY*t}:[n.pageX*t,n.pageY*t],s=i[0];this.inputs=i,this.average=e.type==="object"?{x:Math.ceil(s.x/i.length),y:Math.ceil(s.y/i.length)}:[Math.ceil(s[0]/i.length),Math.ceil(s[1]/i.length)]},bindAllInputs:function(){n=!0,this.bindTapStart(),this.bindTapMove(),this.bindTapEnd()},unbindAllInputs:function(){n&&(this.unbindTapStart(),this.unbindTapMove(),this.unbindTapEnd()),n=!1},bindTapStart:function(){var t=this.getEventType("start");e.element.addEventListener(t,i(this.tapStart,this),!1)},tapStart:function(e){this.setCoordinates(e,"start"),this.ontapstart(this.average,this.inputs)},ontapstart:function(e,t){},unbindTapStart:function(){var t=this.getEventType("start");e.element.removeEventListener(t,i(this.tapStart,this),!1)},bindTapMove:function(){var t=this.getEventType("move");e.element.addEventListener(t,i(this.tapMove,this),!1)},tapMove:function(e){this.setCoordinates(e,"move"),this.ontapmove(this.average,this.inputs)},ontapmove:function(e,t){},unbindTapMove:function(){var t=this.getEventType("move");e.element.removeEventListener(t,i(this.tapMove,this),!1)},bindTapEnd:function(){var t=this.getEventType("end");e.element.addEventListener(t,i(this.tapEnd,this),!1)},tapEnd:function(e){this.setCoordinates(e,"end"),this.ontapend(this.average,this.inputs)},ontapend:function(e,t){},unbindTapEnd:function(){var t=this.getEventType("end");e.element.removeEventListener(t,i(this.tapEnd,this),!1)},getEventType:function(e){var t=r?"touch":"mouse";return e==="start"&&!r?e="down":e==="end"&&!r&&(e="up"),t+e},supportsTouch:function(){return"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch},destroy:function(){this.unbindAllInputs()}}};e.Input=t,typeof this.define=="function"&&this.define.amd&&this.define("Input",[],function(){return e.Input})}.call(this,function(){return this.fil=this.fil||{},this.fil}.call(this)),function(e){"use strict";var t=function(){return{ctx:null,context:function(e){if(typeof e=="undefined"){if(this.ctx===null)throw"You must provide a [ctx] to draw on. Try setting it with context(ctx)";return this.ctx}return this.ctx=e,this.ctx},fill:function(e){var t=this.context();t.fillStyle=e},stroke:function(e,t){var n=this.context();e&&(n.strokeStyle=e),t&&(n.lineWidth=t)},line:function(e,t,n){n=n||"object";var r=this.context();r.beginPath(),n==="array"?(r.moveTo(e[0],e[1]),r.lineTo(t[0],t[1])):(r.moveTo(e.x,e.y),r.lineTo(t.x,t.y)),r.stroke()},circle:function(e,t,n){n=n||"object";var r=this.context();r.beginPath(),n==="array"?r.arc(e[0],e[1],t,0,Math.PI*2,!0):r.arc(e.x,e.y,t,0,Math.PI*2,!0),r.closePath(),r.fill()}}};e.Pen=t,typeof this.define=="function"&&this.define.amd&&this.define("Pen",[],function(){return e.Pen})}.call(this,function(){return this.fil=this.fil||{},this.fil}.call(this)),function(e){"use strict";var t=function(){var e=this;return this._contains=function(t,n){return!!~(""+t).indexOf(n)},this._prefixed=function(e,t){var n="Webkit Moz O ms".split(" "),r=e.charAt(0).toUpperCase()+e.slice(1),i=(e+" "+n.join(r+" ")+r).split(" "),s,o;for(s in i){o=i[s];if(!this._contains(o,"-")&&t[o]!==undefined)return o}return!1},{transform:function(t,n){typeof t=="undefined"&&(t=this.el),this.el=t;var r,i="";if(n instanceof Array)for(var s=0;s<n.length;s++)i+=n[s].property+"("+n[s].value+") ";else for(r in n)i+=r+"("+n[r]+") ";t.style[e._prefixed("transform",t.style)]=i},transformOrigin:function(t,n,r){typeof t=="undefined"&&(t=this.el),this.el=t,t.style[e._prefixed("transformOrigin",t.style)]=n+" "+r}}};e.Transformer=t,typeof this.define=="function"&&this.define.amd&&this.define("Transformer",[],function(){return e.Transformer})}.call(this,function(){return this.fil=this.fil||{},this.fil}.call(this));</script>
7<div id="canvas"></div>