⌈⌋ branch:  Bitrhythm


Check-in [4cb0fff742]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Updating JUCE link and build scripts
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 4cb0fff742f17f84c4db0584265d9b979a2990a40d368e005ced194843cfaf44
User & Date: dev 2022-03-27 22:44:18
Context
2022-05-03
03:30
Cleanup of requirements Leaf check-in: 28d3f65371 user: dev tags: trunk
2022-03-27
22:44
Updating JUCE link and build scripts check-in: 4cb0fff742 user: dev tags: trunk
2022-02-15
23:20
Cleanup post presentation Worklet code check-in: 941581eece user: dev tags: trunk
Changes

Changes to build/html/alternate-implementation.html.

206
207
208
209
210
211
212

213
214
215
216
217
218
219
<h1>Alternate Implementations<a class="headerlink" href="#alternate-implementations" title="Permalink to this headline">¶</a></h1>
<p>Here’s some more demo songs from other systems</p>
<ul class="simple">
<li><p><a href="https://www.youtube.com/watch?v=xXNB1BbKY8A">Foxdot and Python</a></p></li>
<li><p><a href="https://www.youtube.com/watch?v=ALrgudRS2AQ">Csound</a></p></li>
</ul>
<p>The core ideas of bitrhythm are transferable to other languages as well. At most all you need is a music loop and samples to get started.</p>

<p>Here’s a demo by SunVox’s author ?</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8r8wsvHUbCo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>An example in C with raylib</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>brew install raylib
cc ray.c  `pkg-config --libs --cflags raylib` -o ray
</pre></div>
</div>







>







206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<h1>Alternate Implementations<a class="headerlink" href="#alternate-implementations" title="Permalink to this headline">¶</a></h1>
<p>Here’s some more demo songs from other systems</p>
<ul class="simple">
<li><p><a href="https://www.youtube.com/watch?v=xXNB1BbKY8A">Foxdot and Python</a></p></li>
<li><p><a href="https://www.youtube.com/watch?v=ALrgudRS2AQ">Csound</a></p></li>
</ul>
<p>The core ideas of bitrhythm are transferable to other languages as well. At most all you need is a music loop and samples to get started.</p>
<p>A basic port to JUCE can be found <a class="reference external" href="https://xyzzyapps.link/bitrhythm-alt">here</a>.</p>
<p>Here’s a demo by SunVox’s author ?</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8r8wsvHUbCo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>An example in C with raylib</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>brew install raylib
cc ray.c  `pkg-config --libs --cflags raylib` -o ray
</pre></div>
</div>

Changes to build/html/changelog.html.

225
226
227
228
229
230
231




232
233
234
235
236
237
238
    <span class="n">Second</span> <span class="n">Demo</span> <span class="n">Song</span>
    <span class="n">Autocommit</span>
    <span class="n">Keyboard</span> <span class="n">Bindings</span>
    <span class="n">Reverting</span> <span class="n">to</span> <span class="n">setInterval</span>
    <span class="n">Added</span> <span class="n">code</span> <span class="k">for</span> <span class="n">p5</span>
    <span class="n">Update</span> <span class="n">the</span> <span class="n">docs</span>
</pre></div>




</div>
</div>


              </div>
              
        







>
>
>
>







225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
    <span class="n">Second</span> <span class="n">Demo</span> <span class="n">Song</span>
    <span class="n">Autocommit</span>
    <span class="n">Keyboard</span> <span class="n">Bindings</span>
    <span class="n">Reverting</span> <span class="n">to</span> <span class="n">setInterval</span>
    <span class="n">Added</span> <span class="n">code</span> <span class="k">for</span> <span class="n">p5</span>
    <span class="n">Update</span> <span class="n">the</span> <span class="n">docs</span>
</pre></div>
</div>
<p>Jan - Feb 2022</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>   <span class="n">Experimenting</span> <span class="k">with</span> <span class="n">Audioworklet</span>
</pre></div>
</div>
</div>


              </div>
              
        

Changes to build/html/index.html.

195
196
197
198
199
200
201

202
203
204
205
206
207
208
...
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<div class="toctree-wrapper compound">
<p class="caption"><span class="caption-text">Table of Contents</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="what.html">What is bitrhythm about ?</a><ul>
<li class="toctree-l2"><a class="reference internal" href="what.html#intro">Intro</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#adc-2021">ADC 2021</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#inspiration-for-the-project">Inspiration for the project</a></li>

<li class="toctree-l2"><a class="reference internal" href="what.html#support-this-project">Support this project</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="source-code.html">Source Code and License</a></li>
<li class="toctree-l1"><a class="reference internal" href="demo.html">Getting Started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="demo.html#tutorial">Tutorial</a><ul>
<li class="toctree-l3"><a class="reference internal" href="demo.html#making-a-basic-loop">Making a basic loop</a></li>
................................................................................
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#tweaking-and-transitions">Tweaking and Transitions</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="early-attempts.html">Early Attempts</a></li>
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog</a></li>
<li class="toctree-l1"><a class="reference internal" href="main.html">Code Walkthrough</a><ul>
<li class="toctree-l2"><a class="reference internal" href="main.html#running">Running</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#core-tracker-loop">Core Tracker Loop</a><ul>
<li class="toctree-l3"><a class="reference internal" href="main.html#observers">Observers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="main.html#dials">Dials</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#numbers">Numbers</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autoknob">AutoKnob</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#main-ui">Main UI</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#worklet">Worklet</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#sample">Sample</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#app">App</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#index">Index</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#page">Page</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#javascript">Javascript</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#id1">303</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autocommit">Autocommit</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="alternate-implementation.html">Alternate Implementations</a><ul>
<li class="toctree-l2"><a class="reference internal" href="alternate-implementation.html#elementary">Elementary</a></li>







>







 







<










<
<
<







195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
...
220
221
222
223
224
225
226

227
228
229
230
231
232
233
234
235
236



237
238
239
240
241
242
243
<div class="toctree-wrapper compound">
<p class="caption"><span class="caption-text">Table of Contents</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="what.html">What is bitrhythm about ?</a><ul>
<li class="toctree-l2"><a class="reference internal" href="what.html#intro">Intro</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#adc-2021">ADC 2021</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#inspiration-for-the-project">Inspiration for the project</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#support-this-project">Support this project</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="source-code.html">Source Code and License</a></li>
<li class="toctree-l1"><a class="reference internal" href="demo.html">Getting Started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="demo.html#tutorial">Tutorial</a><ul>
<li class="toctree-l3"><a class="reference internal" href="demo.html#making-a-basic-loop">Making a basic loop</a></li>
................................................................................
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#tweaking-and-transitions">Tweaking and Transitions</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="early-attempts.html">Early Attempts</a></li>
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog</a></li>
<li class="toctree-l1"><a class="reference internal" href="main.html">Code Walkthrough</a><ul>

<li class="toctree-l2"><a class="reference internal" href="main.html#core-tracker-loop">Core Tracker Loop</a><ul>
<li class="toctree-l3"><a class="reference internal" href="main.html#observers">Observers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="main.html#dials">Dials</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#numbers">Numbers</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autoknob">AutoKnob</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#main-ui">Main UI</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#worklet">Worklet</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#sample">Sample</a></li>



<li class="toctree-l2"><a class="reference internal" href="main.html#javascript">Javascript</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#id1">303</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autocommit">Autocommit</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="alternate-implementation.html">Alternate Implementations</a><ul>
<li class="toctree-l2"><a class="reference internal" href="alternate-implementation.html#elementary">Elementary</a></li>

Changes to build/html/main.html.

182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
...
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
...
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
...
297
298
299
300
301
302
303

304
305
306
307
308
309
310
311
312
...
341
342
343
344
345
346
347

348
349
350
351
352
353
354
....
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
....
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
            <div class="tocsection onthispage pt-5 pb-3">
                <i class="fas fa-list"></i> Contents
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#running">
   Running
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#core-tracker-loop">
   Core Tracker Loop
  </a>
  <ul class="nav section-nav flex-column">
   <li class="toc-h3 nav-item toc-entry">
    <a class="reference internal nav-link" href="#observers">
................................................................................
   Worklet
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#sample">
   Sample
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#app">
   App
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#index">
   Index
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#page">
   Page
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#javascript">
   Javascript
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="code-walkthrough">
<h1>Code Walkthrough<a class="headerlink" href="#code-walkthrough" title="Permalink to this headline">¶</a></h1>
<div class="section" id="running">
<h2>Running<a class="headerlink" href="#running" title="Permalink to this headline">¶</a></h2>
<p>ls source/main.cog | entr -r runserver.sh -b</p>
</div>
<div class="section" id="core-tracker-loop">
<h2>Core Tracker Loop<a class="headerlink" href="#core-tracker-loop" title="Permalink to this headline">¶</a></h2>
<p>In bitrhythm code is evaluated for every cycle.</p>
<p>1 beat = 60 / tempo
1 cycle = 1 beat / ticks</p>
<p>For every cycle visual and audio code is evaluated.</p>
<p>The edit checkbox allows you to perform long edits, where only old code is evaluated. Once you disable it, all the new edit changes are applied in the next cycle.</p>
................................................................................
<p>Sidechain compression is a simple algorithm which observes amplitude of another instrument but you can generalise it to anything. By attaching observers  to time or other instruments you can create sections within the song that can trigger others with conditional logic. This is similar to pure data’s bangs - <a class="reference external" href="https://www.youtube.com/watch?v=nTTZZyD4xlE">see this</a>. In future this will be referred to as side events. You could decrease the volume of the drums to have the snares drop automatically for example.</p>
<p>This is something that you can’t do in DAWs.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="k">async</span> <span class="nx">play</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">cellx</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">cellx</span><span class="p">.</span><span class="nx">cellx</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">$</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">;</span>


    <span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">bpm</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">tempo</span><span class="p">;</span>
    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">swing</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="nb">window</span><span class="p">.</span><span class="nx">hit_map</span> <span class="o">=</span> <span class="p">{};</span>

    <span class="kd">var</span> <span class="nx">transition</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
................................................................................

    <span class="kd">var</span> <span class="nx">bars</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">tick</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">quarter_beat_length</span> <span class="o">=</span> <span class="mf">60000.0</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">tempo</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">beat_length</span> <span class="o">=</span> <span class="nx">quarter_beat_length</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">beat_length</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">;</span>

    <span class="nb">window</span><span class="p">.</span><span class="nx">samples</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">samples</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">count</span> <span class="o">=</span> <span class="nx">count</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
    <span class="nx">tick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">count</span> <span class="o">%</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">tick</span> <span class="o">===</span> <span class="mf">0</span><span class="p">)</span> <span class="o">++</span><span class="nx">bars</span><span class="p">;</span>

................................................................................

    <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;mount&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="p">});</span>
   <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sample</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="app">
