<commit_before>{
  "name": "vibertthio/beact",
  "version": "0.1.4",
  "libraries": {
    "xv": "^1.1.25"
  },
  "title": "",
  "branch": "master",
  "style": {
    "name": "Williamsburg",
    "componentSet": {
      "nav": "nav/BasicNav",
      "header": "header/LightBannerHeader",
      "article": "article/ReaderArticle",
      "footer": "footer/BasicFooter"
    },
    "fontFamily": "Montserrat, sans-serif",
    "heading": {
      "fontWeight": 600,
      "letterSpacing": "0.1em"
    },
    "colors": {
      "text": "#346",
      "background": "#fff",
      "primary": "#0099e0",
      "secondary": "#ab61ff",
      "highlight": "#f7b",
      "muted": "#fffab3",
      "border": "#ccd"
    }
  },
  "content": [
    {
      "component": "nav",
      "links": [
        {
          "href": "https://safe-stream-69256.herokuapp.com/",
          "text": "Home"
        },
        {
          "href": "https://github.com/vibertthio/beact",
          "text": "GitHub"
        },
        {
          "href": "https://npmjs.com/package/beact",
          "text": "npm"
        }
      ]
    },
    {
      "component": "header",
      "heading": "beact",
      "subhead": ":guitar::art: DJ and VJ all by yourself in seconds !",
      "children": [
        {
          "component": "ui/TweetButton",
          "text": "beact: :guitar::art: DJ and VJ all by yourself in seconds !",
          "url": "https://safe-stream-69256.herokuapp.com/"
        },
        {
          "component": "ui/GithubButton",
          "user": "vibertthio",
          "repo": "beact"
        }
      ],
      "text": "v0.0.0"
    },
    {
      "component": "article",
      "metadata": {
        "source": "github.readme"
      },
      "html": "<p><img src=\"./assets/images/bar.png\"></p>\n<h1><a href=\"https://beact.herokuapp.com/\">Beact</a> &#xB7; <a href=\"http://makeapullrequest.com\"><img src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"></a></h1>\n<blockquote>\n<p>&#x1F3B8;&#x1F3A8; DJ / VJ all by yourself in seconds !</p>\n<ul>\n<li><a href=\"https://beact.herokuapp.com/\">demo</a> - It&apos;s deployed on Heroku, play it now!</li>\n<li><a href=\"https://medium.com/@vibertthio/beact-audio-visual-art-in-react-44e9c757e40f\">blog</a> - vibert&apos;s words after creating Beact! (only mandarin now, english coming)</li>\n<li><a href=\"http://scyablog.blogspot.tw/2017/07/beact.html\">blog</a> - scya597&apos;s words after creating Beact! (only mandarin now, english coming)</li>\n</ul>\n</blockquote>\n<p>An audio/visual interactive art piece, and an instrument that everyone play with to become a DJ + VJ.\nIt&apos;s based on the idea of patatap, and using two.js, tone.js as audio and visual library.\nIt combines sequencer with on concept of patatap.\nI have added some my own animation and will do more to replace ones from patatap.</p>\n<h2>0. Table of Contents</h2>\n<ul>\n<li><a href=\"#1-quick-start\">Quick Start</a></li>\n<li><a href=\"#2-run-on-local\">Run on Local</a></li>\n<li><a href=\"#3-development\">Development</a></li>\n<li><a href=\"#4-deploy\">Deploy</a></li>\n<li><a href=\"#5-basic-usage\">Basic Usage</a></li>\n<li><a href=\"#6-advanced-usage\">Advanced Usage</a></li>\n<li><a href=\"#7-credits-and-inspirations\">Credits and Inpirations</a></li>\n</ul>\n<h2>1. Quick Start</h2>\n<ol>\n<li>open the <a href=\"https://safe-stream-69256.herokuapp.com/\">demo</a> link.</li>\n<li>press space to start/stop.</li>\n<li>click any block to trigger drum machine note.</li>\n<li>press any alphabet to trigger keyboard note.</li>\n<li>up/down to change bpm.</li>\n<li>left/right to change sound bank of drum machine.</li>\n<li>press 1 ~ 8 for different presets.</li>\n<li>shift+up/down to change animations of keyboard.</li>\n<li>shift+left/right to change animations of drum machine.</li>\n<li>press naruto icon to set naruto animation of keyboard.</li>\n</ol>\n<h2>2. Run on Local</h2>\n<blockquote>\n<p>It&apos;s okay to run Beact without server. It will git some error in console irrelevant, though.</p>\n</blockquote>\n<p>First, clone the repo and install dependencies.\nThen <strong>Rock&apos;n Roll</strong>, baanngg.</p>\n<pre>git clone https://github.com/vibertthio/beact beact\ncd beact\nnpm install\nnpm <span class=\"hljs-keyword\">run</span><span class=\"bash\"> build\n</span>npm <span class=\"hljs-keyword\">run</span><span class=\"bash\"> start</span></pre><h2>3. Development</h2>\n<blockquote>\n<p>Run Beact with server, giving you <strong>the Force</strong>.</p>\n</blockquote>\n<h3>3.1 To install mongodb</h3>\n<pre><span class=\"hljs-keyword\">brew </span><span class=\"hljs-keyword\">install </span>mongo</pre><h3>3.2 Initial config of mongodb</h3>\n<p>Create database directory</p>\n<pre><span class=\"hljs-title\">sudo</span> mkdir -p /<span class=\"hljs-class\"><span class=\"hljs-keyword\">data</span>/db</span></pre><p>Find your username</p>\n<pre><span class=\"hljs-attribute\">whoami</span></pre><p>Taking ownership to /data/db</p>\n<pre><span class=\"hljs-comment\">// assume your username is John</span>\nsudo chown -Rv John <span class=\"hljs-meta-keyword\">/data/</span>db</pre><h3>3.3 To run the database</h3>\n<pre><span class=\"hljs-attribute\">mongod</span></pre><p>If you don&apos;t want to run mongod everytime you need, the following command will automatically start your database while the computer is running:</p>\n<pre><span class=\"hljs-keyword\">brew </span>services start mongo</pre><h3>3.4 To develop Beact</h3>\n<pre>npm <span class=\"hljs-keyword\">run</span><span class=\"bash\"> dev</span></pre><h2>4. Deploy</h2>\n<blockquote>\n<p>We are using great Heroku for current deploy.</p>\n</blockquote>\n<h3>4.1 Clone the repo, install dependencies, and build.</h3>\n<pre><span class=\"hljs-symbol\">git</span> clone https://github.com/vibertthio/<span class=\"hljs-keyword\">beact </span><span class=\"hljs-keyword\">Beact\n</span><span class=\"hljs-symbol\">cd</span> <span class=\"hljs-keyword\">Beact\n</span><span class=\"hljs-symbol\">npm</span> install\n<span class=\"hljs-symbol\">npm</span> run <span class=\"hljs-keyword\">build</span></pre><h3>4.2 Delete /public in &quot;Ignore build files&quot; of .gitignore</h3>\n<pre># Ignore <span class=\"hljs-keyword\">build</span> files\n<span class=\"hljs-keyword\">public</span> &lt;&lt; (<span class=\"hljs-keyword\">delete</span>)</pre><h3>4.3 Deploy</h3>\n<pre>heroku <span class=\"hljs-keyword\">create</span>\nheroku addons:<span class=\"hljs-keyword\">create</span> mongolab:sandbox\nnpm <span class=\"hljs-keyword\">run</span> deploy</pre><h2>5. Basic Usage</h2>\n<h3>5.1 Keyboard &amp; Sequencer Pads</h3>\n<ol>\n<li>click on the drum pad to make your own pattern.</li>\n<li>press space to start/stop.</li>\n<li>press up/down for bpm changing.</li>\n<li>left/right to change sound samples.</li>\n<li>press 1~8 to trigger preset patterns.</li>\n<li>press a~z to trigger animation and audio just like patatap.</li>\n</ol>\n<h3>5.2 Sidebars</h3>\n<ol>\n<li>Start / Stop</li>\n<li>Pattern : create a pattern, type in the name, and press add to upload yours to server and store.</li>\n<li>Chain&#xFF1A;chain few patterns into a song.</li>\n<li>Recorder&#xFF1A;record the drum machine pattern and keyboard together into a recording, and upload to server for you to share and replay.</li>\n</ol>\n<h2>6. Advanced Usage</h2>\n<p><img src=\"https://github.com/vibertthio/beact/blob/master/assets/images/sc-04.png\"></p>\n<p><strong>&#xFF08;&#x4EE5;&#x4E0B; data &#x5747;&#x6307;&#x7576;&#x524D; DrumMachine 8x16 &#x683C;&#x7684;&#x5167;&#x5BB9;&#xFF09;</strong></p>\n<h3>6.1 Start/Stop</h3>\n<ul>\n<li><p><strong>Start</strong> &#xFF1A;&#x4F9D;&#x7576;&#x4E0B;&#x6A21;&#x5F0F;&#xFF0C;&#x5FAA;&#x74B0;&#x64AD;&#x653E;&#x7576;&#x4E0B;&#x7684; data / Pattern / ChainElement / Chain&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x5728;&#x6309;&#x4E0B; Start &#x524D;&#x6700;&#x5F8C;&#x6709;&#x9078;&#x53D6;&#x904E;&#x7279;&#x5B9A; Pattern&#xFF0C;&#x5247;&#x6703;&#x64AD;&#x653E;&#x8A72; Pattern&#x3002;</li>\n<li>&#x82E5;&#x6700;&#x5F8C;&#x9078;&#x53D6;&#x7684;&#x662F;&#x7279;&#x5B9A;&#x7684; Chain Element&#xFF0C;&#x5247;&#x6703;&#x64AD;&#x653E;&#x8A72; Chain Element&#x3002;</li>\n<li>&#x82E5;&#x6700;&#x5F8C;&#x6709;&#x6309;&#x4E0B; Play Chain &#x4E14;&#x6C92;&#x6709; Exit Chain &#x6216;&#x662F;&#x9078;&#x5B9A;&#x4EFB;&#x4F55; Chain Element&#xFF0C;&#x5247;&#x6703;&#x64AD;&#x653E;&#x6574;&#x500B; Chain&#x3002;</li>\n<li>&#x82E5;&#x6700;&#x5F8C;&#x6709;&#x5728;&#x8F38;&#x5165;&#x5B8C; Record Title &#x7684;&#x60C5;&#x6CC1;&#x4E0B;&#x6309;&#x4E0B; Record&#xFF0C;&#x4E14;&#x6C92;&#x91CD;&#x8907;&#x6309;&#x5076;&#x6578;&#x6B21;&#xFF0C;&#x5247;&#x9032;&#x5165;&#x9304;&#x97F3;&#x6A21;&#x5F0F;&#x3002;</li>\n<li>&#x9304;&#x97F3;&#x6A21;&#x5F0F;&#x4E2D;&#x6B64;&#x9375;&#x6703;&#x88AB;&#x96B1;&#x85CF;&#x6389;&#xFF0C;&#x76F4;&#x5230;&#x9304;&#x97F3;&#x7D50;&#x675F;&#x5F8C;&#x624D;&#x6703;&#x51FA;&#x73FE;&#x3002;</li>\n<li>&#x82E5;&#x4EE5;&#x4E0A;&#x884C;&#x70BA;&#x7686;&#x4E0D;&#x6EFF;&#x8DB3;&#xFF0C;&#x5247;&#x76F4;&#x63A5;&#x64AD;&#x653E;&#x7576;&#x4E0B;&#x7684; data&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Stop</strong> &#xFF1A;&#x5C07;&#x7576;&#x4E0B;&#x64AD;&#x653E;&#x7684; data &#x505C;&#x6B62;&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x65BC; Stop &#x5F8C;&#x91CD;&#x65B0;&#x6309; Start&#xFF0C;&#x5247;&#x6703;&#x518D;&#x5F9E;&#x982D;&#x64AD;&#x7576;&#x4E0B;&#x7684; data&#x3002;</li>\n<li>&#x9304;&#x97F3;&#x7684;&#x904E;&#x7A0B;&#x4E2D;&#x6B64;&#x9375;&#x6703;&#x88AB;&#x96B1;&#x85CF;&#x6389;&#x3002;</li>\n</ul>\n</li>\n</ul>\n<h3>6.2 Pattern</h3>\n<ul>\n<li><p><strong><em>PatternList</em></strong> &#xFF1A;&#x5217;&#x51FA;&#x7576;&#x524D;&#x6240;&#x6709;&#x7684; Pattern&#x3002;&#x53EF;&#x900F;&#x904E;&#x9EDE;&#x9078;&#x4F86;&#x9078;&#x64C7;&#x7576;&#x4E0B;&#x8981; Update &#x7684; Pattern&#x3002;</p>\n<ul>\n<li>&#x91CD;&#x8907;&#x9EDE;&#x9078; Pattern &#x6642;&#xFF0C;&#x6BCF;&#x6B21;&#x9EDE;&#x9078;&#x90FD;&#x6703;&#x4F7F;&#x8A72; Pattern &#x91CD;&#x65B0;&#x64AD;&#x653E;&#x3002;</li>\n<li>Pattern &#x65C1;&#x908A;&#x7684;&#x53C9;&#x53C9;&#x53EF;&#x4EE5;&#x522A;&#x9664;&#x8A72; Pattern&#x3002;</li>\n</ul>\n</li>\n<li><p><strong><em>Pattern Title input</em></strong> &#xFF1A;&#x8F38;&#x5165;&#x6B64;&#x6B21;&#x8981;&#x5B58;&#x53D6;&#x6216;&#x66F4;&#x65B0;&#x4E4B; Pattern &#x7684; Title&#x3002;</p>\n<ul>\n<li>&#x8F38;&#x5165;&#x5B8C;&#x5F8C;&#xFF0C;&#x82E5;&#x9EDE;&#x9078; Save New Pattern &#xFF0C;&#x6703;&#x5C07;&#x7576;&#x4E0B;&#x7684; data &#x4EE5;&#x65B0;&#x7684; Pattern &#x7684;&#x5F62;&#x5F0F;&#x5132;&#x5B58;&#x81F3;&#x8CC7;&#x6599;&#x5EAB;&#x3002;</li>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x5DF2;&#x9EDE;&#x9078;&#x7279;&#x5B9A; Pattern&#xFF0C;&#x53EF;&#x9EDE;&#x9078; Update Pattern &#x4F86;&#x66F4;&#x6539;&#x8A72; Pattern &#x7684;&#x540D;&#x7A31;&#x53CA;&#x8CC7;&#x6599;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Save New Pattern</strong> &#xFF1A;&#x65B0;&#x589E; Pattern&#x3002;</p>\n<ul>\n<li>&#x5C07;&#x7576;&#x4E0B;&#x7684; data &#x4EE5;&#x65B0;&#x7684; Pattern &#x7684;&#x5F62;&#x5F0F;&#x5132;&#x5B58;&#x81F3;&#x8CC7;&#x6599;&#x5EAB;&#x3002;&#x9808;&#x5728; Pattern Title input &#x4E8B;&#x5148;&#x8F38;&#x5165;&#x81F3;&#x5C11;&#x4E00;&#x500B;&#x5B57;&#x6BCD;&#x7684;&#x540D;&#x7A31;&#xFF0C;&#x5426;&#x5247;&#x6B64;&#x9375;&#x7121;&#x6548;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Update Pattern</strong> &#xFF1A;&#x66F4;&#x65B0; Pattern &#x5167;&#x5BB9;&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6709;&#x9EDE;&#x9078;&#x7279;&#x5B9A; Pattern &#x4E14;&#x6709;&#x8F38;&#x5165;&#x6A19;&#x984C;&#xFF0C;&#x5247;&#x6703;&#x5C07;&#x4EFB;&#x4F55;&#x8A72; Pattern &#x7684;&#x5167;&#x5BB9;&#x548C;&#x6A19;&#x984C;&#x66F4;&#x65B0;&#x3002;</li>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6709;&#x9EDE;&#x9078;&#x7279;&#x5B9A; Pattern &#x4F46;&#x6C92;&#x8F38;&#x5165;&#x6A19;&#x984C;&#xFF0C;&#x5247;&#x53EA;&#x66F4;&#x65B0;&#x5167;&#x5BB9;&#x3002;</li>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6C92;&#x6709;&#x9078;&#x5B9A; Pattern&#xFF0C;&#x5247;&#x6B64;&#x9375;&#x7121;&#x6548;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Exit Pattern</strong> &#xFF1A;&#x8DF3;&#x51FA; Pattern &#x6A21;&#x5F0F;&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6709;&#x9EDE;&#x9078;&#x7279;&#x5B9A; Pattern&#xFF0C;&#x53EF;&#x8DF3;&#x51FA; Pattern &#x6A21;&#x5F0F;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x9032;&#x5165;&#x5C1A;&#x672A;&#x9EDE;&#x9078;&#x4EFB;&#x4F55; Pattern &#x7684;&#x72C0;&#x614B;&#x3002;&#x6B64;&#x8209;&#x4EA6;&#x6703;&#x505C;&#x6B62;&#x64AD;&#x653E;&#x4E26;&#x5C07;&#x7248;&#x9762;&#x6E05;&#x7A7A;&#x3002;</li>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6C92;&#x6709;&#x9078;&#x5B9A; Pattern&#xFF0C;&#x5247;&#x6B64;&#x9375;&#x7121;&#x6548;&#x3002;</li>\n</ul>\n</li>\n</ul>\n<h3>6.3 Chain</h3>\n<ul>\n<li><p><strong><em>ChainList</em></strong> &#xFF1A;&#x6309;&#x64A5;&#x51FA;&#x9806;&#x5E8F;&#x5217;&#x51FA;&#x7576;&#x524D; Chain &#x88E1;&#x982D;&#x7684;&#x6240;&#x6709;&#x7684; Chain Element&#x3002;</p>\n<ul>\n<li>&#x53EF;&#x900F;&#x904E;&#x9EDE;&#x9078;&#x4F86;&#x986F;&#x793A;&#x4E26;&#x9078;&#x64C7;&#x7576;&#x4E0B;&#x8981; Update &#x6216; Delete &#x7684; Chain Element&#x3002;&#x6B64;&#x6642;&#x88AB;&#x9EDE;&#x9078;&#x7684; Chain Element &#x65C1;&#x6703;&#x6253;&#x52FE;&#x3002;</li>\n<li>&#x82E5;&#x9EDE;&#x9078;&#x6700;&#x5F8C;&#x4E00;&#x884C;&#x7684; + &#x6309;&#x9215;&#xFF0C;&#x5247;&#x53EF;&#x900F;&#x904E; Update Chain &#x5C07;&#x65B0;&#x7684; Chain Element &#x65B0;&#x589E;&#x81F3; ChainList &#x7684;&#x672B;&#x7AEF;&#x3002;&#x6B64;&#x6642;&#x7576;&#x4E0B;&#x6C92;&#x6709;&#x4EFB;&#x4F55;&#x4E00;&#x500B; Chain Element &#x65C1;&#x6703;&#x6253;&#x52FE;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Update Chain</strong> &#xFF1A;&#x66F4;&#x65B0; Chain List&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6709;&#x9EDE;&#x9078;&#x7279;&#x5B9A; Chain Element&#xFF0C;&#x5247;&#x6703;&#x5C07;&#x4EFB;&#x4F55;&#x8A72; Chain Element &#x7684;&#x5167;&#x5BB9;&#x66F4;&#x65B0;&#x3002;</li>\n<li>&#x5728;&#xFF08;1&#xFF09;&#x9810;&#x8A2D;&#x60C5;&#x6CC1;&#x3001;&#xFF08;2&#xFF09;&#x9EDE;&#x9078; Exit Chain &#x4E4B;&#x5F8C;&#x3001;&#xFF08;3&#xFF09;&#x9EDE;&#x9078;&#x6700;&#x5F8C;&#x4E00;&#x884C;&#x7684; + &#x6309;&#x9215;&#x3001;&#xFF08;4&#xFF09;&#x522A;&#x9664;&#x4E86;&#x4EFB;&#x4F55;&#x4E00;&#x500B; Chain Element &#x5F8C;&#x7B49;&#x56DB;&#x500B;&#x60C5;&#x6CC1;&#x4E0B;&#xFF0C;&#x6B64;&#x8209;&#x6703;&#x5C07;&#x7576;&#x524D; data &#x65B0;&#x589E;&#x81F3;&#x539F;&#x672C;&#x7684; Chain &#x672B;&#x7AEF;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Delete Current Chain Element</strong> &#xFF1A;&#x522A;&#x9664;&#x7576;&#x4E0B;&#x9078;&#x53D6;&#x7684; Chain Element&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x7576;&#x4E0B;&#x6709;&#x9EDE;&#x9078;&#x7279;&#x5B9A; Chain Element&#xFF0C;&#x5247;&#x6703;&#x5C07;&#x8A72; Chain Element &#x522A;&#x9664;&#x3002;</li>\n<li>&#x82E5;&#x7121;&#x9078;&#x53D6;&#x4EFB;&#x4F55; Chain Element&#xFF0C;&#x4EA6;&#x5373;&#xFF0C;&#x5247;&#x7121;&#x6548;&#x3002;&#xFF08;&#x4E5F;&#x5C31;&#x662F; Update Chain &#x529F;&#x80FD;&#x63CF;&#x8FF0;&#x88E1;&#x6703;&#x5C07; data &#x65B0;&#x589E;&#x81F3; Chain &#x672B;&#x7AEF;&#x7684;&#x56DB;&#x500B;&#x60C5;&#x6CC1;&#xFF09;</li>\n</ul>\n</li>\n<li><p><strong>Play Chain</strong> &#xFF1A;&#x64AD;&#x653E;&#x6574;&#x500B; ChainList&#x3002;</p>\n<ul>\n<li>&#x6BCF;&#x6B21;&#x6309;&#x90FD;&#x6703;&#x5C07;&#x6574;&#x500B; ChainList &#x5F9E;&#x7B2C;&#x4E00;&#x500B; Chain Element &#x958B;&#x59CB;&#x64AD;&#x653E;&#x3002;  </li>\n<li>&#x82E5;&#x539F;&#x672C;&#x8655;&#x65BC; Pattern&#x6A21;&#x5F0F;&#xFF0C;&#x5C07;&#x6703;&#x8DF3;&#x51FA; Pattern &#x6A21;&#x5F0F;&#xFF0C;</li>\n</ul>\n</li>\n<li><p><strong>Exit Chain</strong> &#xFF1A;&#x8DF3;&#x51FA;</p>\n<ul>\n<li>&#x82E5; ChainList &#x6B63;&#x5728;&#x64AD;&#x653E;&#xFF0C;&#x5247;&#x6703;&#x505C;&#x6B62;&#x64AD;&#x653E;&#xFF0C;&#x4E26;&#x5C07;&#x7248;&#x9762;&#x6E05;&#x7A7A;&#xFF0C;&#x4E14;&#x53D6;&#x6D88;&#x9078;&#x53D6;&#x4E4B;&#x524D;&#x5DF2;&#x9EDE;&#x9078;&#x7684; Chain Element&#x3002;</li>\n<li>&#x82E5; ChainList &#x6C92;&#x5728;&#x64AD;&#x653E;&#xFF0C;&#x5247;&#x6B64;&#x9375;&#x7121;&#x6548;&#x3002;</li>\n</ul>\n</li>\n</ul>\n<h3>6.4 Recorder</h3>\n<ul>\n<li><p><strong><em>RecordList</em></strong> &#xFF1A;&#x5217;&#x51FA;&#x7576;&#x524D;&#x6240;&#x6709;&#x7684; Record&#x3002;&#x53EF;&#x900F;&#x904E;&#x9EDE;&#x9078;&#x4F86;&#x64AD;&#x653E;&#x3002;</p>\n<ul>\n<li>&#x64AD;&#x653E;&#x6642;&#xFF0C;&#x5DE6;&#x908A;&#x7684; sidebar &#x6703;&#x88AB;&#x96B1;&#x85CF;&#xFF0C;&#x5728;&#x5DE6;&#x4E0A;&#x89D2;&#x4EE5;&#x4E00;&#x500B;&#x53C9;&#x53C9;&#x53D6;&#x4EE3;&#x3002;&#x6309;&#x4E0B;&#x8A72;&#x53C9;&#x53C9;&#x5C07;&#x505C;&#x6B62;&#x64AD;&#x653E;&#x9304;&#x97F3;&#x4E26;&#x6E05;&#x7A7A;&#x7248;&#x9762;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong><em>Record Title input</em></strong> &#xFF1A;&#x8F38;&#x5165;&#x6B64;&#x6B21;&#x9304;&#x97F3;&#x7684; Title&#x3002;</p>\n<ul>\n<li>&#x82E5;&#x7121;&#x8F38;&#x5165;&#x4EFB;&#x4F55; Title&#xFF0C;Record &#x6309;&#x9215;&#x5C07;&#x7121;&#x6548;&#xFF0C;&#x4E26;&#x65BC; console &#x986F;&#x793A;&#x8B66;&#x544A;&#x3002;  </li>\n<li>&#x82E5;&#x9304;&#x97F3;&#x6A21;&#x5F0F;&#x4E2D;&#x6E05;&#x9664; Title&#xFF0C;&#x5247;&#x5728;&#x91CD;&#x65B0;&#x8F38;&#x5165;&#x524D;&#x7121;&#x6CD5;&#x5132;&#x5B58;&#x9304;&#x97F3;&#x3002;</li>\n</ul>\n</li>\n<li><p><strong>Record</strong> &#xFF1A;&#x9304;&#x97F3;&#x9375;&#x3002;</p>\n<ul>\n<li>&#x5728; Title &#x6B04;&#x4F4D;&#x6709;&#x5B57;&#x7684;&#x60C5;&#x6CC1;&#x4E0B;&#xFF0C;&#x6309;&#x4E0B;&#x5F8C;&#x9032;&#x5165;&#x6E96;&#x5099;&#x9304;&#x97F3;&#x6A21;&#x5F0F;&#x3002;&#x6B64;&#x6642;&#x6309; start &#x6703;&#x958B;&#x59CB;&#x9304;&#x97F3;&#x3002;</li>\n<li>&#x5728; Title &#x6B04;&#x4F4D;&#x6709;&#x5B57;&#x7684;&#x60C5;&#x6CC1;&#x4E0B;&#xFF0C;&#x518D;&#x6309;&#x4E00;&#x6B21; Record &#x6703;&#x505C;&#x6B62;&#x9304;&#x97F3;&#x4E26;&#x5C07;&#x9304;&#x88FD;&#x7684;&#x5167;&#x5BB9;&#x5132;&#x5B58;&#x81F3;&#x8CC7;&#x6599;&#x5EAB;&#x3002;&#x9304;&#x88FD;&#x7684;&#x5167;&#x5BB9;&#x70BA;&#x6709;&#x5728;&#x64AD;&#x653E;&#x6642;&#x64A5;&#x51FA;&#x7684;&#x5167;&#x5BB9;&#xFF08;&#x5305;&#x542B; Drum &#x548C;&#x9375;&#x76E4;&#x7684;&#x7D00;&#x9304;&#xFF09;&#x3002;</li>\n<li>&#x82E5;&#x5728;&#x9304;&#x97F3;&#x6A21;&#x5F0F;&#x6642;&#x6E05;&#x9664; Title&#xFF0C;&#x5247;&#x6B64;&#x9375;&#x6703;&#x66AB;&#x6642;&#x7121;&#x6548;&#xFF0C;&#x4E26;&#x65BC; console &#x986F;&#x793A;&#x8B66;&#x544A;&#x3002;&#x8F38;&#x5165; Title &#x5F8C;&#x5373;&#x6703;&#x6062;&#x5FA9;&#x9EDE;&#x9078;&#x5373;&#x505C;&#x6B62;&#x9304;&#x97F3;&#x7684;&#x6548;&#x679C;&#x3002;</li>\n</ul>\n</li>\n</ul>\n<h2>7. Credits and Inspirations</h2>\n<ul>\n<li>crazi ass library <a href=\"https://tonejs.github.io/\">tone.js</a> and <a href=\"https://two.js.org/\">two.js</a></li>\n<li>original idea from amazing <a href=\"http://patatap.com/\">patatap</a></li>\n<li>music samples from amazing <a href=\"http://jxnblk.com/stepkit/\">stepkit</a></li>\n</ul>\n"
    },
    {
      "component": "footer",
      "links": [
        {
          "href": "https://github.com/vibertthio/beact",
          "text": "GitHub"<commit_msg>Update compositor.json via compositor.io<commit_after>{
  "name": "vibertthio/beact",
  "version": "0.1.4",
  "libraries": {
    "xv": "^1.1.25"
  },
  "title": "",
  "branch": "master",
  "style": {
    "name": "Williamsburg",
    "componentSet": {
      "nav": "nav/BasicNav",
      "header": "header/LightBannerHeader",
      "article": "article/ReaderArticle",
      "footer": "footer/BasicFooter"
    },
    "fontFamily": "Montserrat, sans-serif",
    "heading": {
      "fontWeight": 600,
      "letterSpacing": "0.1em"
    },
    "colors": {
      "text": "#346",
      "background": "#fff",
      "primary": "#0099e0",
      "secondary": "#ab61ff",
      "highlight": "#f7b",
      "muted": "#fffab3",
      "border": "#ccd"
    }
  },
  "content": [
    {
      "component": "nav",
      "links": [
        {
          "href": "https://safe-stream-69256.herokuapp.com/",
          "text": "Home"
        },
        {
          "href": "https://github.com/vibertthio/beact",
          "text": "GitHub"
        },
        {
          "href": "https://npmjs.com/package/beact",
          "text": "npm"
        }
      ]
    },
    {
      "component": "header",
      "heading": "beact",
      "subhead": ":guitar::art: DJ and VJ all by yourself in seconds !",
      "children": [
        {
          "component": "ui/TweetButton",
          "text": "beact: :guitar::art: DJ and VJ all by yourself in seconds !",
          "url": "https://safe-stream-69256.herokuapp.com/"
        },
        {
          "component": "ui/GithubButton",
          "user": "vibertthio",
          "repo": "beact"
        }
      ],
      "text": "v0.0.0"
    },
    {
      "component": "article",
      "metadata": {
        "source": "github.readme"
      },
      "html": "<p><img src=\"./assets/images/perf.jpg\"></p>\n<h1><a href=\"https://beact.herokuapp.com/\">Beact</a> &#xB7; <a href=\"http://makeapullrequest.com\"><img src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"></a></h1>\n<blockquote>\n<p>&#x1F3B8;&#x1F3A8; DJ / VJ all by yourself in seconds !</p>\n<ul>\n<li><a href=\"https://beact.herokuapp.com/\">demo</a> - It&apos;s deployed on Heroku, play it now!</li>\n<li><a href=\"https://vimeo.com/226318485\">video</a> - Short video of using Beact for performance!</li>\n<li><a href=\"https://medium.com/@vibertthio/beact-audio-visual-art-in-react-44e9c757e40f\">blog(vibert)</a> - vibert&apos;s words after creating Beact!</li>\n<li><a href=\"https://medium.com/@vibertthio/dj-and-vj-all-by-yourself-in-seconds-on-web-e5befc162e0f\">english version</a> - vibert&apos;s words after creating Beact!</li>\n<li><a href=\"http://scyablog.blogspot.tw/2017/07/beact.html\">blog(scya)</a> - scya597&apos;s words after creating Beact! (only mandarin now, english coming)</li>\n</ul>\n</blockquote>\n<p>An audio/visual interactive art piece, and an instrument that everyone play with to become a DJ + VJ.\nIt&apos;s based on the idea of patatap, and using two.js, tone.js as audio and visual library.\nIt combines sequencer with on concept of patatap.\nI have added some my own animation and will do more to replace ones from patatap.</p>\n<h2>0. Table of Contents</h2>\n<ul>\n<li><a href=\"#1-quick-start\">Quick Start</a></li>\n<li><a href=\"#2-run-on-local\">Run on Local</a></li>\n<li><a href=\"#3-development\">Development</a></li>\n<li><a href=\"#4-deploy\">Deploy</a></li>\n<li><a href=\"#5-basic-usage\">Basic Usage</a></li>\n<li><a href=\"#6-ui-and-advanced-usage\">Advanced Usage</a></li>\n<li><a href=\"#7-credits-and-inspirations\">Credits and Inpirations</a></li>\n</ul>\n<h2>1. Quick Start</h2>\n<ol>\n<li>open the <a href=\"https://safe-stream-69256.herokuapp.com/\">demo</a> link.</li>\n<li>press space to start/stop.</li>\n<li>click any block to trigger drum machine note.</li>\n<li>press any alphabet to trigger keyboard note.</li>\n<li>up/down to change bpm.</li>\n<li>left/right to change sound bank of drum machine.</li>\n<li>press 1 ~ 8 for different presets.</li>\n<li>shift+up/down to change animations of keyboard.</li>\n<li>shift+left/right to change animations of drum machine.</li>\n<li>press naruto icon to set naruto animation of keyboard.</li>\n</ol>\n<p><img src=\"./assets/images/b1.png\"></p>\n<h2>2. Run on Local</h2>\n<blockquote>\n<p>It&apos;s okay to run Beact without server. It will git some error in console irrelevant, though.</p>\n</blockquote>\n<p>First, clone the repo and install dependencies.\nThen <strong>Rock&apos;n Roll</strong>, baanngg.</p>\n<pre>git clone https://github.com/vibertthio/beact beact\ncd beact\nnpm install\nnpm <span class=\"hljs-keyword\">run</span><span class=\"bash\"> build\n</span>npm <span class=\"hljs-keyword\">run</span><span class=\"bash\"> start</span></pre><h2>3. Development</h2>\n<blockquote>\n<p>Run Beact with server, giving you <strong>the Force</strong>.</p>\n</blockquote>\n<h3>3.1 To install mongodb</h3>\n<pre><span class=\"hljs-keyword\">brew </span><span class=\"hljs-keyword\">install </span>mongo</pre><h3>3.2 Initial config of mongodb</h3>\n<p>Create database directory</p>\n<pre><span class=\"hljs-title\">sudo</span> mkdir -p /<span class=\"hljs-class\"><span class=\"hljs-keyword\">data</span>/db</span></pre><p>Find your username</p>\n<pre><span class=\"hljs-attribute\">whoami</span></pre><p>Taking ownership to /data/db</p>\n<pre><span class=\"hljs-comment\">// assume your username is John</span>\nsudo chown -Rv John <span class=\"hljs-meta-keyword\">/data/</span>db</pre><h3>3.3 To run the database</h3>\n<pre><span class=\"hljs-attribute\">mongod</span></pre><p>If you don&apos;t want to run mongod everytime you need, the following command will automatically start your database while the computer is running:</p>\n<pre><span class=\"hljs-keyword\">brew </span>services start mongo</pre><h3>3.4 To develop Beact</h3>\n<pre>npm <span class=\"hljs-keyword\">run</span><span class=\"bash\"> dev</span></pre><h2>4. Deploy</h2>\n<blockquote>\n<p>We are using great Heroku for current deploy.</p>\n</blockquote>\n<h3>4.1 Clone the repo, install dependencies, and build.</h3>\n<pre><span class=\"hljs-symbol\">git</span> clone https://github.com/vibertthio/<span class=\"hljs-keyword\">beact </span><span class=\"hljs-keyword\">Beact\n</span><span class=\"hljs-symbol\">cd</span> <span class=\"hljs-keyword\">Beact\n</span><span class=\"hljs-symbol\">npm</span> install\n<span class=\"hljs-symbol\">npm</span> run <span class=\"hljs-keyword\">build</span></pre><h3>4.2 Delete /public in &quot;Ignore build files&quot; of .gitignore</h3>\n<pre># Ignore <span class=\"hljs-keyword\">build</span> files\n<span class=\"hljs-keyword\">public</span> &lt;&lt; (<span class=\"hljs-keyword\">delete</span>)</pre><h3>4.3 Deploy</h3>\n<pre>heroku <span class=\"hljs-keyword\">create</span>\nheroku addons:<span class=\"hljs-keyword\">create</span> mongolab:sandbox\nnpm <span class=\"hljs-keyword\">run</span> deploy</pre><h2>5. Basic Usage</h2>\n<h3>5.1 Keyboard &amp; Sequencer Pads</h3>\n<ol>\n<li>click on the drum pad to make your own pattern.</li>\n<li>press space to start/stop.</li>\n<li>press up/down for bpm changing.</li>\n<li>left/right to change sound samples.</li>\n<li>press 1~8 to trigger preset patterns.</li>\n<li>press a~z to trigger animation and audio just like patatap.</li>\n</ol>\n<h3>5.2 Sidebars</h3>\n<ol>\n<li>Start / Stop</li>\n<li>Pattern : create a pattern, type in the name, and press add to upload yours to server and store.</li>\n<li>Chain&#xFF1A;chain few patterns into a song.</li>\n<li>Recorder&#xFF1A;record the drum machine pattern and keyboard together into a recording, and upload to server for you to share and replay.</li>\n</ol>\n<h2>6. UI and Advanced Usage</h2>\n<p><img src=\"./assets/images/beact-ui.png\">\n<a href=\"https://safe-stream-69256.herokuapp.com/\">Full User Guide</a> link.</p>\n<h2>7. Credits and Inspirations</h2>\n<ul>\n<li>crazi ass library <a href=\"https://tonejs.github.io/\">tone.js</a> and <a href=\"https://two.js.org/\">two.js</a></li>\n<li>original idea from amazing <a href=\"http://patatap.com/\">patatap</a></li>\n<li>music samples from amazing <a href=\"http://jxnblk.com/stepkit/\">stepkit</a></li>\n</ul>\n"
    },
    {
      "component": "footer",
      "links": [
        {
          "href": "https://github.com/vibertthio/beact",
          "text": "GitHub"
{'fraction_non_alphanumeric': 0.2709771689497717, 'fraction_numerical': 0.12894977168949773, 'mean_word_length': 6.006910673150755, 'pattern_counts': {'":': 108, '<': 772, '<?xml version=': 0, '>': 772, 'https://': 32, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3658317', 'n_tokens_mistral': 14000, 'n_tokens_neox': 11600, 'n_words': 1378}