forked from g-harel/blobs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
57 lines (57 loc) · 62.6 KB
/
index.html
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
<html><head><link rel="shortcut icon" href="https://blobs.dev/assets/favicon.ico?v=3ewlwLn2WO"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>html{font-size:calc(.1vw + 1.2rem)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow-x:hidden;margin:0}header{align-items:center;display:flex;flex-direction:column;height:20vh;padding:5vh 0 0;user-select:none;-moz-user-select:none}header img{height:16vh;max-height:6rem}.how-it-works,header nav a{color:#aaa;display:inline-block;font-size:.7rem;font-weight:700;padding:.5rem;text-decoration:none;text-transform:uppercase}main{flex-direction:column}.example,main{align-items:center;display:flex}.example{height:50vh;padding:5vh 2rem}.how-it-works{cursor:pointer;height:10vh;transform:rotate(-2deg) translateY(-1px);user-select:none}.how-it-works.hidden{display:none}.container{align-items:center;display:flex;flex-direction:column;padding:0 1rem 20vh}.container:not(.open){display:none}.container .title{color:#aaa;font-weight:700;margin:1rem 0 .5rem;max-width:1000px;text-transform:uppercase;user-select:none;width:100%}.container .section{border:1px solid #eee;border-radius:.5rem;display:flex;margin:1rem 0;max-width:1000px;width:100%}.container .section .number{color:#ccc;font-size:.6rem;font-weight:100;height:0;position:relative;text-decoration:none;transform:translate(1rem,.5rem);user-select:none;width:0}.container .section .text{box-sizing:border-box;padding:2rem 3rem 1.5rem}.container .section .cell{flex-grow:1}.container .section .cell canvas{width:100%}.container .section .cell .label{color:#555;font-size:.6rem;padding:0 1rem 1rem}</style></head><body> <header> <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAwMHB4IiBoZWlnaHQ9IjQwMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMDAgNDAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFQzU3NkIiIGQ9Ik00NjMuMjk1LDY1LjIxM2MtMjUuNywwLTQ0LjIsMTAuOS01NS40LDMyLjVjLTExLjMsMjEuNjAxLTE0LjEsNTEuNjAxLTguNSw4OS41DQoJYzYuMTAxLDQxLDE3LjksNzEuNzk4LDM1LjQsOTIuNGMxNy41LDIwLjY5NywzOS44OTgsMzAsNjcuMTk5LDI4LjVjMjYuNC0xLjUsNDUuMTAyLTEzLjIwMSw1Ni4xMDItMzQuODAzDQoJYzExLjEwMS0yMS42OTcsMTMuNjk5LTUxLjI5OSw3Ljc5OS04OWMtNS43OTktMzgtMTcuNS02Ny4xLTM1LjEtODcuOEM1MTMuMTk1LDc1LjgxNCw0OTAuNjk1LDY1LjIxMyw0NjMuMjk1LDY1LjIxM3oNCgkgTTUxMS43OTUsMjQwLjkxNGMtMy42OTksOS42OTktMTAuMzAxLDE0LjgwMS0xOS45LDE1LjE5OWMtOC44OTksMC4zOTgtMTYuMzk5LTQtMjIuNS0xMy4zOThjLTYuMS05LjQtMTEuMy0yOC40LTE1LjYtNTcuMjAxDQoJYy02LjctNDQuNy0wLjgwMS02Ny40LDE3LjY5OS02Ny42MDJjMTkuNy0wLjE5OCwzMi44MDIsMjIuMzAyLDM5LjYwMSw2N0M1MTUuMTk1LDIxMi42MTMsNTE1LjQ5NCwyMzEuMjE1LDUxMS43OTUsMjQwLjkxNHoiLz4NCjxwYXRoIGZpbGw9IiNFQzU3NkIiIGQ9Ik0zNzQuMjk1LDI1Ni4yMTVjLTQuMzAyLDAuMzk4LTguNjAyLDAuNzk5LTEyLjksMS4xOTdjLTcuOCwwLjcwMS0xNC44LTQuNzk5LTE1Ljg5OS0xMi41DQoJYy03LjUtNTEuMjk5LTE1LjEwMS0xMDIuNzk5LTIyLjYwMS0xNTQuNWMtMS4xOTktNy44LTguMy0xMy4zLTE2LjEtMTIuNWMtNy4zMDIsMC43LTE0LjcsMS41LTIyLjEwMywyLjM5OQ0KCWMtOC4zLDEtMTQuMSw4LjYwMS0xMi44OTksMTYuODAxYzEwLjEsNjkuODk5LDIwLjMsMTM5LjQwMSwzMC4zOTksMjA4LjYwMmMxLjEwMyw4LDguNTAxLDEzLjUsMTYuNTAxLDEyLjM5OA0KCWMyMC42OTktMi44OTgsNDEuMy01LjMwMSw2Mi03LjMwMWM4LjMtMC44MDEsMTQuMy04LjUsMTMuMTk5LTE2LjljLTEuMTk5LTguMzk4LTIuNS0xNi43OTktMy42OTktMjUuMTk3DQoJQzM4OC45OTUsMjYxLjAxNCwzODIuMDk1LDI1NS41MTQsMzc0LjI5NSwyNTYuMjE1eiIvPg0KPHBhdGggZmlsbD0iI0VDNTc2QiIgZD0iTTgzMi4zOTUsMjE5LjcxNWMtNi42OTgsMS44OTgtMTQuNSwyLjI5OS0yMy42LDEuMjk5Yy05LjYwMi0xLjEwMi0xNy42MDIsNy4zMDEtMTYsMTYuODAxDQoJYzAuODk4LDUuNiwxLjg5OCwxMS4xLDIuODAxLDE2LjZjMS4xMDEsNi41LDYuMzk4LDExLjYwMiwxMywxMmMxMS4xOTksMC42OTksMjIuMTk5LTAuNSwzMi44OTgtMy44MDENCgljMjAuOS02LjM5OCwzNy4xOTktMTguMjk5LDQ4LjktMzQuNWMxMS42OTgtMTYuMTk5LDE2LTMyLjg5OCwxMy4xLTQ5LjdjLTIuNi0xNC4zLTEwLTI0Ljg5OC0yMi4zOTgtMzIuNQ0KCWMtMTIuMzk5LTcuNi0yNC4yMDEtMTMuMTk4LTM1LjM5OS0xNi42OThjLTE4LjgwMi02LTI4Ljg5OC0xMy44OTktMzAuMzk4LTIyLjVjLTAuODk5LTQuODk5LDAuMjk5LTkuMiwzLjUtMTIuOA0KCWMzLjEwMS0zLjYsNy44OTgtNi4yLDE0LjE5Ny03LjdjNS42MDItMS4zLDEyLjMwMy0xLjcsMjAuMzAzLTEuMmM5LjM5OCwwLjYwMSwxNi44OTgtNy42LDE1LjI5OS0xNi44OTkNCgljLTAuNzk5LTQuOC0xLjY5OC05LjUtMi41LTE0LjNjLTEuMTk4LTYuOS03LjEwMi0xMS45LTE0LTEyLjEwMWMtMTEtMC4zLTIxLjY5OCwwLjctMzIuMjk5LDIuOWMtMTkuNSw0LjEtMzQuMzk5LDEyLjMtNDQuODAzLDI1LjcNCgljLTEwLjM5OCwxMy4zOTktMTQuMSwyOS4xLTExLjEsNDcuM2MyLjIsMTMuMyw4LjIsMjQuOCwxNy44OTksMzQuMTAyYzkuODAxLDkuMywyNC41LDE4LjMsNDQuMzAxLDI2DQoJYzguMTk5LDMuMTk4LDE0LjEwMSw2LDE3LjY5OSw4LjY5OGMzLjYsMi43LDUuNjk5LDYsNi4zOTgsMTBjMC44OTksNS4yMDItMC4xOTksOS45MDEtMy4zOTgsMTQuMjAyDQoJQzg0My41OTYsMjE0LjgxNCw4MzguNzk1LDIxNy45MTQsODMyLjM5NSwyMTkuNzE1eiIvPg0KPHBhdGggZmlsbD0iI0VDNTc2QiIgZD0iTTczMy45OTQsMTI1LjExNGMtMi43OTktMTcuMzk4LTExLjc5OS0zMC45LTI2Ljg5OC00MS4xMDFjLTE1LjE5OC0xMC4xOTktMzcuODk5LTE0LjUtNjguMTk4LTEzLjUNCgljLTguMzAyLDAuMi0xNi43MDEsMC40LTI1LDAuNjAxYy0xNC4zMDIsMC4zLTI1LjEwMSwxMy4xLTIyLjksMjcuM2M5LDU4LjcsMTguMTAyLDExNywyNy4xMDIsMTc0LjgwMQ0KCWMxLjg5OCwxMi4yOTksMTMuMTAxLDIwLjg5OCwyNS41LDE5Ljc5OWMxNC44OTgtMS40LDI5Ljg5OC0yLjksNDQuOC00Ljc5OWMyMi4zMDEtMi43MDEsMzkuMzk5LTExLjIwMSw1MS4yLTI0LjcwMQ0KCWMxMS44LTEzLjUsMTYuMTk5LTI5LjQsMTMuMTk5LTQ3LjVjLTMuMzAzLTIwLjUtMTQuNjAyLTMzLjUtMzMuODAzLTQwLjFjLTIuNzk5LTAuODk4LTMuNS00LjUtMS4zOTgtNi41DQoJQzczMS4yOTUsMTU2LjYxNCw3MzYuNjk1LDE0MS44MTQsNzMzLjk5NCwxMjUuMTE0eiBNNjUxLjU5NiwxNTYuODE0Yy0yLjEwMi0xMy4xMDEtNC4xMDItMjYuMi02LjIwMS0zOS4zMDENCgljLTAuMzk5LTIuMzk5LDEuNS00LjYwMiw0LTQuNjAyYzkuNzAxLDAuMTAyLDE3LjEwMSwxLjUsMjIuMzAyLDQuMmM2LDMuMiw5LjY5OCw5LjEwMiwxMS4xMDIsMTcuODk5DQoJYzIuMTk3LDEzLjg5OC02LjcwMSwyMi41LTI2LjcwMSwyNS4xMDFDNjUzLjg5NSwxNjAuNDE0LDY1MS44OTUsMTU4LjkxNCw2NTEuNTk2LDE1Ni44MTR6IE02OTQuMTk1LDIzOC45MTQNCgljLTUuMzAyLDMuOS0xMy4zOTgsNi42OTktMjQuMzAyLDguMzAxYy0yLjEsMC4zMDEtNC4xOTgtMS4xMDItNC41LTMuMzAxYy0yLTEzLjEtNC4xLTI2LjE5OS02LjE5OC0zOS4zMDENCgljLTAuMzk4LTIuMjk5LDEuMjk5LTQuMzk5LDMuNjAyLTQuNmMyMy0xLjgsMzUuNzk5LDQuNSwzOC4xOTcsMTkuODk5QzcwMi4zOTUsMjI4LjIxNSw3MDAuMDk2LDIzNC41MTQsNjk0LjE5NSwyMzguOTE0eiIvPg0KPHBhdGggZmlsbD0iI0VDNTc2QiIgZD0iTTE1NS45OTUsMzU2LjkxNGMxMi44OTktNC42LDI1LjgtOC42OTksMzguNjk5LTEyLjVjMjIuMzAxLTYuNSwzOS40LTE3LDUxLjItMzIuNg0KCWMxMS44LTE1LjUsMTYuMi0zMy4zMDMsMTMuMi01My45Yy0zLjMtMjIuNS0xNC4xLTM3LjMwMS0zMi41LTQzLjM5OGMtMy41LTEuMTAyLTQuNy01LjQtMi4zLTguMjAxYzEzLjMtMTUuNSwxOC42LTMyLDE1Ljg5OS01MC41OTkNCgljLTIuOC0xOS41LTExLjgtMzQuMzk5LTI2Ljg5OS00NC4yYy0xNS4xMDEtOS42OTktMzcuOC0xMS4zLTY4LjEwMS0xLjhjLTExLjEsMy41LTIyLjE5OSw3LjMtMzMuMywxMS41DQoJYy0xMSw0LjEwMS0xNy43LDE1LjMtMTYsMjYuODk4YzkuMTAxLDYzLjIwMSwxOC4zLDEyNi4yMDEsMjcuNCwxODlDMTI1LjQ5NSwzNTIuNTE0LDE0MS4yOTUsMzYyLjExMywxNTUuOTk1LDM1Ni45MTR6DQoJIE0yMDcuMjk1LDI2NS42MTNjMS4zOTksOS4yMDEtMC45LDE2LjYwMi02LjgsMjIuMzAxYy00LjksNC44MDEtMTIuMzAxLDguOS0yMi4yLDEyLjY5OWMtMywxLjIwMS02LjQtMC43OTktNi45LTQuMTAyDQoJYy0yLTEzLjY5Ny00LTI3LjM5OC02LTQxLjEwMmMtMC4zOTktMi41LDEuMi00Ljg5OCwzLjYwMS01LjY5N0MxOTIuMDk1LDI0Mi43MTUsMjA0Ljg5NSwyNDguNjEzLDIwNy4yOTUsMjY1LjYxM3ogTTE1NS41OTUsMTU0LjgxNA0KCWM5LjctMi40LDE3LjItMi40LDIyLjQtMC40YzYsMi4zMDIsOS42OTksOC40LDExLjEsMTguMTAyYzIuMiwxNC44MDEtNiwyNS4zMDEtMjQuNCwzMi44OTljLTMuMSwxLjMwMS02LjYtMC44MDEtNy4xLTQuMQ0KCWMtMi0xMy41LTMuOS0yNy4xLTUuOS00MC43MDFDMTUxLjI5NSwxNTguMDEzLDE1Mi45OTUsMTU1LjQxNCwxNTUuNTk1LDE1NC44MTR6Ii8+DQo8L3N2Zz4NCg=="> <nav> <a href="https://github.com/g-harel/blobs" style="transform:rotate(1deg) translateY(3px);">GITHUB</a> <a href="https://npmjs.com/package/blobs" style="transform:rotate(-2deg) translateY(-1px);">NPM</a> <a href="mailto:gabrielj.harel@gmail.com" style="transform:rotate(4deg) translateY(1px);">CONTACT</a> </nav> </header> <main> <div class="example"></div> <div class="how-it-works">How it works</div> <div class="container"></div> </main> <script>parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"NSCe":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.splitLine=exports.split=exports.angle=exports.distance=exports.deg=exports.rad=exports.mod=exports.smooth=exports.insertCount=exports.insertAt=exports.shift=exports.reverse=exports.length=exports.expandHandle=exports.angleOf=exports.coordEqual=exports.mapPoints=exports.forPoints=exports.coordPoint=exports.copyPoint=void 0;var n=function(){return(n=Object.assign||function(n){for(var t,r=1,e=arguments.length;r<e;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}).apply(this,arguments)},t=function(){for(var n=0,t=0,r=arguments.length;t<r;t++)n+=arguments[t].length;var e=Array(n),o=0;for(t=0;t<r;t++)for(var a=arguments[t],u=0,s=a.length;u<s;u++,o++)e[o]=a[u];return e},r=function(t){return{x:t.x,y:t.y,handleIn:n({},t.handleIn),handleOut:n({},t.handleOut)}};exports.copyPoint=r;var e=function(t){return n(n({},t),{handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}})};exports.coordPoint=e;var o=function(n,t){for(var e=function(e){var o=function(t){return r(n[v(t,n.length)])};t({curr:r(n[e]),index:e,sibling:o,prev:function(){return o(e-1)},next:function(){return o(e+1)}})},o=0;o<n.length;o++)e(o)};exports.forPoints=o;var a=function(n,t){var r=[];return o(n,function(n){r.push(t(n))}),r};exports.mapPoints=a;var u=function(n,t){return n.x===t.x&&n.y===t.y};exports.coordEqual=u;var s=function(n,t){var r=t.x-n.x,e=-t.y+n.y,o=Math.atan2(e,r);return o<0?Math.abs(o):2*Math.PI-o};exports.angleOf=s;var i=function(n,t){return{x:n.x+t.length*Math.cos(t.angle),y:n.y+t.length*Math.sin(t.angle)}};exports.expandHandle=i;var l=function(n,t){return{angle:s(n,t),length:Math.sqrt(Math.pow(t.x-n.x,2)+Math.pow(t.y-n.y,2))}},x=function(n,t){var r=i(n,n.handleOut),e=i(t,t.handleIn);return(M(n,t)+M(r,e)+n.handleOut.length+t.handleIn.length)/2};exports.length=x;var h=function(n){return a(n,function(t){var r=t.index,e=(0,t.sibling)(n.length-r-1);return e.handleIn.angle+=Math.PI,e.handleOut.angle+=Math.PI,e})};exports.reverse=h;var p=function(n,t){return a(t,function(t){var r=t.index;return(0,t.sibling)(r+n)})};exports.shift=p;var c=function(n,t,e){var o=r(t);o.handleOut.length*=n;var a=r(e);a.handleIn.length*=1-n;var u=i(t,t.handleOut),s=i(e,e.handleIn),x=i(o,o.handleOut),h=i(a,a.handleIn),p=P(n,u,s),c=P(n,x,p),f=P(1-n,h,p),d=P(n,c,f);return[o,{x:d.x,y:d.y,handleIn:l(d,c),handleOut:l(d,f)},a]};exports.insertAt=c;var f=function n(r,e,o){if(r<2)return[e,o];var a=c(1/r,e,o),u=a[0],s=a[1],i=a[2];return 2===r?[u,s,i]:t([u],n(r-1,s,i))};exports.insertCount=f;var d=function(n,t){return a(n,function(n){var r=n.curr,e=n.next,o=n.prev,a=s(o(),e());return{x:r.x,y:r.y,handleIn:{angle:a+Math.PI,length:t*M(r,o())},handleOut:{angle:a,length:t*M(r,e())}}})};exports.smooth=d;var v=function(n,t){return(n%t+t)%t};exports.mod=v;var g=function(n){return n/360*2*Math.PI};exports.rad=g;var y=function(n){return n/Math.PI*1/2*360};exports.deg=y;var M=function(n,t){return Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))};exports.distance=M;var I=function(n,t){return y(Math.atan2(t.y-n.y,t.x-n.x))};exports.angle=I;var O=function(n,t,r){return t+n*(r-t)};exports.split=O;var P=function(n,t,r){return{x:O(n,t.x,r.x),y:O(n,t.y,r.y)}};exports.splitLine=P;
},{}],"PF2n":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.renderPath2D=exports.drawClosed=exports.drawInfo=exports.clear=void 0;var e=require("../util"),t=2,r=20,n=function(e){e.clearRect(0,0,e.canvas.width,e.canvas.height)};exports.clear=n;var o=function(e,t,n,o){e.fillText(n+": "+o,r,(t+1)*r)};exports.drawInfo=o;var a=function(e,t,r,n){var o=e.strokeStyle;e.beginPath(),e.moveTo(t.x,t.y),e.lineTo(r.x,r.y),e.strokeStyle=n,e.stroke(),e.strokeStyle=o},l=function(e,r,n){var o=e.fillStyle;e.beginPath(),e.arc(r.x,r.y,t,0,2*Math.PI),e.fillStyle=n,e.fill(),e.fillStyle=o},i=function(t,r,n){if(n.length<2)throw new Error("not enough points");r&&(0,e.forPoints)(n,function(r){var n=r.curr,o=(0,r.next)(),i=(0,e.expandHandle)(n,n.handleOut),d=(0,e.expandHandle)(o,o.handleIn);l(t,n,""),a(t,n,i,"#ccc"),a(t,o,d,"#b6b")}),t.stroke(d(n))};exports.drawClosed=i;var d=function(t){var r=new Path2D;return t.length<1?r:(r.moveTo(t[0].x,t[0].y),(0,e.forPoints)(t,function(t){var n=t.curr,o=(0,t.next)(),a=(0,e.expandHandle)(n,n.handleOut),l=(0,e.expandHandle)(o,o.handleIn);r.bezierCurveTo(a.x,a.y,l.x,l.y,o.x,o.y)}),r)};exports.renderPath2D=d;
},{"../util":"NSCe"}],"BWRk":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.rand=void 0;var r=function(r){var t,e,n,o,u=function(r){for(var t=2166136261,e=0;e<r.length;e++)t=Math.imul(t^r.charCodeAt(e),16777619);return function(){return t+=t<<13,t^=t>>>7,t+=t<<3,t^=t>>>17,(t+=t<<5)>>>0}}(r);return t=u(),e=u(),n=u(),o=u(),function(){var r=(t>>>=0)+(e>>>=0)|0;return t=e^e>>>9,e=(n>>>=0)+(n<<3)|0,n=(n=n<<21|n>>>11)+(r=r+(o=1+(o>>>=0)|0)|0)|0,(r>>>0)/4294967296}};exports.rand=r;
},{}],"BJ3L":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.genFromOptions=exports.genBlob=void 0;var n=require("../internal/rand"),e=require("../internal/util"),r=require("./util"),t=function(n,e){for(var t=2*Math.PI/n,a=[],o=0;o<n;o++){var i=e(),s=Math.sin(o*t),u=Math.cos(o*t);a.push({x:.5+s*i,y:.5+u*i,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}})}var l=4/3*Math.tan(t/4)/Math.sin(t/2)/2;return(0,r.smooth)(a,l)};exports.genBlob=t;var a=function(r){var a=(0,n.rand)(String(r.seed)),o=1/(1+r.randomness/10),i=t(3+r.extraPoints,function(){return(o+a()*(1-o))/2}),s=r.size;return(0,e.mapPoints)(i,function(n){var e=n.curr;return e.x*=s,e.y*=s,e.handleIn.length*=s,e.handleOut.length*=s,e})};exports.genFromOptions=a;
},{"../internal/rand":"BWRk","../internal/util":"NSCe","./util":"NSCe"}],"SjCR":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.timingFunctions=void 0;var t=function(t){return t},n=function(t){return 1-Math.pow(t-1,2)},e=function(t){return 1-n(1-t)},i=function(t){return.5+.5*Math.sin(Math.PI*(t+1.5))},r=function(t){return function(n){return Math.pow(2,-10*n)*Math.sin((n-t/4)*(2*Math.PI)/t)+1}},a={linear:t,easeEnd:n,easeStart:e,ease:i,elasticEnd0:r(1),elasticEnd1:r(.64),elasticEnd2:r(.32),elasticEnd3:r(.16)};exports.timingFunctions=a;var s=a;
},{}],"FJSy":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.prepare=exports.divide=void 0;var n=require("../util"),e=function(e,r){var t=e.length,a=1/0,o=0,l=[],u=function(r){for(var u=0;u<t;u++){for(var h=0,i=0;i<t&&!((h+=Math.pow(100*(0,n.distance)(e[i],r[(0,n.mod)(i+u,t)]),2))>a);i++);h<=a&&(a=h,o=u,l=r)}};return u(r),u((0,n.reverse)(r)),(0,n.shift)(o,l)},r=function(e,r){if(r.length<3)throw new Error("not enough points");if(e<r.length)throw new Error("cannot remove points");if(e===r.length)return r.slice();var t=[];(0,n.forPoints)(r,function(e){var r=e.curr,a=e.next;t.push((0,n.length)(r,a()))});for(var a=o(t,e-r.length),l=[],u=0;u<r.length;u++){var h=l[l.length-1]||r[u],i=r[(0,n.mod)(u+1,r.length)];l.pop(),l.push.apply(l,(0,n.insertCount)(a[u],h,i))}var d=l.pop();return l[0].handleIn=d.handleIn,l};exports.divide=r;var t=function(e,r){return(0,n.mapPoints)(e,function(e){var t=e.index,a=e.curr,o=e.prev,l=e.next;return 0===a.handleIn.length&&(0,n.coordEqual)(o(),a)&&(a.handleIn.angle=r[t].handleIn.angle),0===a.handleOut.length&&(0,n.coordEqual)(l(),a)&&(a.handleOut.angle=r[t].handleOut.angle),a})},a=function(e){return(0,n.mapPoints)(e,function(e){var r=e.curr,t=e.prev,a=e.next,o=(0,n.angleOf)(t(),a());return 0===r.handleIn.length&&(r.handleIn.angle=o+Math.PI),0===r.handleOut.length&&(r.handleOut.angle=o),r})},o=function(n,e){for(var r=n.map(function(){return 1}),t=n.slice(),a=0;a<e;a++){for(var o=0,l=1;l<t.length;l++)t[l]>t[o]?o=l:t[l]===t[o]&&n[l]>n[o]&&(o=l);r[o]++,t[o]=n[o]/r[o]}return r},l=function(n,o,l){var u=l.divideRatio*Math.max(n.length,o.length),h=r(u,n),i=r(u,o),d=e(h,i);return[l.rawAngles?h:t(a(h),d),l.rawAngles?d:t(a(d),h)]};exports.prepare=l;
},{"../util":"NSCe"}],"Sl0M":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.interpolateBetweenSmooth=exports.interpolateBetween=void 0;var e=require("../util"),n=function(){return(n=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var l in n=arguments[t])Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);return e}).apply(this,arguments)},t=function(n,t,a){var l=2*Math.PI,h=(0,e.mod)(t,l),r=(0,e.mod)(a,l);return Math.abs(h-r)>Math.PI&&(h<r?h+=l:r+=l),(0,e.split)(n,h,r)},a=function(a,l,h){if(l.length!==h.length)throw new Error("must have equal number of points");for(var r=Math.min(1,Math.max(0,a)),o=[],u=0;u<l.length;u++)o.push(n(n({},(0,e.splitLine)(a,l[u],h[u])),{handleIn:{angle:t(a,l[u].handleIn.angle,h[u].handleIn.angle),length:(0,e.split)(r,l[u].handleIn.length,h[u].handleIn.length)},handleOut:{angle:t(a,l[u].handleOut.angle,h[u].handleOut.angle),length:(0,e.split)(r,l[u].handleOut.length,h[u].handleOut.length)}}));return o};exports.interpolateBetween=a;var l=function(n,l,h,r){n*=Math.min(1,Math.min(Math.abs(0-l),Math.abs(1-l)));var o=a(l,h,r),u=(0,e.smooth)(o,Math.sqrt(n+.25)/3);return(0,e.mapPoints)(o,function(a){var l=a.index,h=a.curr,r=u[l];return h.handleIn.angle=t(n,h.handleIn.angle,r.handleIn.angle),h.handleIn.length=(0,e.split)(n,h.handleIn.length,r.handleIn.length),h.handleOut.angle=t(n,h.handleOut.angle,r.handleOut.angle),h.handleOut.length=(0,e.split)(n,h.handleOut.length,r.handleOut.length),h})};exports.interpolateBetweenSmooth=l;
},{"../util":"NSCe"}],"bUxv":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.transitionFrames=exports.renderFramesAt=void 0;var t=require("./timing"),i=require("./prepare"),e=require("./interpolate"),n=function(){return String(Math.random()).substr(2)},r=function(t){var n,r,a,s=t.renderCache,m=t.currentFrames;if(0===m.length)return{renderCache:s,lastFrameId:null,points:[]};if(1===m.length){var o=m[0];return{renderCache:s,lastFrameId:o.id,points:o.initialPoints}}for(var d=m[0],l=m[1],p=2;p<m.length&&!(l.timestamp>t.timestamp);p++)d=m[p-1],l=m[p];var u=l===m[m.length-1];if(l.timestamp<t.timestamp&&u)return{renderCache:s,lastFrameId:l.id,points:l.initialPoints};var h=null===(r=s[d.id])||void 0===r?void 0:r.preparedStartPoints,F=null===(a=s[l.id])||void 0===a?void 0:a.preparedEndPoints;h&&F||(h=(n=(0,i.prepare)(d.initialPoints,l.initialPoints,{rawAngles:!1,divideRatio:1}))[0],F=n[1],s[d.id]=s[d.id]||{},s[d.id].preparedStartPoints=h,s[l.id]=s[l.id]||{},s[l.id].preparedEndPoints=F);var c=(t.timestamp-d.timestamp)/(l.timestamp-d.timestamp),g=Math.max(0,Math.min(1,c)),v=l.timingFunction(g);return{renderCache:s,lastFrameId:1===g?l.id:d.id,points:(0,e.interpolateBetween)(v,h,F)}};exports.renderFramesAt=r;var a=function(i){var e=[];if(0===i.newFrames.length)return{newFrames:e};var a=r(i);if(null===a.lastFrameId){for(var s=i.shapeGenerator(i.newFrames[0]),m={x:0,y:0,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}},o=0,d=s;o<d.length;o++){var l=d[o];m.x+=l.x/s.length,m.y+=l.y/s.length}a.points=[m,m,m]}e.push({id:n(),initialPoints:a.points,timestamp:i.timestamp,timingFunction:t.timingFunctions.linear,transitionSourceFrameIndex:-1,isSynthetic:!0});for(var p=0,u=0;u<i.newFrames.length;u++){var h=i.newFrames[u];if(h.delay){p+=h.delay;var F=e[e.length-1];e.push({id:n(),initialPoints:F.initialPoints,timestamp:i.timestamp+p,timingFunction:t.timingFunctions.linear,transitionSourceFrameIndex:u-1,isSynthetic:!0})}p+=h.duration,e.push({id:n(),initialPoints:i.shapeGenerator(h),timestamp:i.timestamp+p,timingFunction:t.timingFunctions[h.timingFunction||"linear"],transitionSourceFrameIndex:u,isSynthetic:!1})}return{newFrames:e}};exports.transitionFrames=a;
},{"./timing":"SjCR","./prepare":"FJSy","./interpolate":"Sl0M"}],"LE9y":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.statefulAnimationGenerator=void 0;var e=require("./frames"),r=function(r,t,n){return function(){var a=[],i={},o={},s=0,u=0,c=function(){return Date.now()-u},m=function(){return 0!==s},f=function(){m()&&(u+=c()-s,s=0)},l=function(){m()||(s=c())};return{renderFrame:function(){var r=(0,e.renderFramesAt)({renderCache:i,timestamp:m()?s:c(),currentFrames:a});return i=r.renderCache,r.lastFrameId&&o[r.lastFrameId]&&(o[r.lastFrameId](),delete o[r.lastFrameId]),t(r.points)},transition:function(){for(var t=[],s=0;s<arguments.length;s++)t[s]=arguments[s];for(var u=0;u<t.length;u++)n(t[u],u);var m=(0,e.transitionFrames)({renderCache:i,timestamp:c(),currentFrames:a,newFrames:t,shapeGenerator:r});a=m.newFrames,o={},i={};for(var f=0,l=a;f<l.length;f++){var d=l[f];if(!d.isSynthetic){var F=t[d.transitionSourceFrameIndex].callback;F&&(o[d.id]=F)}}},play:f,pause:l,playPause:function(){m()?f():l()}}}};exports.statefulAnimationGenerator=r;
},{"./frames":"bUxv"}],"Aed7":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.checkSvgOptions=exports.checkCanvasOptions=exports.checkBlobOptions=exports.checkKeyframeOptions=void 0;var n=require("./animate/timing");function i(n){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n})(n)}var o=function(n,o,t){var e=i(o);if("number"===e&&isNaN(o)&&(e="NaN"),"object"===e&&null===o&&(e="null"),!t.includes(e))throw'"'+n+'" should have type "'+t.join("|")+'" but was "'+e+'".'},t=function(i){o("keyframe",i,["object"]);var t=i.delay,e=i.duration,s=i.timingFunction,r=i.callback;if(o("delay",t,["number","undefined"]),t&&t<0)throw'delay is invalid "'+t+'".';if(o("duration",e,["number"]),e&&e<0)throw'duration is invalid "'+e+'".';if(o("timingFunction",s,["string","undefined"]),s&&!n.timingFunctions[s])throw'".timingFunction" is not recognized "'+s+'".';o("callback",r,["function","undefined"])};exports.checkKeyframeOptions=t;var e=function(n){o("blobOptions",n,["object"]);var i=n.seed,t=n.extraPoints,e=n.randomness,s=n.size;if(o("blobOptions.seed",i,["string","number"]),o("blobOptions.extraPoints",t,["number"]),t<0)throw'blobOptions.extraPoints is invalid "'+t+'".';if(o("blobOptions.randomness",e,["number"]),e<0)throw'blobOptions.randomness is invalid "'+e+'".';if(o("blobOptions.size",s,["number"]),s<0)throw'blobOptions.size is invalid "'+s+'".'};exports.checkBlobOptions=e;var s=function(n){if(o("canvasOptions",n,["object","undefined"]),n){var i=n.offsetX,t=n.offsetY;o("canvasOptions.offsetX",i,["number","undefined"]),o("canvasOptions.offsetY",t,["number","undefined"])}};exports.checkCanvasOptions=s;var r=function(n){if(o("svgOptions",n,["object","undefined"]),n){var i=n.fill,t=n.stroke,e=n.strokeWidth;o("svgOptions.fill",i,["string","undefined"]),o("svgOptions.stroke",t,["string","undefined"]),o("svgOptions.strokeWidth",e,["number","undefined"])}};exports.checkSvgOptions=r;
},{"./animate/timing":"SjCR"}],"HZBX":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.canvasPath=void 0;var e=require("../internal/render/canvas"),n=require("../internal/gen"),t=require("../internal/util"),r=require("../internal/animate/state"),i=require("../internal/check"),a=function(e){return(0,t.mapPoints)((0,n.genFromOptions)(e.blobOptions),function(n){var t,r,i=n.curr;return i.x+=(null===(t=null==e?void 0:e.canvasOptions)||void 0===t?void 0:t.offsetX)||0,i.y+=(null===(r=null==e?void 0:e.canvasOptions)||void 0===r?void 0:r.offsetY)||0,i})},o=function(e,n){try{(0,i.checkBlobOptions)(e.blobOptions),(0,i.checkCanvasOptions)(e.canvasOptions),(0,i.checkKeyframeOptions)(e)}catch(t){throw"(blobs2): keyframe "+n+": "+t}},s=(0,r.statefulAnimationGenerator)(a,e.renderPath2D,o);exports.canvasPath=s;
},{"../internal/render/canvas":"PF2n","../internal/gen":"BJ3L","../internal/util":"NSCe","../internal/animate/state":"LE9y","../internal/check":"Aed7"}],"q9J3":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.onDebugStateChange=exports.isDebug=void 0;var e=!1,t=function(){return e};exports.isDebug=t;var n=[],o=function(t){n.push(t),t(e)};if(exports.onDebugStateChange=o,e&&document.body){var r=document.createElement("button");r.innerHTML="debug",r.style.padding="2rem",r.style.position="fixed",r.style.top="0",r.onclick=function(){e=!e;for(var t=0,o=n;t<o.length;t++){(0,o[t])(e)}},document.body.prepend(r)}
},{}],"PBVq":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.calcBouncePercentage=exports.drawOpen=exports.drawClosed=exports.drawLine=exports.drawPoint=exports.point=exports.rotateAround=exports.tempStyles=exports.forceStyles=void 0;var e=require("../../internal/util"),t=require("../internal/debug"),n=require("../internal/layout"),r=function(e,t){e.forcedStyles||(e.forcedStyles=0),e.forcedStyles++,e.save(),t(),e.restore(),e.forcedStyles--};exports.forceStyles=r;var o=function(e,t,n){e.forcedStyles>0?n():(e.save(),t(),n(),e.restore())};exports.tempStyles=o;var i=function(e,r){o(e.ctx,function(){e.ctx.translate(e.cx,e.cy),e.ctx.rotate(e.angle)},function(){(0,t.isDebug)()&&o(e.ctx,function(){return e.ctx.fillStyle=n.colors.debug},function(){e.ctx.fillRect(0,-4,1,8),e.ctx.fillRect(-32,0,64,1)}),r()})};exports.rotateAround=i;var c=function(t,n,r,o,i,c){return{x:t,y:n,handleIn:{angle:(0,e.rad)(r),length:o},handleOut:{angle:(0,e.rad)(i),length:c}}};exports.point=c;var a=function(e,t,r,i){var c=(0,n.sizes)().pt*r,a=new Path2D;a.arc(t.x,t.y,c,0,2*Math.PI),e.fill(a),i&&o(e,function(){return e.font=6*c+"px monospace"},function(){return e.fillText(i,t.x+2*c,t.y-c)})};exports.drawPoint=a;var s=function(e,t,r,i,c){o(e,function(){var t=(0,n.sizes)().pt*i;c&&e.setLineDash([c*t])},function(){var o=(0,n.sizes)().pt*i,c=new Path2D;c.moveTo(t.x,t.y),c.lineTo(r.x,r.y),e.lineWidth=o,e.stroke(c)})};exports.drawLine=s;var l=function(t,n,r){(0,e.forPoints)(n,function(e){var n=e.curr,o=e.next;u(t,n,o(),r)})};exports.drawClosed=l;var u=function(t,r,i,c){var l=(0,n.sizes)().width,u=(0,e.expandHandle)(r,r.handleOut),f=(0,e.expandHandle)(i,i.handleIn);c&&o(t,function(){t.fillStyle=n.colors.secondary,t.strokeStyle=n.colors.secondary},function(){s(t,r,u,1),s(t,i,f,1,2),a(t,u,1.4),a(t,f,1.4)}),o(t,function(){var e=.003*l;t.lineWidth=e},function(){var e=new Path2D;e.moveTo(r.x,r.y),e.bezierCurveTo(u.x,u.y,f.x,f.y,i.x,i.y),o(t,function(){return t.strokeStyle=n.colors.highlight},function(){return t.stroke(e)}),o(t,function(){return t.fillStyle=n.colors.highlight},function(){a(t,r,2),a(t,i,2)})})};exports.drawOpen=u;var f=function(t,n,r){var o=t/2,i=(0,e.mod)(r,t);return n(i<=o?i/o:1-(i-o)/o)};exports.calcBouncePercentage=f;
},{"../../internal/util":"NSCe","../internal/debug":"q9J3","../internal/layout":"rSMP"}],"rSMP":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.addCanvas=exports.addTitle=exports.sizes=exports.colors=void 0;var e=require("./canvas"),t=require("./debug"),n={debug:"green",highlight:"#ec576b",secondary:"#555"};exports.colors=n;var a=window.cells||[];window.cells=a;var i=document.querySelector(".container");if(!i)throw"missing container";var r=document.querySelector(".how-it-works");if(!r)throw"missing container";var o=!1,d=function(){i.classList.add("open"),r.classList.add("hidden"),o=!0,p()};r.addEventListener("click",d),(document.location.hash||(0,t.isDebug)())&&setTimeout(d);var c=function(){var e=window.getComputedStyle(i.lastChild||document.body),t=Number(e.getPropertyValue("width").slice(0,-2))*window.devicePixelRatio;return{width:t,pt:.002*t}};exports.sizes=c;var s=function(){var e=("000"+a.length).substr(-3),t=document.createElement("div");t.classList.add("section"),t.setAttribute("id",e),i.appendChild(t);var n=document.createElement("a");return n.classList.add("number"),n.setAttribute("href","#"+e),n.appendChild(document.createTextNode(e)),t.appendChild(n),t},l=function(e,t){var n=document.createElement("h"+e);n.classList.add("title"),i.appendChild(n);var a=document.createElement("div");a.classList.add("text"),n.appendChild(a),t=t.replace("\n"," ").replace(/\s+/g," ").trim();var r=document.createTextNode(t);a.appendChild(r)};exports.addTitle=l;var u=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];var i=s();0==t.length&&(t=[function(){}]);for(var r=[],o=0,d=t;o<d.length;o++){var c=d[o],l=document.createElement("div");l.classList.add("cell"),i.appendChild(l);var u=document.createElement("canvas");l.appendChild(u);var v=document.createElement("div");v.classList.add("label"),l.appendChild(v);var h=u.getContext("2d");if(!h)throw"missing canvas context";var m={aspectRatio:e,canvas:u,ctx:h,painter:c,animationID:-1};r.push(m)}a.push(r),p()};exports.addCanvas=u;var v=void 0,p=function(){window.clearTimeout(v),v=window.setTimeout(function(){for(var i=function(a){for(var i=c().width/a.length,r=function(r){var d=i/r.aspectRatio;r.canvas.width=i,r.canvas.height=d;var c=function(){(0,t.isDebug)()&&(0,e.tempStyles)(r.ctx,function(){return r.ctx.strokeStyle=n.debug},function(){return r.ctx.strokeRect(0,0,i,d-1)})};c();var s=0,l=0;r.canvas.onclick=function(){0===s?s=Date.now():(l+=Date.now()-s,s=0)};var u=r.painter(r.ctx,i,d,function(a){if(o){var u=Math.random(),v=Date.now();r.animationID=u,function o(){if(r.animationID===u){if(0===s){var p=Date.now()-v-l;r.ctx.clearRect(0,0,i,d),c(),(0,t.isDebug)()&&(0,e.tempStyles)(r.ctx,function(){return r.ctx.fillStyle=n.debug},function(){return r.ctx.fillText(String(p),10,15)}),a(p)}requestAnimationFrame(o)}}()}});if(u){var v=r.canvas.parentElement;if(v){v.style.width=100/a.length+"%";var p=v.querySelector(".label");p&&p.innerHTML!==u&&(p.innerHTML="",p.appendChild(document.createTextNode(u)))}}},d=0,s=a;d<s.length;d++){r(s[d])}},r=0,d=a;r<d.length;r++){i(d[r])}},100)};window.addEventListener("load",p),window.addEventListener("resize",p),(0,t.onDebugStateChange)(p);
},{"./canvas":"PBVq","./debug":"q9J3"}],"UHT1":[function(require,module,exports) {
"use strict";var n=require("../public/animate"),t=require("./internal/layout"),i=function(){return(i=Object.assign||function(n){for(var t,i=1,e=arguments.length;i<e;i++)for(var a in t=arguments[i])Object.prototype.hasOwnProperty.call(t,a)&&(n[a]=t[a]);return n}).apply(this,arguments)},e=document.querySelector(".example"),a=document.createElement("canvas");e.appendChild(a);var r=0,o=function(){var n=Math.min(600,Math.min(window.innerWidth-64,window.innerHeight/2));a.style.width=n+"px",a.style.height=n+"px",r=n*(window.devicePixelRatio||1),a.width=r,a.height=r},s=a.getContext("2d"),c=(0,n.canvasPath)(),d=function n(){s.clearRect(0,0,r,r),s.fillStyle=t.colors.highlight,s.fill(c.renderFrame()),requestAnimationFrame(n)};requestAnimationFrame(d);var u=function(n){return void 0===n&&(n={}),i({duration:4e3,timingFunction:"ease",callback:l,blobOptions:{extraPoints:3,randomness:4,seed:Math.random(),size:r}},n)},l=function(){return c.transition(u())};a.onclick=function(){c.transition(u({duration:400,timingFunction:"elasticEnd0"}))},window.addEventListener("load",function(){o(),c.transition(u({duration:0}))}),window.addEventListener("resize",function(){o();var n=6*r/7;c.transition(u({duration:100,timingFunction:"easeEnd",blobOptions:{extraPoints:0,randomness:0,seed:"",size:n},canvasOptions:{offsetX:(r-n)/2,offsetY:(r-n)/2}}))});
},{"../public/animate":"HZBX","./internal/layout":"rSMP"}]},{},["UHT1"], null)
//# sourceMappingURL=/example.1793f201.js.map</script> <script>parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"NSCe":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.splitLine=exports.split=exports.angle=exports.distance=exports.deg=exports.rad=exports.mod=exports.smooth=exports.insertCount=exports.insertAt=exports.shift=exports.reverse=exports.length=exports.expandHandle=exports.angleOf=exports.coordEqual=exports.mapPoints=exports.forPoints=exports.coordPoint=exports.copyPoint=void 0;var n=function(){return(n=Object.assign||function(n){for(var t,r=1,e=arguments.length;r<e;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n}).apply(this,arguments)},t=function(){for(var n=0,t=0,r=arguments.length;t<r;t++)n+=arguments[t].length;var e=Array(n),o=0;for(t=0;t<r;t++)for(var a=arguments[t],u=0,s=a.length;u<s;u++,o++)e[o]=a[u];return e},r=function(t){return{x:t.x,y:t.y,handleIn:n({},t.handleIn),handleOut:n({},t.handleOut)}};exports.copyPoint=r;var e=function(t){return n(n({},t),{handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}})};exports.coordPoint=e;var o=function(n,t){for(var e=function(e){var o=function(t){return r(n[v(t,n.length)])};t({curr:r(n[e]),index:e,sibling:o,prev:function(){return o(e-1)},next:function(){return o(e+1)}})},o=0;o<n.length;o++)e(o)};exports.forPoints=o;var a=function(n,t){var r=[];return o(n,function(n){r.push(t(n))}),r};exports.mapPoints=a;var u=function(n,t){return n.x===t.x&&n.y===t.y};exports.coordEqual=u;var s=function(n,t){var r=t.x-n.x,e=-t.y+n.y,o=Math.atan2(e,r);return o<0?Math.abs(o):2*Math.PI-o};exports.angleOf=s;var i=function(n,t){return{x:n.x+t.length*Math.cos(t.angle),y:n.y+t.length*Math.sin(t.angle)}};exports.expandHandle=i;var l=function(n,t){return{angle:s(n,t),length:Math.sqrt(Math.pow(t.x-n.x,2)+Math.pow(t.y-n.y,2))}},x=function(n,t){var r=i(n,n.handleOut),e=i(t,t.handleIn);return(M(n,t)+M(r,e)+n.handleOut.length+t.handleIn.length)/2};exports.length=x;var h=function(n){return a(n,function(t){var r=t.index,e=(0,t.sibling)(n.length-r-1);return e.handleIn.angle+=Math.PI,e.handleOut.angle+=Math.PI,e})};exports.reverse=h;var p=function(n,t){return a(t,function(t){var r=t.index;return(0,t.sibling)(r+n)})};exports.shift=p;var c=function(n,t,e){var o=r(t);o.handleOut.length*=n;var a=r(e);a.handleIn.length*=1-n;var u=i(t,t.handleOut),s=i(e,e.handleIn),x=i(o,o.handleOut),h=i(a,a.handleIn),p=P(n,u,s),c=P(n,x,p),f=P(1-n,h,p),d=P(n,c,f);return[o,{x:d.x,y:d.y,handleIn:l(d,c),handleOut:l(d,f)},a]};exports.insertAt=c;var f=function n(r,e,o){if(r<2)return[e,o];var a=c(1/r,e,o),u=a[0],s=a[1],i=a[2];return 2===r?[u,s,i]:t([u],n(r-1,s,i))};exports.insertCount=f;var d=function(n,t){return a(n,function(n){var r=n.curr,e=n.next,o=n.prev,a=s(o(),e());return{x:r.x,y:r.y,handleIn:{angle:a+Math.PI,length:t*M(r,o())},handleOut:{angle:a,length:t*M(r,e())}}})};exports.smooth=d;var v=function(n,t){return(n%t+t)%t};exports.mod=v;var g=function(n){return n/360*2*Math.PI};exports.rad=g;var y=function(n){return n/Math.PI*1/2*360};exports.deg=y;var M=function(n,t){return Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))};exports.distance=M;var I=function(n,t){return y(Math.atan2(t.y-n.y,t.x-n.x))};exports.angle=I;var O=function(n,t,r){return t+n*(r-t)};exports.split=O;var P=function(n,t,r){return{x:O(n,t.x,r.x),y:O(n,t.y,r.y)}};exports.splitLine=P;
},{}],"q9J3":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.onDebugStateChange=exports.isDebug=void 0;var e=!1,t=function(){return e};exports.isDebug=t;var n=[],o=function(t){n.push(t),t(e)};if(exports.onDebugStateChange=o,e&&document.body){var r=document.createElement("button");r.innerHTML="debug",r.style.padding="2rem",r.style.position="fixed",r.style.top="0",r.onclick=function(){e=!e;for(var t=0,o=n;t<o.length;t++){(0,o[t])(e)}},document.body.prepend(r)}
},{}],"PBVq":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.calcBouncePercentage=exports.drawOpen=exports.drawClosed=exports.drawLine=exports.drawPoint=exports.point=exports.rotateAround=exports.tempStyles=exports.forceStyles=void 0;var e=require("../../internal/util"),t=require("../internal/debug"),n=require("../internal/layout"),r=function(e,t){e.forcedStyles||(e.forcedStyles=0),e.forcedStyles++,e.save(),t(),e.restore(),e.forcedStyles--};exports.forceStyles=r;var o=function(e,t,n){e.forcedStyles>0?n():(e.save(),t(),n(),e.restore())};exports.tempStyles=o;var i=function(e,r){o(e.ctx,function(){e.ctx.translate(e.cx,e.cy),e.ctx.rotate(e.angle)},function(){(0,t.isDebug)()&&o(e.ctx,function(){return e.ctx.fillStyle=n.colors.debug},function(){e.ctx.fillRect(0,-4,1,8),e.ctx.fillRect(-32,0,64,1)}),r()})};exports.rotateAround=i;var c=function(t,n,r,o,i,c){return{x:t,y:n,handleIn:{angle:(0,e.rad)(r),length:o},handleOut:{angle:(0,e.rad)(i),length:c}}};exports.point=c;var a=function(e,t,r,i){var c=(0,n.sizes)().pt*r,a=new Path2D;a.arc(t.x,t.y,c,0,2*Math.PI),e.fill(a),i&&o(e,function(){return e.font=6*c+"px monospace"},function(){return e.fillText(i,t.x+2*c,t.y-c)})};exports.drawPoint=a;var s=function(e,t,r,i,c){o(e,function(){var t=(0,n.sizes)().pt*i;c&&e.setLineDash([c*t])},function(){var o=(0,n.sizes)().pt*i,c=new Path2D;c.moveTo(t.x,t.y),c.lineTo(r.x,r.y),e.lineWidth=o,e.stroke(c)})};exports.drawLine=s;var l=function(t,n,r){(0,e.forPoints)(n,function(e){var n=e.curr,o=e.next;u(t,n,o(),r)})};exports.drawClosed=l;var u=function(t,r,i,c){var l=(0,n.sizes)().width,u=(0,e.expandHandle)(r,r.handleOut),f=(0,e.expandHandle)(i,i.handleIn);c&&o(t,function(){t.fillStyle=n.colors.secondary,t.strokeStyle=n.colors.secondary},function(){s(t,r,u,1),s(t,i,f,1,2),a(t,u,1.4),a(t,f,1.4)}),o(t,function(){var e=.003*l;t.lineWidth=e},function(){var e=new Path2D;e.moveTo(r.x,r.y),e.bezierCurveTo(u.x,u.y,f.x,f.y,i.x,i.y),o(t,function(){return t.strokeStyle=n.colors.highlight},function(){return t.stroke(e)}),o(t,function(){return t.fillStyle=n.colors.highlight},function(){a(t,r,2),a(t,i,2)})})};exports.drawOpen=u;var f=function(t,n,r){var o=t/2,i=(0,e.mod)(r,t);return n(i<=o?i/o:1-(i-o)/o)};exports.calcBouncePercentage=f;
},{"../../internal/util":"NSCe","../internal/debug":"q9J3","../internal/layout":"rSMP"}],"rSMP":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.addCanvas=exports.addTitle=exports.sizes=exports.colors=void 0;var e=require("./canvas"),t=require("./debug"),n={debug:"green",highlight:"#ec576b",secondary:"#555"};exports.colors=n;var a=window.cells||[];window.cells=a;var i=document.querySelector(".container");if(!i)throw"missing container";var r=document.querySelector(".how-it-works");if(!r)throw"missing container";var o=!1,d=function(){i.classList.add("open"),r.classList.add("hidden"),o=!0,p()};r.addEventListener("click",d),(document.location.hash||(0,t.isDebug)())&&setTimeout(d);var c=function(){var e=window.getComputedStyle(i.lastChild||document.body),t=Number(e.getPropertyValue("width").slice(0,-2))*window.devicePixelRatio;return{width:t,pt:.002*t}};exports.sizes=c;var s=function(){var e=("000"+a.length).substr(-3),t=document.createElement("div");t.classList.add("section"),t.setAttribute("id",e),i.appendChild(t);var n=document.createElement("a");return n.classList.add("number"),n.setAttribute("href","#"+e),n.appendChild(document.createTextNode(e)),t.appendChild(n),t},l=function(e,t){var n=document.createElement("h"+e);n.classList.add("title"),i.appendChild(n);var a=document.createElement("div");a.classList.add("text"),n.appendChild(a),t=t.replace("\n"," ").replace(/\s+/g," ").trim();var r=document.createTextNode(t);a.appendChild(r)};exports.addTitle=l;var u=function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];var i=s();0==t.length&&(t=[function(){}]);for(var r=[],o=0,d=t;o<d.length;o++){var c=d[o],l=document.createElement("div");l.classList.add("cell"),i.appendChild(l);var u=document.createElement("canvas");l.appendChild(u);var v=document.createElement("div");v.classList.add("label"),l.appendChild(v);var h=u.getContext("2d");if(!h)throw"missing canvas context";var m={aspectRatio:e,canvas:u,ctx:h,painter:c,animationID:-1};r.push(m)}a.push(r),p()};exports.addCanvas=u;var v=void 0,p=function(){window.clearTimeout(v),v=window.setTimeout(function(){for(var i=function(a){for(var i=c().width/a.length,r=function(r){var d=i/r.aspectRatio;r.canvas.width=i,r.canvas.height=d;var c=function(){(0,t.isDebug)()&&(0,e.tempStyles)(r.ctx,function(){return r.ctx.strokeStyle=n.debug},function(){return r.ctx.strokeRect(0,0,i,d-1)})};c();var s=0,l=0;r.canvas.onclick=function(){0===s?s=Date.now():(l+=Date.now()-s,s=0)};var u=r.painter(r.ctx,i,d,function(a){if(o){var u=Math.random(),v=Date.now();r.animationID=u,function o(){if(r.animationID===u){if(0===s){var p=Date.now()-v-l;r.ctx.clearRect(0,0,i,d),c(),(0,t.isDebug)()&&(0,e.tempStyles)(r.ctx,function(){return r.ctx.fillStyle=n.debug},function(){return r.ctx.fillText(String(p),10,15)}),a(p)}requestAnimationFrame(o)}}()}});if(u){var v=r.canvas.parentElement;if(v){v.style.width=100/a.length+"%";var p=v.querySelector(".label");p&&p.innerHTML!==u&&(p.innerHTML="",p.appendChild(document.createTextNode(u)))}}},d=0,s=a;d<s.length;d++){r(s[d])}},r=0,d=a;r<d.length;r++){i(d[r])}},100)};window.addEventListener("load",p),window.addEventListener("resize",p),(0,t.onDebugStateChange)(p);
},{"./canvas":"PBVq","./debug":"q9J3"}],"SjCR":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.timingFunctions=void 0;var t=function(t){return t},n=function(t){return 1-Math.pow(t-1,2)},e=function(t){return 1-n(1-t)},i=function(t){return.5+.5*Math.sin(Math.PI*(t+1.5))},r=function(t){return function(n){return Math.pow(2,-10*n)*Math.sin((n-t/4)*(2*Math.PI)/t)+1}},a={linear:t,easeEnd:n,easeStart:e,ease:i,elasticEnd0:r(1),elasticEnd1:r(.64),elasticEnd2:r(.32),elasticEnd3:r(.16)};exports.timingFunctions=a;var s=a;
},{}],"BWRk":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.rand=void 0;var r=function(r){var t,e,n,o,u=function(r){for(var t=2166136261,e=0;e<r.length;e++)t=Math.imul(t^r.charCodeAt(e),16777619);return function(){return t+=t<<13,t^=t>>>7,t+=t<<3,t^=t>>>17,(t+=t<<5)>>>0}}(r);return t=u(),e=u(),n=u(),o=u(),function(){var r=(t>>>=0)+(e>>>=0)|0;return t=e^e>>>9,e=(n>>>=0)+(n<<3)|0,n=(n=n<<21|n>>>11)+(r=r+(o=1+(o>>>=0)|0)|0)|0,(r>>>0)/4294967296}};exports.rand=r;
},{}],"BJ3L":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.genFromOptions=exports.genBlob=void 0;var n=require("../internal/rand"),e=require("../internal/util"),r=require("./util"),t=function(n,e){for(var t=2*Math.PI/n,a=[],o=0;o<n;o++){var i=e(),s=Math.sin(o*t),u=Math.cos(o*t);a.push({x:.5+s*i,y:.5+u*i,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}})}var l=4/3*Math.tan(t/4)/Math.sin(t/2)/2;return(0,r.smooth)(a,l)};exports.genBlob=t;var a=function(r){var a=(0,n.rand)(String(r.seed)),o=1/(1+r.randomness/10),i=t(3+r.extraPoints,function(){return(o+a()*(1-o))/2}),s=r.size;return(0,e.mapPoints)(i,function(n){var e=n.curr;return e.x*=s,e.y*=s,e.handleIn.length*=s,e.handleOut.length*=s,e})};exports.genFromOptions=a;
},{"../internal/rand":"BWRk","../internal/util":"NSCe","./util":"NSCe"}],"Sl0M":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.interpolateBetweenSmooth=exports.interpolateBetween=void 0;var e=require("../util"),n=function(){return(n=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var l in n=arguments[t])Object.prototype.hasOwnProperty.call(n,l)&&(e[l]=n[l]);return e}).apply(this,arguments)},t=function(n,t,a){var l=2*Math.PI,h=(0,e.mod)(t,l),r=(0,e.mod)(a,l);return Math.abs(h-r)>Math.PI&&(h<r?h+=l:r+=l),(0,e.split)(n,h,r)},a=function(a,l,h){if(l.length!==h.length)throw new Error("must have equal number of points");for(var r=Math.min(1,Math.max(0,a)),o=[],u=0;u<l.length;u++)o.push(n(n({},(0,e.splitLine)(a,l[u],h[u])),{handleIn:{angle:t(a,l[u].handleIn.angle,h[u].handleIn.angle),length:(0,e.split)(r,l[u].handleIn.length,h[u].handleIn.length)},handleOut:{angle:t(a,l[u].handleOut.angle,h[u].handleOut.angle),length:(0,e.split)(r,l[u].handleOut.length,h[u].handleOut.length)}}));return o};exports.interpolateBetween=a;var l=function(n,l,h,r){n*=Math.min(1,Math.min(Math.abs(0-l),Math.abs(1-l)));var o=a(l,h,r),u=(0,e.smooth)(o,Math.sqrt(n+.25)/3);return(0,e.mapPoints)(o,function(a){var l=a.index,h=a.curr,r=u[l];return h.handleIn.angle=t(n,h.handleIn.angle,r.handleIn.angle),h.handleIn.length=(0,e.split)(n,h.handleIn.length,r.handleIn.length),h.handleOut.angle=t(n,h.handleOut.angle,r.handleOut.angle),h.handleOut.length=(0,e.split)(n,h.handleOut.length,r.handleOut.length),h})};exports.interpolateBetweenSmooth=l;
},{"../util":"NSCe"}],"FJSy":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.prepare=exports.divide=void 0;var n=require("../util"),e=function(e,r){var t=e.length,a=1/0,o=0,l=[],u=function(r){for(var u=0;u<t;u++){for(var h=0,i=0;i<t&&!((h+=Math.pow(100*(0,n.distance)(e[i],r[(0,n.mod)(i+u,t)]),2))>a);i++);h<=a&&(a=h,o=u,l=r)}};return u(r),u((0,n.reverse)(r)),(0,n.shift)(o,l)},r=function(e,r){if(r.length<3)throw new Error("not enough points");if(e<r.length)throw new Error("cannot remove points");if(e===r.length)return r.slice();var t=[];(0,n.forPoints)(r,function(e){var r=e.curr,a=e.next;t.push((0,n.length)(r,a()))});for(var a=o(t,e-r.length),l=[],u=0;u<r.length;u++){var h=l[l.length-1]||r[u],i=r[(0,n.mod)(u+1,r.length)];l.pop(),l.push.apply(l,(0,n.insertCount)(a[u],h,i))}var d=l.pop();return l[0].handleIn=d.handleIn,l};exports.divide=r;var t=function(e,r){return(0,n.mapPoints)(e,function(e){var t=e.index,a=e.curr,o=e.prev,l=e.next;return 0===a.handleIn.length&&(0,n.coordEqual)(o(),a)&&(a.handleIn.angle=r[t].handleIn.angle),0===a.handleOut.length&&(0,n.coordEqual)(l(),a)&&(a.handleOut.angle=r[t].handleOut.angle),a})},a=function(e){return(0,n.mapPoints)(e,function(e){var r=e.curr,t=e.prev,a=e.next,o=(0,n.angleOf)(t(),a());return 0===r.handleIn.length&&(r.handleIn.angle=o+Math.PI),0===r.handleOut.length&&(r.handleOut.angle=o),r})},o=function(n,e){for(var r=n.map(function(){return 1}),t=n.slice(),a=0;a<e;a++){for(var o=0,l=1;l<t.length;l++)t[l]>t[o]?o=l:t[l]===t[o]&&n[l]>n[o]&&(o=l);r[o]++,t[o]=n[o]/r[o]}return r},l=function(n,o,l){var u=l.divideRatio*Math.max(n.length,o.length),h=r(u,n),i=r(u,o),d=e(h,i);return[l.rawAngles?h:t(a(h),d),l.rawAngles?d:t(a(d),h)]};exports.prepare=l;
},{"../util":"NSCe"}],"bUxv":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.transitionFrames=exports.renderFramesAt=void 0;var t=require("./timing"),i=require("./prepare"),e=require("./interpolate"),n=function(){return String(Math.random()).substr(2)},r=function(t){var n,r,a,s=t.renderCache,m=t.currentFrames;if(0===m.length)return{renderCache:s,lastFrameId:null,points:[]};if(1===m.length){var o=m[0];return{renderCache:s,lastFrameId:o.id,points:o.initialPoints}}for(var d=m[0],l=m[1],p=2;p<m.length&&!(l.timestamp>t.timestamp);p++)d=m[p-1],l=m[p];var u=l===m[m.length-1];if(l.timestamp<t.timestamp&&u)return{renderCache:s,lastFrameId:l.id,points:l.initialPoints};var h=null===(r=s[d.id])||void 0===r?void 0:r.preparedStartPoints,F=null===(a=s[l.id])||void 0===a?void 0:a.preparedEndPoints;h&&F||(h=(n=(0,i.prepare)(d.initialPoints,l.initialPoints,{rawAngles:!1,divideRatio:1}))[0],F=n[1],s[d.id]=s[d.id]||{},s[d.id].preparedStartPoints=h,s[l.id]=s[l.id]||{},s[l.id].preparedEndPoints=F);var c=(t.timestamp-d.timestamp)/(l.timestamp-d.timestamp),g=Math.max(0,Math.min(1,c)),v=l.timingFunction(g);return{renderCache:s,lastFrameId:1===g?l.id:d.id,points:(0,e.interpolateBetween)(v,h,F)}};exports.renderFramesAt=r;var a=function(i){var e=[];if(0===i.newFrames.length)return{newFrames:e};var a=r(i);if(null===a.lastFrameId){for(var s=i.shapeGenerator(i.newFrames[0]),m={x:0,y:0,handleIn:{angle:0,length:0},handleOut:{angle:0,length:0}},o=0,d=s;o<d.length;o++){var l=d[o];m.x+=l.x/s.length,m.y+=l.y/s.length}a.points=[m,m,m]}e.push({id:n(),initialPoints:a.points,timestamp:i.timestamp,timingFunction:t.timingFunctions.linear,transitionSourceFrameIndex:-1,isSynthetic:!0});for(var p=0,u=0;u<i.newFrames.length;u++){var h=i.newFrames[u];if(h.delay){p+=h.delay;var F=e[e.length-1];e.push({id:n(),initialPoints:F.initialPoints,timestamp:i.timestamp+p,timingFunction:t.timingFunctions.linear,transitionSourceFrameIndex:u-1,isSynthetic:!0})}p+=h.duration,e.push({id:n(),initialPoints:i.shapeGenerator(h),timestamp:i.timestamp+p,timingFunction:t.timingFunctions[h.timingFunction||"linear"],transitionSourceFrameIndex:u,isSynthetic:!1})}return{newFrames:e}};exports.transitionFrames=a;
},{"./timing":"SjCR","./prepare":"FJSy","./interpolate":"Sl0M"}],"LE9y":[function(require,module,exports) {
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.statefulAnimationGenerator=void 0;var e=require("./frames"),r=function(r,t,n){return function(){var a=[],i={},o={},s=0,u=0,c=function(){return Date.now()-u},m=function(){return 0!==s},f=function(){m()&&(u+=c()-s,s=0)},l=function(){m()||(s=c())};return{renderFrame:function(){var r=(0,e.renderFramesAt)({renderCache:i,timestamp:m()?s:c(),currentFrames:a});return i=r.renderCache,r.lastFrameId&&o[r.lastFrameId]&&(o[r.lastFrameId](),delete o[r.lastFrameId]),t(r.points)},transition:function(){for(var t=[],s=0;s<arguments.length;s++)t[s]=arguments[s];for(var u=0;u<t.length;u++)n(t[u],u);var m=(0,e.transitionFrames)({renderCache:i,timestamp:c(),currentFrames:a,newFrames:t,shapeGenerator:r});a=m.newFrames,o={},i={};for(var f=0,l=a;f<l.length;f++){var d=l[f];if(!d.isSynthetic){var F=t[d.transitionSourceFrameIndex].callback;F&&(o[d.id]=F)}}},play:f,pause:l,playPause:function(){m()?f():l()}}}};exports.statefulAnimationGenerator=r;
},{"./frames":"bUxv"}],"hNRT":[function(require,module,exports) {
"use strict";var e=require("./internal/layout"),n=require("./internal/canvas"),t=require("../internal/util"),a=require("../internal/animate/timing"),r=require("../internal/rand"),i=require("../internal/gen"),o=require("../internal/animate/interpolate"),s=require("../internal/animate/prepare"),l=require("../internal/animate/state"),c=function(){return(c=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)},d=function(e,n,a){for(var r=2*Math.PI/e,i=[],o={angle:0,length:0},s=0;s<e;s++){var l=(0,t.expandHandle)(a,{angle:s*r,length:n});i.push(c(c({},l),{handleIn:o,handleOut:o}))}return i},u=function(e,n){return(0,t.mapPoints)((0,i.genFromOptions)(e),function(t){var a=t.curr;return a.x+=n.x-e.size/2,a.y+=n.y-e.size/2,a})},h=function(e,n,a){var r=n,i=(0,t.expandHandle)(n,n.handleOut),o=(0,t.expandHandle)(a,a.handleIn),s=a,l=(0,t.splitLine)(e,r,i),c=(0,t.splitLine)(e,i,o),d=(0,t.splitLine)(e,o,s),u=(0,t.splitLine)(e,l,c),h=(0,t.splitLine)(e,c,d);return{a0:r,a1:i,a2:o,a3:s,b0:l,b1:c,b2:d,c0:u,c1:h,d0:(0,t.splitLine)(e,u,h)}};(0,e.addTitle)(4,"Vector graphics"),(0,e.addCanvas)(1.3,function(a,r,i){for(var o={x:.5*r,y:.5*i},s=.01*r,l=r/s,c=i/s,d=.3*r,u=.0015*r,h=.007*r,f=function(r){for(var i=function(i){var l={x:r*s+s/2,y:i*s+s/2},c=(0,t.distance)(l,o),f=Math.max(0,Math.min(1,Math.abs(h/(c-d))-u));(0,n.tempStyles)(a,function(){a.globalAlpha=f,a.fillStyle=e.colors.highlight},function(){return a.fillRect(r*s,i*s,s,s)})},l=0;l<c;l++)i(l)},p=0;p<l;p++)f(p);return"Raster image formats store pixel information and have a fixed resolution."},function(t,a,r){var i=.01*a,o=.6*a,s=.5*a,l=.5*r;return(0,n.tempStyles)(t,function(){t.lineWidth=i,t.strokeStyle=e.colors.highlight},function(){t.beginPath(),t.arc(s,l,o/2,0,2*Math.PI),t.stroke()}),"By contrast vector formats can scale infinitely because they are defined by\n formulas. They are ideal for artwork with sharp lines that will be viewed at varying\n sizes."}),(0,e.addCanvas)(2,function(e,r,i,o){var s=1e3*(1+Math.E),l=1e3*(1+Math.PI);return o(function(o){var c=(0,n.calcBouncePercentage)(s,a.timingFunctions.ease,o),d=(0,n.calcBouncePercentage)(.8*s,a.timingFunctions.ease,o),u=(0,t.split)(c,-45,45),h=.1*r+.2*r*d,f=(0,n.point)(.2*r,.5*i,0,0,u,h),p=(0,n.calcBouncePercentage)(l,a.timingFunctions.ease,o),m=(0,n.calcBouncePercentage)(.8*l,a.timingFunctions.ease,o),y=(0,t.split)(p,135,225),g=.1*r+.2*r*m,v=(0,n.point)(.8*r,.5*i,y,g,0,0);(0,n.drawOpen)(e,f,v,!0)}),'Vector-based images are commonly defined using Bezier curves. The cubic bezier is made\n up of four coordinates: the start/end points and their corresponding "handles". These\n handles define the direction and "momentum" of the line.'}),(0,e.addCanvas)(2,function(t,r,i,o){var s=Math.PI*Math.E*1e3,l=(0,n.point)(.3*r,.8*i,0,0,-105,.32*r),c=(0,n.point)(.7*r,.8*i,-75,.25*r,0,0);return o(function(r){var i=(0,n.calcBouncePercentage)(s,a.timingFunctions.ease,r),o=h(i,l,c);(0,n.tempStyles)(t,function(){t.fillStyle=e.colors.secondary,t.strokeStyle=e.colors.secondary},function(){(0,n.drawLine)(t,o.a0,o.a1,1),(0,n.drawLine)(t,o.a1,o.a2,1),(0,n.drawLine)(t,o.a2,o.a3,1),(0,n.drawLine)(t,o.b0,o.b1,1),(0,n.drawLine)(t,o.b1,o.b2,1),(0,n.drawLine)(t,o.c0,o.c1,1),(0,n.drawPoint)(t,o.a0,1.3,"a0"),(0,n.drawPoint)(t,o.a1,1.3,"a1"),(0,n.drawPoint)(t,o.a2,1.3,"a2"),(0,n.drawPoint)(t,o.a3,1.3,"a3"),(0,n.drawPoint)(t,o.b0,1.3,"b0"),(0,n.drawPoint)(t,o.b1,1.3,"b1"),(0,n.drawPoint)(t,o.b2,1.3,"b2"),(0,n.drawPoint)(t,o.c0,1.3,"c0"),(0,n.drawPoint)(t,o.c1,1.3,"c1")}),(0,n.tempStyles)(t,function(){return t.fillStyle=e.colors.highlight},function(){return(0,n.drawPoint)(t,o.d0,3)}),(0,n.drawOpen)(t,l,c,!1)}),'Curves can be drawn geometrically by recursively splitting points by a percentage\n until there is only one point remaining. Note there is no constant relationship between the\n percentage that "drew" the point and the arc lengths before/after it. Uniform motion along\n the curve can only be approximated.'}),(0,e.addTitle)(4,"Making a blob"),(0,e.addCanvas)(1.3,function(a,r,i){var o={x:.5*r,y:.5*i},s=d(5,.3*r,o);return(0,n.tempStyles)(a,function(){a.fillStyle=e.colors.secondary,a.strokeStyle=e.colors.secondary},function(){(0,n.drawPoint)(a,o,2),(0,t.forPoints)(s,function(e){var t=e.curr;(0,n.drawLine)(a,o,t,1,2)})}),(0,n.drawClosed)(a,s,!1),"Initial points are rotated evenly around the center."},function(i,o,s,l){var c=1e3*Math.PI,u={x:.5*o,y:.5*s},h=d(5,.3*o,u);return l(function(o){var s=(0,n.calcBouncePercentage)(c,a.timingFunctions.ease,o),l=(0,r.rand)("abcd");(0,n.tempStyles)(i,function(){i.fillStyle=e.colors.secondary,i.strokeStyle=e.colors.secondary},function(){(0,n.drawPoint)(i,u,2),(0,t.forPoints)(h,function(e){var t=e.curr,a=e.next;(0,n.drawLine)(i,t,a(),1,2)})});var d=h.map(function(e){var n=s*(.5*l()-.25);return(0,t.coordPoint)((0,t.splitLine)(n,e,u))});(0,n.drawClosed)(i,d,!0)}),"Each point is randomly moved toward or away from the center."}),(0,e.addCanvas)(1.3,function(a,r,i){var o={x:.5*r,y:.5*i},s=u({extraPoints:2,randomness:6,seed:"random",size:.7*r},o).map(t.coordPoint);return(0,n.tempStyles)(a,function(){a.fillStyle=e.colors.secondary,a.strokeStyle=e.colors.secondary},function(){(0,n.drawPoint)(a,o,2),(0,t.forPoints)(s,function(e){var t=e.curr;(0,n.drawLine)(a,o,t,1,2)})}),(0,n.drawClosed)(a,s,!1),"In this state, the points have handles of length zero."},function(r,i,o,s){var l=1e3*Math.PI,c={x:.5*i,y:.5*o},d=u({extraPoints:2,randomness:6,seed:"random",size:.7*i},c);return s(function(i){var o=(0,n.calcBouncePercentage)(l,a.timingFunctions.ease,i);(0,n.tempStyles)(r,function(){r.fillStyle=e.colors.secondary,r.strokeStyle=e.colors.secondary},function(){(0,n.drawPoint)(r,c,2),(0,t.forPoints)(d,function(e){var t=e.curr,a=e.next;(0,n.drawLine)(r,t,a(),1,2)})});var s=(0,t.mapPoints)(d,function(e){var n=e.curr;return n.handleIn.length*=o,n.handleOut.length*=o,n});(0,n.drawClosed)(r,s,!0)}),"The blob is smoothed by making handles parallel to the line between the points\n immediately before and after. The length of the handles is a function of the distance to\n the nearest neighbor."}),(0,e.addTitle)(4,"Interpolating between blobs"),(0,e.addCanvas)(2,function(r,i,s,l){var c=1e3*Math.PI,d={x:.5*i,y:.5*s},h=u({extraPoints:3,randomness:6,seed:"12345",size:.8*s},d),f=u({extraPoints:3,randomness:6,seed:"abc",size:.8*s},d);return l(function(i){var s=(0,n.calcBouncePercentage)(c,a.timingFunctions.ease,i),l=i+.05*c,d=(0,n.calcBouncePercentage)(c,a.timingFunctions.ease,l),u=(0,t.mod)(l,c)/c;(0,n.forceStyles)(r,function(){var t=(0,e.sizes)().pt;r.fillStyle="transparent",r.lineWidth=t,r.strokeStyle=e.colors.secondary,r.setLineDash([2*t]),u>.5?(r.globalAlpha=.2+10*(1-d),(0,n.drawClosed)(r,h,!1),r.globalAlpha=.2,(0,n.drawClosed)(r,f,!1)):(r.globalAlpha=.2+10*d,(0,n.drawClosed)(r,f,!1),r.globalAlpha=.2,(0,n.drawClosed)(r,h,!1))}),(0,n.drawClosed)(r,(0,o.interpolateBetween)(s,h,f),!0)}),"Interpolation requires points to be paired up from shape A to B. This means both blobs\n must have the same number of points and that the points should be matched in a way that\n minimizes movement."}),(0,e.addCanvas)(1.3,function(r,i,s,l){var c=Math.E/Math.PI*1e3,d={x:.5*i,y:.5*s},h=u({extraPoints:3,randomness:6,seed:"shift",size:.9*s},d),f=(0,t.shift)(1,h),p=0,m=0;return l(function(i){var s=(0,t.mod)(i,c),l=a.timingFunctions.ease((0,t.mod)(s,c)/c);l<p&&m++,p=l,(0,n.tempStyles)(r,function(){r.fillStyle=e.colors.secondary,r.strokeStyle=e.colors.secondary},function(){(0,n.drawPoint)(r,d,2),(0,t.forPoints)(h,function(e){var t=e.curr,a=e.next;(0,n.drawLine)(r,t,a(),1,2)})}),m%2==0?(0,n.drawClosed)(r,(0,o.interpolateBetweenSmooth)(2,l,h,f),!0):(0,n.drawClosed)(r,h,!0)}),"Points cannot be swapped without resulting in a different shape. However, a likely\n enough optimal order can be selected by shifting the points and comparing the point\n position deltas."},function(r,i,s,l){var c=Math.PI*Math.E*1e3,d=u({extraPoints:3,randomness:6,seed:"flip",size:.9*s},{x:.5*i,y:.5*s}),h=(0,t.mapPoints)(d,function(e){var n=e.curr,t=n.handleIn;return n.handleIn=n.handleOut,n.handleOut=t,n});return h.reverse(),l(function(t){var i=(0,n.calcBouncePercentage)(c,a.timingFunctions.ease,t);(0,n.forceStyles)(r,function(){var t=(0,e.sizes)().pt;r.fillStyle="transparent",r.lineWidth=t,r.strokeStyle=e.colors.secondary,r.setLineDash([2*t]),(0,n.drawClosed)(r,d,!1)}),(0,n.drawClosed)(r,(0,o.interpolateBetweenSmooth)(2,i,d,h),!0)}),"The only safe re-ordering is to reverse the points and again iterate through all\n possible shifts."}),(0,e.addCanvas)(1.3,function(a,r,i,o){var l=1e3*Math.PI,c={x:.5*r,y:.5*i},d=(0,e.sizes)().pt,h=u({extraPoints:0,randomness:6,seed:"flip",size:.9*i},c);return o(function(r){var i=(0,t.mod)(r,l)/l,o=Math.floor(5*i);(0,n.drawClosed)(a,(0,s.divide)(o+h.length,h),!0),(0,t.forPoints)(h,function(t){var r=t.curr;a.beginPath(),a.arc(r.x,r.y,6*d,0,2*Math.PI),(0,n.tempStyles)(a,function(){a.strokeStyle=e.colors.secondary,a.lineWidth=d},function(){a.stroke()})})}),"Points are added until they both have the same count. These new points should be as\n evenly distributed as possible."},function(t,r,i,o){var s=1e3*Math.pow(Math.PI,Math.E),l=(0,n.point)(.1*r,.6*i,0,0,-45,.5*r),c=(0,n.point)(.9*r,.6*i,160,.3*r,0,0);return o(function(r){var i=(0,n.calcBouncePercentage)(s,a.timingFunctions.ease,r),o=h(i,l,c);(0,n.tempStyles)(t,function(){t.fillStyle=e.colors.secondary,t.strokeStyle=e.colors.secondary},function(){(0,n.drawLine)(t,o.a0,o.a1,1),(0,n.drawLine)(t,o.a1,o.a2,1),(0,n.drawLine)(t,o.a2,o.a3,1),(0,n.drawLine)(t,o.b0,o.b1,1),(0,n.drawLine)(t,o.b1,o.b2,1),(0,n.drawPoint)(t,o.a0,1.3),(0,n.drawPoint)(t,o.a1,1.3),(0,n.drawPoint)(t,o.a2,1.3),(0,n.drawPoint)(t,o.a3,1.3),(0,n.drawPoint)(t,o.b0,1.3),(0,n.drawPoint)(t,o.b1,1.3),(0,n.drawPoint)(t,o.b2,1.3)}),(0,n.forceStyles)(t,function(){var a=(0,e.sizes)().pt;t.fillStyle=e.colors.secondary,t.strokeStyle=e.colors.secondary,t.lineWidth=a,(0,n.drawOpen)(t,l,c,!1)}),(0,n.tempStyles)(t,function(){t.fillStyle=e.colors.highlight,t.strokeStyle=e.colors.highlight},function(){(0,n.drawLine)(t,o.c0,o.c1,1),(0,n.drawPoint)(t,o.c0,1.3),(0,n.drawPoint)(t,o.c1,1.3)}),(0,n.tempStyles)(t,function(){return t.fillStyle=e.colors.highlight},function(){return(0,n.drawPoint)(t,o.d0,2)})}),"Curve splitting uses the innermost line from the cubic bezier curve drawing demo and\n makes either side of the final point the handles."}),(0,e.addCanvas)(1.8,function(e,a,r){var o=Math.random(),s=function(){return e.canvas.animationID!==o},d=1e3*Math.PI,u=.5*a,h=.5*r,f=.8*Math.min(a,r),p=(0,l.statefulAnimationGenerator)(function(e){return(0,t.mapPoints)((0,i.genFromOptions)(e.blobOptions),function(e){var n=e.curr;return n.x+=u-f/2,n.y+=h-f/2,n})},function(t){return(0,n.drawClosed)(e,t,!0)},function(){})();requestAnimationFrame(function n(){s()||(e.clearRect(0,0,a,r),p.renderFrame(),requestAnimationFrame(n))});var m=function(){s()||p.transition(g())},y=-1,g=function(e){return void 0===e&&(e={}),y++,c({duration:d,timingFunction:"ease",callback:m,blobOptions:{extraPoints:Math.max(0,(0,t.mod)(y,4)-1),randomness:4,seed:Math.random(),size:f}},e)};return p.transition(g({duration:0})),e.canvas.onclick=function(){s()||p.playPause()},e.canvas.animationID=o,"Points can be removed at the end of animations as the target shape has been reached.\n However if the animation is interrupted during interpolation there is no opportunity to\n clean up the extra points."});
},{"./internal/layout":"rSMP","./internal/canvas":"PBVq","../internal/util":"NSCe","../internal/animate/timing":"SjCR","../internal/rand":"BWRk","../internal/gen":"BJ3L","../internal/animate/interpolate":"Sl0M","../internal/animate/prepare":"FJSy","../internal/animate/state":"LE9y"}]},{},["hNRT"], null)
//# sourceMappingURL=/content.d6aeb29e.js.map</script> </body></html>