<h2>App<a class="headerlink" href="#app" title="Permalink to this headline">¶</a></h2>
<div class="highlight-hylang notranslate"><div class="highlight"><pre><span></span><span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">sanic</span> <span class="p">[</span><span class="nv">Sanic</span> <span class="nv">response</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">sanic.response</span> <span class="p">[</span><span class="nv">json</span> <span class="nv">text</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">sanic.exceptions</span> <span class="p">[</span><span class="nv">NotFound</span> <span class="nv">abort</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">jinja2</span> <span class="p">[</span><span class="nv">Environment</span> <span class="nv">FileSystemLoader</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="nv">re</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">ipdb</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">sys</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">traceback</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">json</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">datetime</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">email.utils</span> <span class="p">[</span><span class="nv">format_datetime</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">urllib.parse</span> <span class="p">[</span><span class="nv">urlparse</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="nv">base64</span><span class="p">)</span>

<span class="p">(</span><span class="kd">setv </span><span class="nv">file-loader</span> <span class="p">(</span><span class="nf">FileSystemLoader</span> <span class="s">&quot;templates&quot;</span><span class="p">))</span>
<span class="p">(</span><span class="kd">setv </span><span class="nv">env</span> <span class="p">(</span><span class="nf">Environment</span> <span class="ss">:loader</span> <span class="nv">file-loader</span><span class="p">))</span>

<span class="p">(</span><span class="kd">setv </span><span class="nv">app</span> <span class="p">(</span><span class="nf">Sanic</span> <span class="s">&quot;Bitrhythm&quot;</span><span class="p">))</span>

<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.exception</span> <span class="nv">NotFound</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">ignore_404s</span> <span class="p">[</span><span class="nv">request</span> <span class="nv">exception</span><span class="p">]</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">text</span> <span class="p">(</span><span class="nf">+</span> <span class="s">&quot;Yep, I totally found the page &quot;</span> <span class="nv">request.url</span><span class="p">)))</span>
  <span class="p">)</span>
<span class="p">)</span>

<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.route</span> <span class="s">&quot;/song/&lt;name&gt;&quot;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">get-index</span> <span class="p">[</span><span class="nv">request</span> <span class="nv">name</span><span class="p">]</span>
    <span class="p">(</span><span class="kd">setv </span><span class="nv">template</span> <span class="p">(</span><span class="nf">env.get_template</span> <span class="s">&quot;index.html&quot;</span><span class="p">))</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">response.html</span> <span class="p">(</span><span class="nf">template.render</span> <span class="p">{</span><span class="s">&quot;data&quot;</span> <span class="nv">name</span><span class="p">})))</span>
  <span class="p">)</span>
<span class="p">)</span>

<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.route</span> <span class="s">&quot;/&quot;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">get-index</span> <span class="p">[</span><span class="nv">request</span><span class="p">]</span>
    <span class="p">(</span><span class="kd">setv </span><span class="nv">template</span> <span class="p">(</span><span class="nf">env.get_template</span> <span class="s">&quot;index.html&quot;</span><span class="p">))</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">response.html</span> <span class="p">(</span><span class="nf">template.render</span> <span class="p">{</span><span class="s">&quot;data&quot;</span> <span class="s">&quot;&quot;</span><span class="p">})))</span>
  <span class="p">)</span>
<span class="p">)</span>

<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.route</span> <span class="s">&quot;/issue&quot;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">get-index</span> <span class="p">[</span><span class="nv">request</span><span class="p">]</span>
    <span class="p">(</span><span class="kd">setv </span><span class="nv">template</span> <span class="p">(</span><span class="nf">env.get_template</span> <span class="s">&quot;page.html&quot;</span><span class="p">))</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">response.html</span> <span class="p">(</span><span class="nf">template.render</span><span class="p">)))</span>
  <span class="p">)</span>
<span class="p">)</span>

<span class="p">(</span><span class="nf">app.static</span> <span class="s">&quot;/&quot;</span> <span class="s">&quot;./public&quot;</span><span class="p">)</span>

<span class="p">(</span><span class="nf">defmain</span> <span class="p">[</span><span class="o">&amp;</span><span class="k">rest </span><span class="nv">args</span><span class="p">]</span>
    <span class="p">(</span><span class="nf">app.run</span> <span class="ss">:host</span> <span class="s">&quot;0.0.0.0&quot;</span> <span class="ss">:port</span> <span class="mi">8015</span><span class="p">)</span>
<span class="p">)</span>
</pre></div>
</div>
</div>
<div class="section" id="index">
<h2>Index<a class="headerlink" href="#index" title="Permalink to this headline">¶</a></h2>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bitrhythm<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Cache-Control&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache, no-store, must-revalidate&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Pragma&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Expires&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="p">/&gt;</span>

        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;Bitrhythm&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;literate programming, p5, live coding, algorave, demoscene, creative programming, music, techno, programming, webaudio, webgl, p5, improvising&quot;</span><span class="p">&gt;</span>

       ${common_scripts}

        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;preconnect&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.gstatic.com&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&amp;display=swap&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.googleapis.com/css2?family=Major+Mono+Display&amp;family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&amp;display=swap&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://code.jquery.com/ui/1.12.0/jquery-ui.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.6/micromodal.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-RMMh+IHzfZLsVFo1rX9PBoysxrJJqjyOS31HYWftobWtv2At6KBTqKpvVDIWAjL5aiV+LjFqkQ6e53Rdw3VOBg==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/whenipress@1.8.0/dist/whenipress.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-IXuoq1aFd2wXs4NqGskwX2Vb+I8UJ+tGJEu/Dc0zwLNKeQ7CW3Sr6v0yU3z5OQWe3eScVIkER4J9L7byrgR/fA==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/themes/default.min.css&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-RgUjDpwjEDzAb7nkShizCCJ+QTSLIiJO1ldtuxzs0UIBRH4QpOjUU9w47AF9ZlviqV/dOFGWF6o7l3lttEFb6g==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="p">/&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/json-url-master/dist/browser/json-url.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/riot-3.13.2/riot+compiler.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-RntatPOhEcQEA81gC/esYoCkGkL7AYV7TeTPoU+R9zE44/yWxVvLIBfBSaMu78rhoDd73ZeRHXRJN5+aPEK53Q==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/lib/codemirror.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/hint/show-hint.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/lib/codemirror.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/hint/show-hint.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;http://esironal.github.io/cmtouch/addon/hint/xml-hint.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/hint/html-hint.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/xml/xml.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/javascript/javascript.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/css/css.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/htmlmixed/htmlmixed.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/selection/active-line.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/selection/mark-selection.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/edit/matchbrackets.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/theme/neonsyntax.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://unpkg.com/pyloncss@latest/css/pylon.css&quot;</span><span class="p">/&gt;</span>


        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/tune.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/misc.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
<span class="nt">body</span> <span class="p">{</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
    <span class="k">font-family</span><span class="p">:</span> <span class="s1">&#39;Roboto Mono&#39;</span><span class="p">,</span> <span class="kc">monospace</span><span class="p">;</span>
    <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">a</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">input</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">btn</span> <span class="p">{</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
    <span class="k">padding</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-selected</span>  <span class="p">{</span> <span class="k">background-color</span><span class="p">:</span> <span class="kc">transparent</span> <span class="cp">!important</span><span class="p">;</span>   <span class="k">z-index</span><span class="p">:</span> <span class="mi">20</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-selectedtext</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">red</span> <span class="cp">!important</span><span class="p">;</span>
     <span class="k">z-index</span><span class="p">:</span> <span class="mi">25</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror</span> <span class="nt">pre</span> <span class="p">{</span>
  <span class="k">z-index</span><span class="p">:</span> <span class="mi">5</span><span class="p">;</span>
  <span class="k">background</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-cursor</span> <span class="p">{</span>
  <span class="k">border-left</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
  <span class="k">z-index</span><span class="p">:</span> <span class="mi">10</span> <span class="cp">!important</span><span class="p">;</span>
  <span class="k">color</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
  <span class="k">background</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-line</span> <span class="nt">span</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-line</span> <span class="o">&gt;</span> <span class="nt">span</span> <span class="p">{</span>
  <span class="k">background</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-lines</span> <span class="p">{</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>


<span class="p">.</span><span class="nc">CodeMirror</span> <span class="p">{</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
    <span class="k">padding-left</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">line-height</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">transparent</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">font-family</span><span class="p">:</span> <span class="s1">&#39;Roboto Mono&#39;</span><span class="p">,</span> <span class="kc">monospace</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-vscrollbar</span><span class="o">,</span> <span class="p">.</span><span class="nc">CodeMirror-hscrollbar</span> <span class="p">{</span>
    <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">overflow-y</span><span class="p">:</span> <span class="kc">hidden</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-cursor</span> <span class="p">{</span>
  <span class="k">border-left</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>



        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/bitrhythm.tag&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/dial.tag&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/sample.tag&quot;</span> <span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/number.tag&quot;</span> <span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">var</span> <span class="nx">_paq</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">_paq</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">_paq</span> <span class="o">||</span> <span class="p">[];</span>
    <span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;trackPageView&#39;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;enableLinkTracking&#39;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;alwaysUseSendBeacon&#39;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;setTrackerUrl&#39;</span><span class="p">,</span> <span class="s2">&quot;\/\/blog.xyzzyapps.link\/owoamims\/matomo\/app\/matomo.php&quot;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;setSiteId&#39;</span><span class="p">,</span> <span class="s1">&#39;1&#39;</span><span class="p">]);</span><span class="kd">var</span> <span class="nx">d</span><span class="o">=</span><span class="nb">document</span><span class="p">,</span> <span class="nx">g</span><span class="o">=</span><span class="nx">d</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">),</span> <span class="nx">s</span><span class="o">=</span><span class="nx">d</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
    <span class="nx">g</span><span class="p">.</span><span class="nx">type</span><span class="o">=</span><span class="s1">&#39;text/javascript&#39;</span><span class="p">;</span> <span class="nx">g</span><span class="p">.</span><span class="k">async</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span> <span class="nx">g</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;\/\/blog.xyzzyapps.link\/oozotche\/matomo\/matomo.js&quot;</span><span class="p">;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span><span class="nx">s</span><span class="p">);</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;containera-full&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">hstack</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-2&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/docs/index.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>docs<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAJwFAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9NTfIT-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YnQ2gSfpzY3zlYLujavQRq73hSEM-RaGxTxuud9nauG_VdXCmE_lvZ88XvUHOIGjOkCUKV-1ot3i9fx5NP-UsUmVpnjUDnq_9eUJfonx5B_oG4c3GvLitNREl_O9emU8CST0v5RVqHSudqZqsrortpDjdMlekhQ2y7ZlNcUDjGoTrH4vFMrLVI60wINoufS0iO6ourxizS1Ifv_iirkdP0U0Zp21rHHKXlwhWG0hmTCxYo8ZIf0Cmbiu22GiFFmRfIcuWbcq-_SWdyMJ0sWIslhKpGFEapN604eNblpy5im2PsItjWScu-cS0JI3zeHb8JMNzWflq0-XWHG5WLsmPqCbn3GgfR6BiAx1ApmTui84WXgX6SuJPkXRqHEOKpBZ4dKEPr5P_-DDpwz0L7i8X_FHE-LBMactDBoKgIbIoyVnRe6DJ9s5AZLJjUrWGGVCLcp5bEKOnH_3HfZuDq9UlOvZRVkz3BwpUeajLeUJcAYxDmU2JbNUaipMJN7LF9YAX2LaT44LACw2A7Is-pQ_EGznjhEo7SS7JusQPN6G43g4OUZSUY5WNlPUCWfXSeWNU0Xx_-b4r6t4HHQS2P2stIQOS96JqLzXrx-Q62Y8RSRIvieE76j_-dw4icTDiATfx8doLkSzXgOzNTcZYume2cHLEG-0TbgR1M6WCPiH4pvHIRfcTxEDZK5b7iqIhY0MNW8Kkyn7KFVqQf_5d_msiv57DWIHg6Qi6cmBdOF0Li_CY8kFBV4BWLsOlanN6_hehIREVU8WgWbM9rdrKcqzhHD8Fp5qTmbyiVnjD83BDhKY5zwF8xFM1p7ZmEjlIF1ag62BDRt5j_MZ9q5COsX9gpV6DfA0FaDwyOmkMsOFiGeUNIr8B_ENYG-EpYbhUHZukv-QttcjFwRypF1eSN3DMrGUm1eB62PW3s--XcugwT5GJQRa66WZF4DZzPPTKEZhtNL28KgBcHm3DeuSfN_HRsgBW1o2YDpM1QP-K0aedKB_umlWhdBze7Gs72-vDfjB6LGI__tncLNS3GaqYaltFnzc64EOV-mz1xvlyAuFSj-T8r8e5ebJky7o6PZXPTvvCLeTL056Tpp-Gh-WgxmyMISIhkb5kKPj235H7OY-JAoT28VVrA01WpXoArOJaE2ijBt2oLOYXwWiO1hUI3NtTO2vI__sllxHNHS6EiHXPyLj8_PGF47RUq7oc-9ibiF9FUuoonMLE0PwyGOUJ6LU9SDb4FLPwk0gJBP4GiWLftvfErrXDNck9O6_JZvpJ_9O5qmNDUge5yDYbO__vJejx0bomU7eG2kuvPAmGtiWrYo8B_3JoEAOMgVa9SxE4kZ-ijdh-glIKredlMCUG5eYJc-6H_94pteyO-ocB8rrlfSGr6M2r9xlbeMecCvJTRjmwMbB12DWGbDq5Sxn8tgX98O9lT-51_oajqKVMmox3f7kXhsJPxyIMsUaVVFRmpPJvMt5nt9-i1Vgmux4a3t7a1oVPdN35POOjun63NkyODKhTUHmjdC7h9tv6ZI8WPf2Gh9__k6qf5xp3u3OjzkISj7ainHooji_3Cnjm3T30e6pm3MhliJg1ezFi8NetUwwYZz6UNCMOTUaWAqJ5BmF2hAh5Sdsog93orRvrOuPTNhRA1Wlyjrsy8zVW3WlO4chcKVYA0OsH1Zwjo7koXbfX7ERrPnAbZsWfkPePwI4to-KuPF1v0U4jwFelzwn3n4C1E2BkqPfNcvnVlFDmPHlyOCZHrfsrG9GUPsCrZdrX2EHiWH_bRkXVJwkHTLir8d_cjI0DIrVYji4XBIDX9Pmt-0ylr0FeHLXVHNb4Q7V--3d4-mJ2zXsZDR97M_ikaQVHZBWcKnyWmx_aPoWKnFYkk_6PbR246YU3fViA9PdZKTYrN2B3KmcrliH2T2YRcRdWQGxXlXZh3Bsd5PtOC1EuV7-DHlkI67D6V-AFScJfdj64Pv1wKwGQZ7lEZtrmv_VVRmkWYWFtbBj5HHnth1sKhBjVgGIVH74y9b0hHjpo5kw-1_3jNZ1ooxp-y8FTHblmSkSoQe8bey9XQ7BxGbUPsG0X5LfT8FpZH36A6Vz6nedFEvuoQCyV55qcnDD5IKsJeyKZz1ugrYGoZIfJMr1XTiulWUiaxeat7Q6Xq1YXOjvWV7ki_w4m__-wVP5g&quot;</span><span class="p">&gt;</span>techno<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
                
                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAIbCAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9OTB7Y34cZmeLb5MKZic7bXMO7vWrjHyfc2FvIP0v1Gp--NY5tUsY7sQ71Zzph5WmKUZ2oNtnxz8-HaVpK1SGQzEOq3-lWkeJ76a2J8Ng2OEZxOMNAk6VTnu8fRRTToMlowDe3wjs8DorsxdnW49ThFhGbOek4QAwzPneapDmjuDKRqiqN3btgnfZDzokeOTh6CzwAI2rBbL07YUBEFaMziOJ_2X59fYBPM3eCnL7GlOCk2u6_22WnYgZPbc3RuJLf8JLAhbDrXvZHyYekrPuGo_R6V2BCPE14rZFFwJQWEqy_KDtH_YPMhj1TPS62qcPr6qAWrI9nsndpRrczwBFChHSPKiZXjCZJZKH1Kh19A4-vpXwbr1BCiNdOTQ89KKv0OXpIFUMwx5Qd5jsrb2c-hywM688ClZ86A5o4KzrE2xjG4VbcexmPdOXS-K6PRU4c6dJOUClOLNZpbmZvL8Bo4ep67wL0bFEOMqhN30pLGmZlnfd5mgH8J9dPrGsEglKLGskQ_g2vEeR9CzOstzctjCKtL1O8oNkSuCnXSGE0uY5rxGmBu7AW99tRx0i8hNzB4l1S1mxnzkLefi9VM6YYZraX7T2kGnRgD5HOg0WH2LeUsVuWpnp189Ph_Os95_XUVBc67TwU8IWbzat1decCt0jKKP13L7a0OCO18Fq2DVr9veHq2mRepiObWGsYcqjXkUNjaxoItg_pWdK6gyveVXjfs3PaJ477UbpiZBWxoc-Ebn8FZu6bZZ4gOZE-MoJHUDiQZgo3-lirXTvpcpsgsaIUESDAcGUNE4aIK6wIFGnEaEFYo4veQqTLeic4NhPtUpTdfRqdNTKOaVSUE_KGXKXaZl0Eni1DBmEGykml4uxHsWBEE44Ku34YIb6KZUcCu2DuXDiXcbabsWkA-czXWBtRnzWJ6ib4scny1o6CsVnugUjE9wv84bz2&quot;</span><span class="p">&gt;</span>chiptune<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>

                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAKJCAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQFgmT-79BTKosH6Xje2IYnNRgEOpeuhg8jahOEd3yMC_PXFq-i_ClvL8Ct3Wgf6uJb5dmDYwtUHkddL3DLEcA0AoD3rP_ZyA1lDuiOOQJSJIeDylz8ajg_yNsR8119StK7SE1-QOm5OZus7ISs3-UqjsX1W0VSZeoF1ebH8hgDFisSvjykmfW2_oDLr6axQL5meUVvESZBQhe4lE78iytxrPrbhjdx5v4qwKWbDGm2pSdeuz9FMGq63DfpnbAy-RHVY3dCDCZIYzOvwfOOR1QV0McEXIqbGpLzRcvIOe5TUnaGKm7qaQqHhDyjt5rL0jFxioR5yKnUAp0gL6zy5TLqRS80CIiz0dj0Na63UxYtPLpf4vWqOJFX6VZpTFRC7o1W8TmeheEr_UgpXblHVIdg8zUP69XACKo_X7MJ-g9-s5ejXxeCWt5YZ-T8-kFbDX-bFQsov0C5k2SMdsTF5IzBulC3aL6-2Mazf5wVU16v-r9t6-U0iaQCqL8UYXUlr9abJSXOYkzSax56PzZiPzRzDv1Sj8QhsZ3xdFXfXNe-3F5o4YjXZ9JwptVwQLaj3UcPvkB4_Eow3JC7mPStctj2RooSef63tbMlp_7YBzaIjRnjJp2n9m11_606XGaYn1JpXMq2Garz3FUYUCXkNziILJlMaKBPqh8GdHdR01bN3G2AcmJTKfppvrY4-TJqzwcQodEU7aiVmiMwbW0Gj9JRcA3tLOZ6EbzsaGxqB_z4gCMnZ7aYzaGXLI7R5ACSC8znneiNZH5_k3kmHB65_8-STam5BnbRBaO0EDSZLlMH4EeA5TUQbfxwBYXvbNX2QWqF5cwHg1S7i9RPr_VBAkC5WZNTYZlNmI1xWkYyli_pstNWBxrmj4ujztca0Fg8RScocAP3YADqMXt73EEMXyqP_y54UwA&quot;</span><span class="p">&gt;</span>blank<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>

                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAL6DwAAAAAAAABDKUqGU5vI8Nuv2pxqeIybGqtJ0xIrSiobr98sdE7afj4Ar4jJq-8ql_W1_78a1_GXYU33QxiTtAV7SHRYdH6zp0CULZjCAn80UrL_cbk6C8SsOzgqMzV6zYkOLvG-fjZLi8LWC9mF2G1PfJaZ22MmMGC7XZiRMvuGgg9IXd6TYK8ymyJSEN8Xog0gS6esuZ-sV6WeWPyMk_80foxigbnhHOeWNjqTD3MHSKVhooDpOdlhHDE9Ym1lf1oXKJyd1nzIropiCpnzQhRx4VLOvptpUX9SPI8JfnOttZoK7-a-lbvVzgBRMrqzxMNO_Td-HNS-tmg3EhtJfpMHKvxFMaPkg0EusLRyP-FAPkl0N3Abu0-nyU14Ayniw1uEDi4tCwYvGQjE5FDxcOEAq0gm3NhikcGkInjkKD7Xhi9SKBshXapQ07ZcykBWOUNWiTQAWTyMwF4iQ2QQPlgV1pwOSSVp-sXJIwbsQFxnlV_wEdMZUF6a8JafjOXzkhYwDVoDVAoa7TAZdjxtIQf7ZIcr0einkkr79XkfkYr2Be38bAyG-KFPRL1L9Oc41gE36Wd6L3oEKuEI-oMYXp5IWlCC_sAyuOBNQsHYoZk8vxByQ8UNbLLOJ74GsYDEfGccM5THthnFOJmGz3h0eOAvxRkTXK1K7vr7ZASa1ijNatkfI2FGrAEJ8UN1aCbYz9YQbIQMfbLw5gzQCu7gUtzcaIx0YuTTJ3AjDw6hklmNmOP8Oefj-eJo4n4aOk6V3pB7n2Xc2S05-FxOA3iPujsa7r9QRJ7Rm1kfzgIhw1VoCJjFa7GSGfwccF9FiQtaNOuUWykmf7Nce2zFokkQGxSUa3Xm9q36L5zsOM-QXFDuQFWW1YBPk-ew8uosMorAkISE3VG46VqdkuMGhkGjqWKqv4XB7djOJXaQZRYIEgIpg5d6LXYpFw6OzjJZes3sS4CD4hMdzNU5OmyUmpgi9KMd9j4aGWH8Dku8bbw49Uz8UTlhGiBpuHlxzHV_g6sGnw-IdJ3RA1ylVOcU5uwXIJ5144iXmKa2LB5UhPepG1vclcm7lIWfEB3hOxpbbqS-9epGLWsYHJ8x70gRNZIdwm2HhdKpfl-8h-uXrsSfbyyQgcaWRJoVYpjqYwkld84551DwiYEWNgPMlqBHjo7Ug7R0NyQe2DcQ8UiWTDvAseVTKqVfQwv1dBHkJVGucDrdvBfoHm6_JyvCeBLdNxRP2FJEBQ_kow5_r7ESFzQZ8Bk7vr74dkxDBXdkSjr9rV6ElS0s_tS1NwrniHuI9SlQirUE775b3V8Wjnt-SMdwRRpMZHIBHntb_XDuJfRYYka_cCA1PNnP99R1VyKPypgUraZhqT_LwF7VQGnEWliiCRBhJkh4Npzu3lTHFQ7h1tduH3x12EUeHAviYg3GSuSG7t2gXd_XkTTJ6EugOt2p0Y1_CG8vG94s7k3DVJFWeMHQMW_naSbFJs4zyFDr7X8rfU5nJ1KABNH_wkrR2cLRxCCq95kzE4gahZyfOTKtfp-un1TMFTmJ0PWdbS67hxFTOhRrCYKoKsg62R14OJ6R_NbmhFin8mjwhFBLQK-n8_BuFwYTrUSYBh3k_gF1ZP68_0Kyf2d7o190dK1N6m5Qk-KcNujqiIgfzy0NeRcALL1oW97T7P29fOpEELXwVxuBY89yGi5TO_R7DUXEiCmEBFAmOB4EJMigVW6UJwSMR05gOBaaov1HBEmADf4MVM54b8H1EVXAMzzwszVKBPplb6ZbEkad1JYuzF9Wc2l07vsMLAzymm3Y2gkjv9GZo9biCDSLbFpacBJfqJF3xvr_-98Bs5-fnveqXf3IbAEVXZ3X_2SjoXPmlg0m_9usiW95hbOMd7pxNKla8u8nOu8r9vkLqqKg_yBHdnTbHThqEgGRPmpcVB8x3P5DZ5sHAWg2k1mubUuuI9aycC-b1qMOPu5y8_bPvXK5uGpEpmoXqbRSlqMLxUrpRPIjOoTPjBc8BciARAkj1yXYWfJ5umO32LMrCaJSi3AO5v_K95FVKT3wnE4x3Ra1yU3CcuXKlFrWrUlWWXGHYS7tXc7YL7Ik5jvI8g3oJeS4LaFMc5WxyzzguEUaO-FxRzVU6kgN_9Yddrg&quot;</span><span class="p">&gt;</span>stochastic<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>

                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span> <span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://xyzzyapps.link/samples/&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>sample browser<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">hstack</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">bitrhythm</span> <span class="na">song</span><span class="o">=</span><span class="s">&quot;{{data}}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">bitrhythm</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">riot</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">bitrhythm</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;bitrhythm&#39;</span><span class="p">);</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">bitrhythm</span> <span class="o">=</span> <span class="nx">bitrhythm</span><span class="p">[</span><span class="mf">0</span><span class="p">];</span>
            <span class="kd">var</span> <span class="nx">dial</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;dial&#39;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">number</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;number&#39;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">sample</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;sample&#39;</span><span class="p">);</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>


    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="page">
<h2>Page<a class="headerlink" href="#page" title="Permalink to this headline">¶</a></h2>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Cache-Control&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache, no-store, must-revalidate&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Pragma&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Expires&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>About birthythm<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;icon&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;favicon.ico&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="nt">html</span><span class="o">,</span> <span class="nt">body</span> <span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nt">iframe</span> <span class="p">{</span>
            <span class="k">position</span><span class="p">:</span><span class="kc">fixed</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">bottom</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">right</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span><span class="kc">none</span><span class="p">;</span>
            <span class="k">margin</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">overflow</span><span class="p">:</span><span class="kc">hidden</span><span class="p">;</span>
            <span class="k">z-index</span><span class="p">:</span><span class="mi">999999</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">goatcounter</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">path</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> <span class="o">+</span> <span class="nx">p</span> <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-goatcounter</span><span class="o">=</span><span class="s">&quot;https://analytics.xyzzyapps.link/count&quot;</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//analytics.xyzzyapps.link/count.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://blog.xyzzyapps.link/bitrhythm-submit-issue-feedback&quot;</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">&quot;0&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">iframe</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="javascript">
<h2>Javascript<a class="headerlink" href="#javascript" title="Permalink to this headline">¶</a></h2>
<p>This includes the functions used for parsing the pattern and initialising the samples.
A prelimnary sampler implementation has been done with AudioWorklet support, although there doesn’t seem to much improvement in the performance.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">getRandomInt</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">max</span><span class="p">);</span>
................................................................................
    <span class="nx">can_container</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">visualizer</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurn</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">createVisualizer</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">,</span> <span class="nx">can</span><span class="p">,</span> <span class="p">{</span>
        <span class="nx">height</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;header-playback&quot;</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">/</span> <span class="mf">2</span><span class="p">),</span>
        <span class="nx">width</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">,</span>
        <span class="nx">meshWidth</span><span class="o">:</span> <span class="mf">24</span><span class="p">,</span>
        <span class="nx">meshHeight</span><span class="o">:</span> <span class="mf">18</span><span class="p">,</span>
    <span class="p">});</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">connectAudio</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">.</span><span class="nx">destination</span><span class="p">);</span>
    <span class="kd">const</span> <span class="nx">presets</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurnPresets</span><span class="p">.</span><span class="nx">getPresets</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">presetParam</span> <span class="o">=</span> <span class="nx">presets</span><span class="p">[</span><span class="nx">preset</span><span class="p">];</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">loadPreset</span><span class="p">(</span><span class="nx">presetParam</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">);</span> <span class="c1">// 2nd argument is the number of seconds to blend presets</span>
    <span class="k">return</span> <span class="nx">visualizer</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">guard</span><span class="p">(</span><span class="nx">range</span><span class="p">)</span> <span class="p">{</span>







<
<
<
<
<







 







<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







 







<
<
<
<







 







>

|







 







>







 







<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







 







|







182
183
184
185
186
187
188





189
190
191
192
193
194
195
...
223
224
225
226
227
228
229















230
231
232
233
234
235
236
...
252
253
254
255
256
257
258




259
260
261
262
263
264
265
...
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
...
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
....
1083
1084
1085
1086
1087
1088
1089








































































































































































































































































































1090
1091
1092
1093
1094
1095
1096
....
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
            <div class="tocsection onthispage pt-5 pb-3">
                <i class="fas fa-list"></i> Contents
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">





 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#core-tracker-loop">
   Core Tracker Loop
  </a>
  <ul class="nav section-nav flex-column">
   <li class="toc-h3 nav-item toc-entry">
    <a class="reference internal nav-link" href="#observers">
................................................................................
   Worklet
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#sample">
   Sample
  </a>















 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#javascript">
   Javascript
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="code-walkthrough">
<h1>Code Walkthrough<a class="headerlink" href="#code-walkthrough" title="Permalink to this headline">¶</a></h1>




<div class="section" id="core-tracker-loop">
<h2>Core Tracker Loop<a class="headerlink" href="#core-tracker-loop" title="Permalink to this headline">¶</a></h2>
<p>In bitrhythm code is evaluated for every cycle.</p>
<p>1 beat = 60 / tempo
1 cycle = 1 beat / ticks</p>
<p>For every cycle visual and audio code is evaluated.</p>
<p>The edit checkbox allows you to perform long edits, where only old code is evaluated. Once you disable it, all the new edit changes are applied in the next cycle.</p>
................................................................................
<p>Sidechain compression is a simple algorithm which observes amplitude of another instrument but you can generalise it to anything. By attaching observers  to time or other instruments you can create sections within the song that can trigger others with conditional logic. This is similar to pure data’s bangs - <a class="reference external" href="https://www.youtube.com/watch?v=nTTZZyD4xlE">see this</a>. In future this will be referred to as side events. You could decrease the volume of the drums to have the snares drop automatically for example.</p>
<p>This is something that you can’t do in DAWs.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="k">async</span> <span class="nx">play</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">cellx</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">cellx</span><span class="p">.</span><span class="nx">cellx</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">$</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">;</span>

    <span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">resume</span><span class="p">()</span>
    <span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
    <span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">bpm</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">tempo</span><span class="p">;</span>
    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">swing</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="nb">window</span><span class="p">.</span><span class="nx">hit_map</span> <span class="o">=</span> <span class="p">{};</span>

    <span class="kd">var</span> <span class="nx">transition</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="p">}</span>
................................................................................

    <span class="kd">var</span> <span class="nx">bars</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">tick</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">quarter_beat_length</span> <span class="o">=</span> <span class="mf">60000.0</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">tempo</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">beat_length</span> <span class="o">=</span> <span class="nx">quarter_beat_length</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">beat_length</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">;</span>

    <span class="nb">window</span><span class="p">.</span><span class="nx">samples</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">samples</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">count</span> <span class="o">=</span> <span class="nx">count</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
    <span class="nx">tick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">count</span> <span class="o">%</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">tick</span> <span class="o">===</span> <span class="mf">0</span><span class="p">)</span> <span class="o">++</span><span class="nx">bars</span><span class="p">;</span>

................................................................................

    <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;mount&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="p">});</span>
   <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sample</span><span class="p">&gt;</span>
</pre></div>
</div>








































































































































































































































































































</div>
<div class="section" id="javascript">
<h2>Javascript<a class="headerlink" href="#javascript" title="Permalink to this headline">¶</a></h2>
<p>This includes the functions used for parsing the pattern and initialising the samples.
A prelimnary sampler implementation has been done with AudioWorklet support, although there doesn’t seem to much improvement in the performance.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">getRandomInt</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">max</span><span class="p">);</span>
................................................................................
    <span class="nx">can_container</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">visualizer</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurn</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">createVisualizer</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">,</span> <span class="nx">can</span><span class="p">,</span> <span class="p">{</span>
        <span class="nx">height</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;header-playback&quot;</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">/</span> <span class="mf">2</span><span class="p">),</span>
        <span class="nx">width</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">,</span>
        <span class="nx">meshWidth</span><span class="o">:</span> <span class="mf">24</span><span class="p">,</span>
        <span class="nx">meshHeight</span><span class="o">:</span> <span class="mf">18</span><span class="p">,</span>
    <span class="p">});</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">connectAudio</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">destination</span><span class="p">);</span>
    <span class="kd">const</span> <span class="nx">presets</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurnPresets</span><span class="p">.</span><span class="nx">getPresets</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">presetParam</span> <span class="o">=</span> <span class="nx">presets</span><span class="p">[</span><span class="nx">preset</span><span class="p">];</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">loadPreset</span><span class="p">(</span><span class="nx">presetParam</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">);</span> <span class="c1">// 2nd argument is the number of seconds to blend presets</span>
    <span class="k">return</span> <span class="nx">visualizer</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">guard</span><span class="p">(</span><span class="nx">range</span><span class="p">)</span> <span class="p">{</span>

Changes to build/html/samples.html.

187
188
189
190
191
192
193
194

195
196
197
198
199
200
201
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="samples">
<h1>Samples<a class="headerlink" href="#samples" title="Permalink to this headline">¶</a></h1>
<p>You can use Sample URL to add samples from anywhere. Currently there are three samples available from the main site for use in the demos.</p>

<ul class="simple">
<li><p>/Kick01.wav</p></li>
<li><p>/Snare19.wav</p></li>
<li><p>/Closedhat01.wav</p></li>
<li><p>/MiscSynthStab04.wav</p></li>
<li><p>/Perc11.wav</p></li>
<li><p>/PianoStab03.wav</p></li>







|
>







187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="samples">
<h1>Samples<a class="headerlink" href="#samples" title="Permalink to this headline">¶</a></h1>
<p>You can use Sample URL to add samples from anywhere. Use can use the sample browser to add some music radar samples.</p>
<p>Currently these samples are available for testing purposes, but in the future they might be removed.</p>
<ul class="simple">
<li><p>/Kick01.wav</p></li>
<li><p>/Snare19.wav</p></li>
<li><p>/Closedhat01.wav</p></li>
<li><p>/MiscSynthStab04.wav</p></li>
<li><p>/Perc11.wav</p></li>
<li><p>/PianoStab03.wav</p></li>

Changes to build/html/what.html.

196
197
198
199
200
201
202





203
204
205
206
207
208
209
...
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284




285
286
287
288
289
290
291
   ADC 2021
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration-for-the-project">
   Inspiration for the project
  </a>





 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#support-this-project">
   Support this project
  </a>
 </li>
</ul>
................................................................................
</ol>
<p>You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.</p>
<p>You can also use Bitrhythm for Live Coding and Algorithmic composition.</p>
</div>
<div class="section" id="adc-2021">
<h2>ADC 2021<a class="headerlink" href="#adc-2021" title="Permalink to this headline">¶</a></h2>
<p>I presented Bitrhythm in ADC ‘21 and the ICLC ‘21 for other audio developers.</p>
<p><a class="reference external" href="https://xyzzyapps.link/ADC21.pdf">Slides ADC ‘21</a>
Video - TBD</p>
<p><a class="reference external" href="https://xyzzyapps.link/ICLC21.pdf">Slides ICLC ‘21</a>
<a class="reference external" href="https://www.youtube.com/watch?v=LDQ1PMqZowQ">Video</a>  ~ 20 minute mark</p>
</div>
<div class="section" id="inspiration-for-the-project">
<h2>Inspiration for the project<a class="headerlink" href="#inspiration-for-the-project" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.</p>
<p>For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. <a class="reference external" href="https://www.youtube.com/watch?v=adz1Gv5Lm34">This library</a> in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.</p>
<p>After my initial work on the project in 2019, the project got sidetracked. After seeing <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a> I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.</p>
<p>The documentation for the literate programming project - wheel is <a class="reference external" href="https://xyzzyapps.link/wheel/">available here</a>.</p>
</div>




<div class="section" id="support-this-project">
<h2>Support this project<a class="headerlink" href="#support-this-project" title="Permalink to this headline">¶</a></h2>
<p>My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.</p>
<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>
<p>You can find me on <a class="reference external" href="https://theaudioprogrammer.com/">theaudioprogrammer</a>, demoscene and algorave discord as &#64;xyzzy.</p>
</div>
</div>







>
>
>
>
>







 







|

|









>
>
>
>







196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
...
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
   ADC 2021
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration-for-the-project">
   Inspiration for the project
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#license">
   License
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#support-this-project">
   Support this project
  </a>
 </li>
</ul>
................................................................................
</ol>
<p>You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.</p>
<p>You can also use Bitrhythm for Live Coding and Algorithmic composition.</p>
</div>
<div class="section" id="adc-2021">
<h2>ADC 2021<a class="headerlink" href="#adc-2021" title="Permalink to this headline">¶</a></h2>
<p>I presented Bitrhythm in ADC ‘21 and the ICLC ‘21 for other audio developers.</p>
<p><a class="reference external" href="https://xyzzyapps.link/ADC21.pdf">Slides ADC ‘21</a><br>
Video - TBD</p>
<p><a class="reference external" href="https://xyzzyapps.link/ICLC21.pdf">Slides ICLC ‘21</a><br>
<a class="reference external" href="https://www.youtube.com/watch?v=LDQ1PMqZowQ">Video</a>  ~ 20 minute mark</p>
</div>
<div class="section" id="inspiration-for-the-project">
<h2>Inspiration for the project<a class="headerlink" href="#inspiration-for-the-project" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.</p>
<p>For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. <a class="reference external" href="https://www.youtube.com/watch?v=adz1Gv5Lm34">This library</a> in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.</p>
<p>After my initial work on the project in 2019, the project got sidetracked. After seeing <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a> I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.</p>
<p>The documentation for the literate programming project - wheel is <a class="reference external" href="https://xyzzyapps.link/wheel/">available here</a>.</p>
</div>
<div class="section" id="license">
<h2>License<a class="headerlink" href="#license" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC-BY-NC-SA</a></p>
</div>
<div class="section" id="support-this-project">
<h2>Support this project<a class="headerlink" href="#support-this-project" title="Permalink to this headline">¶</a></h2>
<p>My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.</p>
<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>
<p>You can find me on <a class="reference external" href="https://theaudioprogrammer.com/">theaudioprogrammer</a>, demoscene and algorave discord as &#64;xyzzy.</p>
</div>
</div>

Changes to public/components/bitrhythm.tag.

299
300
301
302
303
304
305

306
307
308
309
310
311
312
313
314
...
343
344
345
346
347
348
349

350
351
352
353
354
355
356


async play() {
    var self = this;
    var cellx = window.cellx.cellx;
    var $ = jQuery;


    await Tone.start();
    Tone.Transport.start();
    Tone.Transport.bpm.value = this.state.tempo;
    Tone.Transport.swing.value = 0;

    window.hit_map = {};

    var transition = function () {
    }
................................................................................

    var bars = 0;
    var tick = 0;

    var quarter_beat_length = 60000.0 / this.state.tempo;
    var beat_length = quarter_beat_length * 4;
    var delta = beat_length / this.state.ticks;

    window.samples = this.state.samples;
    var eval_guard = false;
    self.timer = setInterval(function () {
    count = count + 1;
    tick = (count % this.state.ticks);
    if (tick === 0) ++bars;








>

|







 







>







299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
...
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358


async play() {
    var self = this;
    var cellx = window.cellx.cellx;
    var $ = jQuery;

    await Tone.context.resume()
    await Tone.start();
    await Tone.Transport.start();
    Tone.Transport.bpm.value = this.state.tempo;
    Tone.Transport.swing.value = 0;

    window.hit_map = {};

    var transition = function () {
    }
................................................................................

    var bars = 0;
    var tick = 0;

    var quarter_beat_length = 60000.0 / this.state.tempo;
    var beat_length = quarter_beat_length * 4;
    var delta = beat_length / this.state.ticks;

    window.samples = this.state.samples;
    var eval_guard = false;
    self.timer = setInterval(function () {
    count = count + 1;
    tick = (count % this.state.ticks);
    if (tick === 0) ++bars;

Changes to public/misc.js.

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - (document.getElementById("header-playback").clientHeight / 2),
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().rawContext.destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
    visualizer.loadPreset(presetParam, 0.0); // 2nd argument is the number of seconds to blend presets
    return visualizer;
}

function guard(range) {







|







11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - (document.getElementById("header-playback").clientHeight / 2),
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
    visualizer.loadPreset(presetParam, 0.0); // 2nd argument is the number of seconds to blend presets
    return visualizer;
}

function guard(range) {

Changes to source/alternate-implementation.md.

2
3
4
5
6
7
8


9
10
11
12
13
14
15

Here's some more demo songs from other systems

- <a href="https://www.youtube.com/watch?v=xXNB1BbKY8A">Foxdot and Python</a>
- <a href="https://www.youtube.com/watch?v=ALrgudRS2AQ">Csound</a>

The core ideas of bitrhythm are transferable to other languages as well. At most all you need is a music loop and samples to get started.



Here's a demo by SunVox's author ?

<iframe width="560" height="315" src="https://www.youtube.com/embed/8r8wsvHUbCo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

An example in C with raylib








>
>







2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Here's some more demo songs from other systems

- <a href="https://www.youtube.com/watch?v=xXNB1BbKY8A">Foxdot and Python</a>
- <a href="https://www.youtube.com/watch?v=ALrgudRS2AQ">Csound</a>

The core ideas of bitrhythm are transferable to other languages as well. At most all you need is a music loop and samples to get started.

A basic port to JUCE can be found [here](https://xyzzyapps.link/bitrhythm-alt).

Here's a demo by SunVox's author ?

<iframe width="560" height="315" src="https://www.youtube.com/embed/8r8wsvHUbCo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

An example in C with raylib

Changes to source/main.cog.

56
57
58
59
60
61
62

63
64
65
66
67
68
69
70
71
...
100
101
102
103
104
105
106

107
108
109
110
111
112
113
....
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
core_loop = """

async play() {
    var self = this;
    var cellx = window.cellx.cellx;
    var $ = jQuery;


    await Tone.start();
    Tone.Transport.start();
    Tone.Transport.bpm.value = this.state.tempo;
    Tone.Transport.swing.value = 0;

    window.hit_map = {};

    var transition = function () {
    }
................................................................................

    var bars = 0;
    var tick = 0;

    var quarter_beat_length = 60000.0 / this.state.tempo;
    var beat_length = quarter_beat_length * 4;
    var delta = beat_length / this.state.ticks;

    window.samples = this.state.samples;
    var eval_guard = false;
    self.timer = setInterval(function () {
    count = count + 1;
    tick = (count % this.state.ticks);
    if (tick === 0) ++bars;

................................................................................
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - (document.getElementById("header-playback").clientHeight / 2),
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().rawContext.destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
    visualizer.loadPreset(presetParam, 0.0); // 2nd argument is the number of seconds to blend presets
    return visualizer;
}

function guard(range) {







>

|







 







>







 







|







56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
...
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
....
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
core_loop = """

async play() {
    var self = this;
    var cellx = window.cellx.cellx;
    var $ = jQuery;

    await Tone.context.resume()
    await Tone.start();
    await Tone.Transport.start();
    Tone.Transport.bpm.value = this.state.tempo;
    Tone.Transport.swing.value = 0;

    window.hit_map = {};

    var transition = function () {
    }
................................................................................

    var bars = 0;
    var tick = 0;

    var quarter_beat_length = 60000.0 / this.state.tempo;
    var beat_length = quarter_beat_length * 4;
    var delta = beat_length / this.state.ticks;

    window.samples = this.state.samples;
    var eval_guard = false;
    self.timer = setInterval(function () {
    count = count + 1;
    tick = (count % this.state.ticks);
    if (tick === 0) ++bars;

................................................................................
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - (document.getElementById("header-playback").clientHeight / 2),
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
    visualizer.loadPreset(presetParam, 0.0); // 2nd argument is the number of seconds to blend presets
    return visualizer;
}

function guard(range) {

Changes to source/main.md.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
..
40
41
42
43
44
45
46

47
48
49
50
51
52
53
54
55
..
84
85
86
87
88
89
90

91
92
93
94
95
96
97
...
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
....
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248

# Code Walkthrough


## Running

ls source/main.cog | entr -r runserver.sh -b
## Core Tracker Loop

In bitrhythm code is evaluated for every cycle.

1 beat = 60 / tempo
1 cycle = 1 beat / ticks

................................................................................


async play() {
    var self = this;
    var cellx = window.cellx.cellx;
    var $ = jQuery;


    await Tone.start();
    Tone.Transport.start();
    Tone.Transport.bpm.value = this.state.tempo;
    Tone.Transport.swing.value = 0;

    window.hit_map = {};

    var transition = function () {
    }
................................................................................

    var bars = 0;
    var tick = 0;

    var quarter_beat_length = 60000.0 / this.state.tempo;
    var beat_length = quarter_beat_length * 4;
    var delta = beat_length / this.state.ticks;

    window.samples = this.state.samples;
    var eval_guard = false;
    self.timer = setInterval(function () {
    count = count + 1;
    tick = (count % this.state.ticks);
    if (tick === 0) ++bars;

................................................................................
    this.on("mount", function () {
    });
   </script>
</sample>
```


## App

```{code-block} hylang
---
force: true
---

(import [sanic [Sanic response]])
(import [sanic.response [json text]])
(import [sanic.exceptions [NotFound abort]])
(import [jinja2 [Environment FileSystemLoader]])
(import re)
(import ipdb)
(import sys)
(import traceback)
(import json)
(import datetime)
(import [email.utils [format_datetime]])
(import [urllib.parse [urlparse]])
(import base64)

(setv file-loader (FileSystemLoader "templates"))
(setv env (Environment :loader file-loader))

(setv app (Sanic "Bitrhythm"))

(with-decorator
  (app.exception NotFound)
  (defn/a ignore_404s [request exception]
    (return (text (+ "Yep, I totally found the page " request.url)))
  )
)

(with-decorator
  (app.route "/song/<name>")
  (defn/a get-index [request name]
    (setv template (env.get_template "index.html"))
    (return (response.html (template.render {"data" name})))
  )
)

(with-decorator
  (app.route "/")
  (defn/a get-index [request]
    (setv template (env.get_template "index.html"))
    (return (response.html (template.render {"data" ""})))
  )
)

(with-decorator
  (app.route "/issue")
  (defn/a get-index [request]
    (setv template (env.get_template "page.html"))
    (return (response.html (template.render)))
  )
)

(app.static "/" "./public")

(defmain [&rest args]
    (app.run :host "0.0.0.0" :port 8015)
)

```


## Index

```{code-block} html
---
force: true
---

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>Bitrhythm</title>

        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />

        <meta content="Bitrhythm" name="description" xml:lang="en" lang="en">
        <meta content="literate programming, p5, live coding, algorave, demoscene, creative programming, music, techno, programming, webaudio, webgl, p5, improvising">

       ${common_scripts}

        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.6/micromodal.min.js" integrity="sha512-RMMh+IHzfZLsVFo1rX9PBoysxrJJqjyOS31HYWftobWtv2At6KBTqKpvVDIWAjL5aiV+LjFqkQ6e53Rdw3VOBg==" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/whenipress@1.8.0/dist/whenipress.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js" integrity="sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw==" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css" integrity="sha512-IXuoq1aFd2wXs4NqGskwX2Vb+I8UJ+tGJEu/Dc0zwLNKeQ7CW3Sr6v0yU3z5OQWe3eScVIkER4J9L7byrgR/fA==" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/themes/default.min.css" integrity="sha512-RgUjDpwjEDzAb7nkShizCCJ+QTSLIiJO1ldtuxzs0UIBRH4QpOjUU9w47AF9ZlviqV/dOFGWF6o7l3lttEFb6g==" crossorigin="anonymous" />

        <script src="/json-url-master/dist/browser/json-url.js"></script>
        <script src="/riot-3.13.2/riot+compiler.js"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" integrity="sha512-RntatPOhEcQEA81gC/esYoCkGkL7AYV7TeTPoU+R9zE44/yWxVvLIBfBSaMu78rhoDd73ZeRHXRJN5+aPEK53Q==" crossorigin="anonymous" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://esironal.github.io/cmtouch/lib/codemirror.css">
        <link rel="stylesheet" href="https://esironal.github.io/cmtouch/addon/hint/show-hint.css">
        <script src="https://esironal.github.io/cmtouch/lib/codemirror.js"></script>

        <script src="https://esironal.github.io/cmtouch/addon/hint/show-hint.js"></script>
        <script src="http://esironal.github.io/cmtouch/addon/hint/xml-hint.js"></script>
        <script src="https://esironal.github.io/cmtouch/addon/hint/html-hint.js"></script>
        <script src="https://esironal.github.io/cmtouch/mode/xml/xml.js"></script>
        <script src="https://esironal.github.io/cmtouch/mode/javascript/javascript.js"></script>
        <script src="https://esironal.github.io/cmtouch/mode/css/css.js"></script>
        <script src="https://esironal.github.io/cmtouch/mode/htmlmixed/htmlmixed.js"></script>
        <script src="https://esironal.github.io/cmtouch/addon/selection/active-line.js"></script>
    <script src="https://esironal.github.io/cmtouch/addon/selection/mark-selection.js"></script>

        <script src="https://esironal.github.io/cmtouch/addon/edit/matchbrackets.js"></script>
        <link rel="stylesheet" href="https://esironal.github.io/cmtouch/theme/neonsyntax.css">
        <link rel="stylesheet" href="https://unpkg.com/pyloncss@latest/css/pylon.css"/>


        <script src="/tune.js"></script>
        <script src="/misc.js"></script>

        <style type="text/css">
body {
    background: black;
    color: white;
    font-family: 'Roboto Mono', monospace;
    overflow-x: hidden;
}

a {
    color: white;
}

input {
    color: black;
}

.btn {
    background: white;
    color: black;
    padding: 4px;
}

.CodeMirror-selected  { background-color: transparent !important;   z-index: 20 !important; }

.CodeMirror-selectedtext {
    color: red !important;
     z-index: 25 !important;
}

.CodeMirror pre {
  z-index: 5;
  background: black;
  padding: 2px;
}

.CodeMirror-cursor {
  border-left: 2px solid white !important;
  z-index: 10 !important;
  color: white !important;
  background: white !important;
}

.CodeMirror-line span {
  color: white !important;
}

.CodeMirror-line > span {
  background: black;
  padding: 0 !important;
}

.CodeMirror-lines {
  padding: 0 !important;
}


.CodeMirror {
    font-size: 12px;
    width: 100%;
    padding-left: 4px;
    line-height: 1;
    background: transparent !important;
    color: white !important;
    font-family: 'Roboto Mono', monospace !important;
}

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.CodeMirror-cursor {
  border-left: 2px solid white !important;
}



        </style>

        <script type="riot/tag" src="/components/bitrhythm.tag"></script>
        <script type="riot/tag" src="/components/dial.tag"></script>
        <script type="riot/tag" src="/components/sample.tag" ></script>
        <script type="riot/tag" src="/components/number.tag" ></script>

    <script type="text/javascript">
            var _paq = window._paq = window._paq || [];
    _paq.push(['trackPageView']);_paq.push(['enableLinkTracking']);_paq.push(['alwaysUseSendBeacon']);_paq.push(['setTrackerUrl', "\/\/blog.xyzzyapps.link\/owoamims\/matomo\/app\/matomo.php"]);_paq.push(['setSiteId', '1']);var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src="\/\/blog.xyzzyapps.link\/oozotche\/matomo\/matomo.js"; s.parentNode.insertBefore(g,s);
    </script>

    </head>

    <body>
        <div class="containera-full">
            <hstack class="mb-2">
                <h5 class="ml-4"><a href="/docs/index.html" target="_blank">docs</a></h5>
                <h5 class="ml-4"><a  href="/song/XQAAAAJwFAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9NTfIT-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YnQ2gSfpzY3zlYLujavQRq73hSEM-RaGxTxuud9nauG_VdXCmE_lvZ88XvUHOIGjOkCUKV-1ot3i9fx5NP-UsUmVpnjUDnq_9eUJfonx5B_oG4c3GvLitNREl_O9emU8CST0v5RVqHSudqZqsrortpDjdMlekhQ2y7ZlNcUDjGoTrH4vFMrLVI60wINoufS0iO6ourxizS1Ifv_iirkdP0U0Zp21rHHKXlwhWG0hmTCxYo8ZIf0Cmbiu22GiFFmRfIcuWbcq-_SWdyMJ0sWIslhKpGFEapN604eNblpy5im2PsItjWScu-cS0JI3zeHb8JMNzWflq0-XWHG5WLsmPqCbn3GgfR6BiAx1ApmTui84WXgX6SuJPkXRqHEOKpBZ4dKEPr5P_-DDpwz0L7i8X_FHE-LBMactDBoKgIbIoyVnRe6DJ9s5AZLJjUrWGGVCLcp5bEKOnH_3HfZuDq9UlOvZRVkz3BwpUeajLeUJcAYxDmU2JbNUaipMJN7LF9YAX2LaT44LACw2A7Is-pQ_EGznjhEo7SS7JusQPN6G43g4OUZSUY5WNlPUCWfXSeWNU0Xx_-b4r6t4HHQS2P2stIQOS96JqLzXrx-Q62Y8RSRIvieE76j_-dw4icTDiATfx8doLkSzXgOzNTcZYume2cHLEG-0TbgR1M6WCPiH4pvHIRfcTxEDZK5b7iqIhY0MNW8Kkyn7KFVqQf_5d_msiv57DWIHg6Qi6cmBdOF0Li_CY8kFBV4BWLsOlanN6_hehIREVU8WgWbM9rdrKcqzhHD8Fp5qTmbyiVnjD83BDhKY5zwF8xFM1p7ZmEjlIF1ag62BDRt5j_MZ9q5COsX9gpV6DfA0FaDwyOmkMsOFiGeUNIr8B_ENYG-EpYbhUHZukv-QttcjFwRypF1eSN3DMrGUm1eB62PW3s--XcugwT5GJQRa66WZF4DZzPPTKEZhtNL28KgBcHm3DeuSfN_HRsgBW1o2YDpM1QP-K0aedKB_umlWhdBze7Gs72-vDfjB6LGI__tncLNS3GaqYaltFnzc64EOV-mz1xvlyAuFSj-T8r8e5ebJky7o6PZXPTvvCLeTL056Tpp-Gh-WgxmyMISIhkb5kKPj235H7OY-JAoT28VVrA01WpXoArOJaE2ijBt2oLOYXwWiO1hUI3NtTO2vI__sllxHNHS6EiHXPyLj8_PGF47RUq7oc-9ibiF9FUuoonMLE0PwyGOUJ6LU9SDb4FLPwk0gJBP4GiWLftvfErrXDNck9O6_JZvpJ_9O5qmNDUge5yDYbO__vJejx0bomU7eG2kuvPAmGtiWrYo8B_3JoEAOMgVa9SxE4kZ-ijdh-glIKredlMCUG5eYJc-6H_94pteyO-ocB8rrlfSGr6M2r9xlbeMecCvJTRjmwMbB12DWGbDq5Sxn8tgX98O9lT-51_oajqKVMmox3f7kXhsJPxyIMsUaVVFRmpPJvMt5nt9-i1Vgmux4a3t7a1oVPdN35POOjun63NkyODKhTUHmjdC7h9tv6ZI8WPf2Gh9__k6qf5xp3u3OjzkISj7ainHooji_3Cnjm3T30e6pm3MhliJg1ezFi8NetUwwYZz6UNCMOTUaWAqJ5BmF2hAh5Sdsog93orRvrOuPTNhRA1Wlyjrsy8zVW3WlO4chcKVYA0OsH1Zwjo7koXbfX7ERrPnAbZsWfkPePwI4to-KuPF1v0U4jwFelzwn3n4C1E2BkqPfNcvnVlFDmPHlyOCZHrfsrG9GUPsCrZdrX2EHiWH_bRkXVJwkHTLir8d_cjI0DIrVYji4XBIDX9Pmt-0ylr0FeHLXVHNb4Q7V--3d4-mJ2zXsZDR97M_ikaQVHZBWcKnyWmx_aPoWKnFYkk_6PbR246YU3fViA9PdZKTYrN2B3KmcrliH2T2YRcRdWQGxXlXZh3Bsd5PtOC1EuV7-DHlkI67D6V-AFScJfdj64Pv1wKwGQZ7lEZtrmv_VVRmkWYWFtbBj5HHnth1sKhBjVgGIVH74y9b0hHjpo5kw-1_3jNZ1ooxp-y8FTHblmSkSoQe8bey9XQ7BxGbUPsG0X5LfT8FpZH36A6Vz6nedFEvuoQCyV55qcnDD5IKsJeyKZz1ugrYGoZIfJMr1XTiulWUiaxeat7Q6Xq1YXOjvWV7ki_w4m__-wVP5g">techno</a></h5>
                
                <h5 class="ml-4"><a  href="/song/XQAAAAIbCAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9OTB7Y34cZmeLb5MKZic7bXMO7vWrjHyfc2FvIP0v1Gp--NY5tUsY7sQ71Zzph5WmKUZ2oNtnxz8-HaVpK1SGQzEOq3-lWkeJ76a2J8Ng2OEZxOMNAk6VTnu8fRRTToMlowDe3wjs8DorsxdnW49ThFhGbOek4QAwzPneapDmjuDKRqiqN3btgnfZDzokeOTh6CzwAI2rBbL07YUBEFaMziOJ_2X59fYBPM3eCnL7GlOCk2u6_22WnYgZPbc3RuJLf8JLAhbDrXvZHyYekrPuGo_R6V2BCPE14rZFFwJQWEqy_KDtH_YPMhj1TPS62qcPr6qAWrI9nsndpRrczwBFChHSPKiZXjCZJZKH1Kh19A4-vpXwbr1BCiNdOTQ89KKv0OXpIFUMwx5Qd5jsrb2c-hywM688ClZ86A5o4KzrE2xjG4VbcexmPdOXS-K6PRU4c6dJOUClOLNZpbmZvL8Bo4ep67wL0bFEOMqhN30pLGmZlnfd5mgH8J9dPrGsEglKLGskQ_g2vEeR9CzOstzctjCKtL1O8oNkSuCnXSGE0uY5rxGmBu7AW99tRx0i8hNzB4l1S1mxnzkLefi9VM6YYZraX7T2kGnRgD5HOg0WH2LeUsVuWpnp189Ph_Os95_XUVBc67TwU8IWbzat1decCt0jKKP13L7a0OCO18Fq2DVr9veHq2mRepiObWGsYcqjXkUNjaxoItg_pWdK6gyveVXjfs3PaJ477UbpiZBWxoc-Ebn8FZu6bZZ4gOZE-MoJHUDiQZgo3-lirXTvpcpsgsaIUESDAcGUNE4aIK6wIFGnEaEFYo4veQqTLeic4NhPtUpTdfRqdNTKOaVSUE_KGXKXaZl0Eni1DBmEGykml4uxHsWBEE44Ku34YIb6KZUcCu2DuXDiXcbabsWkA-czXWBtRnzWJ6ib4scny1o6CsVnugUjE9wv84bz2">chiptune</a></h5>

                <h5 class="ml-4"><a  href="/song/XQAAAAKJCAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQFgmT-79BTKosH6Xje2IYnNRgEOpeuhg8jahOEd3yMC_PXFq-i_ClvL8Ct3Wgf6uJb5dmDYwtUHkddL3DLEcA0AoD3rP_ZyA1lDuiOOQJSJIeDylz8ajg_yNsR8119StK7SE1-QOm5OZus7ISs3-UqjsX1W0VSZeoF1ebH8hgDFisSvjykmfW2_oDLr6axQL5meUVvESZBQhe4lE78iytxrPrbhjdx5v4qwKWbDGm2pSdeuz9FMGq63DfpnbAy-RHVY3dCDCZIYzOvwfOOR1QV0McEXIqbGpLzRcvIOe5TUnaGKm7qaQqHhDyjt5rL0jFxioR5yKnUAp0gL6zy5TLqRS80CIiz0dj0Na63UxYtPLpf4vWqOJFX6VZpTFRC7o1W8TmeheEr_UgpXblHVIdg8zUP69XACKo_X7MJ-g9-s5ejXxeCWt5YZ-T8-kFbDX-bFQsov0C5k2SMdsTF5IzBulC3aL6-2Mazf5wVU16v-r9t6-U0iaQCqL8UYXUlr9abJSXOYkzSax56PzZiPzRzDv1Sj8QhsZ3xdFXfXNe-3F5o4YjXZ9JwptVwQLaj3UcPvkB4_Eow3JC7mPStctj2RooSef63tbMlp_7YBzaIjRnjJp2n9m11_606XGaYn1JpXMq2Garz3FUYUCXkNziILJlMaKBPqh8GdHdR01bN3G2AcmJTKfppvrY4-TJqzwcQodEU7aiVmiMwbW0Gj9JRcA3tLOZ6EbzsaGxqB_z4gCMnZ7aYzaGXLI7R5ACSC8znneiNZH5_k3kmHB65_8-STam5BnbRBaO0EDSZLlMH4EeA5TUQbfxwBYXvbNX2QWqF5cwHg1S7i9RPr_VBAkC5WZNTYZlNmI1xWkYyli_pstNWBxrmj4ujztca0Fg8RScocAP3YADqMXt73EEMXyqP_y54UwA">blank</a></h5>

                <h5 class="ml-4"><a  href="/song/XQAAAAL6DwAAAAAAAABDKUqGU5vI8Nuv2pxqeIybGqtJ0xIrSiobr98sdE7afj4Ar4jJq-8ql_W1_78a1_GXYU33QxiTtAV7SHRYdH6zp0CULZjCAn80UrL_cbk6C8SsOzgqMzV6zYkOLvG-fjZLi8LWC9mF2G1PfJaZ22MmMGC7XZiRMvuGgg9IXd6TYK8ymyJSEN8Xog0gS6esuZ-sV6WeWPyMk_80foxigbnhHOeWNjqTD3MHSKVhooDpOdlhHDE9Ym1lf1oXKJyd1nzIropiCpnzQhRx4VLOvptpUX9SPI8JfnOttZoK7-a-lbvVzgBRMrqzxMNO_Td-HNS-tmg3EhtJfpMHKvxFMaPkg0EusLRyP-FAPkl0N3Abu0-nyU14Ayniw1uEDi4tCwYvGQjE5FDxcOEAq0gm3NhikcGkInjkKD7Xhi9SKBshXapQ07ZcykBWOUNWiTQAWTyMwF4iQ2QQPlgV1pwOSSVp-sXJIwbsQFxnlV_wEdMZUF6a8JafjOXzkhYwDVoDVAoa7TAZdjxtIQf7ZIcr0einkkr79XkfkYr2Be38bAyG-KFPRL1L9Oc41gE36Wd6L3oEKuEI-oMYXp5IWlCC_sAyuOBNQsHYoZk8vxByQ8UNbLLOJ74GsYDEfGccM5THthnFOJmGz3h0eOAvxRkTXK1K7vr7ZASa1ijNatkfI2FGrAEJ8UN1aCbYz9YQbIQMfbLw5gzQCu7gUtzcaIx0YuTTJ3AjDw6hklmNmOP8Oefj-eJo4n4aOk6V3pB7n2Xc2S05-FxOA3iPujsa7r9QRJ7Rm1kfzgIhw1VoCJjFa7GSGfwccF9FiQtaNOuUWykmf7Nce2zFokkQGxSUa3Xm9q36L5zsOM-QXFDuQFWW1YBPk-ew8uosMorAkISE3VG46VqdkuMGhkGjqWKqv4XB7djOJXaQZRYIEgIpg5d6LXYpFw6OzjJZes3sS4CD4hMdzNU5OmyUmpgi9KMd9j4aGWH8Dku8bbw49Uz8UTlhGiBpuHlxzHV_g6sGnw-IdJ3RA1ylVOcU5uwXIJ5144iXmKa2LB5UhPepG1vclcm7lIWfEB3hOxpbbqS-9epGLWsYHJ8x70gRNZIdwm2HhdKpfl-8h-uXrsSfbyyQgcaWRJoVYpjqYwkld84551DwiYEWNgPMlqBHjo7Ug7R0NyQe2DcQ8UiWTDvAseVTKqVfQwv1dBHkJVGucDrdvBfoHm6_JyvCeBLdNxRP2FJEBQ_kow5_r7ESFzQZ8Bk7vr74dkxDBXdkSjr9rV6ElS0s_tS1NwrniHuI9SlQirUE775b3V8Wjnt-SMdwRRpMZHIBHntb_XDuJfRYYka_cCA1PNnP99R1VyKPypgUraZhqT_LwF7VQGnEWliiCRBhJkh4Npzu3lTHFQ7h1tduH3x12EUeHAviYg3GSuSG7t2gXd_XkTTJ6EugOt2p0Y1_CG8vG94s7k3DVJFWeMHQMW_naSbFJs4zyFDr7X8rfU5nJ1KABNH_wkrR2cLRxCCq95kzE4gahZyfOTKtfp-un1TMFTmJ0PWdbS67hxFTOhRrCYKoKsg62R14OJ6R_NbmhFin8mjwhFBLQK-n8_BuFwYTrUSYBh3k_gF1ZP68_0Kyf2d7o190dK1N6m5Qk-KcNujqiIgfzy0NeRcALL1oW97T7P29fOpEELXwVxuBY89yGi5TO_R7DUXEiCmEBFAmOB4EJMigVW6UJwSMR05gOBaaov1HBEmADf4MVM54b8H1EVXAMzzwszVKBPplb6ZbEkad1JYuzF9Wc2l07vsMLAzymm3Y2gkjv9GZo9biCDSLbFpacBJfqJF3xvr_-98Bs5-fnveqXf3IbAEVXZ3X_2SjoXPmlg0m_9usiW95hbOMd7pxNKla8u8nOu8r9vkLqqKg_yBHdnTbHThqEgGRPmpcVB8x3P5DZ5sHAWg2k1mubUuuI9aycC-b1qMOPu5y8_bPvXK5uGpEpmoXqbRSlqMLxUrpRPIjOoTPjBc8BciARAkj1yXYWfJ5umO32LMrCaJSi3AO5v_K95FVKT3wnE4x3Ra1yU3CcuXKlFrWrUlWWXGHYS7tXc7YL7Ik5jvI8g3oJeS4LaFMc5WxyzzguEUaO-FxRzVU6kgN_9Yddrg">stochastic</a></h5>

                <h5 class="ml-4" ><a href="https://xyzzyapps.link/samples/" target="_blank">sample browser</a></h5>
            </hstack>

            <bitrhythm song="{{data}}"></bitrhythm>
        </div>

    <script>
        riot.compile(function() {
            var bitrhythm = riot.mount('bitrhythm');
            window.bitrhythm = bitrhythm[0];
            var dial = riot.mount('dial');
            var number = riot.mount('number');
            var sample = riot.mount('sample');
        })
    </script>


    </body>

</html>


```
    



## Page

```{code-block} html
---
force: true
---

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <title>About birthythm</title>
        <link rel="icon" href="favicon.ico">
        <style>
        html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            padding: 0;
        }
        iframe {
            position:fixed;
            top:0;
            left:0;
            bottom:0;
            right:0;
            width:100%;
            height:100%;
            border:none;
            margin:0;
            padding:0;
            overflow:hidden;
            z-index:999999;
        }
        </style>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        <script>
            window.goatcounter = {
                path: function(p) { return location.host + p }
            }
        </script>
        <script data-goatcounter="https://analytics.xyzzyapps.link/count" async src="//analytics.xyzzyapps.link/count.js"></script>
    </head>
    <body>
        <iframe src="https://blog.xyzzyapps.link/bitrhythm-submit-issue-feedback" frameborder="0"></iframe>
    </body>
</html>

```
    

## Javascript

This includes the functions used for parsing the pattern and initialising the samples. 
A prelimnary sampler implementation has been done with AudioWorklet support, although there doesn't seem to much improvement in the performance.

```{code-block} js
................................................................................
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - (document.getElementById("header-playback").clientHeight / 2),
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().rawContext.destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
    visualizer.loadPreset(presetParam, 0.0); // 2nd argument is the number of seconds to blend presets
    return visualizer;
}

function guard(range) {



<
<
<
<







 







>

|







 







>







 







<

<
<
<
<

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<







 







|







1
2
3




4
5
6
7
8
9
10
..
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
...
888
889
890
891
892
893
894

895




896





















































































































































































































































































































897
898
899
900
901
902
903
...
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932

# Code Walkthrough





## Core Tracker Loop

In bitrhythm code is evaluated for every cycle.

1 beat = 60 / tempo
1 cycle = 1 beat / ticks

................................................................................


async play() {
    var self = this;
    var cellx = window.cellx.cellx;
    var $ = jQuery;

    await Tone.context.resume()
    await Tone.start();
    await Tone.Transport.start();
    Tone.Transport.bpm.value = this.state.tempo;
    Tone.Transport.swing.value = 0;

    window.hit_map = {};

    var transition = function () {
    }
................................................................................

    var bars = 0;
    var tick = 0;

    var quarter_beat_length = 60000.0 / this.state.tempo;
    var beat_length = quarter_beat_length * 4;
    var delta = beat_length / this.state.ticks;

    window.samples = this.state.samples;
    var eval_guard = false;
    self.timer = setInterval(function () {
    count = count + 1;
    tick = (count % this.state.ticks);
    if (tick === 0) ++bars;

................................................................................
    this.on("mount", function () {
    });
   </script>
</sample>
```































































































































































































































































































































## Javascript

This includes the functions used for parsing the pattern and initialising the samples. 
A prelimnary sampler implementation has been done with AudioWorklet support, although there doesn't seem to much improvement in the performance.

```{code-block} js
................................................................................
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - (document.getElementById("header-playback").clientHeight / 2),
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
    visualizer.loadPreset(presetParam, 0.0); // 2nd argument is the number of seconds to blend presets
    return visualizer;
}

function guard(range) {

Changes to source/what.cog.

36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58




59
60
61
62
63
64
65
66

You can also use Bitrhythm for Live Coding and Algorithmic composition.

## ADC 2021

I presented Bitrhythm in ADC '21 and the ICLC '21 for other audio developers.

[Slides ADC '21](https://xyzzyapps.link/ADC21.pdf)
Video - TBD

[Slides ICLC '21](https://xyzzyapps.link/ICLC21.pdf) 
[Video](https://www.youtube.com/watch?v=LDQ1PMqZowQ)  ~ 20 minute mark

## Inspiration for the project

I make [web apps](https://xyzzyapps.link) for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.

For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. [This library](https://www.youtube.com/watch?v=adz1Gv5Lm34) in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.

After my initial work on the project in 2019, the project got sidetracked. After seeing [endless acid banger](https://www.vitling.xyz/toys/acid-banger/) I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.

The documentation for the literate programming project - wheel is [available here](https://xyzzyapps.link/wheel/).





## Support this project

My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.

<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>

You can find me on [theaudioprogrammer](https://theaudioprogrammer.com/), demoscene and algorave discord as @xyzzy.








|


|












>
>
>
>








36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

You can also use Bitrhythm for Live Coding and Algorithmic composition.

## ADC 2021

I presented Bitrhythm in ADC '21 and the ICLC '21 for other audio developers.

[Slides ADC '21](https://xyzzyapps.link/ADC21.pdf)<br>
Video - TBD

[Slides ICLC '21](https://xyzzyapps.link/ICLC21.pdf)<br>
[Video](https://www.youtube.com/watch?v=LDQ1PMqZowQ)  ~ 20 minute mark

## Inspiration for the project

I make [web apps](https://xyzzyapps.link) for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.

For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. [This library](https://www.youtube.com/watch?v=adz1Gv5Lm34) in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.

After my initial work on the project in 2019, the project got sidetracked. After seeing [endless acid banger](https://www.vitling.xyz/toys/acid-banger/) I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.

The documentation for the literate programming project - wheel is [available here](https://xyzzyapps.link/wheel/).

## License

[CC-BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/4.0/)

## Support this project

My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.

<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>

You can find me on [theaudioprogrammer](https://theaudioprogrammer.com/), demoscene and algorave discord as @xyzzy.

Changes to source/what.md.

55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77




78
79
80
81
82
83
84
85

You can also use Bitrhythm for Live Coding and Algorithmic composition.

## ADC 2021

I presented Bitrhythm in ADC '21 and the ICLC '21 for other audio developers.

[Slides ADC '21](https://xyzzyapps.link/ADC21.pdf)
Video - TBD

[Slides ICLC '21](https://xyzzyapps.link/ICLC21.pdf) 
[Video](https://www.youtube.com/watch?v=LDQ1PMqZowQ)  ~ 20 minute mark

## Inspiration for the project

I make [web apps](https://xyzzyapps.link) for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.

For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. [This library](https://www.youtube.com/watch?v=adz1Gv5Lm34) in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.

After my initial work on the project in 2019, the project got sidetracked. After seeing [endless acid banger](https://www.vitling.xyz/toys/acid-banger/) I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.

The documentation for the literate programming project - wheel is [available here](https://xyzzyapps.link/wheel/).





## Support this project

My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.

<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>

You can find me on [theaudioprogrammer](https://theaudioprogrammer.com/), demoscene and algorave discord as @xyzzy.








|


|












>
>
>
>








55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

You can also use Bitrhythm for Live Coding and Algorithmic composition.

## ADC 2021

I presented Bitrhythm in ADC '21 and the ICLC '21 for other audio developers.

[Slides ADC '21](https://xyzzyapps.link/ADC21.pdf)<br>
Video - TBD

[Slides ICLC '21](https://xyzzyapps.link/ICLC21.pdf)<br>
[Video](https://www.youtube.com/watch?v=LDQ1PMqZowQ)  ~ 20 minute mark

## Inspiration for the project

I make [web apps](https://xyzzyapps.link) for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.

For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. [This library](https://www.youtube.com/watch?v=adz1Gv5Lm34) in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.

After my initial work on the project in 2019, the project got sidetracked. After seeing [endless acid banger](https://www.vitling.xyz/toys/acid-banger/) I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.

The documentation for the literate programming project - wheel is [available here](https://xyzzyapps.link/wheel/).

## License

[CC-BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/4.0/)

## Support this project

My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.

<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>

You can find me on [theaudioprogrammer](https://theaudioprogrammer.com/), demoscene and algorave discord as @xyzzy.

Changes to wheel.sh.

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
#!fish

set DEV "1"

function build
    kill -9  (cat ./pidfile)
    rm source/main.md
    rm source/what.md

    ./env/bin/cog --markers="@< @> @@" -D DEV=$DEV -d source/main.cog > source/main.md

    ./env/bin/cog --markers="@< @> @@" -D DEV=$DEV -d source/what.cog > source/what.md
    hy bitrhythm.hy &
    set PID %1
    rm -rf build
    make html
    echo $PID > ./pidfile
end

function final
    set DEV "0"
    build
end

function pack
    rm bitrhythm.tgz
    gtar  -czv --exclude "public/closed" --exclude "presentation" --exclude "_sources" --exclude "searchindex.js" --exclude ".DS_Store" --exclude "*.inv" --exclude "__init__.py" --exclude "doctrees"  --exclude "__pycache__" --exclude "*.tcl" --exclude "*.tgz" --exclude "draft" --exclude "*env*" --exclude "tags" --exclude "tags.*" --exclude "*.git" -f bitrhythm.tgz .




















end


switch $argv[1]


        case "--prod"
            final
        case "--dev"
            build



        case "--zip"
            pack
end







<


>
|
>
|
<
|
|
|
<









|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>


>

>
>




>
>
>





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
58
59
60
61
62
#!fish

set DEV "1"

function build

    rm source/main.md
    rm source/what.md
    for f in source/*.cog
        set rootname (echo $f | sed 's/\.[^.]*$//')
        safe-rm $rootname.md
        ./env/bin/cog --markers="@< @> @@" -D DEV=$DEV -d $f >  $rootname.md

    end
   rm -rf build
   make html

end

function final
    set DEV "0"
    build
end

function pack
    rm bitrhythm.tgz
    set array   --exclude "*.pyc" \
            --exclude "*.tgz" \
            --exclude "_sources" \
            --exclude "searchindex.js" \
            --exclude "public/closed" \
            --exclude "presentation" \
            --exclude ".DS_Store" \
            --exclude "*.inv" \
            --exclude "*.tcl" \
            --exclude "draft" \
            --exclude "doctrees" \
            --exclude "__pycache__" \
            --exclude "*env*" \
            --exclude "tags.*" \
            --exclude "tags" \
            --exclude "__init__.py" \
            --exclude ".fossil-settings" \
            --exclude ".fslckout" \
            --exclude ".git"

    gtar -czv $array -f bitrhythm.tgz .
end


switch $argv[1]
        case "--build"
            build
        case "--prod"
            final
        case "--dev"
            build
            hy bitrhythm.hy &
            set PID %1
            echo $PID > ./pidfile
        case "--zip"
            pack
end