⌈⌋ ⎇ branch:  Bitrhythm


Check-in [fa4745a0a7]

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

Overview
Comment: Added cue Changed Support link Working example for p5 Added dsl for tracking Added autocommit Various Fixes for Save Improve Docs and Bookmarks WebGL Demo
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: fa4745a0a7882de1fca2bd7aaa8a19b7722c83dcddc9cb380b95e806985a5dae
User & Date: dev 2021-11-08 06:21:09
Context
2021-11-13
18:29
Minor updates check-in: f4bfc3000a user: dev tags: trunk
2021-11-08
06:21
Added cue Changed Support link Working example for p5 Added dsl for tracking Added autocommit Various Fixes for Save Improve Docs and Bookmarks WebGL Demo check-in: fa4745a0a7 user: dev tags: trunk
2021-10-12
03:29
Added cue Changed Support link Working example for p5 check-in: 414174737a user: dev tags: trunk
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Added autocommit.py. 































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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


import time
from watchdog.observers import Observer
from watchdog.events import RegexMatchingEventHandler
import os

def on_created(event):
    print(f"{event.src_path} has been created")
    os.system(f"git add {event.src_path}")
    os.system(f"git commit -m '{event.src_path} created'")

def on_deleted(event):
    print(f"Delete {event.src_path}!")
    os.system(f"git commit -m '{event.src_path} deleted'")


def on_modified(event):
    print(f"{event.src_path} has been modified")
    os.system(f"git add .")
    os.system(f"git commit -m '{event.src_path} modified'")

if __name__ == "__main__":
    # create the event handler
    ignore_patterns = [r"^.+/\.git.*"]
    ignore_directories = False
    case_sensitive = True
    my_event_handler = RegexMatchingEventHandler(ignore_regexes=ignore_patterns, ignore_directories=ignore_directories, case_sensitive=case_sensitive)

    my_event_handler.on_created = on_created
    my_event_handler.on_deleted = on_deleted
    my_event_handler.on_modified = on_modified

    # create an observer
    path = "."
    go_recursively = True
    my_observer = Observer()
    my_observer.schedule(my_event_handler, path, recursive=go_recursively)

    my_observer.start()
    try:
        while True:
            time.sleep(5)
    except:
        my_observer.stop()
        print("Observer Stopped")
    my_observer.join()

Changes to build/html/_static/analytics.js. 

1
2

3

window.goatcounter = {
    path: function(p) { return location.host + p }

}

|
|
>
|

1
2
3
4

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);

Changes to build/html/_static/custom.css. 

1
2
3






.custom-nav-footer {
    margin-top: 8em;
}









>
>
>
>
>

1
2
3
4
5
6
7
8

.custom-nav-footer {
    margin-top: 8em;
}

.highlight .err {
    color: black !important;
    border: 0px solid !important;
}

Added build/html/alternate-implementation.html. 























































































































































































































































































































































































































































































































































































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alternate Implementations &#8212; Bitrhythm&#39;s literate documentation</title>
    
  <link href="_static/css/theme.css" rel="stylesheet" />
  <link href="_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css" rel="stylesheet" />

    
  <link rel="stylesheet"
    href="_static/vendor/fontawesome/5.13.0/css/all.min.css">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-solid-900.woff2">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2">

    
      

    
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/sphinx-book-theme.e8e5499552300ddf5d7adccae7cc3b70.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="_static/custom.css" />
    
  <link rel="preload" as="script" href="_static/js/index.1c5a1a01449ed65a7b51.js">

    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Saving and Sharing" href="saving.html" />
    <link rel="prev" title="Concepts and Code Walkthrough" href="main.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>

    

    <div class="container-xl">
      <div class="row">
          
<div class="col-12 col-md-3 bd-sidebar site-navigation show" id="site-navigation">
    
        <div class="navbar-brand-box">
    <a class="navbar-brand text-wrap" href="index.html">
      
      
      <h1 class="site-logo" id="site-title">Bitrhythm's literate documentation</h1>
      
    </a>
</div><nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
    <div class="bd-toc-item active">
        <p class="caption">
 <span class="caption-text">
  Table of Contents
 </span>
</p>
<ul class="current nav bd-sidenav">
 <li class="toctree-l1">
  <a class="reference internal" href="what.html">
   What is bitrhythm about ?
  </a>
 </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">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </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">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

    </div>
</nav> <!-- To handle the deprecated key -->

<div class="navbar_extra_footer">
  
<a target="_blank" href="/">Bitrhythm App Home</a><br>
<a target="_blank" href="https://xyzzyapps.link">Xyzzy Apps Home</a><br>
<p class='custom-nav-footer'>(c) Xyzzy Apps, 2021</p>

</div>

</div>


          


          
<main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
    
    <div class="topbar container-xl fixed-top">
    <div class="topbar-contents row">
        <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show"></div>
        <div class="col pl-md-4 topbar-main">
            
            <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
                data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
                aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation"
                title="Toggle navigation" data-toggle="tooltip" data-placement="left">
                <i class="fas fa-bars"></i>
                <i class="fas fa-arrow-left"></i>
                <i class="fas fa-arrow-up"></i>
            </button>
            
            
            <!-- Source interaction buttons -->

            <!-- Full screen (wrap in <a> to have style consistency -->

<a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
        data-placement="bottom" onclick="toggleFullScreen()" aria-label="Fullscreen mode"
        title="Fullscreen mode"><i
            class="fas fa-expand"></i></button></a>

            <!-- Launch buttons -->

        </div>

        <!-- Table of contents -->
        <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="#elementary">
   Elementary
  </a>
 </li>
</ul>

            </nav>
        </div>
    </div>
</div>
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="alternate-implementations">
<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>
<div class="highlight-C notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;raylib.h&quot;</span><span class="cp"></span>
<span class="cp">#include</span> <span class="cpf">&lt;unistd.h&gt;</span><span class="cp"></span>
<span class="cp">#include</span> <span class="cpf">&lt;stdio.h&gt;</span><span class="cp"></span>
<span class="cp">#include</span> <span class="cpf">&lt;time.h&gt;</span><span class="cp"></span>
<span class="cp">#include</span> <span class="cpf">&lt;stdlib.h&gt;</span><span class="cp"></span>

<span class="kt">void</span> <span class="nf">setTimeout</span><span class="p">(</span><span class="kt">int</span> <span class="n">milliseconds</span><span class="p">)</span>
<span class="p">{</span>
    <span class="c1">// If milliseconds is less or equal to 0</span>
    <span class="c1">// will be simple return from function without throw error</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">milliseconds</span> <span class="o">&lt;=</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">fprintf</span><span class="p">(</span><span class="n">stderr</span><span class="p">,</span> <span class="s">&quot;Count milliseconds for timeout is less or equal to 0</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">);</span>
        <span class="k">return</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="c1">// a current time of milliseconds</span>
    <span class="kt">int</span> <span class="n">milliseconds_since</span> <span class="o">=</span> <span class="n">clock</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span> <span class="o">/</span> <span class="n">CLOCKS_PER_SEC</span><span class="p">;</span>

    <span class="c1">// needed count milliseconds of return from this timeout</span>
    <span class="kt">int</span> <span class="n">end</span> <span class="o">=</span> <span class="n">milliseconds_since</span> <span class="o">+</span> <span class="n">milliseconds</span><span class="p">;</span>

    <span class="c1">// wait while until needed time comes</span>
    <span class="k">do</span> <span class="p">{</span>
        <span class="n">milliseconds_since</span> <span class="o">=</span> <span class="n">clock</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span> <span class="o">/</span> <span class="n">CLOCKS_PER_SEC</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="n">milliseconds_since</span> <span class="o">&lt;=</span> <span class="n">end</span><span class="p">);</span>
<span class="p">}</span>


<span class="kt">int</span> <span class="nf">main</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>

    <span class="n">InitAudioDevice</span><span class="p">();</span>      <span class="c1">// Initialize audio device</span>

    <span class="n">Sound</span> <span class="n">fxWav</span> <span class="o">=</span> <span class="n">LoadSound</span><span class="p">(</span><span class="s">&quot;Music/Kick01.wav&quot;</span><span class="p">);</span>
    <span class="n">Sound</span> <span class="n">fxWav2</span> <span class="o">=</span> <span class="n">LoadSound</span><span class="p">(</span><span class="s">&quot;Music/Clap01.wav&quot;</span><span class="p">);</span>

    <span class="kt">int</span> <span class="n">bpm</span><span class="p">;</span>
    <span class="n">printf</span><span class="p">(</span><span class="s">&quot;Enter bpm: &quot;</span><span class="p">);</span>
    <span class="n">scanf</span><span class="p">(</span><span class="s">&quot;%d&quot;</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">bpm</span><span class="p">);</span>
    <span class="kt">float</span> <span class="n">time_per_beat</span> <span class="o">=</span> <span class="p">(</span><span class="mf">60.0</span> <span class="o">/</span> <span class="n">bpm</span><span class="p">)</span> <span class="o">*</span> <span class="mi">4</span><span class="p">;</span>
    <span class="kt">int</span> <span class="n">delay</span> <span class="o">=</span> <span class="p">(</span><span class="n">time_per_beat</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">)</span> <span class="o">/</span> <span class="mi">16</span><span class="p">;</span>
    <span class="n">printf</span><span class="p">(</span><span class="s">&quot;%d</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">,</span> <span class="n">delay</span><span class="p">);</span>

    <span class="k">while</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>

        <span class="kt">int</span> <span class="n">i</span><span class="p">;</span>
        <span class="k">for</span> <span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;=</span> <span class="mi">16</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">((</span><span class="n">i</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="n">i</span> <span class="o">==</span> <span class="mi">5</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="n">i</span> <span class="o">==</span> <span class="mi">9</span><span class="p">)</span> <span class="o">||</span>  <span class="p">(</span><span class="n">i</span> <span class="o">==</span> <span class="mi">13</span><span class="p">))</span> <span class="p">{</span>
                <span class="n">PlaySound</span><span class="p">(</span><span class="n">fxWav</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">((</span><span class="n">i</span> <span class="o">==</span> <span class="mi">5</span><span class="p">)</span> <span class="o">||</span>  <span class="p">(</span><span class="n">i</span> <span class="o">==</span> <span class="mi">13</span><span class="p">))</span> <span class="p">{</span>
                <span class="n">PlaySound</span><span class="p">(</span><span class="n">fxWav2</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="n">setTimeout</span><span class="p">(</span><span class="n">delay</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>


    <span class="n">UnloadSound</span><span class="p">(</span><span class="n">fxWav</span><span class="p">);</span>     <span class="c1">// Unload sound data</span>
    <span class="n">UnloadSound</span><span class="p">(</span><span class="n">fxWav2</span><span class="p">);</span>     <span class="c1">// Unload sound data</span>

    <span class="n">CloseAudioDevice</span><span class="p">();</span>     <span class="c1">// Close audio device</span>


    <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
<div class="section" id="elementary">
<h2>Elementary<a class="headerlink" href="#elementary" title="Permalink to this headline">¶</a></h2>
<p>Elementary is a javascript runtime - <a class="reference external" href="https://github.com/nick-thompson/elementary">https://github.com/nick-thompson/elementary</a>.</p>
<p>The following is a basic incomplete example that makes use of the sample. Need to update it to the latest Elementary version to simplify tick logic.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">const</span> <span class="nx">el</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;@nick-thompson/elementary&#39;</span><span class="p">);</span>

<span class="kd">const</span> <span class="nx">kick02</span> <span class="o">=</span> <span class="s1">&#39;./Music/Kick01.wav&#39;</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">hh02</span> <span class="o">=</span> <span class="s1">&#39;./Music/HH02.wav&#39;</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">clap01</span> <span class="o">=</span> <span class="s1">&#39;./Music/Clap01.wav&#39;</span><span class="p">;</span>

<span class="kd">let</span> <span class="nx">voices</span> <span class="o">=</span> <span class="p">{</span>
  <span class="s1">&#39;60&#39;</span><span class="o">:</span> <span class="p">{</span><span class="nx">gain</span><span class="o">:</span> <span class="mf">1.0</span><span class="p">,</span> <span class="nx">gate</span><span class="o">:</span> <span class="mf">0.0</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="nx">kick02</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;v1&#39;</span><span class="p">},</span>
  <span class="s1">&#39;61&#39;</span><span class="o">:</span> <span class="p">{</span><span class="nx">gain</span><span class="o">:</span> <span class="mf">1.0</span><span class="p">,</span> <span class="nx">gate</span><span class="o">:</span> <span class="mf">0.0</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="nx">hh02</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;v2&#39;</span><span class="p">},</span>
  <span class="s1">&#39;62&#39;</span><span class="o">:</span> <span class="p">{</span><span class="nx">gain</span><span class="o">:</span> <span class="mf">0.6</span><span class="p">,</span> <span class="nx">gate</span><span class="o">:</span> <span class="mf">0.0</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="nx">clap01</span><span class="p">,</span> <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;v3&#39;</span><span class="p">},</span>
<span class="p">};</span>

<span class="kd">function</span> <span class="nx">updateVoiceState</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">if</span> <span class="p">(</span><span class="nx">e</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;noteOn&#39;</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">voices</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">noteNumber</span><span class="p">))</span> <span class="p">{</span>
      <span class="nx">voices</span><span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">noteNumber</span><span class="p">].</span><span class="nx">gate</span> <span class="o">=</span> <span class="mf">1.0</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>

  <span class="k">if</span> <span class="p">(</span><span class="nx">e</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s1">&#39;type&#39;</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s1">&#39;noteOff&#39;</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">voices</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">noteNumber</span><span class="p">))</span> <span class="p">{</span>
      <span class="nx">voices</span><span class="p">[</span><span class="nx">e</span><span class="p">.</span><span class="nx">noteNumber</span><span class="p">].</span><span class="nx">gate</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">samplerVoice</span><span class="p">(</span><span class="nx">voice</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">let</span> <span class="nx">gate</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="kd">const</span><span class="p">({</span><span class="nx">key</span><span class="o">:</span> <span class="nx">voice</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="o">:</span> <span class="nx">voice</span><span class="p">.</span><span class="nx">gate</span><span class="p">});</span>
  <span class="k">return</span> <span class="nx">el</span><span class="p">.</span><span class="nx">mul</span><span class="p">(</span><span class="nx">voice</span><span class="p">.</span><span class="nx">gain</span><span class="p">,</span> <span class="nx">el</span><span class="p">.</span><span class="nx">sample</span><span class="p">({</span><span class="nx">path</span><span class="o">:</span> <span class="nx">voice</span><span class="p">.</span><span class="nx">path</span><span class="p">},</span> <span class="nx">gate</span><span class="p">));</span>
<span class="p">}</span>

<span class="nx">elementary</span><span class="p">.</span><span class="nx">core</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;load&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
        <span class="kd">let</span> <span class="nx">step</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
        <span class="kd">function</span> <span class="nx">function2</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">step</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mf">16</span><span class="p">;</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">step</span><span class="p">)</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">%</span> <span class="mf">4</span> <span class="o">==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
              <span class="nx">updateVoiceState</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;noteOn&#39;</span><span class="p">,</span> <span class="nx">noteNumber</span><span class="o">:</span> <span class="s1">&#39;60&#39;</span><span class="p">});</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
              <span class="nx">updateVoiceState</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;noteOff&#39;</span><span class="p">,</span> <span class="nx">noteNumber</span><span class="o">:</span> <span class="s1">&#39;60&#39;</span><span class="p">});</span>
            <span class="p">}</span>

            <span class="k">if</span> <span class="p">((</span><span class="nx">i</span> <span class="o">!==</span> <span class="mf">0</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">i</span> <span class="o">%</span> <span class="mf">8</span> <span class="o">==</span> <span class="mf">0</span><span class="p">))</span> <span class="p">{</span>
              <span class="nx">updateVoiceState</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;noteOn&#39;</span><span class="p">,</span> <span class="nx">noteNumber</span><span class="o">:</span> <span class="s1">&#39;62&#39;</span><span class="p">});</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
              <span class="nx">updateVoiceState</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;noteOff&#39;</span><span class="p">,</span> <span class="nx">noteNumber</span><span class="o">:</span> <span class="s1">&#39;62&#39;</span><span class="p">});</span>
            <span class="p">}</span>

            <span class="kd">let</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">voices</span><span class="p">).</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">return</span> <span class="nx">samplerVoice</span><span class="p">(</span><span class="nx">voices</span><span class="p">[</span><span class="nx">n</span><span class="p">]);</span>
            <span class="p">}));</span>

            <span class="kd">let</span> <span class="nx">filtered</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">lowpass</span><span class="p">(</span><span class="mf">1800</span><span class="p">,</span> <span class="mf">1.414</span><span class="p">,</span> <span class="nx">out</span><span class="p">);</span>
            <span class="nx">elementary</span><span class="p">.</span><span class="nx">core</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="nx">filtered</span><span class="p">,</span> <span class="nx">filtered</span><span class="p">);</span>
            <span class="nx">i</span><span class="o">++</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nx">setInterval</span><span class="p">(</span><span class="nx">function2</span><span class="p">,</span> <span class="mf">60000</span> <span class="o">/</span> <span class="mf">120.0</span> <span class="o">/</span> <span class="mf">2</span><span class="p">);</span>
<span class="p">});</span>
</pre></div>
</div>
</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="main.html" title="previous page">Concepts and Code Walkthrough</a>
    <a class='right-next' id="next-link" href="saving.html" title="next page">Saving and Sharing</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">
      <p>
        
          By Xyzzy Apps<br/>
        
            &copy; Copyright (c) Xyzzy Apps, 2021.<br/>
      </p>
    </div>
  </footer>
</main>


      </div>
    </div>
  
  <script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>

  
  </body>
</html>

Changes to build/html/bookmarks.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
...
113
114
115
116
117
118
119





120
121
122
123
124










125
126
127
128
129
130
131
...
196
197
198
199
200
201
202










203
204
205
206
207
208
209
210
211





212
213
214
215
216
217
218
...
225
226
227
228
229
230
231
232


233

234
235
236
237




238
239
240
241
242
243
244
...
246
247
248
249
250
251
252
253
254





























255















256
257
258






259
260
261
262







263
264
265








266
267
268
269
270






271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="prev" title="Saving and Sharing" href="saving.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
   Obsevers
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#visuals">
   Visuals
  </a>










 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration">
   Inspiration
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#misc">
   Misc





  </a>
 </li>
</ul>

            </nav>
        </div>
    </div>
................................................................................
  <div class="section" id="bookmarks">
<h1>Bookmarks<a class="headerlink" href="#bookmarks" title="Permalink to this headline">¶</a></h1>
<div class="section" id="webaudio">
<h2>WebAudio<a class="headerlink" href="#webaudio" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="http://blog.mecheye.net/2017/09/i-dont-know-who-the-web-audio-api-is-designed-for/">http://blog.mecheye.net/2017/09/i-dont-know-who-the-web-audio-api-is-designed-for/</a><br />
<a class="reference external" href="https://joshondesign.com/p/books/canvasdeepdive/chapter12.html">https://joshondesign.com/p/books/canvasdeepdive/chapter12.html</a><br />
<a class="reference external" href="https://robert.ocallahan.org/2017/09/some-opinions-on-history-of-web-audio.html">https://robert.ocallahan.org/2017/09/some-opinions-on-history-of-web-audio.html</a><br />
<a class="reference external" href="https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf">https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf</a></p>


<p><a class="reference external" href="https://web.noom.com/company-blog/2015/08/cooking-is-like-programming/">https://web.noom.com/company-blog/2015/08/cooking-is-like-programming/</a></p>

<p><a class="reference external" href="https://github.com/ideoforms/isobar">https://github.com/ideoforms/isobar</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury/blob/master/docs/reference.md">https://github.com/tmhglnd/mercury/blob/master/docs/reference.md</a><br />
<a class="reference external" href="https://foxdot.org/docs/pattern-functions/">https://foxdot.org/docs/pattern-functions/</a><br />
<a class="reference external" href="https://faustdoc.grame.fr/">https://faustdoc.grame.fr/</a></p>




</div>
<div class="section" id="obsevers">
<h2>Obsevers<a class="headerlink" href="#obsevers" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://github.com/rsimmons/plinth">https://github.com/rsimmons/plinth</a><br />
<a class="reference external" href="https://github.com/gullerya/object-observer">https://github.com/gullerya/object-observer</a><br />
<a class="reference external" href="https://awesomeopensource.com/project/nx-js/observer-util">https://awesomeopensource.com/project/nx-js/observer-util</a><br />
<a class="reference external" href="https://doc.esdoc.org/github.com/jstoolkit/dom-observer/">https://doc.esdoc.org/github.com/jstoolkit/dom-observer/</a><br />
................................................................................
<a class="reference external" href="https://github.com/colxi/deep-observer">https://github.com/colxi/deep-observer</a><br />
<a class="reference external" href="https://www.npmjs.com/package/observe">https://www.npmjs.com/package/observe</a><br />
<a class="reference external" href="https://www.vertexshaderart.com/new/">https://www.vertexshaderart.com/new/</a></p>
</div>
<div class="section" id="visuals">
<h2>Visuals<a class="headerlink" href="#visuals" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://compform.net/turtles/">https://compform.net/turtles/</a><br />
<a class="reference external" href="https://github.com/capnmidnight/Primrose">https://github.com/capnmidnight/Primrose</a></p>
<p>The code editor borrows some CSS styles from this project





























<a class="reference external" href="https://github.com/htor/repeat-editor">https://github.com/htor/repeat-editor</a></p>















</div>
<div class="section" id="inspiration">
<h2>Inspiration<a class="headerlink" href="#inspiration" title="Permalink to this headline">¶</a></h2>






<p><a class="reference external" href="http://wavepot.com/">http://wavepot.com/</a><br />
<a class="reference external" href="https://glicol.web.app/">https://glicol.web.app/</a><br />
<a class="reference external" href="http://charlie-roberts.com/gibber/">http://charlie-roberts.com/gibber/</a><br />
<a class="reference external" href="https://tweakable.org/">https://tweakable.org/</a></p>







</div>
<div class="section" id="misc">
<h2>Misc<a class="headerlink" href="#misc" title="Permalink to this headline">¶</a></h2>








<p><a class="reference external" href="https://ccrma.stanford.edu/~blackrse/algorithm.html">https://ccrma.stanford.edu/~blackrse/algorithm.html</a><br />
<a class="reference external" href="https://oeis.org/">https://oeis.org/</a><br />
<a class="reference external" href="https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html">https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html</a>
<a class="reference external" href="https://en.wikipedia.org/wiki/Computational_creativity">https://en.wikipedia.org/wiki/Computational_creativity</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Algorithmic_composition">https://en.wikipedia.org/wiki/Algorithmic_composition</a></p>






</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="saving.html" title="previous page">Saving and Sharing</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


|







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>







|
|
>
>
>
>
>







 







|
>
>
|
>
|

<
|
>
>
>
>







 







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



>
>
>
>
>
>
|


|
>
>
>
>
>
>
>

|
|
>
>
>
>
>
>
>
>
|



|
>
>
>
>
>
>









|








30
31
32
33
34
35
36

37
38
39
40
41
42
43
44
45
46
..
79
80
81
82
83
84
85
86
87
88
89
90
91
92










93
94
95
96
97
98
99
...
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
...
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
...
244
245
246
247
248
249
250
251
252
253
254
255
256
257

258
259
260
261
262
263
264
265
266
267
268
269
...
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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="prev" title="Credits" href="credits.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
   Obsevers
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#visuals">
   Visuals
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#misc">
   Misc
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#other-projects">
   Other Projects
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration">
   Inspiration
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#music">
   Music
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#algorithmic-music">
   Algorithmic Music
  </a>
 </li>
</ul>

            </nav>
        </div>
    </div>
................................................................................
  <div class="section" id="bookmarks">
<h1>Bookmarks<a class="headerlink" href="#bookmarks" title="Permalink to this headline">¶</a></h1>
<div class="section" id="webaudio">
<h2>WebAudio<a class="headerlink" href="#webaudio" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="http://blog.mecheye.net/2017/09/i-dont-know-who-the-web-audio-api-is-designed-for/">http://blog.mecheye.net/2017/09/i-dont-know-who-the-web-audio-api-is-designed-for/</a><br />
<a class="reference external" href="https://joshondesign.com/p/books/canvasdeepdive/chapter12.html">https://joshondesign.com/p/books/canvasdeepdive/chapter12.html</a><br />
<a class="reference external" href="https://robert.ocallahan.org/2017/09/some-opinions-on-history-of-web-audio.html">https://robert.ocallahan.org/2017/09/some-opinions-on-history-of-web-audio.html</a><br />
<a class="reference external" href="https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf">https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf</a><br />
<a class="reference external" href="https://developers.google.com/web/updates/2017/12/audio-worklet">https://developers.google.com/web/updates/2017/12/audio-worklet</a><br />
<a class="reference external" href="https://blog.chrislowis.co.uk/2013/06/10/playing-multiple-notes-web-audio-api.html">https://blog.chrislowis.co.uk/2013/06/10/playing-multiple-notes-web-audio-api.html</a><br />
<a class="reference external" href="https://web.noom.com/company-blog/2015/08/cooking-is-like-programming/">https://web.noom.com/company-blog/2015/08/cooking-is-like-programming/</a><br />
<a class="reference external" href="https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/">https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/</a><br />
<a class="reference external" href="https://github.com/ideoforms/isobar">https://github.com/ideoforms/isobar</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury/blob/master/docs/reference.md">https://github.com/tmhglnd/mercury/blob/master/docs/reference.md</a><br />

<a class="reference external" href="https://github.com/thedjinn/js303">https://github.com/thedjinn/js303</a><br />
<a class="reference external" href="https://www.sitepoint.com/creating-accurate-timers-in-javascript/">https://www.sitepoint.com/creating-accurate-timers-in-javascript/</a><br />
<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques</a><br />
<a class="reference external" href="https://webaudiodemos.appspot.com/">https://webaudiodemos.appspot.com/</a><br />
<a class="reference external" href="https://www.html5rocks.com/en/tutorials/audio/scheduling/">https://www.html5rocks.com/en/tutorials/audio/scheduling/</a></p>
</div>
<div class="section" id="obsevers">
<h2>Obsevers<a class="headerlink" href="#obsevers" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://github.com/rsimmons/plinth">https://github.com/rsimmons/plinth</a><br />
<a class="reference external" href="https://github.com/gullerya/object-observer">https://github.com/gullerya/object-observer</a><br />
<a class="reference external" href="https://awesomeopensource.com/project/nx-js/observer-util">https://awesomeopensource.com/project/nx-js/observer-util</a><br />
<a class="reference external" href="https://doc.esdoc.org/github.com/jstoolkit/dom-observer/">https://doc.esdoc.org/github.com/jstoolkit/dom-observer/</a><br />
................................................................................
<a class="reference external" href="https://github.com/colxi/deep-observer">https://github.com/colxi/deep-observer</a><br />
<a class="reference external" href="https://www.npmjs.com/package/observe">https://www.npmjs.com/package/observe</a><br />
<a class="reference external" href="https://www.vertexshaderart.com/new/">https://www.vertexshaderart.com/new/</a></p>
</div>
<div class="section" id="visuals">
<h2>Visuals<a class="headerlink" href="#visuals" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://compform.net/turtles/">https://compform.net/turtles/</a><br />
<a class="reference external" href="https://github.com/capnmidnight/Primrose">https://github.com/capnmidnight/Primrose</a><br />
<a class="reference external" href="https://therewasaguy.github.io/p5-music-viz/">https://therewasaguy.github.io/p5-music-viz/</a><br />
<a class="reference external" href="https://github.com/derekwolpert/Visicality">https://github.com/derekwolpert/Visicality</a><br />
<a class="reference external" href="https://github.com/gattis/milkshake">https://github.com/gattis/milkshake</a><br />
<a class="reference external" href="https://github.com/preziotte/party-mode">https://github.com/preziotte/party-mode</a><br />
<a class="reference external" href="https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7">https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7</a><br />
<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API</a><br />
<a class="reference external" href="https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/">https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/</a><br />
<a class="reference external" href="https://1mb.club/">https://1mb.club/</a></p>
</div>
<div class="section" id="misc">
<h2>Misc<a class="headerlink" href="#misc" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://teropa.info/blog/2016/08/10/frequency-and-pitch.html">https://teropa.info/blog/2016/08/10/frequency-and-pitch.html</a><br />
<a class="reference external" href="http://www.pawfal.org/fluxus/documentation/">http://www.pawfal.org/fluxus/documentation/</a><br />
<a class="reference external" href="https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences--audio-3000">https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences–audio-3000</a><br />
<a class="reference external" href="https://acidvoice.com/tb_303_famous_patterns.php">https://acidvoice.com/tb_303_famous_patterns.php</a><br />
<a class="reference external" href="https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/">https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/</a><br />
<a class="reference external" href="https://medias.ircam.fr/x9d4352">https://medias.ircam.fr/x9d4352</a><br />
<a class="reference external" href="https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js">https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js</a><br />
<a class="reference external" href="https://areknawo.com/10-libraries-for-web-audio-stuff/">https://areknawo.com/10-libraries-for-web-audio-stuff/</a><br />
<a class="reference external" href="https://dev.to/sustained/sforzando-an-app-for-learning-and-experimenting-with-music-theory-harmony-composition-44cm">https://dev.to/sustained/sforzando-an-app-for-learning-and-experimenting-with-music-theory-harmony-composition-44cm</a><br />
<a class="reference external" href="https://cdm.link/2016/08/blokdust-amazing-graphical-sound-tool-browser/">https://cdm.link/2016/08/blokdust-amazing-graphical-sound-tool-browser/</a><br />
<a class="reference external" href="https://arxiv.org/pdf/1902.03722.pdf">https://arxiv.org/pdf/1902.03722.pdf</a><br />
<a class="reference external" href="https://quod.lib.umich.edu/i/icmc/bbp2372.1991.011?rgn=main%3Bview=fulltext">https://quod.lib.umich.edu/i/icmc/bbp2372.1991.011?rgn=main%3Bview=fulltext</a><br />
<a class="reference external" href="http://strasheela.sourceforge.net/strasheela/doc/index.html">http://strasheela.sourceforge.net/strasheela/doc/index.html</a></p>
</div>
<div class="section" id="other-projects">
<h2>Other Projects<a class="headerlink" href="#other-projects" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://www.iannix.org/en/projects/">https://www.iannix.org/en/projects/</a><br />
<a class="reference external" href="https://tweakable.org/examples">https://tweakable.org/examples</a><br />
<a class="reference external" href="https://808303.studio/">https://808303.studio/</a><br />
<a class="reference external" href="https://github.com/jshanley/blip">https://github.com/jshanley/blip</a>
<a class="reference external" href="https://github.com/alemangui/pizzicato">https://github.com/alemangui/pizzicato</a><br />
<a class="reference external" href="https://github.com/irritant/serialist-grammar#syntax">https://github.com/irritant/serialist-grammar#syntax</a><br />
<a class="reference external" href="https://reactronica.com/">https://reactronica.com/</a><br />
<a class="reference external" href="https://www.websynths.org/">https://www.websynths.org/</a><br />
<a class="reference external" href="https://github.com/keithclark/ZzFXM">https://github.com/keithclark/ZzFXM</a><br />
<a class="reference external" href="https://github.com/jshanley/blip">https://github.com/jshanley/blip</a><br />
<a class="reference external" href="https://flockingjs.org/">https://flockingjs.org/</a><br />
<a class="reference external" href="https://github.com/xi-livecode/xi">https://github.com/xi-livecode/xi</a><br />
<a class="reference external" href="https://github.com/siaflab/petal">https://github.com/siaflab/petal</a><br />
<a class="reference external" href="https://github.com/sharow/lovelive">https://github.com/sharow/lovelive</a><br />
<a class="reference external" href="https://mohayonao.github.io/mml-emitter/">https://mohayonao.github.io/mml-emitter/</a><br />
<a class="reference external" href="https://github.com/kevincennis/TinyMusic">https://github.com/kevincennis/TinyMusic</a><br />
<a class="reference external" href="https://github.com/pixicoder/PS">https://github.com/pixicoder/PS</a><br />
<a class="reference external" href="https://github.com/swallez/livecoding-webaudio-tonejs">https://github.com/swallez/livecoding-webaudio-tonejs</a><br />
<a class="reference external" href="https://padenot.github.io/litsynth/">https://padenot.github.io/litsynth/</a></p>
</div>
<div class="section" id="inspiration">
<h2>Inspiration<a class="headerlink" href="#inspiration" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide">https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury">https://github.com/tmhglnd/mercury</a><br />
<a class="reference external" href="https://www.mazbox.com/synths/dubstep/">https://www.mazbox.com/synths/dubstep/</a><br />
<a class="reference external" href="https://cdm.link/2019/04/automated-techno-eternal-flow/">https://cdm.link/2019/04/automated-techno-eternal-flow/</a><br />
<a class="reference external" href="https://survios.com/electronauts/">https://survios.com/electronauts/</a><br />
<a class="reference external" href="https://liv3c0der.com/">https://liv3c0der.com/</a><br />
<a class="reference external" href="http://wavepot.com/">http://wavepot.com/</a><br />
<a class="reference external" href="https://glicol.web.app/">https://glicol.web.app/</a><br />
<a class="reference external" href="http://charlie-roberts.com/gibber/">http://charlie-roberts.com/gibber/</a><br />
<a class="reference external" href="https://tweakable.org/">https://tweakable.org/</a>
<a class="reference external" href="https://foxdot.org/docs/pattern-functions/">https://foxdot.org/docs/pattern-functions/</a><br />
<a class="reference external" href="https://faustdoc.grame.fr/">https://faustdoc.grame.fr/</a><br />
<a class="reference external" href="https://www.fsynth.com/">https://www.fsynth.com/</a><br />
<a class="reference external" href="https://errozero.co.uk/acid-machine/">https://errozero.co.uk/acid-machine/</a><br />
<a class="reference external" href="https://the.wubmachine.com/">https://the.wubmachine.com/</a><br />
<a class="reference external" href="https://scribbletune.com/documentation/browser/browser-clip">https://scribbletune.com/documentation/browser/browser-clip</a><br />
<a class="reference external" href="https://djen.co/">https://djen.co/</a></p>
</div>
<div class="section" id="music">
<h2>Music<a class="headerlink" href="#music" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="http://www.p01.org/256b_woman_farmer/">http://www.p01.org/256b_woman_farmer/</a><br />
<a class="reference external" href="https://aem1k.com/">https://aem1k.com/</a><br />
<a class="reference external" href="https://ludotune.com/">https://ludotune.com/</a><br />
<a class="reference external" href="https://www.mazbox.com/synths/dubstep/">https://www.mazbox.com/synths/dubstep/</a></p>
</div>
<div class="section" id="algorithmic-music">
<h2>Algorithmic Music<a class="headerlink" href="#algorithmic-music" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/">https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/</a><br />
<a class="reference external" href="https://ccrma.stanford.edu/~blackrse/algorithm.html">https://ccrma.stanford.edu/~blackrse/algorithm.html</a><br />
<a class="reference external" href="https://oeis.org/">https://oeis.org/</a><br />
<a class="reference external" href="https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html">https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html</a>
<a class="reference external" href="https://en.wikipedia.org/wiki/Computational_creativity">https://en.wikipedia.org/wiki/Computational_creativity</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Algorithmic_composition">https://en.wikipedia.org/wiki/Algorithmic_composition</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Constraint_programming">https://en.wikipedia.org/wiki/Constraint_programming</a><br />
<a class="reference external" href="https://www.bipscript.org/">https://www.bipscript.org/</a><br />
<a class="reference external" href="http://commonmusic.sourceforge.net/cm/res/doc/cm.html">http://commonmusic.sourceforge.net/cm/res/doc/cm.html</a><br />
<a class="reference external" href="https://bolprocessor.sourceforge.io/docs/">https://bolprocessor.sourceforge.io/docs/</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Music_Macro_Language">https://en.wikipedia.org/wiki/Music_Macro_Language</a><br />
<a class="reference external" href="https://github.com/IjzerenHein/kiwi.js/">https://github.com/IjzerenHein/kiwi.js/</a></p>
</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="credits.html" title="previous page">Credits</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/changelog.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Concepts and Code Walkthrough" href="main.html" />
    <link rel="prev" title="Early Attempts" href="early-attempts.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>








<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>








30
31
32
33
34
35
36

37
38
39
40
41
42
43
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Concepts and Code Walkthrough" href="main.html" />
    <link rel="prev" title="Early Attempts" href="early-attempts.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

Added build/html/credits.html. 





































































































































































































































































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Credits &#8212; Bitrhythm&#39;s literate documentation</title>
    
  <link href="_static/css/theme.css" rel="stylesheet" />
  <link href="_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css" rel="stylesheet" />

    
  <link rel="stylesheet"
    href="_static/vendor/fontawesome/5.13.0/css/all.min.css">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-solid-900.woff2">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2">

    
      

    
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/sphinx-book-theme.e8e5499552300ddf5d7adccae7cc3b70.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="_static/custom.css" />
    
  <link rel="preload" as="script" href="_static/js/index.1c5a1a01449ed65a7b51.js">

    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Bookmarks" href="bookmarks.html" />
    <link rel="prev" title="Limitations and Recording" href="limitations.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>

    

    <div class="container-xl">
      <div class="row">
          
<div class="col-12 col-md-3 bd-sidebar site-navigation show" id="site-navigation">
    
        <div class="navbar-brand-box">
    <a class="navbar-brand text-wrap" href="index.html">
      
      
      <h1 class="site-logo" id="site-title">Bitrhythm's literate documentation</h1>
      
    </a>
</div><nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
    <div class="bd-toc-item active">
        <p class="caption">
 <span class="caption-text">
  Table of Contents
 </span>
</p>
<ul class="current nav bd-sidenav">
 <li class="toctree-l1">
  <a class="reference internal" href="what.html">
   What is bitrhythm about ?
  </a>
 </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">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </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">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

    </div>
</nav> <!-- To handle the deprecated key -->

<div class="navbar_extra_footer">
  
<a target="_blank" href="/">Bitrhythm App Home</a><br>
<a target="_blank" href="https://xyzzyapps.link">Xyzzy Apps Home</a><br>
<p class='custom-nav-footer'>(c) Xyzzy Apps, 2021</p>

</div>

</div>


          


          
<main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
    
    <div class="topbar container-xl fixed-top">
    <div class="topbar-contents row">
        <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show"></div>
        <div class="col pl-md-4 topbar-main">
            
            <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
                data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
                aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation"
                title="Toggle navigation" data-toggle="tooltip" data-placement="left">
                <i class="fas fa-bars"></i>
                <i class="fas fa-arrow-left"></i>
                <i class="fas fa-arrow-up"></i>
            </button>
            
            
            <!-- Source interaction buttons -->

            <!-- Full screen (wrap in <a> to have style consistency -->

<a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
        data-placement="bottom" onclick="toggleFullScreen()" aria-label="Fullscreen mode"
        title="Fullscreen mode"><i
            class="fas fa-expand"></i></button></a>

            <!-- Launch buttons -->

        </div>

        <!-- Table of contents -->
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
        </div>
    </div>
</div>
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="credits">
<h1>Credits<a class="headerlink" href="#credits" title="Permalink to this headline">¶</a></h1>
<p>The code editor borrows some CSS styles from this project</p>
<p><a class="reference external" href="https://github.com/htor/repeat-editor">https://github.com/htor/repeat-editor</a></p>
<p><a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">Endless acid banger</a> by Vitling. I use 303 from this project.</p>
<p><a class="reference external" href="https://tonejs.github.io/">Tone.js</a></p>
<p><a class="reference external" href="https://github.com/sebpiq/WebPd">Web Pure Data</a></p>
<p><a class="reference external" href="https://nexus-js.github.io/ui/">Nexus Js</a> for UI.</p>
<p>WebAudio, DemoScene and Audio Programmer discord communities.<br></p>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="limitations.html" title="previous page">Limitations and Recording</a>
    <a class='right-next' id="next-link" href="bookmarks.html" title="next page">Bookmarks</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">
      <p>
        
          By Xyzzy Apps<br/>
        
            &copy; Copyright (c) Xyzzy Apps, 2021.<br/>
      </p>
    </div>
  </footer>
</main>


      </div>
    </div>
  
  <script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>

  
  </body>
</html>

Changes to build/html/demo.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
...
231
232
233
234
235
236
237

238
239
240
241
242
243
244
...
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
...
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
...
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
...
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
...
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
...
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
...
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649







650






651











652
653

654

655

656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
...
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748

749


750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="What exactly is Tweaking ?" href="tweaking.html" />
    <link rel="prev" title="Source Code and License" href="source-code.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#demo-song-1-techno">
   Demo Song 1 // Techno
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#example1">
   Example1
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#example2">
   Example2
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#full-code">
   Full Code
  </a>
 </li>
................................................................................
<p>Postprocessed using Reaper with EQ and Surround effects to add some sparkle.
Video is recorded with the help of Blackhole and Kap and rendered by Reaper.</p>
<p>Samples taken from Deep Techno and Dub Techno collections from splice. Sadly I can’t distribute the song itself as I would also have to distribute the samples with it.</p>
</div>
<div class="section" id="demo-song-1-techno">
<h2>Demo Song 1 // Techno<a class="headerlink" href="#demo-song-1-techno" title="Permalink to this headline">¶</a></h2>
<p>Code for the Demo Song. The visualisation was disabled in the Demo as it was causing a huge lag while recording on both windows and mac.</p>

<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">volume_guard1</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>
<span class="n">volume_guard2</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>
<span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard1</span><span class="p">(</span><span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">30</span><span class="p">)</span> <span class="o">-</span><span class="mi">20</span><span class="p">);</span>
 <span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_channel&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard2</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
 <span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">10000</span><span class="p">);</span>
<span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;l_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">);</span>

................................................................................
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="n">volume</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">)</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">no</span><span class="p">]</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">p</span><span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="n">note</span><span class="p">,</span> <span class="nb">len</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">note</span> <span class="o">=</span> <span class="n">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nb">len</span> <span class="o">=</span> <span class="nb">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">s</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">note</span><span class="p">,</span> <span class="nb">len</span><span class="p">,</span> <span class="n">time</span><span class="p">);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">once</span> <span class="p">()</span> <span class="p">{</span>
    
	<span class="n">var</span> <span class="n">vis</span> <span class="o">=</span> <span class="n">initWinamp</span><span class="p">(</span><span class="s2">&quot;Cope - The Neverending Explosion of Red Liquid Fire&quot;</span><span class="p">);</span>
    <span class="n">render_loop</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
       <span class="n">vis</span><span class="o">.</span><span class="n">render</span><span class="p">();</span>
................................................................................
       <span class="p">}</span>
    <span class="p">}</span>

<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="example1">
<h2>Example1<a class="headerlink" href="#example1" title="Permalink to this headline">¶</a></h2>
<p>This illustrates the core concepts of bitrhythm.</p>
<ol class="simple">
<li><p>Samples (Tone.Sampler)</p></li>
<li><p>Dials (use cellx internally)</p></li>
<li><p>Observers (cellx)</p></li>
</ol>
<p>See <a class="reference external" href="https://tonejs.github.io/">https://tonejs.github.io/</a> for more notes.</p>
................................................................................
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 1011 1001 1000 1000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 00x0 00x0 00x0 00x0&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="n">patterns</span> <span class="o">=</span> <span class="n">scene1</span>

<span class="n">function</span> <span class="n">Sample</span><span class="p">(</span><span class="n">name</span><span class="p">,</span> <span class="n">no</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">name</span> <span class="o">||</span> <span class="s2">&quot;sample&quot;</span>
    <span class="n">name</span> <span class="o">+=</span> <span class="n">no</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">10000</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span><span class="mi">0</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">)</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">no</span><span class="p">]</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">p</span><span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="n">note</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">note</span> <span class="o">=</span> <span class="n">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">s</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttack</span><span class="p">(</span><span class="n">note</span><span class="p">,</span> <span class="n">time</span><span class="p">);</span>
<span class="p">}</span>

<span class="n">var</span> <span class="n">once</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="o">-</span><span class="mi">30</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">master</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">10</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Destination</span><span class="p">);</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">volume_guard</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="o">-</span><span class="mi">10</span><span class="p">]);</span>

    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;k&quot;</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;h&quot;</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
................................................................................
<p>Increase the dial to see the addition of the snare. This is how you can use observers to trigger unrelated changes. I call them sideevents, as the logic is similar to sidechain, which typically observers the volume.</p>
<p>Comment and Uncomment lines in the <code class="docutils literal notranslate"><span class="pre">if</span> <span class="pre">(isHit)</span></code> block. To mute and unmute sections.</p>
<p><em>Note:</em> <code class="docutils literal notranslate"><span class="pre">mem[&quot;k0_channel&quot;].solo</span> <span class="pre">=</span> <span class="pre">true;</span></code> is not working.</p>
<p><strong>Visuals</strong></p>
<p>Change the once function to this and click <code class="docutils literal notranslate"><span class="pre">+</span> <span class="pre">Execute</span> <span class="pre">Once</span></code></p>
<p>Code is taken from butterchurn. Try changing <a class="reference external" href="https://butterchurnviz.com/">presets</a> to get different visuals.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">tweak</span> <span class="o">=</span> <span class="n">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="n">var</span> <span class="n">can</span> <span class="o">=</span> <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s2">&quot;visual&quot;</span><span class="p">);</span>
    <span class="n">var</span> <span class="n">can_container</span> <span class="o">=</span> <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s2">&quot;canvas-container&quot;</span><span class="p">);</span>
    <span class="n">can</span><span class="o">.</span><span class="n">width</span> <span class="o">=</span> <span class="n">window</span><span class="o">.</span><span class="n">innerWidth</span><span class="p">;</span>
    <span class="n">can</span><span class="o">.</span><span class="n">height</span> <span class="o">=</span> <span class="n">window</span><span class="o">.</span><span class="n">innerHeight</span><span class="p">;</span>
    <span class="n">can_container</span><span class="o">.</span><span class="n">width</span> <span class="o">=</span> <span class="n">window</span><span class="o">.</span><span class="n">innerWidth</span><span class="p">;</span>
    <span class="n">window</span><span class="o">.</span><span class="n">visualizer</span> <span class="o">=</span> <span class="n">window</span><span class="o">.</span><span class="n">butterchurn</span><span class="o">.</span><span class="n">default</span><span class="o">.</span><span class="n">createVisualizer</span><span class="p">(</span><span class="n">Tone</span><span class="o">.</span><span class="n">getContext</span><span class="p">()</span><span class="o">.</span><span class="n">rawContext</span><span class="p">,</span> <span class="n">can</span><span class="p">,</span> <span class="p">{</span>
        <span class="n">width</span><span class="p">:</span> <span class="n">window</span><span class="o">.</span><span class="n">innerWidth</span><span class="p">,</span>
        <span class="n">height</span><span class="p">:</span> <span class="n">window</span><span class="o">.</span><span class="n">innerHeight</span><span class="p">,</span>
    <span class="p">});</span>
    <span class="n">window</span><span class="o">.</span><span class="n">visualizer</span><span class="o">.</span><span class="n">connectAudio</span><span class="p">(</span><span class="n">Tone</span><span class="o">.</span><span class="n">getContext</span><span class="p">()</span><span class="o">.</span><span class="n">destination</span><span class="p">);</span>
    <span class="n">const</span> <span class="n">presets</span> <span class="o">=</span> <span class="n">butterchurnPresets</span><span class="o">.</span><span class="n">getPresets</span><span class="p">();</span>
    <span class="n">const</span> <span class="n">preset</span> <span class="o">=</span> <span class="n">presets</span><span class="p">[</span><span class="s2">&quot;_Aderrasi - Wanderer in Curved Space - mash0000 - faclempt kibitzing meshuggana schmaltz (Geiss color mix)&quot;</span><span class="p">]</span>
    <span class="n">window</span><span class="o">.</span><span class="n">visualizer</span><span class="o">.</span><span class="n">loadPreset</span><span class="p">(</span><span class="n">preset</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">);</span> <span class="o">//</span> <span class="mi">2</span><span class="n">nd</span> <span class="n">argument</span> <span class="ow">is</span> <span class="n">the</span> <span class="n">number</span> <span class="n">of</span> <span class="n">seconds</span> <span class="n">to</span> <span class="n">blend</span> <span class="n">presets</span>

    <span class="n">render_loop</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="n">window</span><span class="o">.</span><span class="n">visualizer</span><span class="o">.</span><span class="n">render</span><span class="p">();</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
................................................................................
        <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;k0_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">mem</span><span class="o">.</span><span class="n">k1</span><span class="o">.</span><span class="n">move</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>As you can sere numbers and dials will be available as a global array.</p>
<p>There is no way to remove them so be careful about the order in which you add them.</p>
<p>The following code will always be executed as its at the top level. As you can see this code implies that the first dial is connected to the master volume. Use guards to avoid going deaf as sometimes editing can created bad frequency numbers.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard</span><span class="p">((</span><span class="mi">1</span> <span class="o">-</span> <span class="n">dials</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]())</span> <span class="o">*</span> <span class="o">-</span><span class="mi">30</span><span class="p">);</span>
</pre></div>
</div>
</div>
<div class="section" id="example2">
<h2>Example2<a class="headerlink" href="#example2" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li><p>Kick + Filter</p></li>
<li><p>Snare + Filter</p></li>
<li><p>Snare + Filter + Delay</p></li>
<li><p>High Hat</p></li>
<li><p>Lead + Filter</p></li>
<li><p>Dub Stab + Filter + Reverb</p></li>
................................................................................
<span class="n">reverb</span><span class="o">.</span><span class="n">roomSize</span> <span class="o">=</span> <span class="mf">0.9</span><span class="p">;</span>
</pre></div>
</div>
</div>
<div class="section" id="full-code">
<h2>Full Code<a class="headerlink" href="#full-code" title="Permalink to this headline">¶</a></h2>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">volume_guard1</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>
<span class="n">volume_guard2</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>
<span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard1</span><span class="p">(</span><span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">30</span><span class="p">)</span> <span class="o">-</span><span class="mi">20</span><span class="p">);</span>
 <span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_channel&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard2</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
<span class="o">//</span> <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">10000</span><span class="p">);</span>
<span class="o">//</span> <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;l_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">);</span>


<span class="n">scene1</span> <span class="o">=</span> <span class="p">[</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 1000 1000 1000 1000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 00x0 00x0 00x0 00x0&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 0x00 0000 0000 x000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p xx0x x0x0 x0x0 0xxx&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p x000 x0x0 0000 x0x0&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="n">patterns</span> <span class="o">=</span> <span class="n">scene1</span>

<span class="n">always</span><span class="p">();</span>

<span class="n">function</span> <span class="n">NoiseSynth</span> <span class="p">(</span><span class="n">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">name</span> <span class="o">||</span> <span class="s2">&quot;wf&quot;</span><span class="p">;</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">StereoWidener</span><span class="p">({</span><span class="n">width</span><span class="p">:</span> <span class="mi">1</span><span class="p">});</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span><span class="p">]</span> <span class="o">=</span>  <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Noise</span><span class="p">(</span><span class="s2">&quot;pink&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">start</span><span class="p">();</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">400</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="n">pan</span><span class="p">:</span> <span class="o">-</span><span class="mf">0.8</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span><span class="p">]</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">])</span>
<span class="p">}</span>


<span class="n">function</span> <span class="n">Sample</span><span class="p">(</span><span class="n">name</span><span class="p">,</span> <span class="n">no</span><span class="p">,</span> <span class="nb">filter</span><span class="p">,</span> <span class="n">volume</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">name</span>
    <span class="nb">filter</span> <span class="o">=</span> <span class="nb">filter</span> <span class="o">||</span> <span class="mi">10000</span>
    <span class="n">volume</span> <span class="o">=</span> <span class="n">volume</span> <span class="o">||</span> <span class="mi">0</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="nb">filter</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="n">volume</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">)</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">no</span><span class="p">]</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">Stab</span><span class="p">(</span><span class="n">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">name</span> <span class="o">||</span> <span class="s2">&quot;stab&quot;</span><span class="p">;</span>

    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">5250</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_hfilter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">80</span><span class="p">,</span> <span class="s1">&#39;highpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_reverb&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Reverb</span><span class="p">(</span><span class="mf">0.1</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_delay&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">FeedbackDelay</span><span class="p">(</span><span class="s2">&quot;4n&quot;</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">);</span>
    <span class="o">//</span> <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_pdelay&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">PingPongDelay</span><span class="p">(</span><span class="s2">&quot;2n&quot;</span><span class="p">,</span> <span class="mf">0.1</span><span class="p">);</span>
     <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">StereoWidener</span><span class="p">({</span><span class="n">width</span><span class="p">:</span> <span class="mf">0.25</span><span class="p">});</span>
     <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">2</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="p">,</span>   <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_delay&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_reverb&quot;</span><span class="p">],</span>  <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_hfilter&quot;</span><span class="p">]</span> <span class="p">,</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">)</span>


    <span class="n">function</span> <span class="n">voice</span><span class="p">(</span><span class="n">no</span><span class="p">,</span> <span class="nb">type</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_synth&quot;</span> <span class="o">+</span> <span class="n">no</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">MonoSynth</span><span class="p">({</span>
            <span class="n">oscillator</span><span class="p">:</span> <span class="p">{</span>
                <span class="nb">type</span><span class="p">:</span> <span class="nb">type</span>
            <span class="p">}</span>
................................................................................
    <span class="n">voice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="s2">&quot;sawtooth&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="s2">&quot;sawtooth&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="s2">&quot;pwm&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="s2">&quot;pwm&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">6</span><span class="p">,</span> <span class="s2">&quot;pwm&quot;</span><span class="p">)</span>
<span class="p">}</span>


<span class="n">function</span> <span class="n">p</span><span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="n">note</span><span class="p">,</span> <span class="nb">len</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">note</span> <span class="o">=</span> <span class="n">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nb">len</span> <span class="o">=</span> <span class="nb">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">s</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">note</span><span class="p">,</span> <span class="nb">len</span><span class="p">,</span> <span class="n">time</span><span class="p">);</span>
<span class="p">}</span>


<span class="n">function</span> <span class="n">s</span><span class="p">(</span><span class="n">vel</span><span class="p">,</span> <span class="n">notes</span><span class="p">,</span> <span class="n">duration</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">vel</span> <span class="o">=</span> <span class="n">vel</span> <span class="o">||</span> <span class="mf">1.0</span><span class="p">;</span>
    <span class="n">duration</span> <span class="o">=</span> <span class="n">duration</span> <span class="o">||</span> <span class="s2">&quot;2n&quot;</span><span class="p">;</span>
    <span class="n">notes</span> <span class="o">=</span> <span class="n">notes</span> <span class="o">||</span>  <span class="p">[</span><span class="s2">&quot;E2&quot;</span><span class="p">,</span> <span class="s2">&quot;B2&quot;</span><span class="p">,</span> <span class="s2">&quot;G2&quot;</span><span class="p">];</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth1&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">time</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth2&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">time</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth3&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">time</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>

    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth4&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">time</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth5&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">time</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
   <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth6&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">time</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
<span class="p">}</span>




























<span class="n">function</span> <span class="n">once</span> <span class="p">()</span> <span class="p">{</span>

    

	<span class="o">//</span> <span class="n">var</span> <span class="n">vis</span> <span class="o">=</span> <span class="n">initWinamp</span><span class="p">(</span><span class="s2">&quot;Unchained - Rewop&quot;</span><span class="p">);</span>

    <span class="n">render_loop</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
       <span class="o">//</span> <span class="n">vis</span><span class="o">.</span><span class="n">render</span><span class="p">();</span>
    <span class="p">}</span>

    <span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="o">-</span><span class="mi">30</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">master</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">10</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">Tone</span><span class="o">.</span><span class="n">Destination</span><span class="p">);</span>

    <span class="o">//</span> <span class="n">NoiseSynth</span><span class="p">();</span>
    <span class="n">Stab</span><span class="p">();</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;k&quot;</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">3000</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;h&quot;</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">7000</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;sn&quot;</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span> <span class="mi">6000</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;c&quot;</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">800</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;l&quot;</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">420</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">);</span>


    <span class="n">handlers</span><span class="p">[</span><span class="s2">&quot;1&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">function</span> <span class="p">(</span><span class="n">val</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">val</span> <span class="o">&gt;</span> <span class="mf">0.5</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;start_snare&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">true</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;start_snare&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">false</span><span class="p">;</span>
        <span class="p">}</span>
................................................................................
        <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">Q</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">val</span> <span class="o">*</span> <span class="mi">5</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">onChange</span><span class="p">(</span><span class="n">function</span> <span class="p">(</span><span class="n">e</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">var</span> <span class="n">val</span> <span class="o">=</span> <span class="n">parseFloat</span><span class="p">(</span><span class="n">e</span><span class="p">[</span><span class="s2">&quot;data&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value</span><span class="p">);</span>
        <span class="n">handlers</span><span class="p">[</span><span class="s2">&quot;1&quot;</span><span class="p">](</span><span class="n">val</span><span class="p">);</span>
    <span class="p">})</span>
    
    

<span class="p">}</span>


<span class="n">function</span> <span class="n">tweak</span> <span class="p">()</span> <span class="p">{</span>
	<span class="n">mem</span><span class="o">.</span><span class="n">k1</span> <span class="o">=</span> <span class="n">knob</span><span class="p">({</span><span class="n">ramp</span> <span class="p">:</span> <span class="p">[</span><span class="mf">0.525</span><span class="p">,</span> <span class="mf">0.8</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mf">0.25</span><span class="p">,</span> <span class="mf">0.75</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mf">0.25</span><span class="p">,</span> <span class="mf">0.1</span><span class="p">],</span> <span class="s2">&quot;number&quot;</span><span class="p">:</span> <span class="n">dials</span><span class="p">[</span><span class="mi">2</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]</span> <span class="p">});</span>
    <span class="n">always</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">mem</span><span class="o">.</span><span class="n">k1</span><span class="o">.</span><span class="n">move</span><span class="p">()</span> <span class="o">*</span> <span class="mi">10000</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>




<span class="n">function</span> <span class="n">sampleTest</span> <span class="p">()</span> <span class="p">{</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;l&quot;</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">10000</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">);</span>

<span class="p">}</span>



<span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&lt;=</span> <span class="mi">3</span> <span class="p">)</span> <span class="p">{</span>
	<span class="n">transition</span> <span class="o">=</span> <span class="n">once</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
	<span class="n">transition</span> <span class="o">=</span> <span class="n">tweak</span><span class="p">;</span>
<span class="p">}</span>

<span class="k">if</span> <span class="p">(</span><span class="n">isHit</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
   		 <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="p">)</span> <span class="p">{</span>
       		 <span class="n">p</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">8</span> <span class="p">)</span> <span class="p">{</span>
       	 	<span class="n">p</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
        <span class="p">}</span>	
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">4</span> <span class="p">)</span> <span class="p">{</span>
    		<span class="n">s</span><span class="p">();</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">==</span> <span class="mi">6</span><span class="p">)</span> <span class="p">{</span>
        	<span class="n">transition</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>
        <span class="o">//</span> <span class="n">Uncomment</span> <span class="k">for</span> <span class="n">snare</span>
      <span class="o">//</span>  <span class="k">if</span> <span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;start_snare&quot;</span><span class="p">])</span> <span class="p">{</span>
            <span class="n">p</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
      <span class="o">//</span>  <span class="p">}</span>

    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">5</span><span class="p">)</span> <span class="p">{</span>
         <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">12</span><span class="p">)</span> <span class="p">{</span>
	  		<span class="n">p</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
        <span class="p">}</span>
       <span class="o">//</span> <span class="n">a</span><span class="p">();</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">6</span><span class="p">)</span> <span class="p">{</span>
      <span class="o">//</span> <span class="n">p</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="s2">&quot;B3&quot;</span><span class="p">,</span> <span class="s2">&quot;8n&quot;</span><span class="p">)</span>
    <span class="p">}</span>




<span class="p">}</span>
</pre></div>
</div>
</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="source-code.html" title="previous page">Source Code and License</a>
    <a class='right-next' id="next-link" href="tweaking.html" title="next page">What exactly is Tweaking ?</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


|







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







|
|



|
|







 







>







 







|







 







|
|







 







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







 







<
<
<
<
<
<
<
<
<
<
<
|
<







 







|




|
|







 







<

|

<
<






|





<
<









<
<
<
<
<
<
<
<
<
<








|
|







 







<
<
<
<
<
<
<
<




|
|
|

|
|
|


>
>
>
>
>
>
>

>
>
>
>
>
>

>
>
>
>
>
>
>
>
>
>
>

<
>

>
|
>

|

|
|







|

<







 







<
<



<

|





<
<
<
<
<
<
<
<
<
<

|

|




|
|




|




|


|



<
|

|
<


|
|

<


|

>

>
>













|








30
31
32
33
34
35
36

37
38
39
40
41
42
43
44
45
46
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
...
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
...
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
...
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
...
412
413
414
415
416
417
418













419
420
421
422
423
424
425
...
468
469
470
471
472
473
474











475

476
477
478
479
480
481
482
...
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
...
534
535
536
537
538
539
540

541
542
543


544
545
546
547
548
549
550
551
552
553
554
555


556
557
558
559
560
561
562
563
564










565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
...
587
588
589
590
591
592
593








594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633

634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652

653
654
655
656
657
658
659
...
660
661
662
663
664
665
666


667
668
669

670
671
672
673
674
675
676










677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702

703
704
705

706
707
708
709
710

711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Samples" href="samples.html" />
    <link rel="prev" title="Source Code and License" href="source-code.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#demo-song-1-techno">
   Demo Song 1 // Techno
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#getting-started">
   Getting Started
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#tutorial">
   Tutorial
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#full-code">
   Full Code
  </a>
 </li>
................................................................................
<p>Postprocessed using Reaper with EQ and Surround effects to add some sparkle.
Video is recorded with the help of Blackhole and Kap and rendered by Reaper.</p>
<p>Samples taken from Deep Techno and Dub Techno collections from splice. Sadly I can’t distribute the song itself as I would also have to distribute the samples with it.</p>
</div>
<div class="section" id="demo-song-1-techno">
<h2>Demo Song 1 // Techno<a class="headerlink" href="#demo-song-1-techno" title="Permalink to this headline">¶</a></h2>
<p>Code for the Demo Song. The visualisation was disabled in the Demo as it was causing a huge lag while recording on both windows and mac.</p>
<p>Note: Could could be outdated due to latest changes to the API.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">volume_guard1</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>
<span class="n">volume_guard2</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>
<span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard1</span><span class="p">(</span><span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">30</span><span class="p">)</span> <span class="o">-</span><span class="mi">20</span><span class="p">);</span>
 <span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_channel&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard2</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
 <span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">10000</span><span class="p">);</span>
<span class="o">//</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;l_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">);</span>

................................................................................
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="n">volume</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">)</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">no</span><span class="p">]</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">p</span><span class="p">(</span><span class="n">s</span><span class="p">,</span> <span class="n">note</span><span class="p">,</span> <span class="nb">len</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">note</span> <span class="o">=</span> <span class="n">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nb">len</span> <span class="o">=</span> <span class="nb">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="n">samples</span><span class="p">[</span><span class="n">s</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">note</span><span class="p">,</span> <span class="nb">len</span><span class="p">,</span> <span class="n">undefined</span><span class="p">);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">once</span> <span class="p">()</span> <span class="p">{</span>
    
	<span class="n">var</span> <span class="n">vis</span> <span class="o">=</span> <span class="n">initWinamp</span><span class="p">(</span><span class="s2">&quot;Cope - The Neverending Explosion of Red Liquid Fire&quot;</span><span class="p">);</span>
    <span class="n">render_loop</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
       <span class="n">vis</span><span class="o">.</span><span class="n">render</span><span class="p">();</span>
................................................................................
       <span class="p">}</span>
    <span class="p">}</span>

<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="getting-started">
<h2>Getting Started<a class="headerlink" href="#getting-started" title="Permalink to this headline">¶</a></h2>
<p>This illustrates the core concepts of bitrhythm.</p>
<ol class="simple">
<li><p>Samples (Tone.Sampler)</p></li>
<li><p>Dials (use cellx internally)</p></li>
<li><p>Observers (cellx)</p></li>
</ol>
<p>See <a class="reference external" href="https://tonejs.github.io/">https://tonejs.github.io/</a> for more notes.</p>
................................................................................
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 1011 1001 1000 1000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 00x0 00x0 00x0 00x0&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="n">patterns</span> <span class="o">=</span> <span class="n">scene1</span>














<span class="n">var</span> <span class="n">once</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="o">-</span><span class="mi">30</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">master</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">10</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Destination</span><span class="p">);</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">volume_guard</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="o">-</span><span class="mi">10</span><span class="p">]);</span>

    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;k&quot;</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;h&quot;</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
................................................................................
<p>Increase the dial to see the addition of the snare. This is how you can use observers to trigger unrelated changes. I call them sideevents, as the logic is similar to sidechain, which typically observers the volume.</p>
<p>Comment and Uncomment lines in the <code class="docutils literal notranslate"><span class="pre">if</span> <span class="pre">(isHit)</span></code> block. To mute and unmute sections.</p>
<p><em>Note:</em> <code class="docutils literal notranslate"><span class="pre">mem[&quot;k0_channel&quot;].solo</span> <span class="pre">=</span> <span class="pre">true;</span></code> is not working.</p>
<p><strong>Visuals</strong></p>
<p>Change the once function to this and click <code class="docutils literal notranslate"><span class="pre">+</span> <span class="pre">Execute</span> <span class="pre">Once</span></code></p>
<p>Code is taken from butterchurn. Try changing <a class="reference external" href="https://butterchurnviz.com/">presets</a> to get different visuals.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">tweak</span> <span class="o">=</span> <span class="n">function</span><span class="p">()</span> <span class="p">{</span>











    <span class="n">initWinamp</span><span class="p">(</span><span class="s2">&quot;_Aderrasi - Wanderer in Curved Space - mash0000 - faclempt kibitzing meshuggana schmaltz (Geiss color mix)&quot;</span><span class="p">);</span>


    <span class="n">render_loop</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="n">window</span><span class="o">.</span><span class="n">visualizer</span><span class="o">.</span><span class="n">render</span><span class="p">();</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
................................................................................
        <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;k0_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">mem</span><span class="o">.</span><span class="n">k1</span><span class="o">.</span><span class="n">move</span><span class="p">()</span> <span class="o">*</span> <span class="mi">1000</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>As you can sere numbers and dials will be available as a global array.</p>
<p>There is no way to remove them so be careful about the order in which you add them.</p>
<p>The following code will always be executed as its at the top level. As you can see this code implies that the first dial is connected to the master volume. Use guards to avoid going deaf as someundefineds editing can created bad frequency numbers.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard</span><span class="p">((</span><span class="mi">1</span> <span class="o">-</span> <span class="n">dials</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]())</span> <span class="o">*</span> <span class="o">-</span><span class="mi">30</span><span class="p">);</span>
</pre></div>
</div>
</div>
<div class="section" id="tutorial">
<h2>Tutorial<a class="headerlink" href="#tutorial" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li><p>Kick + Filter</p></li>
<li><p>Snare + Filter</p></li>
<li><p>Snare + Filter + Delay</p></li>
<li><p>High Hat</p></li>
<li><p>Lead + Filter</p></li>
<li><p>Dub Stab + Filter + Reverb</p></li>
................................................................................
<span class="n">reverb</span><span class="o">.</span><span class="n">roomSize</span> <span class="o">=</span> <span class="mf">0.9</span><span class="p">;</span>
</pre></div>
</div>
</div>
<div class="section" id="full-code">
<h2>Full Code<a class="headerlink" href="#full-code" title="Permalink to this headline">¶</a></h2>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">volume_guard1</span> <span class="o">=</span> <span class="n">guard</span><span class="p">([</span><span class="o">-</span><span class="mi">20</span><span class="p">,</span><span class="mi">15</span><span class="p">])</span>

<span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard1</span><span class="p">(</span><span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">30</span><span class="p">)</span> <span class="o">-</span><span class="mi">20</span><span class="p">);</span>
<span class="o">//</span> <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_channel&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">volume_guard2</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">);</span>
<span class="o">//</span> <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mi">10000</span><span class="p">);</span>



<span class="n">scene1</span> <span class="o">=</span> <span class="p">[</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 1000 1000 1000 1000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 00x0 00x0 00x0 00x0&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 0x00 0000 0000 x000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p xx0x c0x0 x0x0 x0xx&quot;</span><span class="p">),</span>
    <span class="n">cellx</span><span class="p">(</span><span class="s2">&quot;p x000 x0x0 0000 x0x0&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="n">patterns</span> <span class="o">=</span> <span class="n">scene1</span>



<span class="n">function</span> <span class="n">NoiseSynth</span> <span class="p">(</span><span class="n">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">name</span> <span class="o">||</span> <span class="s2">&quot;wf&quot;</span><span class="p">;</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">StereoWidener</span><span class="p">({</span><span class="n">width</span><span class="p">:</span> <span class="mi">1</span><span class="p">});</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span><span class="p">]</span> <span class="o">=</span>  <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Noise</span><span class="p">(</span><span class="s2">&quot;pink&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">start</span><span class="p">();</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">400</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="n">pan</span><span class="p">:</span> <span class="o">-</span><span class="mf">0.8</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span><span class="p">]</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">])</span>
<span class="p">}</span>











<span class="n">function</span> <span class="n">Stab</span><span class="p">(</span><span class="n">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">name</span> <span class="o">=</span> <span class="n">name</span> <span class="o">||</span> <span class="s2">&quot;stab&quot;</span><span class="p">;</span>

    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">5250</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_hfilter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Filter</span><span class="p">(</span><span class="mi">80</span><span class="p">,</span> <span class="s1">&#39;highpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_reverb&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Reverb</span><span class="p">(</span><span class="mf">0.1</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_delay&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">FeedbackDelay</span><span class="p">(</span><span class="s2">&quot;4n&quot;</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">);</span>
    <span class="o">//</span> <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_pdelay&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">PingPongDelay</span><span class="p">(</span><span class="s2">&quot;2n&quot;</span><span class="p">,</span> <span class="mf">0.1</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">StereoWidener</span><span class="p">({</span><span class="n">width</span><span class="p">:</span> <span class="mf">0.25</span><span class="p">});</span>
    <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">2</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="p">,</span>   <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_delay&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_reverb&quot;</span><span class="p">],</span>  <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_hfilter&quot;</span><span class="p">]</span> <span class="p">,</span><span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_stereo&quot;</span><span class="p">],</span> <span class="n">mem</span><span class="o">.</span><span class="n">master</span><span class="p">)</span>


    <span class="n">function</span> <span class="n">voice</span><span class="p">(</span><span class="n">no</span><span class="p">,</span> <span class="nb">type</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">mem</span><span class="p">[</span><span class="n">name</span> <span class="o">+</span> <span class="s2">&quot;_synth&quot;</span> <span class="o">+</span> <span class="n">no</span><span class="p">]</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">MonoSynth</span><span class="p">({</span>
            <span class="n">oscillator</span><span class="p">:</span> <span class="p">{</span>
                <span class="nb">type</span><span class="p">:</span> <span class="nb">type</span>
            <span class="p">}</span>
................................................................................
    <span class="n">voice</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="s2">&quot;sawtooth&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="s2">&quot;sawtooth&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="s2">&quot;pwm&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="s2">&quot;pwm&quot;</span><span class="p">)</span>
    <span class="n">voice</span><span class="p">(</span><span class="mi">6</span><span class="p">,</span> <span class="s2">&quot;pwm&quot;</span><span class="p">)</span>
<span class="p">}</span>









<span class="n">function</span> <span class="n">s</span><span class="p">(</span><span class="n">vel</span><span class="p">,</span> <span class="n">notes</span><span class="p">,</span> <span class="n">duration</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">vel</span> <span class="o">=</span> <span class="n">vel</span> <span class="o">||</span> <span class="mf">1.0</span><span class="p">;</span>
    <span class="n">duration</span> <span class="o">=</span> <span class="n">duration</span> <span class="o">||</span> <span class="s2">&quot;2n&quot;</span><span class="p">;</span>
    <span class="n">notes</span> <span class="o">=</span> <span class="n">notes</span> <span class="o">||</span>  <span class="p">[</span><span class="s2">&quot;E2&quot;</span><span class="p">,</span> <span class="s2">&quot;B2&quot;</span><span class="p">,</span> <span class="s2">&quot;G2&quot;</span><span class="p">];</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth1&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">undefined</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth2&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">undefined</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth3&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">undefined</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>

    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth4&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">0</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">undefined</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth5&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">undefined</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
    <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_synth6&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">triggerAttackRelease</span><span class="p">(</span><span class="n">notes</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="n">duration</span><span class="p">,</span> <span class="n">undefined</span><span class="p">,</span> <span class="n">vel</span><span class="p">);</span>
<span class="p">}</span>

<span class="n">function</span> <span class="n">once</span><span class="p">()</span> <span class="p">{</span>
    <span class="n">var</span> <span class="n">pr</span><span class="p">;</span>
    <span class="n">const</span> <span class="n">s</span> <span class="o">=</span> <span class="p">(</span> <span class="n">p</span> <span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="n">pr</span> <span class="o">=</span> <span class="n">p</span><span class="p">;</span>
        <span class="n">var</span> <span class="n">img</span><span class="p">;</span>
        <span class="n">let</span> <span class="n">x</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
        <span class="n">let</span> <span class="n">y</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>

        <span class="n">p</span><span class="o">.</span><span class="n">setup</span> <span class="o">=</span> <span class="n">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="n">var</span> <span class="n">x</span> <span class="o">=</span> <span class="n">p</span><span class="o">.</span><span class="n">createCanvas</span><span class="p">(</span><span class="mi">700</span><span class="p">,</span> <span class="mi">410</span><span class="p">);</span>
            <span class="n">x</span><span class="o">.</span><span class="n">canvas</span><span class="o">.</span><span class="n">style</span><span class="o">.</span><span class="n">position</span> <span class="o">=</span> <span class="s2">&quot;absolute&quot;</span><span class="p">;</span>
            <span class="n">p</span><span class="o">.</span><span class="n">frameRate</span><span class="p">(</span><span class="mi">30</span><span class="p">);</span>
            <span class="n">img</span> <span class="o">=</span> <span class="n">p</span><span class="o">.</span><span class="n">loadImage</span><span class="p">(</span><span class="s1">&#39;/test.png&#39;</span><span class="p">);</span>
        <span class="p">};</span>

        <span class="n">p</span><span class="o">.</span><span class="n">draw</span> <span class="o">=</span> <span class="n">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="n">var</span> <span class="n">e</span> <span class="o">=</span> <span class="n">getRandomInt</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
            <span class="n">p</span><span class="o">.</span><span class="n">clear</span><span class="p">();</span>
            <span class="k">if</span> <span class="p">(</span><span class="n">e</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="o">//</span>   <span class="n">p</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="mi">123</span><span class="p">);</span>
                <span class="o">//</span>  <span class="n">p</span><span class="o">.</span><span class="n">rect</span><span class="p">(</span><span class="n">x</span><span class="p">,</span><span class="n">y</span><span class="p">,</span><span class="mi">50</span><span class="p">,</span><span class="mi">50</span><span class="p">);</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="o">//</span>	<span class="n">p</span><span class="o">.</span><span class="n">image</span><span class="p">(</span><span class="n">img</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">};</span>
    <span class="p">};</span>


    <span class="n">let</span> <span class="n">myp5</span> <span class="o">=</span> <span class="n">new</span> <span class="n">p5</span><span class="p">(</span><span class="n">s</span><span class="p">,</span>  <span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s1">&#39;canvas-container&#39;</span><span class="p">));</span>
    

    <span class="n">var</span> <span class="n">visualizer</span> <span class="o">=</span> <span class="n">initWinamp</span><span class="p">(</span><span class="s2">&quot;_Aderrasi - Wanderer in Curved Space - mash0000 - faclempt kibitzing meshuggana schmaltz (Geiss color mix)&quot;</span><span class="p">);</span>

    <span class="n">render_loop</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="n">visualizer</span><span class="o">.</span><span class="n">render</span><span class="p">();</span>
    <span class="p">}</span>
    
    <span class="n">Tone</span><span class="o">.</span><span class="n">Master</span><span class="o">.</span><span class="n">volume</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="o">-</span><span class="mi">30</span><span class="p">;</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">master</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Channel</span><span class="p">({</span><span class="n">channelCount</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="n">volume</span><span class="p">:</span> <span class="o">-</span><span class="mi">10</span><span class="p">})</span><span class="o">.</span><span class="n">chain</span><span class="p">(</span><span class="n">Tone</span><span class="o">.</span><span class="n">Destination</span><span class="p">);</span>

    <span class="o">//</span> <span class="n">NoiseSynth</span><span class="p">();</span>
    <span class="n">Stab</span><span class="p">();</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;k&quot;</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">3000</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;h&quot;</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">7000</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;sn&quot;</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span> <span class="mi">6000</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;c&quot;</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">620</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
    <span class="n">Sample</span><span class="p">(</span><span class="s2">&quot;l&quot;</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">420</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">);</span>


    <span class="n">handlers</span><span class="p">[</span><span class="s2">&quot;1&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">function</span> <span class="p">(</span><span class="n">val</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">val</span> <span class="o">&gt;</span> <span class="mf">0.5</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;start_snare&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">true</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;start_snare&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="n">false</span><span class="p">;</span>
        <span class="p">}</span>
................................................................................
        <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">Q</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">Math</span><span class="o">.</span><span class="n">round</span><span class="p">(</span><span class="n">val</span> <span class="o">*</span> <span class="mi">5</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="n">dials</span><span class="p">[</span><span class="mi">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">onChange</span><span class="p">(</span><span class="n">function</span> <span class="p">(</span><span class="n">e</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">var</span> <span class="n">val</span> <span class="o">=</span> <span class="n">parseFloat</span><span class="p">(</span><span class="n">e</span><span class="p">[</span><span class="s2">&quot;data&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">value</span><span class="p">);</span>
        <span class="n">handlers</span><span class="p">[</span><span class="s2">&quot;1&quot;</span><span class="p">](</span><span class="n">val</span><span class="p">);</span>
    <span class="p">})</span>



<span class="p">}</span>


<span class="n">function</span> <span class="n">tweak</span> <span class="p">()</span> <span class="p">{</span>
    <span class="n">mem</span><span class="o">.</span><span class="n">k1</span> <span class="o">=</span> <span class="n">knob</span><span class="p">({</span><span class="n">ramp</span> <span class="p">:</span> <span class="p">[</span><span class="mf">0.525</span><span class="p">,</span> <span class="mf">0.8</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mf">0.25</span><span class="p">,</span> <span class="mf">0.75</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mf">0.25</span><span class="p">,</span> <span class="mf">0.1</span><span class="p">],</span> <span class="s2">&quot;number&quot;</span><span class="p">:</span> <span class="n">dials</span><span class="p">[</span><span class="mi">2</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]</span> <span class="p">});</span>
    <span class="n">always</span> <span class="o">=</span> <span class="n">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="n">mem</span><span class="p">[</span><span class="s2">&quot;stab_filter&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">frequency</span><span class="o">.</span><span class="n">value</span> <span class="o">=</span> <span class="n">mem</span><span class="o">.</span><span class="n">k1</span><span class="o">.</span><span class="n">move</span><span class="p">()</span> <span class="o">*</span> <span class="mi">10000</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>











<span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&lt;=</span> <span class="mi">3</span> <span class="p">)</span> <span class="p">{</span>
    <span class="n">transition</span> <span class="o">=</span> <span class="n">once</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="n">transition</span> <span class="o">=</span> <span class="n">tweak</span><span class="p">;</span>
<span class="p">}</span>

<span class="k">if</span> <span class="p">(</span><span class="n">isHit</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">0</span> <span class="p">)</span> <span class="p">{</span>
            <span class="n">p</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">8</span> <span class="p">)</span> <span class="p">{</span>
            <span class="n">p</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
        <span class="p">}</span>	
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">4</span> <span class="p">)</span> <span class="p">{</span>
            <span class="o">//</span> <span class="n">s</span><span class="p">();</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">==</span> <span class="mi">6</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">transition</span><span class="p">();</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">4</span><span class="p">)</span> <span class="p">{</span>

        <span class="k">if</span> <span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;start_snare&quot;</span><span class="p">])</span> <span class="p">{</span>
            <span class="n">p</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>
        <span class="p">}</span>

    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">5</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="n">bars</span> <span class="o">&gt;</span> <span class="mi">12</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">p</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
        <span class="p">}</span>

    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="n">track_no</span> <span class="o">==</span> <span class="mi">6</span><span class="p">)</span> <span class="p">{</span>
       <span class="o">//</span> <span class="n">p</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="s2">&quot;C3&quot;</span><span class="p">)</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="k">if</span> <span class="p">(</span><span class="n">count</span> <span class="o">==</span> <span class="p">(</span><span class="n">mem</span><span class="p">[</span><span class="s2">&quot;k_last&quot;</span><span class="p">]</span> <span class="o">+</span> <span class="mi">3</span><span class="p">))</span> <span class="p">{</span>
    <span class="n">pn</span><span class="p">(</span><span class="s2">&quot;h&quot;</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="source-code.html" title="previous page">Source Code and License</a>
    <a class='right-next' id="next-link" href="samples.html" title="next page">Samples</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/early-attempts.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Changelog" href="changelog.html" />
    <link rel="prev" title="Samples" href="samples.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="samples.html" title="previous page">Samples</a>
    <a class='right-next' id="next-link" href="changelog.html" title="next page">Changelog</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">








<



|







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







|








30
31
32
33
34
35
36

37
38
39
40
41
42
43
44
45
46
47
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Changelog" href="changelog.html" />
    <link rel="prev" title="What exactly is Tweaking ?" href="tweaking.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="tweaking.html" title="previous page">What exactly is Tweaking ?</a>
    <a class='right-next' id="next-link" href="changelog.html" title="next page">Changelog</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">

Changes to build/html/genindex.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
..
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
...
112
113
114
115
116
117
118





119
120
121
122
123










124
125
126
127
128
129
130


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="#" />
    <link rel="search" title="Search" href="search.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>








<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>








30
31
32
33
34
35
36

37
38
39
40
41
42
43
..
78
79
80
81
82
83
84
85
86
87
88
89
90
91










92
93
94
95
96
97
98
...
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="#" />
    <link rel="search" title="Search" href="search.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

Changes to build/html/index.html. 

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
..
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
...
115
116
117
118
119
120
121





122
123
124
125
126










127
128
129
130
131
132
133
...
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

214
215
216
217
218
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


247
248
249
250


251
252

253
254
255
256
257
258
259


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="What is bitrhythm about ?" href="what.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
<h1>Welcome to Bitrhythm’s  documentation!<a class="headerlink" href="#welcome-to-bitrhythm-s-documentation" title="Permalink to this headline">¶</a></h1>
<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#about-author">About Author</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#support-this-project">Support this project</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#future-features">Future Features</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">Demo and Tutorial</a><ul>
<li class="toctree-l2"><a class="reference internal" href="demo.html#video">Video</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#demo-song-1-techno">Demo Song 1 // Techno</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#example1">Example1</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#example2">Example2</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#full-code">Full Code</a></li>
</ul>
</li>

<li class="toctree-l1"><a class="reference internal" href="tweaking.html">What exactly is Tweaking ?</a><ul>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#dj-controls">DJ Controls</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#music-is-arrangement">Music is arrangement</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#see-also">See Also</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="limitations.html">Limitations and Recording</a></li>
<li class="toctree-l1"><a class="reference internal" href="midi.html">MIDI and DAW Terms</a><ul>
<li class="toctree-l2"><a class="reference internal" href="midi.html#midi">MIDI</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="midi.html#usage">Usage</a><ul>
<li class="toctree-l2"><a class="reference internal" href="midi.html#terms">Terms</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="samples.html">Samples</a></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">Concepts and 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#sample">Sample</a></li>



<li class="toctree-l2"><a class="reference internal" href="main.html#javascript">Javascript</a></li>






</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="saving.html">Saving and Sharing</a></li>


<li class="toctree-l1"><a class="reference internal" href="bookmarks.html">Bookmarks</a><ul>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#webaudio">WebAudio</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#obsevers">Obsevers</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#visuals">Visuals</a></li>


<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#inspiration">Inspiration</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#misc">Misc</a></li>

</ul>
</li>
</ul>
</div>
</div>










<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







<






|
|



>







<
<
<
<
<
<
<
<
<
<



>









>
>
>

>
>
>
>
>
>



>
>




>
>

|
>








32
33
34
35
36
37
38

39
40
41
42
43
44
45
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94










95
96
97
98
99
100
101
...
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
...
199
200
201
202
203
204
205

206
207
208
209
210
211
212
213
214
215
216
217
218
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="What is bitrhythm about ?" href="what.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
<h1>Welcome to Bitrhythm’s  documentation!<a class="headerlink" href="#welcome-to-bitrhythm-s-documentation" title="Permalink to this headline">¶</a></h1>
<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#about-author">About Author</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">Demo and Tutorial</a><ul>
<li class="toctree-l2"><a class="reference internal" href="demo.html#video">Video</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#demo-song-1-techno">Demo Song 1 // Techno</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#getting-started">Getting Started</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#tutorial">Tutorial</a></li>
<li class="toctree-l2"><a class="reference internal" href="demo.html#full-code">Full Code</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="samples.html">Samples</a></li>
<li class="toctree-l1"><a class="reference internal" href="tweaking.html">What exactly is Tweaking ?</a><ul>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#dj-controls">DJ Controls</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#music-is-arrangement">Music is arrangement</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#see-also">See Also</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">Concepts and 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#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>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="saving.html">Saving and Sharing</a></li>
<li class="toctree-l1"><a class="reference internal" href="limitations.html">Limitations and Recording</a></li>
<li class="toctree-l1"><a class="reference internal" href="credits.html">Credits</a></li>
<li class="toctree-l1"><a class="reference internal" href="bookmarks.html">Bookmarks</a><ul>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#webaudio">WebAudio</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#obsevers">Obsevers</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#visuals">Visuals</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#misc">Misc</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#other-projects">Other Projects</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#inspiration">Inspiration</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#music">Music</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#algorithmic-music">Algorithmic Music</a></li>
</ul>
</li>
</ul>
</div>
</div>

Changes to build/html/limitations.html. 

30
31
32
33
34
35
36
37
38
39
40
41

42
43
44
45
46
47
48
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="MIDI and DAW Terms" href="midi.html" />
    <link rel="prev" title="What exactly is Tweaking ?" href="tweaking.html" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="tweaking.html" title="previous page">What exactly is Tweaking ?</a>
    <a class='right-next' id="next-link" href="midi.html" title="next page">MIDI and DAW Terms</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


|
<
>







 







|
|
<
<
<
<
<



|
|
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







|
|








30
31
32
33
34
35
36

37
38
39

40
41
42
43
44
45
46
47
..
80
81
82
83
84
85
86
87
88





89
90
91
92
93





94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Credits" href="credits.html" />

    <link rel="prev" title="Saving and Sharing" href="saving.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples





  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?





  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="saving.html" title="previous page">Saving and Sharing</a>
    <a class='right-next' id="next-link" href="credits.html" title="next page">Credits</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/main.html. 

30
31
32
33
34
35
36
37
38
39
40

41
42
43
44
45
46
47
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
183
184
185
186
187
188
189





190
191
192
193
194
195
196
...
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
247
248
249
250
251
...
263
264
265
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
292
293
294

295
296
297
298
299
300
301
302
303
304





305
306
307
308
309
310

311
312
313
314
315
316
317
318
319
320
321
322
323
324

325
326
327
328
329
330
331







332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
...
573
574
575
576
577
578
579












580
581
582
583
584
585
586
...
601
602
603
604
605
606
607

608
609
610
611
612


613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
...
649
650
651
652
653
654
655


































656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
...
729
730
731
732
733
734
735
736




737


















738
739
740
741
742
743
744
...
746
747
748
749
750
751
752
753

754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
...
785
786
787
788
789
790
791


792

793
794
795
796
797


798

799
800
801
802
803
804
805
...
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
...
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
...
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990



991



























992

993
994
995
996
997
998
999
....
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
....
1112
1113
1114
1115
1116
1117
1118



































































































































































1119










1120




1121




































1122


1123
1124



1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Saving and Sharing" href="saving.html" />

    <link rel="prev" title="Changelog" href="changelog.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
        <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">
................................................................................
   Main UI
  </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>
</ul>

            </nav>
        </div>
    </div>
</div>
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="concepts-and-code-walkthrough">
<h1>Concepts and Code Walkthrough<a class="headerlink" href="#concepts-and-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>
................................................................................
    <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="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">always</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">render_loop</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">animation</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">render_loop</span><span class="p">();</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animation</span><span class="p">)</span>
................................................................................
    <span class="p">}</span>

    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">false</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="s1">&#39;tempo-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</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="s1">&#39;tick-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">mem</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">mem</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">handlers</span> <span class="o">=</span> <span class="p">{};</span>
    <span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="o">-</span><span class="mf">1</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>

    <span class="nx">editor</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;change&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">text</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
    <span class="p">});</span>

    <span class="kd">var</span> <span class="nx">patterns</span> <span class="o">=</span> <span class="p">[</span> <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;0000&quot;</span><span class="p">)</span> <span class="p">];</span> <span class="c1">// need this for first eval</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="nx">loop</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">ToneEvent</span><span class="p">((</span><span class="nx">time</span><span class="p">,</span> <span class="nx">chord</span><span class="p">)</span> <span class="p">=&gt;</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="nx">$</span><span class="p">(</span><span class="s2">&quot;#duration&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span> <span class="o">+</span> <span class="nx">bars</span> <span class="o">+</span> <span class="s2">&quot;.&quot;</span> <span class="o">+</span> <span class="nx">tick</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nx">count</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">roundTo</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">seconds</span><span class="p">,</span> <span class="mf">2</span><span class="p">));</span>


        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">patterns</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</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">dials</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">dials</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>

            <span class="k">if</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">p</span> <span class="o">=</span> <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">patterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">p</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">p</span> <span class="o">&amp;&amp;</span> <span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">!==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">track_no</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">pattern</span> <span class="o">=</span> <span class="nx">pattern_clean</span><span class="p">(</span><span class="nx">p</span><span class="p">());</span>

                <span class="kd">var</span> <span class="nx">isHit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pattern</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="nx">tick</span><span class="p">]</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="kc">false</span><span class="p">;</span>

                <span class="k">try</span> <span class="p">{</span>
                    <span class="k">if</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="nb">eval</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>







                        <span class="k">if</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                            <span class="nx">transition</span><span class="p">();</span>
                        <span class="p">}</span>
                        <span class="nx">oldCode</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
                    <span class="p">}</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">ex</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">ex</span><span class="p">);</span>
                    <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">},</span> <span class="p">[]);</span>
    <span class="nx">loop</span><span class="p">.</span><span class="nx">loop</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="nx">loop</span><span class="p">.</span><span class="nx">loopEnd</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="o">+</span> <span class="s2">&quot;n&quot;</span><span class="p">;</span>
    <span class="nx">loop</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>

   <span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animation</span><span class="p">)</span>

<span class="p">}</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="dials">
................................................................................
    <span class="k">return</span> <span class="nx">context</span><span class="p">.</span><span class="nx">knob</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="main-ui">
<h2>Main UI<a class="headerlink" href="#main-ui" title="Permalink to this headline">¶</a></h2>












<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&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">vstack</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;header-playback&quot;</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">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary w-1/10 ml-2 mt-1&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{addDial}</span><span class="p">&gt;</span>+ Dial<span class="p">&lt;/</span><span class="nt">button</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">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mt-2 ml-2&quot;</span> <span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary w-1/10 ml-2 mt-1&quot;</span>  <span class="na">onclick</span><span class="o">=</span><span class="s">{play}</span><span class="p">&gt;</span>Play<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{save}</span><span class="p">&gt;</span>Save<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{reset}</span><span class="p">&gt;</span>Reset<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{reload}</span><span class="p">&gt;</span>Window Reload<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>


            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-1&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;edit-mode&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;edit-mode&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">/&gt;</span>
            <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;edit-mode&quot;</span><span class="p">&gt;</span>Edit<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-1&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">/&gt;</span>
            <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span><span class="p">&gt;</span>Execute Transition<span class="p">&lt;/</span><span class="nt">label</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">hstack</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span><span class="err">}</span> <span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">if</span><span class="o">=</span><span class="s">{</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span> <span class="err">&amp;&amp;</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span><span class="err">[</span><span class="na">index</span><span class="err">]</span> <span class="err">}</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">sample</span>  <span class="na">setsample</span><span class="o">=</span><span class="s">{setSample}</span> <span class="na">rmsample</span><span class="o">=</span><span class="s">{rmSample}</span> <span class="na">samples</span><span class="o">=</span><span class="s">{state.samples}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">&gt;&lt;/</span><span class="nt">sample</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">div</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">hstack</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">dials</span><span class="err">}</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">dial</span> <span class="na">rmdial</span><span class="o">=</span><span class="s">{rmDial}</span>  <span class="na">v</span><span class="o">=</span><span class="s">{state.dials[index]}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">&gt;&lt;/</span><span class="nt">dial</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">hstack</span><span class="p">&gt;</span>

................................................................................
    <span class="k">margin-top</span><span class="p">:</span> <span class="mi">4</span><span class="kt">vh</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="p">&gt;</span>
<span class="kd">var</span> <span class="nx">oldCode</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">oldPatterns</span> <span class="o">=</span> <span class="p">[];</span>



































<span class="c1">// var audio = new Audio();</span>
<span class="c1">// audio.loop = true;</span>
<span class="kd">const</span> <span class="nx">actx</span> <span class="o">=</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">context</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">dest</span> <span class="o">=</span> <span class="nx">actx</span><span class="p">.</span><span class="nx">createMediaStreamDestination</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">recorder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MediaRecorder</span><span class="p">(</span><span class="nx">dest</span><span class="p">.</span><span class="nx">stream</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">chunks</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">sampleURL</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sam</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">loop</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>

<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">mem</span><span class="o">:</span> <span class="p">{},</span>
    <span class="nx">dials</span><span class="o">:</span> <span class="p">[],</span>
    <span class="nx">numbers</span><span class="o">:</span> <span class="p">[],</span>
    <span class="nx">samples</span><span class="o">:</span> <span class="p">[],</span>
................................................................................
        <span class="p">})</span>
    <span class="p">}</span>


<span class="p">});</span>


<span class="nx">pattern_clean</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="nb">window</span><span class="p">.</span><span class="nx">pattern_clean</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span>


















<span class="p">}</span>

<span class="nx">save</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">code</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
    <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">tempo</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">dial_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">dials</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
................................................................................
        <span class="nx">sample_names</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="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">item</span><span class="p">[</span><span class="s2">&quot;__url&quot;</span><span class="p">]}),</span>
        <span class="nx">ticks</span><span class="o">:</span> <span class="mf">16</span><span class="p">,</span>
        <span class="nx">code</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">code</span><span class="p">,</span>
    <span class="p">};</span>
    <span class="kd">const</span> <span class="nx">lib</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">JsonUrl</span><span class="p">(</span><span class="s1">&#39;lzma&#39;</span><span class="p">);</span>
	<span class="nx">lib</span><span class="p">.</span><span class="nx">compress</span><span class="p">(</span><span class="nx">text</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">encodedData</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="s2">&quot;/song/&quot;</span> <span class="o">+</span> <span class="nx">encodedData</span><span class="p">;</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">open</span><span class="p">(</span><span class="nx">link</span><span class="p">,</span> <span class="s2">&quot;_blank&quot;</span><span class="p">);</span>

    <span class="p">});</span>
<span class="p">}</span>

<span class="nx">reload</span><span class="p">()</span> <span class="p">{</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span> <span class="s2">&quot;//&quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">host</span><span class="p">)</span>
<span class="p">}</span>

<span class="nx">reset</span><span class="p">()</span> <span class="p">{</span>

    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">loop</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">loop</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
        <span class="nx">loop</span><span class="p">.</span><span class="nx">cancel</span><span class="p">();</span>
        <span class="nx">loop</span><span class="p">.</span><span class="nx">dispose</span><span class="p">();</span>
        <span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</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="s1">&#39;tempo-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</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="s1">&#39;tick-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="nx">editor</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>

    <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">mem</span><span class="o">:</span> <span class="p">{},</span>
................................................................................
    <span class="p">})</span>


<span class="p">}</span>

<span class="nx">editTempo</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">({</span>


        <span class="nx">tempo</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span>

    <span class="p">})</span>
<span class="p">}</span>

<span class="nx">editTicks</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">({</span>


        <span class="nx">ticks</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span>

    <span class="p">})</span>
<span class="p">}</span>

<span class="nx">$</span><span class="p">{</span><span class="nx">core_loop</span><span class="p">}</span>

<span class="nx">start</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">recorder</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
................................................................................
<div class="section" id="sample">
<h2>Sample<a class="headerlink" href="#sample" title="Permalink to this headline">¶</a></h2>
<p>You can add samples using the file upload. All samples are available as an array – samples. Initialise samples, global variables and synthesisers using the transition function and change the sample parameters using the same during live coding.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">sample</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">vbox</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">vstack</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
        <span class="c">&lt;!-- &lt;input type=&quot;file&quot; id={&quot;sample-file&quot; + this.props.ti} style=&quot;width: 120px;&quot;/&gt; --&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">&quot;max-width: 120px;text-overflow: ellipsis; white-space: nowrap;overflow: hidden;&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">span</span><span class="p">&gt;</span>{ getLast(this.props.ti -1)} <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;cursor-pointer&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">{&quot;sample&quot;</span> <span class="err">+</span> <span class="na">this</span><span class="err">.</span><span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{remove(this.props.ti</span> <span class="na">-1</span><span class="err">)}</span><span class="p">&gt;</span>(x)<span class="p">&lt;/</span><span class="nt">span</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">vstack</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">vbox</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>
................................................................................
<span class="cm">        */</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>




<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">initWinamp</span><span class="p">(</span><span class="nx">preset</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">can</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;visual&quot;</span><span class="p">);</span>
    <span class="nx">can</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="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">75</span><span class="p">;</span>
    <span class="nx">can</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">can_container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;canvas-container&quot;</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="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">75</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="k">return</span> <span class="nx">val</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">hex2bin</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`1&#39;</span><span class="p">,</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`2&#39;</span><span class="p">,</span><span class="s1">&#39;b&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`3&#39;</span><span class="p">,</span><span class="s1">&#39;c&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`4&#39;</span><span class="p">,</span><span class="s1">&#39;d&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`5&#39;</span><span class="p">,</span><span class="s1">&#39;e&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`6&#39;</span><span class="p">,</span><span class="s1">&#39;f&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>



    <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>



























    <span class="nx">letters</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>

        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;0&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0000&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0001&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;2&quot;</span><span class="p">)</span> <span class="p">{</span>
................................................................................
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1110&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1111&quot;</span><span class="p">;</span>
        <span class="p">}</span>









    <span class="p">})</span>
    <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>









<span class="kd">function</span> <span class="nx">pattern_clean</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>













































































































































        <span class="k">return</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">p</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/ /g</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">fc</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">fc</span><span class="o">==</span> <span class="s2">&quot;p&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">&quot;xo&quot;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">fc</span><span class="o">==</span> <span class="s2">&quot;b&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">&quot;bin&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">&quot;hex&quot;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">&quot;bin&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span>  <span class="nx">p</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">&quot;xo&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
        <span class="nx">fp</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/x/g</span><span class="p">,</span> <span class="s2">&quot;1&quot;</span><span class="p">);</span>






















    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>












        <span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">hex2bin</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">fp</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">download</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">filename</span><span class="p">,</span> <span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
................................................................................
    <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">$</span><span class="p">{</span><span class="nx">knob_code</span><span class="p">}</span>
</pre></div>
</div>
</div>



































































































































































</div>




















































              </div>


              
        



        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="changelog.html" title="previous page">Changelog</a>
    <a class='right-next' id="next-link" href="saving.html" title="next page">Saving and Sharing</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


<
>







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







>
>
>
>







 







>
>






<







 







>

|


>

|







|
>
>
>
>
>





<
>

<




|

|
|

|

|
>







>
>
>
>
>
>
>













|
<
<
<

|







 







>
>
>
>
>
>
>
>
>
>
>
>







 







>





>
>


|





|







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>









<







 







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







 







|
>










|
|
|
|
<







 







>
>
|
>





>
>
|
>







 







|
|







 








>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>


>
>
>
>
|

|




|







 







|

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







 







>
>

>
>
>
>
>
>




>
>
>
>
>
>
>

|

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



>




<
<
<
<
<
|




<
<
|


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







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

>
>
>
>
>
>
>
>
>
>

>
>
>
>

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



|








30
31
32
33
34
35
36

37
38

39
40
41
42
43
44
45
46
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
...
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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
...
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
...
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315

316
317
318
319
320
321
322
...
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355

356
357

358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398



399
400
401
402
403
404
405
406
407
...
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
...
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
...
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763

764
765
766
767
768
769
770
...
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
...
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888

889
890
891
892
893
894
895
...
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
....
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
....
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
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
....
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
1415
....
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628





1629
1630
1631
1632
1633


1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
....
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />

    <link rel="next" title="Alternate Implementations" href="alternate-implementation.html" />
    <link rel="prev" title="Changelog" href="changelog.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
        <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">
................................................................................
   Main UI
  </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">
  <a class="reference internal nav-link" href="#id1">
   303
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#autocommit">
   Autocommit
  </a>
 </li>
</ul>

            </nav>
        </div>
    </div>
</div>
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="concepts-and-code-walkthrough">
<h1>Concepts and Code Walkthrough<a class="headerlink" href="#concepts-and-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>
................................................................................
    <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">always</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">render_loop</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">animation</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">render_loop</span><span class="p">();</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animation</span><span class="p">)</span>
................................................................................
    <span class="p">}</span>

    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">false</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="s1">&#39;tempo-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</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="s1">&#39;tick-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">mem</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">mem</span><span class="p">;</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">mem</span> <span class="o">=</span> <span class="nx">mem</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">handlers</span> <span class="o">=</span> <span class="p">{};</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="o">-</span><span class="mf">1</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>

    <span class="nx">editor</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;change&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">text</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
    <span class="p">});</span>

    <span class="kd">var</span> <span class="nx">patterns</span> <span class="o">=</span> <span class="p">[</span> <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;0000&quot;</span><span class="p">)</span> <span class="p">];</span> <span class="c1">// need this for first eval</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="nx">self</span><span class="p">.</span><span class="nx">state</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="nx">$</span><span class="p">(</span><span class="s2">&quot;#duration&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span> <span class="o">+</span> <span class="nx">bars</span> <span class="o">+</span> <span class="s2">&quot;.&quot;</span> <span class="o">+</span> <span class="nx">tick</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nx">count</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">roundTo</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">seconds</span><span class="p">,</span> <span class="mf">2</span><span class="p">));</span>

        <span class="nx">always</span><span class="p">();</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">patterns</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>

            <span class="kd">var</span> <span class="nx">dials</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">dials</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>

            <span class="k">if</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">p_text</span>  <span class="o">=</span> <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">p_text</span> <span class="o">=</span> <span class="nx">patterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">p_text</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">p_text</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="nx">p_text</span><span class="p">().</span><span class="nx">length</span> <span class="o">!==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">track_no</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">pattern</span> <span class="o">=</span> <span class="nx">pattern_parse</span><span class="p">(</span><span class="nx">p_text</span><span class="p">());</span>
                <span class="kd">var</span> <span class="nx">meta</span> <span class="o">=</span> <span class="nx">pattern_meta</span><span class="p">(</span><span class="nx">p_text</span><span class="p">());</span>
                <span class="kd">var</span> <span class="nx">isHit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pattern</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="nx">tick</span><span class="p">]</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="kc">false</span><span class="p">;</span>

                <span class="k">try</span> <span class="p">{</span>
                    <span class="k">if</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="nb">eval</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
                        <span class="k">if</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="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</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="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</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="nx">count</span> <span class="o">-=</span> <span class="nx">tick</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
                            <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
                            <span class="k">continue</span><span class="p">;</span>
                        <span class="p">}</span>
                        <span class="k">if</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                            <span class="nx">transition</span><span class="p">();</span>
                        <span class="p">}</span>
                        <span class="nx">oldCode</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
                    <span class="p">}</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">ex</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">ex</span><span class="p">);</span>
                    <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>
  <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span> <span class="nx">delta</span><span class="p">)</span>




  <span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animation</span><span class="p">);</span>

<span class="p">}</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="dials">
................................................................................
    <span class="k">return</span> <span class="nx">context</span><span class="p">.</span><span class="nx">knob</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="main-ui">
<h2>Main UI<a class="headerlink" href="#main-ui" title="Permalink to this headline">¶</a></h2>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>// Not working

.CodeMirror-selected,
.CodeMirror-focused,
.CodeMirror-activeline,
.CodeMirror-activeline-background {
    background: transparent;
    color: #882d2d;
    z-index: 5 !important;
}
</pre></div>
</div>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&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">vstack</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;header-playback&quot;</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">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary w-1/10 ml-2 mt-1&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{addDial}</span><span class="p">&gt;</span>+ Dial<span class="p">&lt;/</span><span class="nt">button</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">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mt-2 ml-2&quot;</span> <span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary w-1/10 ml-2 mt-1&quot;</span>  <span class="na">onclick</span><span class="o">=</span><span class="s">{play}</span><span class="p">&gt;</span>Play<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{save}</span><span class="p">&gt;</span>Save<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{reset}</span><span class="p">&gt;</span>Reset<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{reload}</span><span class="p">&gt;</span>Window Reload<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary ml-2&quot;</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{download}</span><span class="p">&gt;</span>Save File<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-1&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;edit-mode&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;edit-mode&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">/&gt;</span>
            <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;edit-mode&quot;</span><span class="p">&gt;</span>Edit<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-1&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">/&gt;</span>
            <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span><span class="p">&gt;</span>Execute Transition<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-1&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;load-mode&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;redo&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span><span class="p">/&gt;</span>
            <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;redo&quot;</span><span class="p">&gt;</span>Redo Bar<span class="p">&lt;/</span><span class="nt">label</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">vstack</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span><span class="err">}</span> <span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">div</span> <span class="na">if</span><span class="o">=</span><span class="s">{</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span> <span class="err">&amp;&amp;</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span><span class="err">[</span><span class="na">index</span><span class="err">]</span> <span class="err">}</span><span class="p">&gt;</span>
                    <span class="p">&lt;</span><span class="nt">sample</span>  <span class="na">setsample</span><span class="o">=</span><span class="s">{setSample}</span> <span class="na">rmsample</span><span class="o">=</span><span class="s">{rmSample}</span> <span class="na">samples</span><span class="o">=</span><span class="s">{state.samples}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">&gt;&lt;/</span><span class="nt">sample</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">div</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">vstack</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">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">dials</span><span class="err">}</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">dial</span> <span class="na">rmdial</span><span class="o">=</span><span class="s">{rmDial}</span>  <span class="na">v</span><span class="o">=</span><span class="s">{state.dials[index]}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">&gt;&lt;/</span><span class="nt">dial</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">hstack</span><span class="p">&gt;</span>

................................................................................
    <span class="k">margin-top</span><span class="p">:</span> <span class="mi">4</span><span class="kt">vh</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="p">&gt;</span>
<span class="kd">var</span> <span class="nx">oldCode</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">oldPatterns</span> <span class="o">=</span> <span class="p">[];</span>

<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">stopCallback</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">combo</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">&#39;f5&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</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="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>

<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">&#39;f9&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>

    <span class="k">if</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="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</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="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</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="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>

<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">&#39;f8&#39;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span> <span class="k">else</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="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>

<span class="c1">// var audio = new Audio();</span>
<span class="c1">// audio.loop = true;</span>
<span class="kd">const</span> <span class="nx">actx</span> <span class="o">=</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">context</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">dest</span> <span class="o">=</span> <span class="nx">actx</span><span class="p">.</span><span class="nx">createMediaStreamDestination</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">recorder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MediaRecorder</span><span class="p">(</span><span class="nx">dest</span><span class="p">.</span><span class="nx">stream</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">chunks</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">sampleURL</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sam</span><span class="p">;</span>

<span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>

<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">mem</span><span class="o">:</span> <span class="p">{},</span>
    <span class="nx">dials</span><span class="o">:</span> <span class="p">[],</span>
    <span class="nx">numbers</span><span class="o">:</span> <span class="p">[],</span>
    <span class="nx">samples</span><span class="o">:</span> <span class="p">[],</span>
................................................................................
        <span class="p">})</span>
    <span class="p">}</span>


<span class="p">});</span>


<span class="nx">pattern_parse</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="nb">window</span><span class="p">.</span><span class="nx">pattern_parse</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span>
<span class="p">}</span>

<span class="nx">pattern_meta</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="nb">window</span><span class="p">.</span><span class="nx">pattern_meta</span><span class="p">(</span><span class="nx">p</span><span class="p">);</span>
<span class="p">}</span>

<span class="nx">download</span><span class="p">()</span> <span class="p">{</span>
    
    <span class="kd">function</span> <span class="nx">download</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">filename</span> <span class="o">=</span> <span class="s2">&quot;song.txt&quot;</span><span class="p">,</span> <span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;text/plain&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">file</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="nx">data</span><span class="p">],</span> <span class="p">{</span><span class="nx">type</span><span class="o">:</span> <span class="nx">type</span><span class="p">});</span>
            <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;a&quot;</span><span class="p">),</span>
                    <span class="nx">url</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
            <span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
            <span class="nx">a</span><span class="p">.</span><span class="nx">download</span> <span class="o">=</span> <span class="nx">filename</span><span class="p">;</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
            <span class="nx">a</span><span class="p">.</span><span class="nx">click</span><span class="p">();</span>
            <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
                <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
                <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">revokeObjectURL</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span>  
            <span class="p">},</span> <span class="mf">0</span><span class="p">);</span> 
    <span class="p">}</span>
    <span class="nx">download</span><span class="p">(</span><span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">())</span>
<span class="p">}</span>

<span class="nx">save</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">code</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
    <span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">tempo</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">dial_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">dials</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
................................................................................
        <span class="nx">sample_names</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="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">item</span><span class="p">[</span><span class="s2">&quot;__url&quot;</span><span class="p">]}),</span>
        <span class="nx">ticks</span><span class="o">:</span> <span class="mf">16</span><span class="p">,</span>
        <span class="nx">code</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">code</span><span class="p">,</span>
    <span class="p">};</span>
    <span class="kd">const</span> <span class="nx">lib</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">JsonUrl</span><span class="p">(</span><span class="s1">&#39;lzma&#39;</span><span class="p">);</span>
	<span class="nx">lib</span><span class="p">.</span><span class="nx">compress</span><span class="p">(</span><span class="nx">text</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">encodedData</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="s2">&quot;/song/&quot;</span> <span class="o">+</span> <span class="nx">encodedData</span><span class="p">;</span>
        <span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="s1">&#39;Bitrhythm&#39;</span><span class="p">,</span> <span class="nx">link</span><span class="p">);</span>
        <span class="c1">//window.open(link, &quot;_blank&quot;);</span>
    <span class="p">});</span>
<span class="p">}</span>

<span class="nx">reload</span><span class="p">()</span> <span class="p">{</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span> <span class="s2">&quot;//&quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">host</span><span class="p">)</span>
<span class="p">}</span>

<span class="nx">reset</span><span class="p">()</span> <span class="p">{</span>

    <span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">true</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">stop</span><span class="p">();</span>
    <span class="nx">Tone</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">timer</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">clearInterval</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">timer</span><span class="p">);</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="s1">&#39;tempo-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</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="s1">&#39;tick-value&#39;</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="nx">editor</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>

    <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
        <span class="nx">mem</span><span class="o">:</span> <span class="p">{},</span>
................................................................................
    <span class="p">})</span>


<span class="p">}</span>

<span class="nx">editTempo</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">({</span>
        <span class="nx">state</span><span class="o">:</span> <span class="p">{</span>
            <span class="p">...</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="o">:</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">})</span>
<span class="p">}</span>

<span class="nx">editTicks</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">({</span>
        <span class="nx">state</span><span class="o">:</span> <span class="p">{</span>
            <span class="p">...</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="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span>
        <span class="p">}</span>
    <span class="p">})</span>
<span class="p">}</span>

<span class="nx">$</span><span class="p">{</span><span class="nx">core_loop</span><span class="p">}</span>

<span class="nx">start</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">recorder</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
................................................................................
<div class="section" id="sample">
<h2>Sample<a class="headerlink" href="#sample" title="Permalink to this headline">¶</a></h2>
<p>You can add samples using the file upload. All samples are available as an array – samples. Initialise samples, global variables and synthesisers using the transition function and change the sample parameters using the same during live coding.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">sample</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">vbox</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">vstack</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
        <span class="c">&lt;!-- &lt;input type=&quot;file&quot; id={&quot;sample-file&quot; + this.props.ti} style=&quot;width: 120px;&quot;/&gt; --&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">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;max-width: 120px;text-overflow: ellipsis; white-space: nowrap;&quot;</span><span class="p">&gt;</span>{ getLast(this.props.ti -1)} <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;cursor-pointer&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">{&quot;sample&quot;</span> <span class="err">+</span> <span class="na">this</span><span class="err">.</span><span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{remove(this.props.ti</span> <span class="na">-1</span><span class="err">)}</span><span class="p">&gt;</span>(x)<span class="p">&lt;/</span><span class="nt">span</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">vstack</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">vbox</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>
................................................................................
<span class="cm">        */</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/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="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</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">.</span><span class="nc">CodeMirror</span> <span class="nt">pre</span><span class="o">,</span>
<span class="p">.</span><span class="nc">CodeMirror-line</span> <span class="o">&gt;</span> <span class="nt">span</span><span class="o">,</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">&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 + Demo<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>Tutorial<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>
<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="p">}</span>

<span class="kd">function</span> <span class="nx">initWinamp</span><span class="p">(</span><span class="nx">preset</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">can</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;visual&quot;</span><span class="p">);</span>
    <span class="nx">can</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">can</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">can_container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;canvas-container&quot;</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="k">return</span> <span class="nx">val</span><span class="p">;</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">romantogypsy</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">letters</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`1&#39;</span><span class="p">,</span><span class="s1">&#39;a&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`2&#39;</span><span class="p">,</span><span class="s1">&#39;b&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`3&#39;</span><span class="p">,</span><span class="s1">&#39;c&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`4&#39;</span><span class="p">,</span><span class="s1">&#39;d&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`5&#39;</span><span class="p">,</span><span class="s1">&#39;e&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`6&#39;</span><span class="p">,</span><span class="s1">&#39;f&#39;</span><span class="p">);</span>
    <span class="k">return</span> <span class="nx">letters</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\d/</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">letter</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;a&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">10</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;b&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">11</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;c&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">12</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;d&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">13</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">14</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">15</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;=</span> <span class="nx">no</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">lettertobin</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;0&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0000&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0001&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;2&quot;</span><span class="p">)</span> <span class="p">{</span>
................................................................................
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1110&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1111&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">hex2bin</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">letters</span> <span class="o">=</span> <span class="nx">romantogypsy</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="nx">letters</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="nx">lettertobin</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span>
    <span class="p">})</span>
    <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">str</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">((</span><span class="nx">index</span> <span class="o">&gt;</span> <span class="mf">0</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="nx">index</span> <span class="o">&lt;</span> <span class="nx">str</span><span class="p">.</span><span class="nx">length</span><span class="p">))</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">str</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kc">null</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">pattern_meta</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">p</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/ /g</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">fc</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">fc</span><span class="o">==</span> <span class="s2">&quot;p&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">&quot;xo&quot;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">&quot;xo&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
        <span class="nx">fp</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/x/g</span><span class="p">,</span> <span class="s2">&quot;1&quot;</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">fp</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">meta</span> <span class="o">=</span> <span class="p">{}</span>
    <span class="kd">var</span> <span class="nx">one_index</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span>

    <span class="k">while</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">&gt;</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">break</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">current_meta</span> <span class="o">=</span> <span class="p">{}</span>
        <span class="kd">var</span> <span class="nx">current_letter</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span> <span class="o">==</span> <span class="s2">&quot;_&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">meta</span><span class="p">[</span><span class="nx">one_index</span> <span class="o">-</span><span class="mf">1</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="s2">&quot;volume&quot;</span><span class="o">:</span> <span class="s2">&quot;off&quot;</span> <span class="p">};</span>
            <span class="nx">index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
            <span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
            <span class="k">continue</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</span><span class="p">,</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">next_letter</span> <span class="o">==</span> <span class="s2">&quot;[&quot;</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">jump_index</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">buffer</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
                <span class="k">while</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(((</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">jump_index</span><span class="p">)</span> <span class="o">&gt;</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">break</span><span class="p">;</span>
                    <span class="p">}</span>
                    <span class="kd">let</span> <span class="nx">b_next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</span><span class="p">,</span> <span class="p">((</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">)</span> <span class="o">+</span> <span class="nx">jump_index</span><span class="p">));</span>

                    <span class="k">if</span> <span class="p">(</span><span class="nx">b_next_letter</span> <span class="o">==</span> <span class="s2">&quot;]&quot;</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">jump_index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
                        <span class="k">break</span><span class="p">;</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="nx">buffer</span> <span class="o">+=</span> <span class="nx">b_next_letter</span><span class="p">;</span>
                        <span class="nx">jump_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
                    <span class="p">}</span>
                <span class="p">}</span>
                <span class="kd">var</span> <span class="nx">individual_meta</span> <span class="o">=</span> <span class="nx">buffer</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">&quot;;&quot;</span><span class="p">)</span>
                <span class="nx">individual_meta</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">&quot;^&quot;</span><span class="p">))</span> <span class="p">{</span>
                        <span class="nx">current_meta</span><span class="p">[</span><span class="s2">&quot;pitch&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">&quot;+&quot;</span><span class="p">))</span> <span class="p">{</span>
                        <span class="nx">current_meta</span><span class="p">[</span><span class="s2">&quot;delay&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="nx">current_meta</span><span class="p">[</span><span class="s2">&quot;volume&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span>
                    <span class="p">}</span>
                <span class="p">})</span>
                <span class="nx">meta</span><span class="p">[</span><span class="nx">one_index</span> <span class="o">-</span><span class="mf">1</span><span class="p">]</span> <span class="o">=</span> <span class="nx">current_meta</span>
                <span class="nx">index</span> <span class="o">+=</span> <span class="nx">jump_index</span><span class="p">;</span>
                <span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
                <span class="k">continue</span><span class="p">;</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">meta</span><span class="p">[</span><span class="nx">one_index</span> <span class="o">-</span><span class="mf">1</span><span class="p">]</span> <span class="o">=</span> <span class="nx">current_meta</span>
                <span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
                <span class="nx">index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
                <span class="k">continue</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span> <span class="o">==</span> <span class="s2">&quot;*&quot;</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</span><span class="p">,</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">);</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">next_letter</span> <span class="o">==</span> <span class="s2">&quot;`&quot;</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">index</span> <span class="o">+=</span> <span class="mf">3</span><span class="p">;</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nx">index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
                    <span class="k">continue</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
                <span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
                <span class="k">continue</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">meta</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">Sample</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">no</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">volume</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span>
    <span class="nx">filter</span> <span class="o">=</span> <span class="nx">filter</span> <span class="o">||</span> <span class="mf">10000</span>
    <span class="nx">volume</span> <span class="o">=</span> <span class="nx">volume</span> <span class="o">||</span> <span class="mf">0</span>
    <span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Filter</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mf">96</span><span class="p">);</span>
    <span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Channel</span><span class="p">({</span><span class="nx">channelCount</span><span class="o">:</span> <span class="mf">2</span><span class="p">,</span> <span class="nx">volume</span><span class="o">:</span> <span class="nx">volume</span><span class="p">}).</span><span class="nx">chain</span><span class="p">(</span><span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="nx">mem</span><span class="p">.</span><span class="nx">master</span><span class="p">)</span>
    <span class="nx">samples</span><span class="p">[</span><span class="nx">no</span><span class="p">].</span><span class="nx">connect</span><span class="p">(</span><span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
    <span class="nx">hit_map</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">no</span><span class="p">;</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">Sample</span> <span class="o">=</span> <span class="nx">Sample</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">p</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="nx">vol</span> <span class="o">=</span> <span class="nx">vol</span> <span class="o">||</span> <span class="mf">1</span>
    <span class="nx">delay</span> <span class="o">=</span> <span class="nx">delay</span> <span class="o">||</span> <span class="s2">&quot;+0&quot;</span><span class="p">;</span>

    <span class="nx">samples</span><span class="p">[</span><span class="nx">s</span><span class="p">].</span><span class="nx">triggerAttackRelease</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">vol</span><span class="p">);</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">hit_map</span><span class="p">))</span> <span class="p">{</span>
    	<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">==</span> <span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
	    	<span class="nx">mem</span><span class="p">[</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;_last&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">count</span> 
	    <span class="p">}</span>
  	<span class="p">}</span>
<span class="p">}</span>

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

<span class="kd">function</span> <span class="nx">pn</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">sample_no</span> <span class="o">=</span> <span class="nx">hit_map</span><span class="p">[</span><span class="nx">s</span><span class="p">]</span>
    <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="nx">vol</span> <span class="o">=</span> <span class="nx">vol</span> <span class="o">||</span> <span class="mf">1</span>
    <span class="nx">delay</span> <span class="o">=</span> <span class="nx">delay</span> <span class="o">||</span> <span class="s2">&quot;+0&quot;</span><span class="p">;</span>
    <span class="nx">samples</span><span class="p">[</span><span class="nx">sample_no</span><span class="p">].</span><span class="nx">triggerAttackRelease</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">vol</span><span class="p">);</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">hit_map</span><span class="p">))</span> <span class="p">{</span>
    	<span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">==</span> <span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
	    	<span class="nx">mem</span><span class="p">[</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;_last&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">count</span> 
	    <span class="p">}</span>
  	<span class="p">}</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">pn</span> <span class="o">=</span> <span class="nx">pn</span><span class="p">;</span>



<span class="kd">function</span> <span class="nx">pattern_parse</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="nx">p</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/ /g</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">);</span>
    <span class="nx">p</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\[.+?\]/g</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">fc</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">fc</span><span class="o">==</span> <span class="s2">&quot;p&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">&quot;xo&quot;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>





    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">&quot;hex&quot;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
    <span class="p">}</span>



    <span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">&quot;xo&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
        <span class="nx">fp</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/x/g</span><span class="p">,</span> <span class="s2">&quot;1&quot;</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">&quot;xo&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">fin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span>
        <span class="k">while</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">&gt;=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">done</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
                <span class="k">continue</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="kd">var</span> <span class="nx">current_letter</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">[</span><span class="nx">index</span> <span class="o">-</span> <span class="mf">1</span><span class="p">]</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span> <span class="o">==</span> <span class="s2">&quot;*&quot;</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</span><span class="p">,</span><span class="nx">index</span><span class="p">);</span>
                <span class="k">if</span> <span class="p">(</span><span class="nx">next_letter</span> <span class="o">==</span> <span class="s2">&quot;`&quot;</span><span class="p">)</span> <span class="p">{</span>
                    <span class="kd">var</span> <span class="nx">next_next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</span><span class="p">,</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">);</span>
                    <span class="nx">fin</span> <span class="o">+=</span>  <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">romantogypsy</span><span class="p">(</span><span class="nx">next_letter</span> <span class="o">+</span> <span class="nx">next_next_letter</span><span class="p">));</span>
                    <span class="nx">index</span> <span class="o">+=</span> <span class="mf">3</span><span class="p">;</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nx">fin</span> <span class="o">+=</span> <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">next_letter</span><span class="p">);</span>
                    <span class="nx">index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
                <span class="p">}</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">fin</span> <span class="o">+=</span> <span class="nx">current_letter</span><span class="p">;</span>
                <span class="nx">index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">fin</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">hex2bin</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">fp</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">download</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">filename</span><span class="p">,</span> <span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
................................................................................
    <span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="p">}</span>

<span class="nx">$</span><span class="p">{</span><span class="nx">knob_code</span><span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="id1">
<h2>303<a class="headerlink" href="#id1" title="Permalink to this headline">¶</a></h2>
<p>Taken from <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a>.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">ThreeOhUnit</span><span class="p">(</span><span class="nx">audio</span><span class="p">,</span> <span class="nx">waveform</span><span class="p">,</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">output</span><span class="p">,</span> <span class="nx">patternLength</span> <span class="o">=</span> <span class="mf">16</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">synth</span> <span class="o">=</span> <span class="nx">audio</span><span class="p">.</span><span class="nx">ThreeOh</span><span class="p">(</span><span class="nx">waveform</span><span class="p">,</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">output</span><span class="p">);</span>
    <span class="kd">function</span> <span class="nx">step</span><span class="p">(</span><span class="nx">note</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="p">{</span>
            <span class="nx">type</span><span class="o">:</span> <span class="s2">&quot;on&quot;</span><span class="p">,</span>
            <span class="nx">accent</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
            <span class="nx">glide</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
            <span class="nx">note</span><span class="o">:</span> <span class="s2">&quot;A3&quot;</span><span class="p">,</span>
        <span class="p">};</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">note</span> <span class="o">==</span> <span class="s2">&quot;off&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">synth</span><span class="p">.</span><span class="nx">noteOff</span><span class="p">();</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">synth</span><span class="p">.</span><span class="nx">noteOn</span><span class="p">(</span><span class="nx">note</span><span class="p">.</span><span class="nx">note</span><span class="p">,</span> <span class="nx">note</span><span class="p">.</span><span class="nx">accent</span><span class="p">,</span> <span class="nx">note</span><span class="p">.</span><span class="nx">glide</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="p">{</span>
        <span class="nx">step</span><span class="p">,</span>
        <span class="nx">params</span><span class="o">:</span> <span class="nx">synth</span><span class="p">.</span><span class="nx">params</span>
    <span class="p">};</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">textNoteToNumber</span><span class="p">(</span><span class="nx">note</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">lookupTable</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Map</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">revLook</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Map</span><span class="p">();</span>
    <span class="p">(()</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">lookupTable</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">n</span><span class="p">);</span>
            <span class="nx">revLook</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">n</span><span class="p">,</span> <span class="nx">note</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;A&#39;</span><span class="p">,</span> <span class="mf">9</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;A#&#39;</span><span class="p">,</span> <span class="mf">10</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;B&#39;</span><span class="p">,</span> <span class="mf">11</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;C&#39;</span><span class="p">,</span> <span class="mf">0</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;C#&#39;</span><span class="p">,</span> <span class="mf">1</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;D&#39;</span><span class="p">,</span> <span class="mf">2</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;D#&#39;</span><span class="p">,</span> <span class="mf">3</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;E&#39;</span><span class="p">,</span> <span class="mf">4</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;F&#39;</span><span class="p">,</span> <span class="mf">5</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;F#&#39;</span><span class="p">,</span> <span class="mf">6</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;G&#39;</span><span class="p">,</span> <span class="mf">7</span><span class="p">);</span>
        <span class="nx">add</span><span class="p">(</span><span class="s1">&#39;G#&#39;</span><span class="p">,</span> <span class="mf">8</span><span class="p">);</span>
    <span class="p">})();</span>

    <span class="kd">const</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">note</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">note</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
    <span class="kd">const</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">note</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span> <span class="nx">note</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
    <span class="c1">// @ts-ignore</span>
    <span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="o">*</span> <span class="mf">12</span> <span class="o">+</span> <span class="nx">lookupTable</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="o">+</span> <span class="mf">12</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">midiNoteToFrequency</span><span class="p">(</span><span class="nx">noteNumber</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mf">440</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="mf">2</span><span class="p">,</span> <span class="p">(</span><span class="nx">noteNumber</span> <span class="o">-</span> <span class="mf">69</span><span class="p">)</span> <span class="o">/</span> <span class="mf">12</span><span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">Audio</span><span class="p">(</span><span class="nx">au</span> <span class="o">=</span> <span class="k">new</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">AudioContext</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitAudioContext</span><span class="p">)())</span> <span class="p">{</span>

    <span class="kd">function</span> <span class="nx">masterChannel</span><span class="p">()</span> <span class="p">{</span>
        <span class="kd">const</span> <span class="nx">gain</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createGain</span><span class="p">();</span>
        <span class="nx">gain</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.5</span><span class="p">;</span>
        <span class="kd">const</span> <span class="nx">limiter</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createDynamicsCompressor</span><span class="p">();</span>
        <span class="nx">limiter</span><span class="p">.</span><span class="nx">attack</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.005</span><span class="p">;</span>
        <span class="nx">limiter</span><span class="p">.</span><span class="nx">release</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.1</span><span class="p">;</span>
        <span class="nx">limiter</span><span class="p">.</span><span class="nx">ratio</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">15.0</span><span class="p">;</span>
        <span class="nx">limiter</span><span class="p">.</span><span class="nx">knee</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>
        <span class="nx">limiter</span><span class="p">.</span><span class="nx">threshold</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="o">-</span><span class="mf">0.5</span><span class="p">;</span>
        <span class="nx">gain</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">limiter</span><span class="p">);</span>
        <span class="nx">limiter</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">destination</span><span class="p">);</span>
        <span class="k">return</span> <span class="p">{</span>
            <span class="k">in</span><span class="o">:</span> <span class="nx">gain</span>
        <span class="p">};</span>
    <span class="p">}</span>

    <span class="kd">const</span> <span class="nx">master</span> <span class="o">=</span> <span class="nx">masterChannel</span><span class="p">();</span>

    <span class="kd">function</span> <span class="nx">ThreeOh</span><span class="p">(</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;sawtooth&quot;</span><span class="p">,</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">master</span><span class="p">.</span><span class="k">in</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaults</span> <span class="o">||</span> <span class="p">{</span>
            <span class="s2">&quot;cutoff&quot;</span><span class="o">:</span> <span class="mf">400</span><span class="p">,</span>
            <span class="s2">&quot;resonance&quot;</span><span class="o">:</span> <span class="mf">15</span><span class="p">,</span>
            <span class="s2">&quot;envMod&quot;</span><span class="o">:</span> <span class="mf">4000</span><span class="p">,</span>
            <span class="s2">&quot;decay&quot;</span><span class="o">:</span> <span class="mf">0.5</span>
        <span class="p">}</span>
        <span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createBiquadFilter</span><span class="p">();</span>
        <span class="nx">filter</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">&quot;lowpass&quot;</span><span class="p">;</span>
        <span class="nx">filter</span><span class="p">.</span><span class="nx">Q</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">resonance</span><span class="p">;</span>
        <span class="nx">filter</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">cutoff</span><span class="p">;</span>
        <span class="kd">const</span> <span class="nx">pResonance</span> <span class="o">=</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">Q</span><span class="p">;</span>
        <span class="kd">const</span> <span class="nx">pCutoff</span> <span class="o">=</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">frequency</span><span class="p">;</span>

        <span class="kd">const</span> <span class="nx">decayTimeNode</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createConstantSource</span><span class="p">();</span>
        <span class="nx">decayTimeNode</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">decay</span><span class="p">;</span>
        <span class="nx">decayTimeNode</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
        <span class="kd">const</span> <span class="nx">pDecay</span> <span class="o">=</span> <span class="nx">decayTimeNode</span><span class="p">.</span><span class="nx">offset</span><span class="p">;</span>

        <span class="kd">const</span> <span class="nx">env</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createConstantSource</span><span class="p">();</span>
        <span class="nx">env</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
        <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>

        <span class="kd">const</span> <span class="nx">scaleNode</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createGain</span><span class="p">();</span>
        <span class="nx">scaleNode</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">envMod</span><span class="p">;</span>
        <span class="kd">const</span> <span class="nx">pEnvMod</span> <span class="o">=</span> <span class="nx">scaleNode</span><span class="p">.</span><span class="nx">gain</span><span class="p">;</span>
        <span class="nx">env</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">scaleNode</span><span class="p">);</span>
        <span class="nx">scaleNode</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">detune</span><span class="p">);</span>
        <span class="kd">const</span> <span class="nx">osc</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createOscillator</span><span class="p">();</span>
        <span class="nx">osc</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="nx">type</span><span class="p">;</span>
        <span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">440</span><span class="p">;</span>
        <span class="nx">osc</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
        <span class="kd">const</span> <span class="nx">vca</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createGain</span><span class="p">();</span>
        <span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>
        <span class="nx">osc</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">vca</span><span class="p">);</span>
        <span class="nx">vca</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">filter</span><span class="p">);</span>
        <span class="nx">filter</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
        <span class="kd">function</span> <span class="nx">noteOn</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">accent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">glide</span> <span class="o">=</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">accent</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
                <span class="c1">//env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);</span>
                <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">setValueAtTime</span><span class="p">(</span><span class="mf">1.0</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
                <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">exponentialRampToValueAtTime</span><span class="p">(</span><span class="mf">0.01</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">+</span> <span class="nx">pDecay</span><span class="p">.</span><span class="nx">value</span> <span class="o">/</span> <span class="mf">3</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="k">else</span> <span class="p">{</span>
                <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
                <span class="c1">//env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);</span>
                <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">setValueAtTime</span><span class="p">(</span><span class="mf">1.0</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
                <span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">exponentialRampToValueAtTime</span><span class="p">(</span><span class="mf">0.01</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">+</span> <span class="nx">pDecay</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
            <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">note</span> <span class="o">==</span> <span class="s2">&quot;number&quot;</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">setTargetAtTime</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">,</span> <span class="nx">glide</span> <span class="o">?</span> <span class="mf">0.02</span> <span class="o">:</span> <span class="mf">0.002</span><span class="p">);</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">setTargetAtTime</span><span class="p">(</span><span class="nx">midiNoteToFrequency</span><span class="p">(</span><span class="nx">textNoteToNumber</span><span class="p">(</span><span class="nx">note</span><span class="p">)),</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">,</span> <span class="nx">glide</span> <span class="o">?</span> <span class="mf">0.02</span> <span class="o">:</span> <span class="mf">0.002</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
            <span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">setValueAtTime</span><span class="p">(</span><span class="nx">accent</span> <span class="o">?</span> <span class="mf">0.2</span> <span class="o">:</span> <span class="mf">0.15</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
            <span class="c1">//vca.gain.setTargetAtTime(accent ? 0.5 : 0.3,au.currentTime, 0.001);</span>
            <span class="c1">//vca.gain.setValueAtTime(0.2, au.currentTime);</span>
            <span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">linearRampToValueAtTime</span><span class="p">(</span><span class="mf">0.1</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">+</span> <span class="mf">0.2</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="kd">function</span> <span class="nx">noteOff</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
            <span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">setTargetAtTime</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="p">{</span>
            <span class="nx">noteOn</span><span class="p">,</span>
            <span class="nx">noteOff</span><span class="p">,</span>
            <span class="nx">params</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">cutoff</span><span class="o">:</span> <span class="nx">pCutoff</span><span class="p">,</span>
                <span class="nx">resonance</span><span class="o">:</span> <span class="nx">pResonance</span><span class="p">,</span>
                <span class="nx">envMod</span><span class="o">:</span> <span class="nx">pEnvMod</span><span class="p">,</span>
                <span class="nx">decay</span><span class="o">:</span> <span class="nx">pDecay</span>
            <span class="p">}</span>
        <span class="p">};</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="p">{</span>
        <span class="nx">ThreeOh</span><span class="p">,</span>
        <span class="nx">master</span><span class="p">,</span>
        <span class="nx">context</span><span class="o">:</span> <span class="nx">au</span>
    <span class="p">};</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">Audio</span> <span class="o">=</span> <span class="nx">Audio</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">ThreeOhUnit</span> <span class="o">=</span> <span class="nx">ThreeOhUnit</span><span class="p">;</span>
</pre></div>
</div>
</div>
<div class="section" id="autocommit">
<h2>Autocommit<a class="headerlink" href="#autocommit" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://xiaoouwang.medium.com/tutorial-advanced-use-of-watchdog-in-python-excluding-files-a-git-auto-commit-example-part-7024913ad5a8">https://xiaoouwang.medium.com/tutorial-advanced-use-of-watchdog-in-python-excluding-files-a-git-auto-commit-example-part-7024913ad5a8</a><br />
<a class="reference external" href="https://github.com/gitwatch/gitwatch">https://github.com/gitwatch/gitwatch</a></p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span>
<span class="kn">import</span> <span class="nn">time</span>
<span class="kn">from</span> <span class="nn">watchdog.observers</span> <span class="kn">import</span> <span class="n">Observer</span>
<span class="kn">from</span> <span class="nn">watchdog.events</span> <span class="kn">import</span> <span class="n">RegexMatchingEventHandler</span>
<span class="kn">import</span> <span class="nn">os</span>

<span class="k">def</span> <span class="nf">on_created</span><span class="p">(</span><span class="n">event</span><span class="p">):</span>
    <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> has been created&quot;</span><span class="p">)</span>
    <span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;git add </span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2">&quot;</span><span class="p">)</span>
    <span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;git commit -m &#39;</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> created&#39;&quot;</span><span class="p">)</span>

<span class="k">def</span> <span class="nf">on_deleted</span><span class="p">(</span><span class="n">event</span><span class="p">):</span>
    <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;Delete </span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2">!&quot;</span><span class="p">)</span>
    <span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;git commit -m &#39;</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> deleted&#39;&quot;</span><span class="p">)</span>


<span class="k">def</span> <span class="nf">on_modified</span><span class="p">(</span><span class="n">event</span><span class="p">):</span>
    <span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> has been modified&quot;</span><span class="p">)</span>
    <span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;git add .&quot;</span><span class="p">)</span>
    <span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">&quot;git commit -m &#39;</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> modified&#39;&quot;</span><span class="p">)</span>

<span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">&quot;__main__&quot;</span><span class="p">:</span>
    <span class="c1"># create the event handler</span>
    <span class="n">ignore_patterns</span> <span class="o">=</span> <span class="p">[</span><span class="sa">r</span><span class="s2">&quot;^.+/\.git.*&quot;</span><span class="p">]</span>
    <span class="n">ignore_directories</span> <span class="o">=</span> <span class="kc">False</span>
    <span class="n">case_sensitive</span> <span class="o">=</span> <span class="kc">True</span>
    <span class="n">my_event_handler</span> <span class="o">=</span> <span class="n">RegexMatchingEventHandler</span><span class="p">(</span><span class="n">ignore_regexes</span><span class="o">=</span><span class="n">ignore_patterns</span><span class="p">,</span> <span class="n">ignore_directories</span><span class="o">=</span><span class="n">ignore_directories</span><span class="p">,</span> <span class="n">case_sensitive</span><span class="o">=</span><span class="n">case_sensitive</span><span class="p">)</span>

    <span class="n">my_event_handler</span><span class="o">.</span><span class="n">on_created</span> <span class="o">=</span> <span class="n">on_created</span>
    <span class="n">my_event_handler</span><span class="o">.</span><span class="n">on_deleted</span> <span class="o">=</span> <span class="n">on_deleted</span>
    <span class="n">my_event_handler</span><span class="o">.</span><span class="n">on_modified</span> <span class="o">=</span> <span class="n">on_modified</span>

    <span class="c1"># create an observer</span>
    <span class="n">path</span> <span class="o">=</span> <span class="s2">&quot;.&quot;</span>
    <span class="n">go_recursively</span> <span class="o">=</span> <span class="kc">True</span>
    <span class="n">my_observer</span> <span class="o">=</span> <span class="n">Observer</span><span class="p">()</span>
    <span class="n">my_observer</span><span class="o">.</span><span class="n">schedule</span><span class="p">(</span><span class="n">my_event_handler</span><span class="p">,</span> <span class="n">path</span><span class="p">,</span> <span class="n">recursive</span><span class="o">=</span><span class="n">go_recursively</span><span class="p">)</span>

    <span class="n">my_observer</span><span class="o">.</span><span class="n">start</span><span class="p">()</span>
    <span class="k">try</span><span class="p">:</span>
        <span class="k">while</span> <span class="kc">True</span><span class="p">:</span>
            <span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>
    <span class="k">except</span><span class="p">:</span>
        <span class="n">my_observer</span><span class="o">.</span><span class="n">stop</span><span class="p">()</span>
        <span class="nb">print</span><span class="p">(</span><span class="s2">&quot;Observer Stopped&quot;</span><span class="p">)</span>
    <span class="n">my_observer</span><span class="o">.</span><span class="n">join</span><span class="p">()</span>
</pre></div>
</div>
</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="changelog.html" title="previous page">Changelog</a>
    <a class='right-next' id="next-link" href="alternate-implementation.html" title="next page">Alternate Implementations</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Deleted build/html/midi.html. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MIDI and DAW Terms &#8212; Bitrhythm&#39;s literate documentation</title>
    
  <link href="_static/css/theme.css" rel="stylesheet" />
  <link href="_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css" rel="stylesheet" />

    
  <link rel="stylesheet"
    href="_static/vendor/fontawesome/5.13.0/css/all.min.css">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-solid-900.woff2">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2">

    
      

    
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/sphinx-book-theme.e8e5499552300ddf5d7adccae7cc3b70.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="_static/custom.css" />
    
  <link rel="preload" as="script" href="_static/js/index.1c5a1a01449ed65a7b51.js">

    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Samples" href="samples.html" />
    <link rel="prev" title="Limitations and Recording" href="limitations.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>

    

    <div class="container-xl">
      <div class="row">
          
<div class="col-12 col-md-3 bd-sidebar site-navigation show" id="site-navigation">
    
        <div class="navbar-brand-box">
    <a class="navbar-brand text-wrap" href="index.html">
      
      
      <h1 class="site-logo" id="site-title">Bitrhythm's literate documentation</h1>
      
    </a>
</div><nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
    <div class="bd-toc-item active">
        <p class="caption">
 <span class="caption-text">
  Table of Contents
 </span>
</p>
<ul class="current nav bd-sidenav">
 <li class="toctree-l1">
  <a class="reference internal" href="what.html">
   What is bitrhythm about ?
  </a>
 </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">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </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">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

    </div>
</nav> <!-- To handle the deprecated key -->

<div class="navbar_extra_footer">
  
<a target="_blank" href="/">Bitrhythm App Home</a><br>
<a target="_blank" href="https://xyzzyapps.link">Xyzzy Apps Home</a><br>
<p class='custom-nav-footer'>(c) Xyzzy Apps, 2021</p>

</div>

</div>


          


          
<main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
    
    <div class="topbar container-xl fixed-top">
    <div class="topbar-contents row">
        <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show"></div>
        <div class="col pl-md-4 topbar-main">
            
            <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
                data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
                aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation"
                title="Toggle navigation" data-toggle="tooltip" data-placement="left">
                <i class="fas fa-bars"></i>
                <i class="fas fa-arrow-left"></i>
                <i class="fas fa-arrow-up"></i>
            </button>
            
            
            <!-- Source interaction buttons -->

            <!-- Full screen (wrap in <a> to have style consistency -->

<a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
        data-placement="bottom" onclick="toggleFullScreen()" aria-label="Fullscreen mode"
        title="Fullscreen mode"><i
            class="fas fa-expand"></i></button></a>

            <!-- Launch buttons -->

        </div>

        <!-- Table of contents -->
        <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-h1 nav-item toc-entry">
  <a class="reference internal nav-link" href="#">
   MIDI and DAW Terms
  </a>
  <ul class="visible nav section-nav flex-column">
   <li class="toc-h2 nav-item toc-entry">
    <a class="reference internal nav-link" href="#midi">
     MIDI
    </a>
   </li>
  </ul>
 </li>
 <li class="toc-h1 nav-item toc-entry">
  <a class="reference internal nav-link" href="#usage">
   Usage
  </a>
  <ul class="visible nav section-nav flex-column">
   <li class="toc-h2 nav-item toc-entry">
    <a class="reference internal nav-link" href="#terms">
     Terms
    </a>
   </li>
  </ul>
 </li>
</ul>

            </nav>
        </div>
    </div>
</div>
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="midi-and-daw-terms">
<h1>MIDI and DAW Terms<a class="headerlink" href="#midi-and-daw-terms" title="Permalink to this headline">¶</a></h1>
<div class="section" id="midi">
<h2>MIDI<a class="headerlink" href="#midi" title="Permalink to this headline">¶</a></h2>
<p><a href="https://en.wikipedia.org/wiki/MIDI">MIDI</a> changed music.</p>
<p>Consider what a classically trained Musician needs to do, to make his
music heard.</p>
<p>He needs to,</p>
<ol class="simple">
<li><p>Write it</p></li>
<li><p>Get a bunch of musicians</p></li>
<li><p>Practice</p></li>
<li><p>Play</p></li>
<li><p>goto 1</p></li>
<li><p>Record the Final Cut in a Studio</p></li>
</ol>
<p>With MIDI,</p>
<ol class="simple">
<li><p>Write it. Save it, with a Software</p></li>
<li><p>Get the electronic instruments to play it for him
-or-
Get a computer Software to play it for him</p></li>
<li><p>Tweak</p></li>
<li><p>Record the Final Cut in Software or a Studio</p></li>
</ol>
<p>MIDI is - Musical Instrument Digital Interface.</p>
<p>It abstracts <a href="https://en.wikipedia.org/wiki/Musical_notation">Music Notation</a> into bytes.
Since its bytes, you can replay it with software.</p>
<p>MIDI made production,</p>
<ul class="simple">
<li><p>Dirt Cheap</p></li>
<li><p>Made Producers more efficient</p></li>
</ul>
<p>How about Audio Quality ?</p>
<ul class="simple">
<li><p>A Classical Ensemble still has its place. Panning is unique there.</p></li>
<li><p>But MIDI + Electronic Instrument increased the Range. It helped form whole new genres in Music like EDM, IDM, SynthPunk …</p></li>
</ul>
<p>Limitations ?</p>
<ul class="simple">
<li><p>MIDI is limited to 16 instruments.</p></li>
<li><p>Integers.</p></li>
<li><p>16 is a big number.</p></li>
<li><p><a href="https://en.wikipedia.org/wiki/Open_Sound_Control">OSC</a> overcomes these.</p></li>
</ul>
</div>
</div>
<div class="section" id="usage">
<h1>Usage<a class="headerlink" href="#usage" title="Permalink to this headline">¶</a></h1>
<p>To use MIDI you need,</p>
<ol>
<li><p>A Sequencer</p>
<p>This generates MIDI messages like,</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">Command</span> <span class="n">param1</span> <span class="n">param2</span> <span class="n">param3</span>
<span class="n">Command</span> <span class="n">param1</span> <span class="n">param2</span>
<span class="n">Command</span> <span class="n">param1</span> <span class="n">param2</span> <span class="n">param3</span>
<span class="n">Command</span> <span class="n">param1</span> <span class="n">param2</span>
<span class="o">...</span>
</pre></div>
</div>
<p>Important messages are,</p>
<ol class="simple">
<li><p>Note On =&gt; Channel [1-16]**, Pitch[0-127], Volume[0-127]</p></li>
<li><p>Note Off                 “</p></li>
<li><p>Controller =&gt; No [0-127], Value[0-127]</p></li>
</ol>
<p>** Channel 10 is reserved for Drums.</p>
<p>Note On and Note Off are typically sent by keys, buttons.
Controller Messages are typically sent by knobs and pedals.</p>
</li>
<li><p>A Synthesizer</p>
<p>This accepts MIDI data.
It Maps channels to DSP.
It Maps knobs** to effects like distortion and reverb.</p>
<p>** The positions of the knob are called patches.</p>
</li>
<li><p>A Sampler.</p>
<p>This accepts MIDI data.
It Maps channels to sound recordings.
It Maps knobs to effects like distortion and reverb.</p>
</li>
</ol>
<p>If you buy Music Hardware you have both 1 and 2.  The sequencing capabilities are limited in a synth,  so you can’t Edit MIDI data in the instrument.</p>
<p>Some notes,</p>
<ol class="simple">
<li><p>You can buy hardware and get a Synthesizer + a limited Sequencer.</p></li>
<li><p>You can buy A Sequencer and use a Computer as a Synthesizer</p></li>
</ol>
<p>or</p>
<ol class="simple">
<li><p>Use a Software Sequencer to Program your Synthesizer</p></li>
</ol>
<p>or</p>
<ol class="simple">
<li><p>Forget Hardware and go complete nuts with Software</p></li>
</ol>
<iframe width="480" height="360" src="//www.youtube.com/embed/VouHPeO4Gls" frameborder="0" allowfullscreen></iframe>
<p><a href="http://vimeo.com/93923609">Also, Robots love it.</a><p>
<div class="section" id="terms">
<h2>Terms<a class="headerlink" href="#terms" title="Permalink to this headline">¶</a></h2>
<p>Instruments used in Electronic Music</p>
<ul class="simple">
<li><p>Tr 909</p></li>
<li><p>Tr 303</p></li>
<li><p>Tr 808</p></li>
</ul>
<p>Instruments commonly used in Disco, Synth Wave and Funk</p>
<ul class="simple">
<li><p>Samplers</p></li>
<li><p>FM Synthesiser</p></li>
</ul>
<p>Rock Pedals used in</p>
<ul class="simple">
<li><p>Reverb (sludge)</p></li>
<li><p>Delay (slow rock)</p></li>
<li><p>Distortion (metal)</p></li>
</ul>
<p>DAW Terms</p>
<ul class="simple">
<li><p>track</p></li>
<li><p>sequencer</p></li>
<li><p>piano roll</p></li>
<li><p>OSC</p></li>
<li><p>sampler</p></li>
<li><p>soundfont</p></li>
<li><p>synthesizer (DSP, FM, AM, AS, SS, PM)</p></li>
<li><p>effect</p></li>
<li><p>mixer, LFO</p></li>
<li><p>automation, equalizer</p></li>
<li><p>filter</p></li>
<li><p>arpegiator</p></li>
</ul>
</div>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="limitations.html" title="previous page">Limitations and Recording</a>
    <a class='right-next' id="next-link" href="samples.html" title="next page">Samples</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">
      <p>
        
          By Xyzzy Apps<br/>
        
            &copy; Copyright (c) Xyzzy Apps, 2021.<br/>
      </p>
    </div>
  </footer>
</main>


      </div>
    </div>
  
  <script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>

  
  </body>
</html>

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

Changes to build/html/samples.html. 

30
31
32
33
34
35
36
37
38
39
40

41
42
43
44
45
46
47
48
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Early Attempts" href="early-attempts.html" />

    <link rel="prev" title="MIDI and DAW Terms" href="midi.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="midi.html" title="previous page">MIDI and DAW Terms</a>
    <a class='right-next' id="next-link" href="early-attempts.html" title="next page">Early Attempts</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


<
>
|







 







|
|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







|
|








30
31
32
33
34
35
36

37
38

39
40
41
42
43
44
45
46
47
..
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />

    <link rel="next" title="What exactly is Tweaking ?" href="tweaking.html" />
    <link rel="prev" title="Demo and Tutorial" href="demo.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="demo.html" title="previous page">Demo and Tutorial</a>
    <a class='right-next' id="next-link" href="tweaking.html" title="next page">What exactly is Tweaking ?</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/saving.html. 

30
31
32
33
34
35
36
37
38
39

40
41
42
43
44
45
46
47
48
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />

    <link rel="next" title="Bookmarks" href="bookmarks.html" />
    <link rel="prev" title="Concepts and Code Walkthrough" href="main.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="main.html" title="previous page">Concepts and Code Walkthrough</a>
    <a class='right-next' id="next-link" href="bookmarks.html" title="next page">Bookmarks</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


>
|
<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







|
|








30
31
32
33
34
35
36

37
38
39
40

41
42
43
44
45
46
47
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Limitations and Recording" href="limitations.html" />
    <link rel="prev" title="Alternate Implementations" href="alternate-implementation.html" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="alternate-implementation.html" title="previous page">Alternate Implementations</a>
    <a class='right-next' id="next-link" href="limitations.html" title="next page">Limitations and Recording</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/search.html. 

31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
..
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
...
118
119
120
121
122
123
124





125
126
127
128
129










130
131
132
133
134
135
136

    
    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <script src="_static/searchtools.js"></script>
    <script src="_static/language_data.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="#" />
  <script src="searchindex.js" defer></script>
  
    <meta name="viewport" content="width=device-width, initial-scale=1" />
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>








<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>








31
32
33
34
35
36
37

38
39
40
41
42
43
44
..
84
85
86
87
88
89
90
91
92
93
94
95
96
97










98
99
100
101
102
103
104
...
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

    
    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <script src="_static/searchtools.js"></script>
    <script src="_static/language_data.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="#" />
  <script src="searchindex.js" defer></script>
  
    <meta name="viewport" content="width=device-width, initial-scale=1" />
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

Changes to build/html/source-code.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Demo and Tutorial" href="demo.html" />
    <link rel="prev" title="What is bitrhythm about ?" href="what.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>








<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>








30
31
32
33
34
35
36

37
38
39
40
41
42
43
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Demo and Tutorial" href="demo.html" />
    <link rel="prev" title="What is bitrhythm about ?" href="what.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

Changes to build/html/tweaking.html. 

30
31
32
33
34
35
36
37
38
39
40

41
42
43
44
45
46
47
48
..
79
80
81
82
83
84
85





86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
218
219
220
221
222
223
224

225
226
227
228
229
230
231
...
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Limitations and Recording" href="limitations.html" />

    <link rel="prev" title="Demo and Tutorial" href="demo.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>





 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
 <li class="toctree-l1">
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
        
              <div>
                
  <div class="section" id="what-exactly-is-tweaking">
<h1>What exactly is Tweaking ?<a class="headerlink" href="#what-exactly-is-tweaking" title="Permalink to this headline">¶</a></h1>
<p>For that you need some context.</p>
<p>Historically speaking, music was an accompaniment for theatrical plays. A typical song has a Theme and develops Exposition / Conflict / Resolution through time. Its not a coincidence that the sonata and the dramatic structure share the same form. In a typical play you have scenes, transitions, sets in the background and characters in the foreground. While the play progresses and characters clash you get music alongside each of these elements. Every song has a title that guides the listener to what the song is about. Typical Scenes include intro, bridge, buildup, section, breakdown and climax. What is the intro about ?  What is the bridge about ?  What is the verse about ?  What is the chorus about ?  What are the sections about ? The essential question driving any story is how to be ? In a drama this question is answered with doubts, emotion, circularity, warnings from the chorus, exposition, rises, falls, reprisals, conclusions, contradictions, denouncements, confrontations, mistakes, reversals, recognition, revelation resolution, statements and breakdowns.</p>

<p>Modern music has evolved to be standalone but it retains elements of theatrical story telling. You can divide a song into verses and sections. In the documentation, we will use the terms from plays. Within each musical scene you typically have,</p>
<ul class="simple">
<li><p>Background: You use layers of rhythm and groove to set the mood.</p></li>
<li><p>Foreground: Lead (Soliloquy), Counterpoint (Character Conflict), Call Response(Dialogues), Motif, Ornaments (Exposition)</p></li>
</ul>
<p>In Electronic Music, the foreground is mainly developed using Layers(polyrhythms) and Tweaking. Tweaking and Layers effectively function for the purposes of Exposition and Conflict. Chorus, Fade, Drop are used for transitions typically in electronic music. Tweaking is also called knob-twisting by hardware users. To compare the foreground in others,</p>
<p>Classical Music: Counterpoint and Harmony<br />
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="demo.html" title="previous page">Demo and Tutorial</a>
    <a class='right-next' id="next-link" href="limitations.html" title="next page">Limitations and Recording</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">








<


<
>
|







 







>
>
>
>
>





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







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







>







 







|
|








30
31
32
33
34
35
36

37
38

39
40
41
42
43
44
45
46
47
..
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94















95
96
97
98
99
100
101
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
...
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />

    <link rel="next" title="Early Attempts" href="early-attempts.html" />
    <link rel="prev" title="Samples" href="samples.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   What exactly is Tweaking ?
  </a>















 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
 <li class="toctree-l1">
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
        
              <div>
                
  <div class="section" id="what-exactly-is-tweaking">
<h1>What exactly is Tweaking ?<a class="headerlink" href="#what-exactly-is-tweaking" title="Permalink to this headline">¶</a></h1>
<p>For that you need some context.</p>
<p>Historically speaking, music was an accompaniment for theatrical plays. A typical song has a Theme and develops Exposition / Conflict / Resolution through time. Its not a coincidence that the sonata and the dramatic structure share the same form. In a typical play you have scenes, transitions, sets in the background and characters in the foreground. While the play progresses and characters clash you get music alongside each of these elements. Every song has a title that guides the listener to what the song is about. Typical Scenes include intro, bridge, buildup, section, breakdown and climax. What is the intro about ?  What is the bridge about ?  What is the verse about ?  What is the chorus about ?  What are the sections about ? The essential question driving any story is how to be ? In a drama this question is answered with doubts, emotion, circularity, warnings from the chorus, exposition, rises, falls, reprisals, conclusions, contradictions, denouncements, confrontations, mistakes, reversals, recognition, revelation resolution, statements and breakdowns.</p>
<p>Here another way of thinking about it. A song is about answering a question posed the title / intro perhaps.  The question which the artist poses to the audience.  Verses are the answers. Rhythm dictates the demarcates the flow of time and seasons.</p>
<p>Modern music has evolved to be standalone but it retains elements of theatrical story telling. You can divide a song into verses and sections. In the documentation, we will use the terms from plays. Within each musical scene you typically have,</p>
<ul class="simple">
<li><p>Background: You use layers of rhythm and groove to set the mood.</p></li>
<li><p>Foreground: Lead (Soliloquy), Counterpoint (Character Conflict), Call Response(Dialogues), Motif, Ornaments (Exposition)</p></li>
</ul>
<p>In Electronic Music, the foreground is mainly developed using Layers(polyrhythms) and Tweaking. Tweaking and Layers effectively function for the purposes of Exposition and Conflict. Chorus, Fade, Drop are used for transitions typically in electronic music. Tweaking is also called knob-twisting by hardware users. To compare the foreground in others,</p>
<p>Classical Music: Counterpoint and Harmony<br />
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="samples.html" title="previous page">Samples</a>
    <a class='right-next' id="next-link" href="early-attempts.html" title="next page">Early Attempts</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/what.html. 

30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
..
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
...
114
115
116
117
118
119
120





121
122
123
124
125










126
127
128
129
130
131
132
...
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
...
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258

259
260
261
262
263
264
265
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <script async="async" data-goatcounter="https://analytics.xyzzyapps.link/count" src="https://analytics.xyzzyapps.link/count.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Source Code and License" href="source-code.html" />
    <link rel="prev" title="Welcome to Bitrhythm’s documentation!" href="index.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="midi.html">
   MIDI and DAW Terms
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>





 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>










 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
   About Author
  </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>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#future-features">
   Future Features
  </a>
 </li>
</ul>

            </nav>
        </div>
    </div>
</div>
................................................................................
<ol class="simple">
<li><p>Tuna</p></li>
<li><p>Timbral</p></li>
<li><p>Tone.js</p></li>
<li><p>Underscore / Rambda</p></li>
<li><p>cellx</p></li>
<li><p>Magenta.js (Machine Learning)</p></li>
<li><p>Three.js / P5.js / D3 / Paper.js</p></li>
<li><p>Winamp Visualisations (butterchurn)</p></li>
</ol>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.8/tf.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.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://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.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">sec</span><span class="o">=</span><span class="s">&quot;https://mohayonao.github.io/timbre.js/timbre.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/tunajs/1.0.1/tuna-min.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&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/tone/14.7.77/Tone.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==&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;/teoria-master/teoria.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://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.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://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://threejs.org/build/three.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://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/webmidi@2.0.0&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://code.jquery.com/jquery-3.4.1.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/nexus-js/dist/NexusUI.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/cellx/1.10.19/cellx.umd.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="na">referrerpolicy</span><span class="o">=</span><span class="s">&quot;no-referrer&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

</pre></div>
</div>
<div class="section" id="about-author">
<h2>About Author<a class="headerlink" href="#about-author" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> apps for a living. I started messing with algorithmic composition using pure data around 2011.  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. 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> and algorave discord as &#64;xyzzy.</p>
</div>
<div class="section" id="future-features">
<h2>Future Features<a class="headerlink" href="#future-features" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li><p>Saving Songs</p></li>
<li><p>More Synths with Presets</p></li>
<li><p>Visualisation Presets</p></li>
<li><p>Autocomplete Rhythms and Chords</p></li>
<li><p>Automation Recording</p></li>
<li><p>Version Control</p></li>
<li><p>Record</p></li>
<li><p>Midi Support</p></li>
<li><p>More tutorials and examples on Web APIs</p></li>
<li><p>Synthesizer</p></li>
<li><p>Collaboration</p></li>
<li><p>Adding DJ Transition / Hints support</p></li>
</ul>
</div>
</div>


              </div>
              
        








<







 







|
|



|
|
<
<
<
<
<
<
<
<
<
<







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>







 







<
<
<
<
<







 







|













>










>







 







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








30
31
32
33
34
35
36

37
38
39
40
41
42
43
..
80
81
82
83
84
85
86
87
88
89
90
91
92
93










94
95
96
97
98
99
100
...
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
...
196
197
198
199
200
201
202





203
204
205
206
207
208
209
...
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
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


    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>

    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Source Code and License" href="source-code.html" />
    <link rel="prev" title="Welcome to Bitrhythm’s documentation!" href="index.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Demo and Tutorial
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   What exactly is Tweaking ?










  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Concepts and Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving and Sharing
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Limitations and Recording
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>
................................................................................
   About Author
  </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>

            </nav>
        </div>
    </div>
</div>
................................................................................
<ol class="simple">
<li><p>Tuna</p></li>
<li><p>Timbral</p></li>
<li><p>Tone.js</p></li>
<li><p>Underscore / Rambda</p></li>
<li><p>cellx</p></li>
<li><p>Magenta.js (Machine Learning)</p></li>
<li><p>P5.js / D3</p></li>
<li><p>Winamp Visualisations (butterchurn)</p></li>
</ol>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.2.8/tf.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.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://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.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">sec</span><span class="o">=</span><span class="s">&quot;https://mohayonao.github.io/timbre.js/timbre.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/tunajs/1.0.1/tuna-min.js&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&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/tone/14.7.77/Tone.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==&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;/teoria-master/teoria.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;/303.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://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.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://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://threejs.org/build/three.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://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/webmidi@2.0.0&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://code.jquery.com/jquery-3.4.1.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">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/nexus-js/dist/NexusUI.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/cellx/1.10.19/cellx.umd.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="na">referrerpolicy</span><span class="o">=</span><span class="s">&quot;no-referrer&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/mousetrap/1.4.6/mousetrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</pre></div>
</div>
<div class="section" id="about-author">
<h2>About Author<a class="headerlink" href="#about-author" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> apps for a living. I started messing with algorithmic composition using pure data around 2011.  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. 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> and algorave discord as &#64;xyzzy.</p>

















</div>
</div>


              </div>

Added public/303.js. 

































































































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

function ThreeOhUnit(audio, waveform, defaults = null, output, patternLength = 16) {
    const synth = audio.ThreeOh(waveform, defaults = defaults, output);
    function step(note) {
        note = note || {
            type: "on",
            accent: false,
            glide: true,
            note: "A3",
        };
        if (note == "off") {
            synth.noteOff();
        } else {
            synth.noteOn(note.note, note.accent, note.glide);
        }
    }
    return {
        step,
        params: synth.params
    };
}

function textNoteToNumber(note) {
    const lookupTable = new Map();
    const revLook = new Map();
    (() => {
        function add(note, n) {
            lookupTable.set(note, n);
            revLook.set(n, note);
        }
        add('A', 9);
        add('A#', 10);
        add('B', 11);
        add('C', 0);
        add('C#', 1);
        add('D', 2);
        add('D#', 3);
        add('E', 4);
        add('F', 5);
        add('F#', 6);
        add('G', 7);
        add('G#', 8);
    })();

    const o = note.substring(note.length - 1);
    const n = note.substring(0, note.length - 1);
    // @ts-ignore
    return parseInt(o) * 12 + lookupTable.get(n) + 12;
}

function midiNoteToFrequency(noteNumber) {
    return 440 * Math.pow(2, (noteNumber - 69) / 12);
}

function Audio(au = new (window.AudioContext || window.webkitAudioContext)()) {

    function masterChannel() {
        const gain = au.createGain();
        gain.gain.value = 0.5;
        const limiter = au.createDynamicsCompressor();
        limiter.attack.value = 0.005;
        limiter.release.value = 0.1;
        limiter.ratio.value = 15.0;
        limiter.knee.value = 0.0;
        limiter.threshold.value = -0.5;
        gain.connect(limiter);
        limiter.connect(au.destination);
        return {
            in: gain
        };
    }

    const master = masterChannel();

    function ThreeOh(type = "sawtooth", defaults, out = master.in) {
        defaults = defaults || {
            "cutoff": 400,
            "resonance": 15,
            "envMod": 4000,
            "decay": 0.5
        }
        const filter = au.createBiquadFilter();
        filter.type = "lowpass";
        filter.Q.value = defaults.resonance;
        filter.frequency.value = defaults.cutoff;
        const pResonance = filter.Q;
        const pCutoff = filter.frequency;

        const decayTimeNode = au.createConstantSource();
        decayTimeNode.offset.value = defaults.decay;
        decayTimeNode.start();
        const pDecay = decayTimeNode.offset;

        const env = au.createConstantSource();
        env.start();
        env.offset.value = 0.0;

        const scaleNode = au.createGain();
        scaleNode.gain.value = defaults.envMod;
        const pEnvMod = scaleNode.gain;
        env.connect(scaleNode);
        scaleNode.connect(filter.detune);
        const osc = au.createOscillator();
        osc.type = type;
        osc.frequency.value = 440;
        osc.start();
        const vca = au.createGain();
        vca.gain.value = 0.0;
        osc.connect(vca);
        vca.connect(filter);
        filter.connect(out);
        function noteOn(note, accent = false, glide = false) {
            if (accent) {
                env.offset.cancelScheduledValues(au.currentTime);
                //env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);
                env.offset.setValueAtTime(1.0, au.currentTime);
                env.offset.exponentialRampToValueAtTime(0.01, au.currentTime + pDecay.value / 3);
            }
            else {
                env.offset.cancelScheduledValues(au.currentTime);
                //env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);
                env.offset.setValueAtTime(1.0, au.currentTime);
                env.offset.exponentialRampToValueAtTime(0.01, au.currentTime + pDecay.value);
            }
            osc.frequency.cancelScheduledValues(au.currentTime);
            if (typeof note == "number") {
                osc.frequency.setTargetAtTime(note, au.currentTime, glide ? 0.02 : 0.002);
            } else {
                osc.frequency.setTargetAtTime(midiNoteToFrequency(textNoteToNumber(note)), au.currentTime, glide ? 0.02 : 0.002);
            }
            vca.gain.cancelScheduledValues(au.currentTime);
            vca.gain.setValueAtTime(accent ? 0.2 : 0.15, au.currentTime);
            //vca.gain.setTargetAtTime(accent ? 0.5 : 0.3,au.currentTime, 0.001);
            //vca.gain.setValueAtTime(0.2, au.currentTime);
            vca.gain.linearRampToValueAtTime(0.1, au.currentTime + 0.2);
        }
        function noteOff() {
            vca.gain.cancelScheduledValues(au.currentTime);
            vca.gain.setTargetAtTime(0.0, au.currentTime, 0.01);
        }
        return {
            noteOn,
            noteOff,
            params: {
                cutoff: pCutoff,
                resonance: pResonance,
                envMod: pEnvMod,
                decay: pDecay
            }
        };
    }
    return {
        ThreeOh,
        master,
        context: au
    };
}

window.Audio = Audio;
window.ThreeOhUnit = ThreeOhUnit;

Changes to public/components/bitrhythm.tag. 

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
..
71
72
73
74
75
76
77


































78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
...
151
152
153
154
155
156
157




158
159


















160
161
162
163
164
165
166
...
168
169
170
171
172
173
174

175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
...
207
208
209
210
211
212
213


214

215
216
217
218
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
247
248
...
249
250
251
252
253
254
255

256
257
258
259

260
261
262
263
264
265
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
292
293
294
295
296







297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322

        </hstack>

        <div class="mt-2 ml-2" >
            <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1"  onclick={play}>Play</button>
            <button type="button" class="btn btn-primary ml-2" onclick={save}>Save</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reset}>Reset</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reload}>Window Reload</button>


            <input class="ml-1" name="edit-mode" id="edit-mode" type="checkbox"/>
            <label for="edit-mode">Edit</label>
            <input class="ml-1" name="load-mode" id="load-mode" type="checkbox"/>
            <label for="load-mode">Execute Transition</label>


        </div>

        <hstack>
            <div each={ key, index in state.samples} >
                <div if={ state.samples && state.samples[index] }>
                    <sample  setsample={setSample} rmsample={rmSample} samples={state.samples} ti={index + 1}></sample>
                </div>
            </div>
        </hstack>

        <hstack>
            <div each={ key, index in state.dials}>
                <dial rmdial={rmDial}  v={state.dials[index]} ti={index + 1}></dial>
            </div>
        </hstack>

................................................................................
    margin-top: 4vh;
}
</style>

<script>
var oldCode = "";
var oldPatterns = [];



































// var audio = new Audio();
// audio.loop = true;
const actx = Tone.context;
const dest = actx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream);
let chunks = [];
var sampleURL = "";
var sam;
var loop;
this.props = opts;

this.state = {
    mem: {},
    dials: [],
    numbers: [],
    samples: [],
................................................................................
        })
    }


});






pattern_clean(p) {
    return window.pattern_clean(p);


















}

save() {
    this.state.code = editor.getValue();
    var text = {
        tempo: this.state.tempo,
        dial_count: this.state.dials.length,
................................................................................
        sample_names: this.state.samples.map(function (item) {return item["__url"]}),
        ticks: 16,
        code: this.state.code,
    };
    const lib = window.JsonUrl('lzma');
	lib.compress(text).then(encodedData => {
        var link = "/song/" + encodedData;

        window.open(link, "_blank");
    });
}

reload() {
    window.location.replace( "//" + window.location.host)
}

reset() {

    Tone.Master.mute = true;
    if (loop) {
        loop.stop();
        loop.cancel();
        loop.dispose();
        Tone.Master.mute = false;
    }
    document.getElementById('tempo-value').disabled = false;
    document.getElementById('tick-value').disabled = false;
    editor.setValue("");

    this.state = {
        mem: {},
................................................................................
    })


}

editTempo(e) {
    this.update({


        tempo: e.target.value

    })
}

editTicks(e) {
    this.update({


        ticks: e.target.value

    })
}



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;



    var transition = function () {
    }

    var always = function () {
    }


    var render_loop = function () {
    }

    var animation = function () {
        render_loop();
        window.requestAnimationFrame(animation)
................................................................................
    }

    Tone.Master.mute = false;
    document.getElementById('tempo-value').disabled = true;
    document.getElementById('tick-value').disabled = true;

    var mem = self.state.mem;

    var handlers = {};
    var count = -1;

    var text = editor.getValue();

    editor.on("change", function () {
            text = editor.getValue();
    });

    var patterns = [ cellx("0000") ]; // need this for first eval

    var bars = 0;
    var tick = 0;

    loop = new Tone.ToneEvent((time, chord) => {





        count = count + 1;
        tick = (count % this.state.ticks);
        if (tick === 0) ++bars;

        $("#duration").html("" + bars + "." + tick + " / " + count + " / " + window.roundTo(Tone.Transport.seconds, 2));


        for (var i = 0; i < patterns.length; i++) {
            var samples = this.state.samples;
            var dials = self.state.dials;
            var numbers = self.state.numbers;

            if (document.getElementById('edit-mode').checked) {
                p = oldPatterns[i];
            } else {
                var p = patterns[i];
                oldPatterns[i] = p;
            }
            if (p && p.length !== 0) {
                var track_no = i + 1;
                var pattern = pattern_clean(p());

                var isHit = (pattern.split('')[tick] == "1") ? true : false;

                try {
                    if (document.getElementById('edit-mode').checked) {
                        eval(oldCode);
                    } else {
                        eval(text);







                        if (document.getElementById('load-mode').checked) {
                            document.getElementById('load-mode').checked = false;
                            transition();
                        }
                        oldCode = text;
                    }
                    $("#error").html("");
                } catch (ex) {
                    $("#error").html(ex);
                    eval(oldCode);
                }
            }
        }
    }, []);
    loop.loop = true;
    loop.loopEnd = this.state.ticks + "n";
    loop.start();

   window.requestAnimationFrame(animation)

}


start() {
    recorder.start();
}








>





>
>


|





|







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>









<







 







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







 







>
|










|
|
|
|
<







 







>
>
|
>





>
>
|
>







 







>
>






<







 







>

|


>

|







|
>
>
>
>
>





<
>

<




|

|
|

|

|
>







>
>
>
>
>
>
>













|
<
<
<

|








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
..
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

124
125
126
127
128
129
130
...
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
...
226
227
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
...
265
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
...
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306

307
308
309
310
311
312
313
...
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346

347
348

349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389



390
391
392
393
394
395
396
397
398

        </hstack>

        <div class="mt-2 ml-2" >
            <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1"  onclick={play}>Play</button>
            <button type="button" class="btn btn-primary ml-2" onclick={save}>Save</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reset}>Reset</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reload}>Window Reload</button>
            <button type="button" class="btn btn-primary ml-2" onclick={download}>Save File</button>

            <input class="ml-1" name="edit-mode" id="edit-mode" type="checkbox"/>
            <label for="edit-mode">Edit</label>
            <input class="ml-1" name="load-mode" id="load-mode" type="checkbox"/>
            <label for="load-mode">Execute Transition</label>
            <input class="ml-1" name="load-mode" id="redo" type="checkbox"/>
            <label for="redo">Redo Bar</label>
        </div>

        <vstack>
            <div each={ key, index in state.samples} >
                <div if={ state.samples && state.samples[index] }>
                    <sample  setsample={setSample} rmsample={rmSample} samples={state.samples} ti={index + 1}></sample>
                </div>
            </div>
        </vstack>

        <hstack>
            <div each={ key, index in state.dials}>
                <dial rmdial={rmDial}  v={state.dials[index]} ti={index + 1}></dial>
            </div>
        </hstack>

................................................................................
    margin-top: 4vh;
}
</style>

<script>
var oldCode = "";
var oldPatterns = [];

Mousetrap.stopCallback = function(e, element, combo) {
    return false;
}

Mousetrap.bind(['f5'], function(e) {
    if (document.getElementById('edit-mode').checked) {
        document.getElementById('edit-mode').checked = false;
    } else {
        document.getElementById('edit-mode').checked = true;
    }

    return false;
});

Mousetrap.bind(['f9'], function(e) {

    if (document.getElementById('redo').checked) {
        document.getElementById('redo').checked = false;
    } else {
        document.getElementById('redo').checked = true;
    }

    return false;
});

Mousetrap.bind(['f8'], function(e) {
    if (document.getElementById('load-mode').checked) {
        document.getElementById('load-mode').checked = false;
    } else {
        document.getElementById('load-mode').checked = true;
    }
    return false;
});

// var audio = new Audio();
// audio.loop = true;
const actx = Tone.context;
const dest = actx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream);
let chunks = [];
var sampleURL = "";
var sam;

this.props = opts;

this.state = {
    mem: {},
    dials: [],
    numbers: [],
    samples: [],
................................................................................
        })
    }


});


pattern_parse(p) {
    return window.pattern_parse(p);
}

pattern_meta(p) {
    return window.pattern_meta(p);
}

download() {
    
    function download(data, filename = "song.txt", type = "text/plain") {
            var file = new Blob([data], {type: type});
            var a = document.createElement("a"),
                    url = URL.createObjectURL(file);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);  
            }, 0); 
    }
    download(editor.getValue())
}

save() {
    this.state.code = editor.getValue();
    var text = {
        tempo: this.state.tempo,
        dial_count: this.state.dials.length,
................................................................................
        sample_names: this.state.samples.map(function (item) {return item["__url"]}),
        ticks: 16,
        code: this.state.code,
    };
    const lib = window.JsonUrl('lzma');
	lib.compress(text).then(encodedData => {
        var link = "/song/" + encodedData;
        window.history.pushState({}, 'Bitrhythm', link);
        //window.open(link, "_blank");
    });
}

reload() {
    window.location.replace( "//" + window.location.host)
}

reset() {

    Tone.Master.mute = true;
    Tone.Transport.stop();
    Tone.stop();
    if (self.state.timer) {
        clearInterval(self.state.timer);

    }
    document.getElementById('tempo-value').disabled = false;
    document.getElementById('tick-value').disabled = false;
    editor.setValue("");

    this.state = {
        mem: {},
................................................................................
    })


}

editTempo(e) {
    this.update({
        state: {
            ...this.state,
            tempo: parseInt(e.target.value)
        }
    })
}

editTicks(e) {
    this.update({
        state: {
            ...this.state,
            ticks: e.target.value
        }
    })
}



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 always = function () {
    }


    var render_loop = function () {
    }

    var animation = function () {
        render_loop();
        window.requestAnimationFrame(animation)
................................................................................
    }

    Tone.Master.mute = false;
    document.getElementById('tempo-value').disabled = true;
    document.getElementById('tick-value').disabled = true;

    var mem = self.state.mem;
    window.mem = mem;
    var handlers = {};
    window.count = -1;

    var text = editor.getValue();

    editor.on("change", function () {
        text = editor.getValue();
    });

    var patterns = [ cellx("0000") ]; // need this for first eval

    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;

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

        $("#duration").html("" + bars + "." + tick + " / " + count + " / " + window.roundTo(Tone.Transport.seconds, 2));

        always();
        for (var i = 0; i < patterns.length; i++) {

            var dials = self.state.dials;
            var numbers = self.state.numbers;

            if (document.getElementById('edit-mode').checked) {
                var p_text  = oldPatterns[i];
            } else {
                var p_text = patterns[i];
                oldPatterns[i] = p_text;
            }
            if (p_text() && p_text().length !== 0) {
                var track_no = i + 1;
                var pattern = pattern_parse(p_text());
                var meta = pattern_meta(p_text());
                var isHit = (pattern.split('')[tick] == "1") ? true : false;

                try {
                    if (document.getElementById('edit-mode').checked) {
                        eval(oldCode);
                    } else {
                        eval(text);
                        if (document.getElementById('redo').checked) {
                            document.getElementById('redo').checked = false;
                            tick = (count % this.state.ticks);
                            count -= tick + 1;
                            i = 0;
                            continue;
                        }
                        if (document.getElementById('load-mode').checked) {
                            document.getElementById('load-mode').checked = false;
                            transition();
                        }
                        oldCode = text;
                    }
                    $("#error").html("");
                } catch (ex) {
                    $("#error").html(ex);
                    eval(oldCode);
                }
            }
        }
  }.bind(this), delta)




  window.requestAnimationFrame(animation);

}


start() {
    recorder.start();
}

Changes to public/components/sample.tag. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14


<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div style="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;overflow: hidden;">
            <span>{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;






|
|








1
2
3
4
5
6
7
8
9
10
11
12
13
14


<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div>
            <span class="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;">{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;

Changes to public/misc.js. 





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
..
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40



41
42





























43
44
45
46
47
48
49
..
84
85
86
87
88
89
90

91







92
93
94
95





96


97
98













































































































































99
100
101

102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120






















121












122
123
124
125
126
127
128






function initWinamp(preset) {
    var can = document.getElementById("visual");
    can.height = window.innerHeight - document.getElementById("header-playback").clientHeight - 75;
    can.width = window.innerWidth;
    var can_container = document.getElementById("canvas-container");
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - document.getElementById("header-playback").clientHeight - 75,
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
................................................................................
            return val;
        } else {
            return state;
        }
    }
}

function hex2bin(hex) {
    var letters = hex.replace('`1','a');
    letters = hex.replace('`2','b');
    letters = hex.replace('`3','c');
    letters = hex.replace('`4','d');
    letters = hex.replace('`5','e');
    letters = hex.replace('`6','f');
    letters = letters.split('');



    var bin = "";
    letters.map(function(letter) {





























        if (letter == "0") {
            bin += "0000";
        }
        if (letter == "1") {
            bin += "0001";
        }
        else if (letter == "2") {
................................................................................
        }
        else if (letter == "e") {
            bin += "1110";
        }
        else if (letter == "f") {
            bin += "1111";
        }









    })
    return bin;
}









function pattern_clean(p) {
    if (!p) {













































































































































        return "";
    }
    p = p.replace(/ /g, "");

    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);
    }
    else if (fc== "b") {
        var l = (p.length - 1);
        var ptype = "bin";
    }
    else {
        var ptype = "hex";
        var l = (p.length) * 4;
    }

    if (ptype == "bin") {
        var fp =  p.substring(1);
    } else if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");






















    } else {












        var fp = hex2bin(p);
    }

    return fp;
}

function download(data, filename, type) {

>
>
>
>



|




|







 







|

|
|
|
|
|
|
>
>
>
|
<
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
|
>
>
>
>
>
>
>




>
>
>
>
>
|
>
>
|

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



>




<
<
<
<
<
|




<
<
|


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








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
..
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
...
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
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
292
293
294
295
296
297





298
299
300
301
302


303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347


function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function initWinamp(preset) {
    var can = document.getElementById("visual");
    can.height = window.innerHeight - (document.getElementById("header-playback").clientHeight / 2);
    can.width = window.innerWidth;
    var can_container = document.getElementById("canvas-container");
    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];
................................................................................
            return val;
        } else {
            return state;
        }
    }
}

function romantogypsy(hex) {
    var letters = hex.replace('`1','a');
    letters = letters.replace('`2','b');
    letters = letters.replace('`3','c');
    letters = letters.replace('`4','d');
    letters = letters.replace('`5','e');
    letters = letters.replace('`6','f');
    return letters;
}

function lettertodec(letter) {
        var bin = "";

        if (letter.match(/\d/)) {
            no = parseInt(letter);
        }
        else if (letter == "a") {
            no = 10;
        }
        else if (letter == "b") {
            no = 11;
        }
        else if (letter == "c") {
            no = 12;
        }
        else if (letter == "d") {
            no = 13;
        }
        else if (letter == "e") {
            no = 14;
        }
        else if (letter == "f") {
            no = 15;
        }
        for (i = 1; i <= no; i++) {
            bin += "0";
        }
        return bin;
}

function lettertobin(letter) {
        var bin = "";
        if (letter == "0") {
            bin += "0000";
        }
        if (letter == "1") {
            bin += "0001";
        }
        else if (letter == "2") {
................................................................................
        }
        else if (letter == "e") {
            bin += "1110";
        }
        else if (letter == "f") {
            bin += "1111";
        }
        return bin;
}

function hex2bin(hex) {
    var letters = romantogypsy(hex)
    letters = letters.split('');
    var bin = "";
    letters.map(function(letter) {
        bin += lettertobin(letter)
    })
    return bin;
}

function get_char(str, index) {
    if ((index > 0) && (index < str.length)) {
        return str[index];
    } else {
        return null
    }
}

function pattern_meta(p) {
    if (!p) {
        return null;
    }
    p = p.replace(/ /g, "");
    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);
    }

    if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");
    }

    if (!fp) {
        return null;
    }

    var done = false;
    var index = 0;
    var meta = {}
    var one_index = 1;

    while(1) {
        if (index > fp.length) {
            break;
        }
        var current_meta = {}
        var current_letter = fp[index]
        if (current_letter == "_") {
            meta[one_index -1] = {"volume": "off" };
            index += 2;
            one_index += 2;
            continue;
        }
        else if (current_letter == "1") {
            var next_letter = get_char(fp,index + 1);
            if (next_letter == "[") {
                var jump_index = 1;
                var buffer = "";
                while(1) {
                    if (((index + 1) + jump_index) > fp.length) {
                        break;
                    }
                    let b_next_letter = get_char(fp, ((index + 1) + jump_index));

                    if (b_next_letter == "]") {
                        jump_index += 2;
                        break;
                    } else {
                        buffer += b_next_letter;
                        jump_index += 1;
                    }
                }
                var individual_meta = buffer.split(";")
                individual_meta.map(function (e) {
                    if (e.startsWith("^")) {
                        current_meta["pitch"] = e.substring(1)
                    } else if (e.startsWith("+")) {
                        current_meta["delay"] = e
                    } else {
                        current_meta["volume"] = e
                    }
                })
                meta[one_index -1] = current_meta
                index += jump_index;
                one_index += 1;
                continue;
            } else {
                meta[one_index -1] = current_meta
                one_index += 1;
                index += 1;
                continue;
            }
        } else {
            if (current_letter == "*") {
                var next_letter = get_char(fp,index + 1);
                if (next_letter == "`") {
                    index += 3;
                } else {
                    index += 2;
                    continue;
                }
            } else {
                index += 1;
                one_index += 1;
                continue;
            }
        }
    }
    return meta;
}

function Sample(name, no, filter, volume) {
    name = name
    filter = filter || 10000
    volume = volume || 0
    mem[name + "_filter"] = new Tone.Filter(filter, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
    hit_map[name] = no;
}

window.Sample = Sample;

function p(s, vol, note, len, delay) {
    note = note || "C3"
    len = len || "16n"
    vol = vol || 1
    delay = delay || "+0";

    samples[s].triggerAttackRelease(note, len, delay, vol);
    for (const [key, value] of Object.entries(hit_map)) {
    	if (value == s) {
	    	mem[key + "_last"] = count 
	    }
  	}
}

window.p = p;

function pn(s, vol, note, len, delay) {
    sample_no = hit_map[s]
    note = note || "C3"
    len = len || "16n"
    vol = vol || 1
    delay = delay || "+0";
    samples[sample_no].triggerAttackRelease(note, len, delay, vol);
    for (const [key, value] of Object.entries(hit_map)) {
    	if (value == s) {
	    	mem[key + "_last"] = count 
	    }
  	}
}

window.pn = pn;



function pattern_parse(p) {
    if (!p) {
        return "";
    }
    p = p.replace(/ /g, "");
    p = p.replace(/\[.+?\]/g, "");
    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);





    } else {
        var ptype = "hex";
        var l = (p.length) * 4;
    }



    if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");
    }

    if (ptype == "xo") {
        var fin = "";
        var done = false;
        var index = 1;
        while(1) {
            if (done) {
                break;
            }
            if (index >= fp.length) {
                done = true;
                continue;
            }
            var current_letter = fp[index - 1]
            if (current_letter) {
            if (current_letter == "*") {
                var next_letter = get_char(fp,index);
                if (next_letter == "`") {
                    var next_next_letter = get_char(fp,index + 1);
                    fin +=  lettertodec(romantogypsy(next_letter + next_next_letter));
                    index += 3;
                } else {
                    fin += lettertodec(next_letter);
                    index += 2;
                }
            } else {
                fin += current_letter;
                index += 1;
            }
            }
        }
        return fin;
    }
    else {
        var fp = hex2bin(p);
    }

    return fp;
}

function download(data, filename, type) {

Added public/test.png.

cannot compute difference between binary files

Changes to requirements.txt. 

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
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
90
91

92

93

94
95

aiofiles==0.6.0
alabaster==0.7.12

appdirs==1.4.4
appnope==0.1.2

astor==0.8.1
astroid==2.5.6
asttokens==2.0.5
attrs==21.2.0
Babel==2.9.1
backcall==0.2.0
beautifulsoup4==4.9.3
black==21.5b1

certifi==2020.12.5

chardet==4.0.0
click==7.1.2
cogapp==3.0.0
colorama==0.4.4

decorator==5.0.7

dialite==0.5.3
docutils==0.16

flexx==0.8.1
funcparserlib==0.3.6
furo==2021.4.11b34
httptools==0.2.0
hy==0.20.0
idna==2.10
imagesize==1.2.0
ipdb==0.13.7

ipython==7.22.0
ipython-genutils==0.2.0
isort==5.8.0
jedi==0.18.0
Jinja2==2.11.3

jsonschema==3.2.0

jupyter-core==4.7.1




lazy-object-proxy==1.6.0
leo==6.3
Mako==1.1.4
markdown-it-py==1.1.0
MarkupSafe==1.1.1

mccabe==0.6.1
mdit-py-plugins==0.2.8
meta==1.0.2

multidict==5.1.0
mypy-extensions==0.4.3
myst-parser==0.14.0



nbformat==5.1.3


packaging==20.9

parso==0.8.2
pathspec==0.8.1
pexpect==4.8.0
pickleshare==0.7.5

prompt-toolkit==3.0.18
pscript==0.7.5
ptyprocess==0.7.0

pydata-sphinx-theme==0.6.3
pyflakes==2.3.1
Pygments==2.8.1
pylint==2.8.2
pyparsing==2.4.7
PyQt5==5.15.4
PyQt5-Qt5==5.15.2
PyQt5-sip==12.8.1
PyQtWebEngine==5.15.4
PyQtWebEngine-Qt5==5.15.2
pyrsistent==0.17.3
pyshortcuts==1.8.0

pytz==2021.1
PyYAML==5.4.1

regex==2021.4.4
requests==2.25.1

rply==0.7.8
sanic==21.3.4
sanic-routing==0.6.2

six==1.16.0

snowballstemmer==2.1.0
soupsieve==2.2.1
Sphinx==3.5.4
sphinx-book-theme==0.1.1
sphinxcontrib-applehelp==1.0.2
sphinxcontrib-devhelp==1.0.2
sphinxcontrib-htmlhelp==1.0.3
sphinxcontrib-jsmath==1.0.1
sphinxcontrib-qthelp==1.0.3
sphinxcontrib-serializinghtml==1.1.4


toml==0.10.2
tornado==6.1
traitlets==5.0.5
ujson==4.0.2
urllib3==1.26.4
uvloop==0.15.2

wcwidth==0.2.5

webruntime==0.5.8

websockets==8.1
wrapt==1.12.1



>


>








>

>




>

>


>








>
|




>

>

>
>
>
>





>



>



>
>
>

>
>

>




>



>












>


>


>



>

>










>
>






>

>

>



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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

aiofiles==0.6.0
alabaster==0.7.12
anyio==3.3.4
appdirs==1.4.4
appnope==0.1.2
argon2-cffi==21.1.0
astor==0.8.1
astroid==2.5.6
asttokens==2.0.5
attrs==21.2.0
Babel==2.9.1
backcall==0.2.0
beautifulsoup4==4.9.3
black==21.5b1
bleach==4.1.0
certifi==2020.12.5
cffi==1.15.0
chardet==4.0.0
click==7.1.2
cogapp==3.0.0
colorama==0.4.4
debugpy==1.5.1
decorator==5.0.7
defusedxml==0.7.1
dialite==0.5.3
docutils==0.16
entrypoints==0.3
flexx==0.8.1
funcparserlib==0.3.6
furo==2021.4.11b34
httptools==0.2.0
hy==0.20.0
idna==2.10
imagesize==1.2.0
ipdb==0.13.7
ipykernel==6.4.2
ipython==7.28.0
ipython-genutils==0.2.0
isort==5.8.0
jedi==0.18.0
Jinja2==2.11.3
json5==0.9.6
jsonschema==3.2.0
jupyter-client==7.0.6
jupyter-core==4.7.1
jupyter-server==1.11.1
jupyterlab==3.2.1
jupyterlab-pygments==0.1.2
jupyterlab-server==2.8.2
lazy-object-proxy==1.6.0
leo==6.3
Mako==1.1.4
markdown-it-py==1.1.0
MarkupSafe==1.1.1
matplotlib-inline==0.1.3
mccabe==0.6.1
mdit-py-plugins==0.2.8
meta==1.0.2
mistune==0.8.4
multidict==5.1.0
mypy-extensions==0.4.3
myst-parser==0.14.0
nbclassic==0.3.4
nbclient==0.5.4
nbconvert==6.2.0
nbformat==5.1.3
nest-asyncio==1.5.1
notebook==6.4.5
packaging==20.9
pandocfilters==1.5.0
parso==0.8.2
pathspec==0.8.1
pexpect==4.8.0
pickleshare==0.7.5
prometheus-client==0.12.0
prompt-toolkit==3.0.18
pscript==0.7.5
ptyprocess==0.7.0
pycparser==2.20
pydata-sphinx-theme==0.6.3
pyflakes==2.3.1
Pygments==2.8.1
pylint==2.8.2
pyparsing==2.4.7
PyQt5==5.15.4
PyQt5-Qt5==5.15.2
PyQt5-sip==12.8.1
PyQtWebEngine==5.15.4
PyQtWebEngine-Qt5==5.15.2
pyrsistent==0.17.3
pyshortcuts==1.8.0
python-dateutil==2.8.2
pytz==2021.1
PyYAML==5.4.1
pyzmq==22.3.0
regex==2021.4.4
requests==2.25.1
requests-unixsocket==0.2.0
rply==0.7.8
sanic==21.3.4
sanic-routing==0.6.2
Send2Trash==1.8.0
six==1.16.0
sniffio==1.2.0
snowballstemmer==2.1.0
soupsieve==2.2.1
Sphinx==3.5.4
sphinx-book-theme==0.1.1
sphinxcontrib-applehelp==1.0.2
sphinxcontrib-devhelp==1.0.2
sphinxcontrib-htmlhelp==1.0.3
sphinxcontrib-jsmath==1.0.1
sphinxcontrib-qthelp==1.0.3
sphinxcontrib-serializinghtml==1.1.4
terminado==0.12.1
testpath==0.5.0
toml==0.10.2
tornado==6.1
traitlets==5.0.5
ujson==4.0.2
urllib3==1.26.4
uvloop==0.15.2
watchdog==2.1.6
wcwidth==0.2.5
webencodings==0.5.1
webruntime==0.5.8
websocket-client==1.2.1
websockets==8.1
wrapt==1.12.1

Changes to source/_static/analytics.js. 

1
2

3

window.goatcounter = {
    path: function(p) { return location.host + p }

}

|
|
>
|

1
2
3
4

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);

Changes to source/_static/custom.css. 

1
2
3






.custom-nav-footer {
    margin-top: 8em;
}









>
>
>
>
>

1
2
3
4
5
6
7
8

.custom-nav-footer {
    margin-top: 8em;
}

.highlight .err {
    color: black !important;
    border: 0px solid !important;
}

Added source/alternate-implementation.md. 































































































































































































































































































































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

# Alternate Implementations

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

```
brew install raylib
cc ray.c  `pkg-config --libs --cflags raylib` -o ray
```

```C
#include "raylib.h"
#include <unistd.h>
#include <stdio.h>
#include <time.h>
#include <stdlib.h>

void setTimeout(int milliseconds)
{
    // If milliseconds is less or equal to 0
    // will be simple return from function without throw error
    if (milliseconds <= 0) {
        fprintf(stderr, "Count milliseconds for timeout is less or equal to 0\n");
        return;
    }

    // a current time of milliseconds
    int milliseconds_since = clock() * 1000 / CLOCKS_PER_SEC;

    // needed count milliseconds of return from this timeout
    int end = milliseconds_since + milliseconds;

    // wait while until needed time comes
    do {
        milliseconds_since = clock() * 1000 / CLOCKS_PER_SEC;
    } while (milliseconds_since <= end);
}


int main(void)
{

    InitAudioDevice();      // Initialize audio device

    Sound fxWav = LoadSound("Music/Kick01.wav");
    Sound fxWav2 = LoadSound("Music/Clap01.wav");

    int bpm;
    printf("Enter bpm: ");
    scanf("%d", &bpm);
    float time_per_beat = (60.0 / bpm) * 4;
    int delay = (time_per_beat * 1000) / 16;
    printf("%d\n", delay);

    while(1) {

        int i;
        for (i = 1; i <= 16; i++) {
            if ((i == 1) || (i == 5) || (i == 9) ||  (i == 13)) {
                PlaySound(fxWav);
            }
            if ((i == 5) ||  (i == 13)) {
                PlaySound(fxWav2);
            }
            setTimeout(delay);
        }
    }


    UnloadSound(fxWav);     // Unload sound data
    UnloadSound(fxWav2);     // Unload sound data

    CloseAudioDevice();     // Close audio device


    return 0;
}
```

## Elementary

Elementary is a javascript runtime - <https://github.com/nick-thompson/elementary>. 

The following is a basic incomplete example that makes use of the sample. Need to update it to the latest Elementary version to simplify tick logic.

```js
const el = require('@nick-thompson/elementary');

const kick02 = './Music/Kick01.wav';
const hh02 = './Music/HH02.wav';
const clap01 = './Music/Clap01.wav';

let voices = {
  '60': {gain: 1.0, gate: 0.0, path: kick02, key: 'v1'},
  '61': {gain: 1.0, gate: 0.0, path: hh02, key: 'v2'},
  '62': {gain: 0.6, gate: 0.0, path: clap01, key: 'v3'},
};

function updateVoiceState(e) {
  if (e && e.hasOwnProperty('type') && e.type === 'noteOn') {
    if (voices.hasOwnProperty(e.noteNumber)) {
      voices[e.noteNumber].gate = 1.0;
    }
  }

  if (e && e.hasOwnProperty('type') && e.type === 'noteOff') {
    if (voices.hasOwnProperty(e.noteNumber)) {
      voices[e.noteNumber].gate = 0.0;
    }
  }
}

function samplerVoice(voice) {
  let gate = el.const({key: voice.key, value: voice.gate});
  return el.mul(voice.gain, el.sample({path: voice.path}, gate));
}

elementary.core.on('load', function() {
        let i = 0;
        let step = 0;
        function function2() {
            step = i % 16;
            console.log(step)
            if (i % 4 == 0) {
              updateVoiceState({type: 'noteOn', noteNumber: '60'});
            } else {
              updateVoiceState({type: 'noteOff', noteNumber: '60'});
            }

            if ((i !== 0) && (i % 8 == 0)) {
              updateVoiceState({type: 'noteOn', noteNumber: '62'});
            } else {
              updateVoiceState({type: 'noteOff', noteNumber: '62'});
            }

            let out = el.add(Object.keys(voices).map(function(n) {
                return samplerVoice(voices[n]);
            }));

            let filtered = el.lowpass(1800, 1.414, out);
            elementary.core.render(filtered, filtered);
            i++;
        }
        setInterval(function2, 60000 / 120.0 / 2);
});
```

Changes to source/bookmarks.md. 

2
3
4
5
6
7
8
9


10
11

12
13
14
15




16
17
18
19
20
21
22
..
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





## WebAudio

<http://blog.mecheye.net/2017/09/i-dont-know-who-the-web-audio-api-is-designed-for/>  
<https://joshondesign.com/p/books/canvasdeepdive/chapter12.html>  
<https://robert.ocallahan.org/2017/09/some-opinions-on-history-of-web-audio.html>  
<https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf>  



<https://web.noom.com/company-blog/2015/08/cooking-is-like-programming/>  


<https://github.com/ideoforms/isobar>  
<https://github.com/tmhglnd/mercury/blob/master/docs/reference.md>  
<https://foxdot.org/docs/pattern-functions/>  
<https://faustdoc.grame.fr/>  





## Obsevers

<https://github.com/rsimmons/plinth>  
<https://github.com/gullerya/object-observer>  
<https://awesomeopensource.com/project/nx-js/observer-util>  
<https://doc.esdoc.org/github.com/jstoolkit/dom-observer/>  
................................................................................
<https://www.npmjs.com/package/observe>  
<https://www.vertexshaderart.com/new/>  

## Visuals

<https://compform.net/turtles/>  
<https://github.com/capnmidnight/Primrose>  









The code editor borrows some CSS styles from this project 





















<https://github.com/htor/repeat-editor>  
















## Inspiration







<http://wavepot.com/>  
<https://glicol.web.app/>  
<http://charlie-roberts.com/gibber/>  
<https://tweakable.org/> 







  
## Misc









<https://ccrma.stanford.edu/~blackrse/algorithm.html>   
<https://oeis.org/>  
<https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html>
<https://en.wikipedia.org/wiki/Computational_creativity>  
<https://en.wikipedia.org/wiki/Algorithmic_composition>  














<
>
>

<
>


<
|
>
>
>
>







 







>
>
>
>
>
>
>
>

<
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



>
>
>
>
>
>




>
>
>
>
>
>
>
|
|

>
>
>
>
>
>
>
>





|
|
|
>
>
>

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
..
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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123


## WebAudio

<http://blog.mecheye.net/2017/09/i-dont-know-who-the-web-audio-api-is-designed-for/>  
<https://joshondesign.com/p/books/canvasdeepdive/chapter12.html>  
<https://robert.ocallahan.org/2017/09/some-opinions-on-history-of-web-audio.html>  
<https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf>  

<https://developers.google.com/web/updates/2017/12/audio-worklet>  
<https://blog.chrislowis.co.uk/2013/06/10/playing-multiple-notes-web-audio-api.html>  
<https://web.noom.com/company-blog/2015/08/cooking-is-like-programming/>  

<https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/>  
<https://github.com/ideoforms/isobar>  
<https://github.com/tmhglnd/mercury/blob/master/docs/reference.md>  

<https://github.com/thedjinn/js303>  
<https://www.sitepoint.com/creating-accurate-timers-in-javascript/>  
<https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques>  
<https://webaudiodemos.appspot.com/>  
<https://www.html5rocks.com/en/tutorials/audio/scheduling/>  

## Obsevers

<https://github.com/rsimmons/plinth>  
<https://github.com/gullerya/object-observer>  
<https://awesomeopensource.com/project/nx-js/observer-util>  
<https://doc.esdoc.org/github.com/jstoolkit/dom-observer/>  
................................................................................
<https://www.npmjs.com/package/observe>  
<https://www.vertexshaderart.com/new/>  

## Visuals

<https://compform.net/turtles/>  
<https://github.com/capnmidnight/Primrose>  
<https://therewasaguy.github.io/p5-music-viz/>  
<https://github.com/derekwolpert/Visicality>  
<https://github.com/gattis/milkshake>  
<https://github.com/preziotte/party-mode>  
<https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7>  
<https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API>  
<https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/>  
<https://1mb.club/>  


## Misc

<https://teropa.info/blog/2016/08/10/frequency-and-pitch.html>  
<http://www.pawfal.org/fluxus/documentation/>  
<https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences--audio-3000>  
<https://acidvoice.com/tb_303_famous_patterns.php>  
<https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/>  
<https://medias.ircam.fr/x9d4352>  
<https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js>  
<https://areknawo.com/10-libraries-for-web-audio-stuff/>  
<https://dev.to/sustained/sforzando-an-app-for-learning-and-experimenting-with-music-theory-harmony-composition-44cm>  
<https://cdm.link/2016/08/blokdust-amazing-graphical-sound-tool-browser/>  
<https://arxiv.org/pdf/1902.03722.pdf>  
<https://quod.lib.umich.edu/i/icmc/bbp2372.1991.011?rgn=main;view=fulltext>  
<http://strasheela.sourceforge.net/strasheela/doc/index.html>  

## Other Projects

<https://www.iannix.org/en/projects/>  
<https://tweakable.org/examples>  
<https://808303.studio/>  
<https://github.com/jshanley/blip>
<https://github.com/alemangui/pizzicato>  
<https://github.com/irritant/serialist-grammar#syntax>  
<https://reactronica.com/>  
<https://www.websynths.org/>  
<https://github.com/keithclark/ZzFXM>  
<https://github.com/jshanley/blip>  
<https://flockingjs.org/>  
<https://github.com/xi-livecode/xi>  
<https://github.com/siaflab/petal>  
<https://github.com/sharow/lovelive>  
<https://mohayonao.github.io/mml-emitter/>  
<https://github.com/kevincennis/TinyMusic>  
<https://github.com/pixicoder/PS>  
<https://github.com/swallez/livecoding-webaudio-tonejs>  
<https://padenot.github.io/litsynth/>  

## Inspiration

<https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide>  
<https://github.com/tmhglnd/mercury>  
<https://www.mazbox.com/synths/dubstep/#>  
<https://cdm.link/2019/04/automated-techno-eternal-flow/>  
<https://survios.com/electronauts/>  
<https://liv3c0der.com/>  
<http://wavepot.com/>  
<https://glicol.web.app/>  
<http://charlie-roberts.com/gibber/>  
<https://tweakable.org/> 
<https://foxdot.org/docs/pattern-functions/>  
<https://faustdoc.grame.fr/>  
<https://www.fsynth.com/>  
<https://errozero.co.uk/acid-machine/>  
<https://the.wubmachine.com/>  
<https://scribbletune.com/documentation/browser/browser-clip>  
<https://djen.co/>  

## Music

<http://www.p01.org/256b_woman_farmer/>   
<https://aem1k.com/>  
<https://ludotune.com/>  
<https://www.mazbox.com/synths/dubstep/>  

## Algorithmic Music

<https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/>  
<https://ccrma.stanford.edu/~blackrse/algorithm.html>   
<https://oeis.org/>  
<https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html>
<https://en.wikipedia.org/wiki/Computational_creativity>  
<https://en.wikipedia.org/wiki/Algorithmic_composition>  
<https://en.wikipedia.org/wiki/Constraint_programming>  
<https://www.bipscript.org/>   
<http://commonmusic.sourceforge.net/cm/res/doc/cm.html>  
<https://bolprocessor.sourceforge.io/docs/>  
<https://en.wikipedia.org/wiki/Music_Macro_Language>  
<https://github.com/IjzerenHein/kiwi.js/>

Changes to source/common.py. 

6
7
8
9
10
11
12

13
14
15
16
17
18
19
20
21
22

23
24



<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.js"></script>

<script sec="https://mohayonao.github.io/timbre.js/timbre.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tunajs/1.0.1/tuna-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js" integrity="sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==" crossorigin="anonymous"></script>
<script src="/teoria-master/teoria.js"></script>


<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/nexus-js/dist/NexusUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cellx/1.10.19/cellx.umd.min.js" integrity="sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

"""











>










>


>
>

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.js"></script>

<script sec="https://mohayonao.github.io/timbre.js/timbre.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tunajs/1.0.1/tuna-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js" integrity="sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==" crossorigin="anonymous"></script>
<script src="/teoria-master/teoria.js"></script>
<script src="/303.js"></script>

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/nexus-js/dist/NexusUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cellx/1.10.19/cellx.umd.min.js" integrity="sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
"""

threeOh = open("public/303.js").read()
auto_commit = open("autocommit.py").read()

Changes to source/conf.py. 

70
71
72
73
74
75
76
77
78
79


# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']
html_js_files = [
        'analytics.js',
        ('https://analytics.xyzzyapps.link/count.js', {'data-goatcounter': "https://analytics.xyzzyapps.link/count", 'async': "async"}),
    ]
html_css_files = ["custom.css"]








<



70
71
72
73
74
75
76

77
78


# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']
html_js_files = [
        'analytics.js',

    ]
html_css_files = ["custom.css"]

Added source/credits.md. 











































>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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

# Credits

The code editor borrows some CSS styles from this project 

<https://github.com/htor/repeat-editor>  

[Endless acid banger](https://www.vitling.xyz/toys/acid-banger/) by Vitling. I use 303 from this project.

[Tone.js](https://tonejs.github.io/)

[Web Pure Data](https://github.com/sebpiq/WebPd)

[Nexus Js](https://nexus-js.github.io/ui/) for UI.

WebAudio, DemoScene and Audio Programmer discord communities.<br>

Changes to source/demo.md. 

9
10
11
12
13
14
15


16
17
18
19
20
21
22
..
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
...
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
...
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
...
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
292
293
...
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
...
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
...
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451







452






453








454
455


456
457





458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
...
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552



553
554
555


Samples taken from Deep Techno and Dub Techno collections from splice. Sadly I can't distribute the song itself as I would also have to distribute the samples with it.  

## Demo Song 1 // Techno

Code for the Demo Song. The visualisation was disabled in the Demo as it was causing a huge lag while recording on both windows and mac.



```
volume_guard1 = guard([-20,15])
volume_guard2 = guard([-20,15])
Tone.Master.volume.value = volume_guard1(Math.round(dials[0]["cell"]() * 30) -20);
 //mem["stab_channel"].volume.value = volume_guard2(-2);
 //mem["stab_filter"].frequency.value = Math.round(dials[1]["cell"]() * 10000);
//mem["l_filter"].frequency.value = Math.round(dials[1]["cell"]() * 1000);
................................................................................
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
}

function p(s, note, len) {
    note = note || "C3"
    len = len || "16n"
    samples[s].triggerAttackRelease(note, len, time);
}

function once () {
    
	var vis = initWinamp("Cope - The Neverending Explosion of Red Liquid Fire");
    render_loop = function () {
       vis.render();
................................................................................
       }
    }

}
```


## Example1

This illustrates the core concepts of bitrhythm.

1. Samples (Tone.Sampler)
2. Dials (use cellx internally)
3. Observers (cellx)

................................................................................
    cellx("p 1011 1001 1000 1000"),
    cellx("p 00x0 00x0 00x0 00x0"),
    cellx("p 0000 x000 0000 x000"),
]

patterns = scene1

function Sample(name, no) {
    name = name || "sample"
    name += no
    mem[name + "_filter"] = new Tone.Filter(10000, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume:0}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
}

function p(s, note) {
    note = note || "C3"
    samples[s].triggerAttack(note, time);
}

var once = function () {
    Tone.Master.volume.value = -30
    mem.master = new Tone.Channel({channelCount: 2, volume: -10}).chain( Tone.Destination);
    mem.volume_guard = guard([-20,-10]);

    Sample("k", 0);
    Sample("h", 1);
................................................................................

Change the once function to this and click `+ Execute Once`

Code is taken from butterchurn. Try changing [presets](https://butterchurnviz.com/) to get different visuals.

```
var tweak = function() {
    var can = document.getElementById("visual");
    var can_container = document.getElementById("canvas-container");
    can.width = window.innerWidth;
    can.height = window.innerHeight;
    can_container.width = window.innerWidth;
    window.visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        width: window.innerWidth,
        height: window.innerHeight,
    });
    window.visualizer.connectAudio(Tone.getContext().destination);
    const presets = butterchurnPresets.getPresets();
    const preset = presets["_Aderrasi - Wanderer in Curved Space - mash0000 - faclempt kibitzing meshuggana schmaltz (Geiss color mix)"]
    window.visualizer.loadPreset(preset, 0.0); // 2nd argument is the number of seconds to blend presets

    render_loop = function () {
        window.visualizer.render();
    }
}
```

................................................................................
}
```

As you can sere numbers and dials will be available as a global array.

There is no way to remove them so be careful about the order in which you add them.

The following code will always be executed as its at the top level. As you can see this code implies that the first dial is connected to the master volume. Use guards to avoid going deaf as sometimes editing can created bad frequency numbers.

```
Tone.Master.volume.value = volume_guard((1 - dials[0]["cell"]()) * -30);
```

## Example2

- Kick + Filter
- Snare + Filter
- Snare + Filter + Delay
- High Hat
- Lead + Filter
- Dub Stab + Filter + Reverb
................................................................................
reverb.roomSize = 0.9;
```

## Full Code

```
volume_guard1 = guard([-20,15])
volume_guard2 = guard([-20,15])
Tone.Master.volume.value = volume_guard1(Math.round(dials[0]["cell"]() * 30) -20);
 //mem["stab_channel"].volume.value = volume_guard2(-2);
// mem["stab_filter"].frequency.value = Math.round(dials[1]["cell"]() * 10000);
// mem["l_filter"].frequency.value = Math.round(dials[1]["cell"]() * 1000);


scene1 = [
    cellx("p 1000 1000 1000 1000"),
    cellx("p 00x0 00x0 00x0 00x0"),
    cellx("p 0x00 0000 0000 x000"),
    cellx("p 0000 x000 0000 x000"),
    cellx("p xx0x x0x0 x0x0 0xxx"),
    cellx("p x000 x0x0 0000 x0x0"),
]

patterns = scene1

always();

function NoiseSynth (name) {
    name = name || "wf";
    mem[name + "_stereo"] = new Tone.StereoWidener({width: 1});
    mem[name] =  new Tone.Noise("pink").start();
    mem[name + "_filter"] = new Tone.Filter(400, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: -10, pan: -0.8}).chain(mem[name + "_filter"], mem[name + "_stereo"], mem.master);
    mem[name].connect(mem[name + "_channel"])
}


function Sample(name, no, filter, volume) {
    name = name
    filter = filter || 10000
    volume = volume || 0
    mem[name + "_filter"] = new Tone.Filter(filter, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
}

function Stab(name) {
    name = name || "stab";

    mem[name + "_filter"] = new Tone.Filter(5250, 'lowpass', -96);
    mem[name + "_hfilter"] = new Tone.Filter(80, 'highpass', -96);
    mem[name + "_reverb"] = new Tone.Reverb(0.1);
    mem[name + "_delay"] = new Tone.FeedbackDelay("4n", 0.4);
    // mem[name + "_pdelay"] = new Tone.PingPongDelay("2n", 0.1);
     mem[name + "_stereo"] = new Tone.StereoWidener({width: 0.25});
     mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: -2}).chain(mem[name + "_filter"] ,   mem[name + "_delay"], mem[name + "_reverb"],  mem[name + "_hfilter"] ,mem[name + "_stereo"], mem.master)


    function voice(no, type) {
        mem[name + "_synth" + no] = new Tone.MonoSynth({
            oscillator: {
                type: type
            }
................................................................................
    voice(2, "sawtooth")
    voice(3, "sawtooth")
    voice(4, "pwm")
    voice(5, "pwm")
    voice(6, "pwm")
}


function p(s, note, len) {
    note = note || "C3"
    len = len || "16n"
    samples[s].triggerAttackRelease(note, len, time);
}


function s(vel, notes, duration) {
    vel = vel || 1.0;
    duration = duration || "2n";
    notes = notes ||  ["E2", "B2", "G2"];
    mem["stab_synth1"].triggerAttackRelease(notes[0], duration, time, vel);
    mem["stab_synth2"].triggerAttackRelease(notes[1], duration, time, vel);
    mem["stab_synth3"].triggerAttackRelease(notes[2], duration, time, vel);

    mem["stab_synth4"].triggerAttackRelease(notes[0], duration, time, vel);
    mem["stab_synth5"].triggerAttackRelease(notes[1], duration, time, vel);
   mem["stab_synth6"].triggerAttackRelease(notes[2], duration, time, vel);
}

























function once () {


    
	// var vis = initWinamp("Unchained - Rewop");





    render_loop = function () {
       // vis.render();
    }

    Tone.Master.volume.value = -30
    mem.master = new Tone.Channel({channelCount: 2, volume: -10}).chain(Tone.Destination);

    // NoiseSynth();
    Stab();
    Sample("k", 0, 3000, 3);
    Sample("h", 1, 7000, -15);
    Sample("sn",2, 6000, -15);
    Sample("c", 3, 800, -10);
    Sample("l", 4, 420, -15);


    handlers["1"] = function (val) {
        if (val > 0.5) {
            mem["start_snare"] = true;
        } else {
            mem["start_snare"] = false;
        }
................................................................................
        mem["stab_filter"].Q.value = Math.round(val * 5);
    }

    dials[1]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        handlers["1"](val);
    })
    
    

}


function tweak () {
	mem.k1 = knob({ramp : [0.525, 0.8, 0.4, 1, 0.25, 0.75, 1, 0.25, 0.1], "number": dials[2]["cell"] });
    always = function () {
        mem["stab_filter"].frequency.value = mem.k1.move() * 10000;
    }
}




function sampleTest () {
    Sample("l", 4, 10000, -5);

}



if (bars <= 3 ) {
	transition = once;
} else {
	transition = tweak;
}

if (isHit) {
    if (track_no == 1) {
   		 if (bars > 0 ) {
       		 p(0);
        }
    }
    if (track_no == 2) {
        if (bars > 8 ) {
       	 	p(1);
        }	
    }
    if (track_no == 3) {
        if (bars > 4 ) {
    		s();
        }
        if (bars == 6) {
        	transition();
        }
    }
    if (track_no == 4) {
        // Uncomment for snare
      //  if (mem["start_snare"]) {
            p(2);
      //  }

    }
    if (track_no == 5) {
         if (bars > 12) {
	  		p(3)
        }
       // a();
    }
    if (track_no == 6) {
      // p(4, "B3", "8n")
    }

}



```










>
>







 







|







 







|







 







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







 







<
<
<
<
<
<
<
<
<
<
<
|
<







 







|





|







 







<

|

<
<






|





<
<









<
<
<
<
<
<
<
<
<
<








|
|







 







<
<
<
<
<
<
<
<




|
|
|

|
|
|


>
>
>
>
>
>
>

>
>
>
>
>
>

>
>
>
>
>
>
>
>
|
<
>
>
|
<
>
>
>
>
>

|

|
|







|

<







 







<
<



<

|





<
<
<
<
<
<
<
<
<
<

|

|




|
|




|




|


|



<
|

<
|


|
|

<


|

|
|
>
>
>


<

9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
..
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
...
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
...
191
192
193
194
195
196
197













198
199
200
201
202
203
204
...
256
257
258
259
260
261
262











263

264
265
266
267
268
269
270
...
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
...
333
334
335
336
337
338
339

340
341
342


343
344
345
346
347
348
349
350
351
352
353
354


355
356
357
358
359
360
361
362
363










364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
...
386
387
388
389
390
391
392








393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429

430
431
432

433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451

452
453
454
455
456
457
458
...
459
460
461
462
463
464
465


466
467
468

469
470
471
472
473
474
475










476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501

502
503

504
505
506
507
508
509

510
511
512
513
514
515
516
517
518
519
520



Samples taken from Deep Techno and Dub Techno collections from splice. Sadly I can't distribute the song itself as I would also have to distribute the samples with it.  

## Demo Song 1 // Techno

Code for the Demo Song. The visualisation was disabled in the Demo as it was causing a huge lag while recording on both windows and mac.

Note: Could could be outdated due to latest changes to the API.

```
volume_guard1 = guard([-20,15])
volume_guard2 = guard([-20,15])
Tone.Master.volume.value = volume_guard1(Math.round(dials[0]["cell"]() * 30) -20);
 //mem["stab_channel"].volume.value = volume_guard2(-2);
 //mem["stab_filter"].frequency.value = Math.round(dials[1]["cell"]() * 10000);
//mem["l_filter"].frequency.value = Math.round(dials[1]["cell"]() * 1000);
................................................................................
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
}

function p(s, note, len) {
    note = note || "C3"
    len = len || "16n"
    samples[s].triggerAttackRelease(note, len, undefined);
}

function once () {
    
	var vis = initWinamp("Cope - The Neverending Explosion of Red Liquid Fire");
    render_loop = function () {
       vis.render();
................................................................................
       }
    }

}
```


## Getting Started

This illustrates the core concepts of bitrhythm.

1. Samples (Tone.Sampler)
2. Dials (use cellx internally)
3. Observers (cellx)

................................................................................
    cellx("p 1011 1001 1000 1000"),
    cellx("p 00x0 00x0 00x0 00x0"),
    cellx("p 0000 x000 0000 x000"),
]

patterns = scene1














var once = function () {
    Tone.Master.volume.value = -30
    mem.master = new Tone.Channel({channelCount: 2, volume: -10}).chain( Tone.Destination);
    mem.volume_guard = guard([-20,-10]);

    Sample("k", 0);
    Sample("h", 1);
................................................................................

Change the once function to this and click `+ Execute Once`

Code is taken from butterchurn. Try changing [presets](https://butterchurnviz.com/) to get different visuals.

```
var tweak = function() {











    initWinamp("_Aderrasi - Wanderer in Curved Space - mash0000 - faclempt kibitzing meshuggana schmaltz (Geiss color mix)");


    render_loop = function () {
        window.visualizer.render();
    }
}
```

................................................................................
}
```

As you can sere numbers and dials will be available as a global array.

There is no way to remove them so be careful about the order in which you add them.

The following code will always be executed as its at the top level. As you can see this code implies that the first dial is connected to the master volume. Use guards to avoid going deaf as someundefineds editing can created bad frequency numbers.

```
Tone.Master.volume.value = volume_guard((1 - dials[0]["cell"]()) * -30);
```

## Tutorial

- Kick + Filter
- Snare + Filter
- Snare + Filter + Delay
- High Hat
- Lead + Filter
- Dub Stab + Filter + Reverb
................................................................................
reverb.roomSize = 0.9;
```

## Full Code

```
volume_guard1 = guard([-20,15])

Tone.Master.volume.value = volume_guard1(Math.round(dials[0]["cell"]() * 30) -20);
// mem["stab_channel"].volume.value = volume_guard2(-2);
// mem["stab_filter"].frequency.value = Math.round(dials[1]["cell"]() * 10000);



scene1 = [
    cellx("p 1000 1000 1000 1000"),
    cellx("p 00x0 00x0 00x0 00x0"),
    cellx("p 0x00 0000 0000 x000"),
    cellx("p 0000 x000 0000 x000"),
    cellx("p xx0x c0x0 x0x0 x0xx"),
    cellx("p x000 x0x0 0000 x0x0"),
]

patterns = scene1



function NoiseSynth (name) {
    name = name || "wf";
    mem[name + "_stereo"] = new Tone.StereoWidener({width: 1});
    mem[name] =  new Tone.Noise("pink").start();
    mem[name + "_filter"] = new Tone.Filter(400, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: -10, pan: -0.8}).chain(mem[name + "_filter"], mem[name + "_stereo"], mem.master);
    mem[name].connect(mem[name + "_channel"])
}











function Stab(name) {
    name = name || "stab";

    mem[name + "_filter"] = new Tone.Filter(5250, 'lowpass', -96);
    mem[name + "_hfilter"] = new Tone.Filter(80, 'highpass', -96);
    mem[name + "_reverb"] = new Tone.Reverb(0.1);
    mem[name + "_delay"] = new Tone.FeedbackDelay("4n", 0.4);
    // mem[name + "_pdelay"] = new Tone.PingPongDelay("2n", 0.1);
    mem[name + "_stereo"] = new Tone.StereoWidener({width: 0.25});
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: -2}).chain(mem[name + "_filter"] ,   mem[name + "_delay"], mem[name + "_reverb"],  mem[name + "_hfilter"] ,mem[name + "_stereo"], mem.master)


    function voice(no, type) {
        mem[name + "_synth" + no] = new Tone.MonoSynth({
            oscillator: {
                type: type
            }
................................................................................
    voice(2, "sawtooth")
    voice(3, "sawtooth")
    voice(4, "pwm")
    voice(5, "pwm")
    voice(6, "pwm")
}









function s(vel, notes, duration) {
    vel = vel || 1.0;
    duration = duration || "2n";
    notes = notes ||  ["E2", "B2", "G2"];
    mem["stab_synth1"].triggerAttackRelease(notes[0], duration, undefined, vel);
    mem["stab_synth2"].triggerAttackRelease(notes[1], duration, undefined, vel);
    mem["stab_synth3"].triggerAttackRelease(notes[2], duration, undefined, vel);

    mem["stab_synth4"].triggerAttackRelease(notes[0], duration, undefined, vel);
    mem["stab_synth5"].triggerAttackRelease(notes[1], duration, undefined, vel);
    mem["stab_synth6"].triggerAttackRelease(notes[2], duration, undefined, vel);
}

function once() {
    var pr;
    const s = ( p ) => {
        pr = p;
        var img;
        let x = 100;
        let y = 100;

        p.setup = function() {
            var x = p.createCanvas(700, 410);
            x.canvas.style.position = "absolute";
            p.frameRate(30);
            img = p.loadImage('/test.png');
        };

        p.draw = function() {
            var e = getRandomInt(2);
            p.clear();
            if (e == 0) {
                //   p.fill(123);
                //  p.rect(x,y,50,50);
            } else {
                //	p.image(img, 0, 0);
            }

        };
    };


    let myp5 = new p5(s,  document.getElementById('canvas-container'));
    

    var visualizer = initWinamp("_Aderrasi - Wanderer in Curved Space - mash0000 - faclempt kibitzing meshuggana schmaltz (Geiss color mix)");

    render_loop = function () {
        visualizer.render();
    }
    
    Tone.Master.volume.value = -30;
    mem.master = new Tone.Channel({channelCount: 2, volume: -10}).chain(Tone.Destination);

    // NoiseSynth();
    Stab();
    Sample("k", 0, 3000, 3);
    Sample("h", 1, 7000, -15);
    Sample("sn",2, 6000, -15);
    Sample("c", 3, 620, 2);
    Sample("l", 4, 420, -15);


    handlers["1"] = function (val) {
        if (val > 0.5) {
            mem["start_snare"] = true;
        } else {
            mem["start_snare"] = false;
        }
................................................................................
        mem["stab_filter"].Q.value = Math.round(val * 5);
    }

    dials[1]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        handlers["1"](val);
    })



}


function tweak () {
    mem.k1 = knob({ramp : [0.525, 0.8, 0.4, 1, 0.25, 0.75, 1, 0.25, 0.1], "number": dials[2]["cell"] });
    always = function () {
        mem["stab_filter"].frequency.value = mem.k1.move() * 10000;
    }
}











if (bars <= 3 ) {
    transition = once;
} else {
    transition = tweak;
}

if (isHit) {
    if (track_no == 1) {
        if (bars > 0 ) {
            p(0);
        }
    }
    if (track_no == 2) {
        if (bars > 8 ) {
            p(1);
        }	
    }
    if (track_no == 3) {
        if (bars > 4 ) {
            // s();
        }
        if (bars == 6) {
            transition();
        }
    }
    if (track_no == 4) {

        if (mem["start_snare"]) {
            p(2);

        }
    }
    if (track_no == 5) {
        if (bars > 12) {
            p(3)
        }

    }
    if (track_no == 6) {
       // p(4, "C3")
    }
}

if (count == (mem["k_last"] + 3)) {
    pn("h");
}
```

Changes to source/index.rst. 

11
12
13
14
15
16
17
18
19
20
21

22
23
24

25


26
27

    :maxdepth: 5
    :glob:
    :includehidden:

    what
    source-code
    demo
    tweaking
    limitations
    midi
    samples

    early-attempts
    changelog
    main

    saving


    bookmarks









<
<
<

>



>

>
>



11
12
13
14
15
16
17



18
19
20
21
22
23
24
25
26
27
28

    :maxdepth: 5
    :glob:
    :includehidden:

    what
    source-code
    demo



    samples
    tweaking
    early-attempts
    changelog
    main
    alternate-implementation
    saving
    limitations
    credits
    bookmarks

Changes to source/main.cog. 

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
90
91
92

93
94
95
96
97
98
99
100
101
102





103
104
105
106
107
108

109
110
111
112
113
114
115
116
117
118
119
120
121
122

123
124
125
126
127
128
129







130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
...
491
492
493
494
495
496
497

498
499
500
501
502


503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
...
539
540
541
542
543
544
545


































546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
...
619
620
621
622
623
624
625




626
627


















628
629
630
631
632
633
634
...
636
637
638
639
640
641
642

643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
...
675
676
677
678
679
680
681


682

683
684
685
686
687


688

689
690
691
692
693
694
695
...
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
....
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
....
1204
1205
1206
1207
1208
1209
1210




1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
....
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249



1250
1251





























1252
1253
1254
1255
1256
1257
1258
....
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
....
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388


























    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;



    var transition = function () {
    }

    var always = function () {
    }


    var render_loop = function () {
    }

    var animation = function () {
        render_loop();
        window.requestAnimationFrame(animation)
................................................................................
    }

    Tone.Master.mute = false;
    document.getElementById('tempo-value').disabled = true;
    document.getElementById('tick-value').disabled = true;

    var mem = self.state.mem;

    var handlers = {};
    var count = -1;

    var text = editor.getValue();

    editor.on("change", function () {
            text = editor.getValue();
    });

    var patterns = [ cellx("0000") ]; // need this for first eval

    var bars = 0;
    var tick = 0;

    loop = new Tone.ToneEvent((time, chord) => {





        count = count + 1;
        tick = (count % this.state.ticks);
        if (tick === 0) ++bars;

        $("#duration").html("" + bars + "." + tick + " / " + count + " / " + window.roundTo(Tone.Transport.seconds, 2));


        for (var i = 0; i < patterns.length; i++) {
            var samples = this.state.samples;
            var dials = self.state.dials;
            var numbers = self.state.numbers;

            if (document.getElementById('edit-mode').checked) {
                p = oldPatterns[i];
            } else {
                var p = patterns[i];
                oldPatterns[i] = p;
            }
            if (p && p.length !== 0) {
                var track_no = i + 1;
                var pattern = pattern_clean(p());

                var isHit = (pattern.split('')[tick] == "1") ? true : false;

                try {
                    if (document.getElementById('edit-mode').checked) {
                        eval(oldCode);
                    } else {
                        eval(text);







                        if (document.getElementById('load-mode').checked) {
                            document.getElementById('load-mode').checked = false;
                            transition();
                        }
                        oldCode = text;
                    }
                    $("#error").html("");
                } catch (ex) {
                    $("#error").html(ex);
                    eval(oldCode);
                }
            }
        }
    }, []);
    loop.loop = true;
    loop.loopEnd = this.state.ticks + "n";
    loop.start();

   window.requestAnimationFrame(animation)

}
"""
cog.out(core_loop)
@>
@@
```
................................................................................
        </hstack>

        <div class="mt-2 ml-2" >
            <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1"  onclick={play}>Play</button>
            <button type="button" class="btn btn-primary ml-2" onclick={save}>Save</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reset}>Reset</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reload}>Window Reload</button>


            <input class="ml-1" name="edit-mode" id="edit-mode" type="checkbox"/>
            <label for="edit-mode">Edit</label>
            <input class="ml-1" name="load-mode" id="load-mode" type="checkbox"/>
            <label for="load-mode">Execute Transition</label>


        </div>

        <hstack>
            <div each={ key, index in state.samples} >
                <div if={ state.samples && state.samples[index] }>
                    <sample  setsample={setSample} rmsample={rmSample} samples={state.samples} ti={index + 1}></sample>
                </div>
            </div>
        </hstack>

        <hstack>
            <div each={ key, index in state.dials}>
                <dial rmdial={rmDial}  v={state.dials[index]} ti={index + 1}></dial>
            </div>
        </hstack>

................................................................................
    margin-top: 4vh;
}
</style>

<script>
var oldCode = "";
var oldPatterns = [];



































// var audio = new Audio();
// audio.loop = true;
const actx = Tone.context;
const dest = actx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream);
let chunks = [];
var sampleURL = "";
var sam;
var loop;
this.props = opts;

this.state = {
    mem: {},
    dials: [],
    numbers: [],
    samples: [],
................................................................................
        })
    }


});






pattern_clean(p) {
    return window.pattern_clean(p);


















}

save() {
    this.state.code = editor.getValue();
    var text = {
        tempo: this.state.tempo,
        dial_count: this.state.dials.length,
................................................................................
        sample_names: this.state.samples.map(function (item) {return item["__url"]}),
        ticks: 16,
        code: this.state.code,
    };
    const lib = window.JsonUrl('lzma');
	lib.compress(text).then(encodedData => {
        var link = "/song/" + encodedData;

        window.open(link, "_blank");
    });
}

reload() {
    window.location.replace( "//" + window.location.host)
}

reset() {

    Tone.Master.mute = true;
    if (loop) {
        loop.stop();
        loop.cancel();
        loop.dispose();
        Tone.Master.mute = false;
    }
    document.getElementById('tempo-value').disabled = false;
    document.getElementById('tick-value').disabled = false;
    editor.setValue("");

    this.state = {
        mem: {},
................................................................................
    })


}

editTempo(e) {
    this.update({


        tempo: e.target.value

    })
}

editTicks(e) {
    this.update({


        ticks: e.target.value

    })
}

${core_loop}

start() {
    recorder.start();
................................................................................
import os

sample = """
<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div style="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;overflow: hidden;">
            <span>{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;
................................................................................
        </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>
            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>
        <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 target="_blank" href="/issue">Report bugs / Feedback</a></h5>
                <h5 class="ml-4"><a href="/song/XQAAAALHCwAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQ4SmT-79BTKosH6Xje2IYnNRgEOpeuhg9Ej9Iz-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YmslEqBloRY0JslK5KapeSFSSH9ScweRgAPu9a4t1L0-t71Xb9Eb3KJ-lezPo7xcmK9xCnNGorm__kixtPuM_8L3YNc30OA3GMBPHu5pAH__cKjLF6k5mCGKsNp8WFWYQACckBR03VaZGhfZv946NYyFQlw6boXQuVis292UUboEkaCJ0CV5wGurbJUA7il2uX-okyMSjx7WVseVG-zDQ0wBjbMLNYnXzoT0kYxI_6-GOAOVamJJHTrkulVfd1k0AgzCHByI6zCNtWyBa3i_2ks4ncMec8vqsjAy8BhwFAbKAP1RDKh7MUxwsecBuzyLR0hKGddivZmPn-xyYB-p8-Xru_Min2-3Z_3YZal2_wv8s6cIcqPAJ4wf5DH29U7le-eRLcUN6lhK77651_xeU--z7A6E3NDQ6WEb6UPc-brxTz-L-wZwFwy95QkwAZw4bWR2LNW78DVdCSnMC8zf-DVWgFkKP9SU9iGQj6yk6E8qBAlZfd3YavthZBdwhs2mtzsvIL8qcBTBRhy2Fxx5n5tLq2lXuPkH19-cqIoJCHJUjiuGKWh3PqOAnTj9n2PejvNlp1GUMMixR7YMUofcLeA5oQCQpMSuIEP8sUshtk3zY35vG4xr3FfPj7OZiOQx5jRtMaw7l8xqFVm_PZ-kEgxoIVFtpZFcgsACnuBeJF1yZ2ss1GN95XEt9BsF3UY_UM1x8ePgY8BL4WH7BcHZRCOV2YZeRXZ6sYLNjKBjGVD_FAR_ZL6yd6l_1wqpQJPb3lL1fhBecNTcaXAn61RhySOvokAJ5TcrTtqdhsGEBUnaQOGRIfKU0NV4zPmgTm9TLASz5gs1VRoUZ06htWirfNfjiWNrbw8I9ggo8KMKwDZ2v4CnfqyL4eCpFNZjVIYOEWGGktLAadafQjdjOkWHWF8KIdr3uPBt1kXY_-IEkn11gjmn1q9ybgMLxriz7kWqzyawAEpqM27wzIwET2smzbJ-zHcx01rdHu3AqLMHk-AliQLGvGknluJNjWmK-WFwZUR8ZokJ6cVYW70a6X1dYWncQsPwyC3AOplDyUChlC_Rmgvz9fqeMs-fXub0odr01b7PFrraLWJ02Xk7trVq_Gqh8V2A2LATUKewJT05dG0bVJTBdM9n86C-mgyLf7s7JeNf9ul97CsS3BalNZ--N0hfkPbT_VPU9heFko9goG_mkF7Ky6FbtVpERCqw7UbvPgdFdIOEkoqPYEwAmjwzva2U-7cLo3g3uEQq1NBV3C8LijP10-1Avqu2df_R8XtykOk4H8yitylcxka4vSq1Jo2fv-wp74EiJi6Tn6T3epZJYXAMBRXRxozyl1r4lbOqRjDfqjWRTRrr8l9U2iKbAiIz6Ssy74Ic9sQABR9F4UahwsDQuJgjOHKdaLXmBHoPuD7nX_9mMYV">Example1</a></h5>
                <h5 class="ml-4"><a href="/song/XQAAAALYEwAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9NTfIT-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YnQ2gSfpzY3zlYLujavQRq73hSEM-RaGxTxuud9naok9rMpYn-UCaNiF2zrnnqUB61s_22pYOE_9KuFo7vEJMCtU2bkxyNdgSXzwmIDuo8OyxcIh9HQP59UZbNRixlBnmw73PnywS5DJBoH8NEIAnlLpL4rqaokfN9Cfte0Id3929n26IjA7zVZF75ovX37KO1xT9iBa8gt-w8cvYBdIdVL5JUOrbf0ccVJSoXGFoM0U4GXoEDThw00FdKnfsq1WeJjEQt4Qn8f90TkkQgkpSajR9dA0AJBqKDuVeEgDoFsbVI-ZZVvJW2dD_9GIm5PpQSTzpuBslzD7ZJQSI3XA1g2F_QP4w6U4rOrTMZUQSr___s22d8Plp0FbffDCq8dri0C8kUYPqS_np_Nnr7sDY9KsxgNZJmUxYkt1XBTO3iWmR6RZ7OFk6PZ8R44NXwhvxbUEikMoboPSW1XPiV4xtCfZb4qE4yCP2xHPlEniUhcNrWc5608hrNkVfpQUmYLFvXFTyUHA4aOkRDoHf0jHwGzyBV-YanP65YlZpupZC4oW3bjhO01tfh_qYWNA_ZpDVCCXRoGZJfrBjkmaYom9Gd6mvGVzillbk6LD0_Amu_Zublb4_AZ1SAxKSWlMfbmbXQfW16RSMidtmTCKAMmF9LCONKcjTR_1P2vU3fPR7hBhRtbtNR0xNEfRstXJ81ZcyC5YTK8dnpMwMXKk5uoaBMDbochbAKXaswgZKIn2usyi5Z4pyQf8xCSheQawyYSA031ZHA3wRuq_7rjhn0bXZrEGnB0QFzxgM-dYsY7CUojKr8ziZGXGb9zoVHvGDI0SIFyFIrMs6kEzpZAq_CnJyqJi4nbbqfoHlE3nDyLNKFk1e4OHqPsU9G1LRNnHBwSjiJCnvZO_xv_VQbtWmQwLrT7j6PZeXvNOz-yKWQFcE-0RXn6-EuqT7LNTF1GSo2o9AFS5Z2PJqIXioD9ebr9xjFXNrfTdIe32dgcgQHVHNyjEIH22AABUQWYtHRvZQpcfsUjJQM140MJ8nmpjmxlhtAMEstPzbGYUKZdjhF1LkeePxXD46zniN9cFEtRPTNR9luP4W2rhfHnvP4_tRAipmQiB_6RSRvLaiVYfkYYXdzMkX_M5blfwCKQ-DyDFy0hTw3mYZ-SbYT11RVO-5dEm_YntYmgQOI1FI7AhMxpmyE27Lwb73oDO0SeS-SDj4T6nbfltfHdWDPFaeUWd12KRmI-E8AQCcnmJayoBnMXyXNw3muX0319WhuitTtab3n3vwZM1e7ku11q1rNoaA3VXLbBJdyS1Vxvdvm8Tled56S54siOsEYGRqmdiC3gO2ZGaBq68SJZ9zxe9yttNFEXFFgWYFnIn_EMSTNj1ILB0wkOQPzsjFXEEa3W6esXTujFuoHK05q4rrfYicKZkq01hfaoZcovIbDFNyGtpgEzn-BFPJXKWwqn5gkgrvZiYxVxG7a449Gjj_R2HqNbbiTmd1la0MKDnVLWv9yXXRdRLQrKC4Z2kAJIOdwxluk6fRBFzRWT_o046yjM-nvgp3KLJU-n_CWu3mgfmQi5vCbNxRczEeyaJGg3DJL-anxXk0A2CFsFCXRLccmhHV7MjQdh4sdvnvl3JO1Ypt1_nsBXQJqXvahwkjpEC5jzduvTd0rIHgDBAzO3PA7YNjWF_r1EmagtsB_1VFSRqAQdXjbEep8SLKNqv8N7ILkix2NeTM30r9xyXtXcGOOmoQK4AMk1tHBmQ4m6YYNalWXJ_aGIjdBgx4jgsRYjWp1H9qRr0wMkmG75zOSbuOy_lg5-C-xbszvp7B5YELZblpjnpXCW8AhXMWCLM_iG16lkgw24Z40VWh4Q9DCXoMgZmOXm-98WidEFfkMP_8L7sdQjWRxMAodkLhUkHnsBRlYNChmAexNvzKW3xiiDhC_k6qKRfldVgCGSBFfpldJF_8e7EyQ">Example2</a></h5>
                <h5 class="ml-4"><a href="/docs/demo.html">See Demo Song // Techno</a></h5>
            </hstack>

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

    <script>
        riot.compile(function() {
................................................................................
---

@<
import cog
import os

misc_js = """




function initWinamp(preset) {
    var can = document.getElementById("visual");
    can.height = window.innerHeight - document.getElementById("header-playback").clientHeight - 75;
    can.width = window.innerWidth;
    var can_container = document.getElementById("canvas-container");
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - document.getElementById("header-playback").clientHeight - 75,
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
................................................................................
            return val;
        } else {
            return state;
        }
    }
}

function hex2bin(hex) {
    var letters = hex.replace('`1','a');
    letters = hex.replace('`2','b');
    letters = hex.replace('`3','c');
    letters = hex.replace('`4','d');
    letters = hex.replace('`5','e');
    letters = hex.replace('`6','f');
    letters = letters.split('');



    var bin = "";
    letters.map(function(letter) {





























        if (letter == "0") {
            bin += "0000";
        }
        if (letter == "1") {
            bin += "0001";
        }
        else if (letter == "2") {
................................................................................
        }
        else if (letter == "e") {
            bin += "1110";
        }
        else if (letter == "f") {
            bin += "1111";
        }









    })
    return bin;
}









function pattern_clean(p) {
    if (!p) {













































































































































        return "";
    }
    p = p.replace(/ /g, "");

    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);
    }
    else if (fc== "b") {
        var l = (p.length - 1);
        var ptype = "bin";
    }
    else {
        var ptype = "hex";
        var l = (p.length) * 4;
    }

    if (ptype == "bin") {
        var fp =  p.substring(1);
    } else if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");






















    } else {












        var fp = hex2bin(p);
    }

    return fp;
}

function download(data, filename, type) {
................................................................................
cog.out(misc_js)

os.system("rm public/misc.js")
f = open("public/misc.js", "w")
f.write(code)
f.close()
@>
@@
```


































>
>






<







 







>

|


>

|







|
>
>
>
>
>





<
>

<




|

|
|

|

|
>







>
>
>
>
>
>
>













|
<
<
<

|







 







>





>
>


|





|







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>









<







 







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







 







>
|










|
|
|
|
<







 







>
>
|
>





>
>
|
>







 







|
|







 







>
>
>
>
|
<
<
|
<
<





|
<
<
|
<







 







>
>
>
>


|




|







 







|

|
|
|
|
|
|
>
>
>
|
<
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
|
>
>
>
>
>
>
>




>
>
>
>
>
|
>
>
|

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



>




<
<
<
<
<
|




<
<
|


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







 










>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

116
117

118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158



159
160
161
162
163
164
165
166
167
...
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
...
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603

604
605
606
607
608
609
610
...
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
...
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728

729
730
731
732
733
734
735
...
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
...
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
....
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
....
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
....
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
....
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579





1580
1581
1582
1583
1584


1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
....
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705

    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 always = function () {
    }


    var render_loop = function () {
    }

    var animation = function () {
        render_loop();
        window.requestAnimationFrame(animation)
................................................................................
    }

    Tone.Master.mute = false;
    document.getElementById('tempo-value').disabled = true;
    document.getElementById('tick-value').disabled = true;

    var mem = self.state.mem;
    window.mem = mem;
    var handlers = {};
    window.count = -1;

    var text = editor.getValue();

    editor.on("change", function () {
        text = editor.getValue();
    });

    var patterns = [ cellx("0000") ]; // need this for first eval

    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;

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

        $("#duration").html("" + bars + "." + tick + " / " + count + " / " + window.roundTo(Tone.Transport.seconds, 2));

        always();
        for (var i = 0; i < patterns.length; i++) {

            var dials = self.state.dials;
            var numbers = self.state.numbers;

            if (document.getElementById('edit-mode').checked) {
                var p_text  = oldPatterns[i];
            } else {
                var p_text = patterns[i];
                oldPatterns[i] = p_text;
            }
            if (p_text() && p_text().length !== 0) {
                var track_no = i + 1;
                var pattern = pattern_parse(p_text());
                var meta = pattern_meta(p_text());
                var isHit = (pattern.split('')[tick] == "1") ? true : false;

                try {
                    if (document.getElementById('edit-mode').checked) {
                        eval(oldCode);
                    } else {
                        eval(text);
                        if (document.getElementById('redo').checked) {
                            document.getElementById('redo').checked = false;
                            tick = (count % this.state.ticks);
                            count -= tick + 1;
                            i = 0;
                            continue;
                        }
                        if (document.getElementById('load-mode').checked) {
                            document.getElementById('load-mode').checked = false;
                            transition();
                        }
                        oldCode = text;
                    }
                    $("#error").html("");
                } catch (ex) {
                    $("#error").html(ex);
                    eval(oldCode);
                }
            }
        }
  }.bind(this), delta)




  window.requestAnimationFrame(animation);

}
"""
cog.out(core_loop)
@>
@@
```
................................................................................
        </hstack>

        <div class="mt-2 ml-2" >
            <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1"  onclick={play}>Play</button>
            <button type="button" class="btn btn-primary ml-2" onclick={save}>Save</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reset}>Reset</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reload}>Window Reload</button>
            <button type="button" class="btn btn-primary ml-2" onclick={download}>Save File</button>

            <input class="ml-1" name="edit-mode" id="edit-mode" type="checkbox"/>
            <label for="edit-mode">Edit</label>
            <input class="ml-1" name="load-mode" id="load-mode" type="checkbox"/>
            <label for="load-mode">Execute Transition</label>
            <input class="ml-1" name="load-mode" id="redo" type="checkbox"/>
            <label for="redo">Redo Bar</label>
        </div>

        <vstack>
            <div each={ key, index in state.samples} >
                <div if={ state.samples && state.samples[index] }>
                    <sample  setsample={setSample} rmsample={rmSample} samples={state.samples} ti={index + 1}></sample>
                </div>
            </div>
        </vstack>

        <hstack>
            <div each={ key, index in state.dials}>
                <dial rmdial={rmDial}  v={state.dials[index]} ti={index + 1}></dial>
            </div>
        </hstack>

................................................................................
    margin-top: 4vh;
}
</style>

<script>
var oldCode = "";
var oldPatterns = [];

Mousetrap.stopCallback = function(e, element, combo) {
    return false;
}

Mousetrap.bind(['f5'], function(e) {
    if (document.getElementById('edit-mode').checked) {
        document.getElementById('edit-mode').checked = false;
    } else {
        document.getElementById('edit-mode').checked = true;
    }

    return false;
});

Mousetrap.bind(['f9'], function(e) {

    if (document.getElementById('redo').checked) {
        document.getElementById('redo').checked = false;
    } else {
        document.getElementById('redo').checked = true;
    }

    return false;
});

Mousetrap.bind(['f8'], function(e) {
    if (document.getElementById('load-mode').checked) {
        document.getElementById('load-mode').checked = false;
    } else {
        document.getElementById('load-mode').checked = true;
    }
    return false;
});

// var audio = new Audio();
// audio.loop = true;
const actx = Tone.context;
const dest = actx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream);
let chunks = [];
var sampleURL = "";
var sam;

this.props = opts;

this.state = {
    mem: {},
    dials: [],
    numbers: [],
    samples: [],
................................................................................
        })
    }


});


pattern_parse(p) {
    return window.pattern_parse(p);
}

pattern_meta(p) {
    return window.pattern_meta(p);
}

download() {
    
    function download(data, filename = "song.txt", type = "text/plain") {
            var file = new Blob([data], {type: type});
            var a = document.createElement("a"),
                    url = URL.createObjectURL(file);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);  
            }, 0); 
    }
    download(editor.getValue())
}

save() {
    this.state.code = editor.getValue();
    var text = {
        tempo: this.state.tempo,
        dial_count: this.state.dials.length,
................................................................................
        sample_names: this.state.samples.map(function (item) {return item["__url"]}),
        ticks: 16,
        code: this.state.code,
    };
    const lib = window.JsonUrl('lzma');
	lib.compress(text).then(encodedData => {
        var link = "/song/" + encodedData;
        window.history.pushState({}, 'Bitrhythm', link);
        //window.open(link, "_blank");
    });
}

reload() {
    window.location.replace( "//" + window.location.host)
}

reset() {

    Tone.Master.mute = true;
    Tone.Transport.stop();
    Tone.stop();
    if (self.state.timer) {
        clearInterval(self.state.timer);

    }
    document.getElementById('tempo-value').disabled = false;
    document.getElementById('tick-value').disabled = false;
    editor.setValue("");

    this.state = {
        mem: {},
................................................................................
    })


}

editTempo(e) {
    this.update({
        state: {
            ...this.state,
            tempo: parseInt(e.target.value)
        }
    })
}

editTicks(e) {
    this.update({
        state: {
            ...this.state,
            ticks: e.target.value
        }
    })
}

${core_loop}

start() {
    recorder.start();
................................................................................
import os

sample = """
<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div>
            <span class="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;">{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;
................................................................................
        </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 + Demo</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">Tutorial</a></h5>

            </hstack>

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

    <script>
        riot.compile(function() {
................................................................................
---

@<
import cog
import os

misc_js = """
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function initWinamp(preset) {
    var can = document.getElementById("visual");
    can.height = window.innerHeight - (document.getElementById("header-playback").clientHeight / 2);
    can.width = window.innerWidth;
    var can_container = document.getElementById("canvas-container");
    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];
................................................................................
            return val;
        } else {
            return state;
        }
    }
}

function romantogypsy(hex) {
    var letters = hex.replace('`1','a');
    letters = letters.replace('`2','b');
    letters = letters.replace('`3','c');
    letters = letters.replace('`4','d');
    letters = letters.replace('`5','e');
    letters = letters.replace('`6','f');
    return letters;
}

function lettertodec(letter) {
        var bin = "";

        if (letter.match(/\d/)) {
            no = parseInt(letter);
        }
        else if (letter == "a") {
            no = 10;
        }
        else if (letter == "b") {
            no = 11;
        }
        else if (letter == "c") {
            no = 12;
        }
        else if (letter == "d") {
            no = 13;
        }
        else if (letter == "e") {
            no = 14;
        }
        else if (letter == "f") {
            no = 15;
        }
        for (i = 1; i <= no; i++) {
            bin += "0";
        }
        return bin;
}

function lettertobin(letter) {
        var bin = "";
        if (letter == "0") {
            bin += "0000";
        }
        if (letter == "1") {
            bin += "0001";
        }
        else if (letter == "2") {
................................................................................
        }
        else if (letter == "e") {
            bin += "1110";
        }
        else if (letter == "f") {
            bin += "1111";
        }
        return bin;
}

function hex2bin(hex) {
    var letters = romantogypsy(hex)
    letters = letters.split('');
    var bin = "";
    letters.map(function(letter) {
        bin += lettertobin(letter)
    })
    return bin;
}

function get_char(str, index) {
    if ((index > 0) && (index < str.length)) {
        return str[index];
    } else {
        return null
    }
}

function pattern_meta(p) {
    if (!p) {
        return null;
    }
    p = p.replace(/ /g, "");
    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);
    }

    if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");
    }

    if (!fp) {
        return null;
    }

    var done = false;
    var index = 0;
    var meta = {}
    var one_index = 1;

    while(1) {
        if (index > fp.length) {
            break;
        }
        var current_meta = {}
        var current_letter = fp[index]
        if (current_letter == "_") {
            meta[one_index -1] = {"volume": "off" };
            index += 2;
            one_index += 2;
            continue;
        }
        else if (current_letter == "1") {
            var next_letter = get_char(fp,index + 1);
            if (next_letter == "[") {
                var jump_index = 1;
                var buffer = "";
                while(1) {
                    if (((index + 1) + jump_index) > fp.length) {
                        break;
                    }
                    let b_next_letter = get_char(fp, ((index + 1) + jump_index));

                    if (b_next_letter == "]") {
                        jump_index += 2;
                        break;
                    } else {
                        buffer += b_next_letter;
                        jump_index += 1;
                    }
                }
                var individual_meta = buffer.split(";")
                individual_meta.map(function (e) {
                    if (e.startsWith("^")) {
                        current_meta["pitch"] = e.substring(1)
                    } else if (e.startsWith("+")) {
                        current_meta["delay"] = e
                    } else {
                        current_meta["volume"] = e
                    }
                })
                meta[one_index -1] = current_meta
                index += jump_index;
                one_index += 1;
                continue;
            } else {
                meta[one_index -1] = current_meta
                one_index += 1;
                index += 1;
                continue;
            }
        } else {
            if (current_letter == "*") {
                var next_letter = get_char(fp,index + 1);
                if (next_letter == "`") {
                    index += 3;
                } else {
                    index += 2;
                    continue;
                }
            } else {
                index += 1;
                one_index += 1;
                continue;
            }
        }
    }
    return meta;
}

function Sample(name, no, filter, volume) {
    name = name
    filter = filter || 10000
    volume = volume || 0
    mem[name + "_filter"] = new Tone.Filter(filter, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
    hit_map[name] = no;
}

window.Sample = Sample;

function p(s, vol, note, len, delay) {
    note = note || "C3"
    len = len || "16n"
    vol = vol || 1
    delay = delay || "+0";

    samples[s].triggerAttackRelease(note, len, delay, vol);
    for (const [key, value] of Object.entries(hit_map)) {
    	if (value == s) {
	    	mem[key + "_last"] = count 
	    }
  	}
}

window.p = p;

function pn(s, vol, note, len, delay) {
    sample_no = hit_map[s]
    note = note || "C3"
    len = len || "16n"
    vol = vol || 1
    delay = delay || "+0";
    samples[sample_no].triggerAttackRelease(note, len, delay, vol);
    for (const [key, value] of Object.entries(hit_map)) {
    	if (value == s) {
	    	mem[key + "_last"] = count 
	    }
  	}
}

window.pn = pn;



function pattern_parse(p) {
    if (!p) {
        return "";
    }
    p = p.replace(/ /g, "");
    p = p.replace(/\[.+?\]/g, "");
    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);





    } else {
        var ptype = "hex";
        var l = (p.length) * 4;
    }



    if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");
    }

    if (ptype == "xo") {
        var fin = "";
        var done = false;
        var index = 1;
        while(1) {
            if (done) {
                break;
            }
            if (index >= fp.length) {
                done = true;
                continue;
            }
            var current_letter = fp[index - 1]
            if (current_letter) {
            if (current_letter == "*") {
                var next_letter = get_char(fp,index);
                if (next_letter == "`") {
                    var next_next_letter = get_char(fp,index + 1);
                    fin +=  lettertodec(romantogypsy(next_letter + next_next_letter));
                    index += 3;
                } else {
                    fin += lettertodec(next_letter);
                    index += 2;
                }
            } else {
                fin += current_letter;
                index += 1;
            }
            }
        }
        return fin;
    }
    else {
        var fp = hex2bin(p);
    }

    return fp;
}

function download(data, filename, type) {
................................................................................
cog.out(misc_js)

os.system("rm public/misc.js")
f = open("public/misc.js", "w")
f.write(code)
f.close()
@>
@@
```

## 303

Taken from [endless acid banger](https://www.vitling.xyz/toys/acid-banger/).

```js
@<
import common
cog.out(common.threeOh)
@>
@@
```

## Autocommit

<https://xiaoouwang.medium.com/tutorial-advanced-use-of-watchdog-in-python-excluding-files-a-git-auto-commit-example-part-7024913ad5a8>  
<https://github.com/gitwatch/gitwatch>  

```python
@<
import common
cog.out(common.auto_commit)
@>
@@
```

Changes to source/main.md. 

1
2
3
4




5
6
7
8
9
10
11
..
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
71
72

73
74
75
76
77
78
79
80
81
82





83
84
85
86
87
88

89
90
91
92
93
94
95
96
97
98
99
100
101
102

103
104
105
106
107
108
109







110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
...
373
374
375
376
377
378
379













380
381
382
383
384
385
386
...
408
409
410
411
412
413
414

415
416
417
418
419


420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
...
456
457
458
459
460
461
462


































463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
...
536
537
538
539
540
541
542




543
544


















545
546
547
548
549
550
551
...
553
554
555
556
557
558
559

560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
...
592
593
594
595
596
597
598


599

600
601
602
603
604


605

606
607
608
609
610
611
612
...
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
...
757
758
759
760
761
762
763

764




765













766































































































































































































































































767
768
769
770
771
772
773




774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
...
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813



814
815





























816
817
818
819
820
821
822
...
857
858
859
860
861
862
863

864







865
866
867
868





869


870
871













































































































































872
873
874

875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893






















894












895
896
897
898
899
900
901
...
933
934
935
936
937
938
939
940






























































































































































































































# Concepts and Code Walkthrough






## Core Tracker Loop

In bitrhythm code is evaluated for every cycle.

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

................................................................................
    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;



    var transition = function () {
    }

    var always = function () {
    }


    var render_loop = function () {
    }

    var animation = function () {
        render_loop();
        window.requestAnimationFrame(animation)
................................................................................
    }

    Tone.Master.mute = false;
    document.getElementById('tempo-value').disabled = true;
    document.getElementById('tick-value').disabled = true;

    var mem = self.state.mem;

    var handlers = {};
    var count = -1;

    var text = editor.getValue();

    editor.on("change", function () {
            text = editor.getValue();
    });

    var patterns = [ cellx("0000") ]; // need this for first eval

    var bars = 0;
    var tick = 0;

    loop = new Tone.ToneEvent((time, chord) => {





        count = count + 1;
        tick = (count % this.state.ticks);
        if (tick === 0) ++bars;

        $("#duration").html("" + bars + "." + tick + " / " + count + " / " + window.roundTo(Tone.Transport.seconds, 2));


        for (var i = 0; i < patterns.length; i++) {
            var samples = this.state.samples;
            var dials = self.state.dials;
            var numbers = self.state.numbers;

            if (document.getElementById('edit-mode').checked) {
                p = oldPatterns[i];
            } else {
                var p = patterns[i];
                oldPatterns[i] = p;
            }
            if (p && p.length !== 0) {
                var track_no = i + 1;
                var pattern = pattern_clean(p());

                var isHit = (pattern.split('')[tick] == "1") ? true : false;

                try {
                    if (document.getElementById('edit-mode').checked) {
                        eval(oldCode);
                    } else {
                        eval(text);







                        if (document.getElementById('load-mode').checked) {
                            document.getElementById('load-mode').checked = false;
                            transition();
                        }
                        oldCode = text;
                    }
                    $("#error").html("");
                } catch (ex) {
                    $("#error").html(ex);
                    eval(oldCode);
                }
            }
        }
    }, []);
    loop.loop = true;
    loop.loopEnd = this.state.ticks + "n";
    loop.start();

   window.requestAnimationFrame(animation)

}
```

## Dials

Bitrhythm provides custom dials. These dials can be mapped to any aspects of Tone.js. All dials are available as an array dials in the live code editor.
................................................................................
    return context.knob;
}
```

## Main UI
















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


................................................................................
        </hstack>

        <div class="mt-2 ml-2" >
            <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1"  onclick={play}>Play</button>
            <button type="button" class="btn btn-primary ml-2" onclick={save}>Save</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reset}>Reset</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reload}>Window Reload</button>


            <input class="ml-1" name="edit-mode" id="edit-mode" type="checkbox"/>
            <label for="edit-mode">Edit</label>
            <input class="ml-1" name="load-mode" id="load-mode" type="checkbox"/>
            <label for="load-mode">Execute Transition</label>


        </div>

        <hstack>
            <div each={ key, index in state.samples} >
                <div if={ state.samples && state.samples[index] }>
                    <sample  setsample={setSample} rmsample={rmSample} samples={state.samples} ti={index + 1}></sample>
                </div>
            </div>
        </hstack>

        <hstack>
            <div each={ key, index in state.dials}>
                <dial rmdial={rmDial}  v={state.dials[index]} ti={index + 1}></dial>
            </div>
        </hstack>

................................................................................
    margin-top: 4vh;
}
</style>

<script>
var oldCode = "";
var oldPatterns = [];



































// var audio = new Audio();
// audio.loop = true;
const actx = Tone.context;
const dest = actx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream);
let chunks = [];
var sampleURL = "";
var sam;
var loop;
this.props = opts;

this.state = {
    mem: {},
    dials: [],
    numbers: [],
    samples: [],
................................................................................
        })
    }


});






pattern_clean(p) {
    return window.pattern_clean(p);


















}

save() {
    this.state.code = editor.getValue();
    var text = {
        tempo: this.state.tempo,
        dial_count: this.state.dials.length,
................................................................................
        sample_names: this.state.samples.map(function (item) {return item["__url"]}),
        ticks: 16,
        code: this.state.code,
    };
    const lib = window.JsonUrl('lzma');
	lib.compress(text).then(encodedData => {
        var link = "/song/" + encodedData;

        window.open(link, "_blank");
    });
}

reload() {
    window.location.replace( "//" + window.location.host)
}

reset() {

    Tone.Master.mute = true;
    if (loop) {
        loop.stop();
        loop.cancel();
        loop.dispose();
        Tone.Master.mute = false;
    }
    document.getElementById('tempo-value').disabled = false;
    document.getElementById('tick-value').disabled = false;
    editor.setValue("");

    this.state = {
        mem: {},
................................................................................
    })


}

editTempo(e) {
    this.update({


        tempo: e.target.value

    })
}

editTicks(e) {
    this.update({


        ticks: e.target.value

    })
}

${core_loop}

start() {
    recorder.start();
................................................................................
---


<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div style="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;overflow: hidden;">
            <span>{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;
................................................................................

    });
   </script>
</sample>
```






















































































































































































































































































## Javascript

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






function initWinamp(preset) {
    var can = document.getElementById("visual");
    can.height = window.innerHeight - document.getElementById("header-playback").clientHeight - 75;
    can.width = window.innerWidth;
    var can_container = document.getElementById("canvas-container");
    can_container.width = window.innerWidth;
    var visualizer = window.butterchurn.default.createVisualizer(Tone.getContext().rawContext, can, {
        height: window.innerHeight - document.getElementById("header-playback").clientHeight - 75,
        width: window.innerWidth,
        meshWidth: 24,
        meshHeight: 18,
    });
    visualizer.connectAudio(Tone.getContext().destination);
    const presets = window.butterchurnPresets.getPresets();
    const presetParam = presets[preset];
................................................................................
            return val;
        } else {
            return state;
        }
    }
}

function hex2bin(hex) {
    var letters = hex.replace('`1','a');
    letters = hex.replace('`2','b');
    letters = hex.replace('`3','c');
    letters = hex.replace('`4','d');
    letters = hex.replace('`5','e');
    letters = hex.replace('`6','f');
    letters = letters.split('');



    var bin = "";
    letters.map(function(letter) {





























        if (letter == "0") {
            bin += "0000";
        }
        if (letter == "1") {
            bin += "0001";
        }
        else if (letter == "2") {
................................................................................
        }
        else if (letter == "e") {
            bin += "1110";
        }
        else if (letter == "f") {
            bin += "1111";
        }









    })
    return bin;
}









function pattern_clean(p) {
    if (!p) {













































































































































        return "";
    }
    p = p.replace(/ /g, "");

    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);
    }
    else if (fc== "b") {
        var l = (p.length - 1);
        var ptype = "bin";
    }
    else {
        var ptype = "hex";
        var l = (p.length) * 4;
    }

    if (ptype == "bin") {
        var fp =  p.substring(1);
    } else if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");






















    } else {












        var fp = hex2bin(p);
    }

    return fp;
}

function download(data, filename, type) {
................................................................................
        n = (n * -1).toFixed(digits);
    }
    return n;
}

${knob_code}
```


































































































































































































































>
>
>
>







 







>
>






<







 







>

|


>

|







|
>
>
>
>
>





<
>

<




|

|
|

|

|
>







>
>
>
>
>
>
>













|
<
<
<

|







 







>
>
>
>
>
>
>
>
>
>
>
>
>







 







>





>
>


|





|







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>









<







 







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







 







>
|










|
|
|
|
<







 







>
>
|
>





>
>
|
>







 







|
|







 







>

>
>
>
>

>
>
>
>
>
>
>
>
>
>
>
>
>

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







>
>
>
>



|




|







 







|

|
|
|
|
|
|
>
>
>
|
<
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
|
>
>
>
>
>
>
>




>
>
>
>
>
|
>
>
|

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>



>




<
<
<
<
<
|




<
<
|


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







 








>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

100
101

102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142



143
144
145
146
147
148
149
150
151
...
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
...
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
...
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537

538
539
540
541
542
543
544
...
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
...
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662

663
664
665
666
667
668
669
...
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
...
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
...
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
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
....
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
....
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
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436





1437
1438
1439
1440
1441


1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
....
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745


# Concepts and 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

................................................................................
    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 always = function () {
    }


    var render_loop = function () {
    }

    var animation = function () {
        render_loop();
        window.requestAnimationFrame(animation)
................................................................................
    }

    Tone.Master.mute = false;
    document.getElementById('tempo-value').disabled = true;
    document.getElementById('tick-value').disabled = true;

    var mem = self.state.mem;
    window.mem = mem;
    var handlers = {};
    window.count = -1;

    var text = editor.getValue();

    editor.on("change", function () {
        text = editor.getValue();
    });

    var patterns = [ cellx("0000") ]; // need this for first eval

    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;

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

        $("#duration").html("" + bars + "." + tick + " / " + count + " / " + window.roundTo(Tone.Transport.seconds, 2));

        always();
        for (var i = 0; i < patterns.length; i++) {

            var dials = self.state.dials;
            var numbers = self.state.numbers;

            if (document.getElementById('edit-mode').checked) {
                var p_text  = oldPatterns[i];
            } else {
                var p_text = patterns[i];
                oldPatterns[i] = p_text;
            }
            if (p_text() && p_text().length !== 0) {
                var track_no = i + 1;
                var pattern = pattern_parse(p_text());
                var meta = pattern_meta(p_text());
                var isHit = (pattern.split('')[tick] == "1") ? true : false;

                try {
                    if (document.getElementById('edit-mode').checked) {
                        eval(oldCode);
                    } else {
                        eval(text);
                        if (document.getElementById('redo').checked) {
                            document.getElementById('redo').checked = false;
                            tick = (count % this.state.ticks);
                            count -= tick + 1;
                            i = 0;
                            continue;
                        }
                        if (document.getElementById('load-mode').checked) {
                            document.getElementById('load-mode').checked = false;
                            transition();
                        }
                        oldCode = text;
                    }
                    $("#error").html("");
                } catch (ex) {
                    $("#error").html(ex);
                    eval(oldCode);
                }
            }
        }
  }.bind(this), delta)




  window.requestAnimationFrame(animation);

}
```

## Dials

Bitrhythm provides custom dials. These dials can be mapped to any aspects of Tone.js. All dials are available as an array dials in the live code editor.
................................................................................
    return context.knob;
}
```

## Main UI


```
// Not working

.CodeMirror-selected,
.CodeMirror-focused,
.CodeMirror-activeline,
.CodeMirror-activeline-background {
    background: transparent;
    color: #882d2d;
    z-index: 5 !important;
}
```


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


................................................................................
        </hstack>

        <div class="mt-2 ml-2" >
            <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1"  onclick={play}>Play</button>
            <button type="button" class="btn btn-primary ml-2" onclick={save}>Save</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reset}>Reset</button>
            <button type="button" class="btn btn-primary ml-2" onclick={reload}>Window Reload</button>
            <button type="button" class="btn btn-primary ml-2" onclick={download}>Save File</button>

            <input class="ml-1" name="edit-mode" id="edit-mode" type="checkbox"/>
            <label for="edit-mode">Edit</label>
            <input class="ml-1" name="load-mode" id="load-mode" type="checkbox"/>
            <label for="load-mode">Execute Transition</label>
            <input class="ml-1" name="load-mode" id="redo" type="checkbox"/>
            <label for="redo">Redo Bar</label>
        </div>

        <vstack>
            <div each={ key, index in state.samples} >
                <div if={ state.samples && state.samples[index] }>
                    <sample  setsample={setSample} rmsample={rmSample} samples={state.samples} ti={index + 1}></sample>
                </div>
            </div>
        </vstack>

        <hstack>
            <div each={ key, index in state.dials}>
                <dial rmdial={rmDial}  v={state.dials[index]} ti={index + 1}></dial>
            </div>
        </hstack>

................................................................................
    margin-top: 4vh;
}
</style>

<script>
var oldCode = "";
var oldPatterns = [];

Mousetrap.stopCallback = function(e, element, combo) {
    return false;
}

Mousetrap.bind(['f5'], function(e) {
    if (document.getElementById('edit-mode').checked) {
        document.getElementById('edit-mode').checked = false;
    } else {
        document.getElementById('edit-mode').checked = true;
    }

    return false;
});

Mousetrap.bind(['f9'], function(e) {

    if (document.getElementById('redo').checked) {
        document.getElementById('redo').checked = false;
    } else {
        document.getElementById('redo').checked = true;
    }

    return false;
});

Mousetrap.bind(['f8'], function(e) {
    if (document.getElementById('load-mode').checked) {
        document.getElementById('load-mode').checked = false;
    } else {
        document.getElementById('load-mode').checked = true;
    }
    return false;
});

// var audio = new Audio();
// audio.loop = true;
const actx = Tone.context;
const dest = actx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream);
let chunks = [];
var sampleURL = "";
var sam;

this.props = opts;

this.state = {
    mem: {},
    dials: [],
    numbers: [],
    samples: [],
................................................................................
        })
    }


});


pattern_parse(p) {
    return window.pattern_parse(p);
}

pattern_meta(p) {
    return window.pattern_meta(p);
}

download() {
    
    function download(data, filename = "song.txt", type = "text/plain") {
            var file = new Blob([data], {type: type});
            var a = document.createElement("a"),
                    url = URL.createObjectURL(file);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            setTimeout(function() {
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);  
            }, 0); 
    }
    download(editor.getValue())
}

save() {
    this.state.code = editor.getValue();
    var text = {
        tempo: this.state.tempo,
        dial_count: this.state.dials.length,
................................................................................
        sample_names: this.state.samples.map(function (item) {return item["__url"]}),
        ticks: 16,
        code: this.state.code,
    };
    const lib = window.JsonUrl('lzma');
	lib.compress(text).then(encodedData => {
        var link = "/song/" + encodedData;
        window.history.pushState({}, 'Bitrhythm', link);
        //window.open(link, "_blank");
    });
}

reload() {
    window.location.replace( "//" + window.location.host)
}

reset() {

    Tone.Master.mute = true;
    Tone.Transport.stop();
    Tone.stop();
    if (self.state.timer) {
        clearInterval(self.state.timer);

    }
    document.getElementById('tempo-value').disabled = false;
    document.getElementById('tick-value').disabled = false;
    editor.setValue("");

    this.state = {
        mem: {},
................................................................................
    })


}

editTempo(e) {
    this.update({
        state: {
            ...this.state,
            tempo: parseInt(e.target.value)
        }
    })
}

editTicks(e) {
    this.update({
        state: {
            ...this.state,
            ticks: e.target.value
        }
    })
}

${core_loop}

start() {
    recorder.start();
................................................................................
---


<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div>
            <span class="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;">{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;
................................................................................

    });
   </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/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;
}

a {
    color: white;
}

input {
    color: black;
}

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

.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;
}

.CodeMirror pre,
.CodeMirror-line > span,
.CodeMirror-lines {
  padding: 0 !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 + Demo</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">Tutorial</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

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


function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

function initWinamp(preset) {
    var can = document.getElementById("visual");
    can.height = window.innerHeight - (document.getElementById("header-playback").clientHeight / 2);
    can.width = window.innerWidth;
    var can_container = document.getElementById("canvas-container");
    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];
................................................................................
            return val;
        } else {
            return state;
        }
    }
}

function romantogypsy(hex) {
    var letters = hex.replace('`1','a');
    letters = letters.replace('`2','b');
    letters = letters.replace('`3','c');
    letters = letters.replace('`4','d');
    letters = letters.replace('`5','e');
    letters = letters.replace('`6','f');
    return letters;
}

function lettertodec(letter) {
        var bin = "";

        if (letter.match(/\d/)) {
            no = parseInt(letter);
        }
        else if (letter == "a") {
            no = 10;
        }
        else if (letter == "b") {
            no = 11;
        }
        else if (letter == "c") {
            no = 12;
        }
        else if (letter == "d") {
            no = 13;
        }
        else if (letter == "e") {
            no = 14;
        }
        else if (letter == "f") {
            no = 15;
        }
        for (i = 1; i <= no; i++) {
            bin += "0";
        }
        return bin;
}

function lettertobin(letter) {
        var bin = "";
        if (letter == "0") {
            bin += "0000";
        }
        if (letter == "1") {
            bin += "0001";
        }
        else if (letter == "2") {
................................................................................
        }
        else if (letter == "e") {
            bin += "1110";
        }
        else if (letter == "f") {
            bin += "1111";
        }
        return bin;
}

function hex2bin(hex) {
    var letters = romantogypsy(hex)
    letters = letters.split('');
    var bin = "";
    letters.map(function(letter) {
        bin += lettertobin(letter)
    })
    return bin;
}

function get_char(str, index) {
    if ((index > 0) && (index < str.length)) {
        return str[index];
    } else {
        return null
    }
}

function pattern_meta(p) {
    if (!p) {
        return null;
    }
    p = p.replace(/ /g, "");
    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);
    }

    if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");
    }

    if (!fp) {
        return null;
    }

    var done = false;
    var index = 0;
    var meta = {}
    var one_index = 1;

    while(1) {
        if (index > fp.length) {
            break;
        }
        var current_meta = {}
        var current_letter = fp[index]
        if (current_letter == "_") {
            meta[one_index -1] = {"volume": "off" };
            index += 2;
            one_index += 2;
            continue;
        }
        else if (current_letter == "1") {
            var next_letter = get_char(fp,index + 1);
            if (next_letter == "[") {
                var jump_index = 1;
                var buffer = "";
                while(1) {
                    if (((index + 1) + jump_index) > fp.length) {
                        break;
                    }
                    let b_next_letter = get_char(fp, ((index + 1) + jump_index));

                    if (b_next_letter == "]") {
                        jump_index += 2;
                        break;
                    } else {
                        buffer += b_next_letter;
                        jump_index += 1;
                    }
                }
                var individual_meta = buffer.split(";")
                individual_meta.map(function (e) {
                    if (e.startsWith("^")) {
                        current_meta["pitch"] = e.substring(1)
                    } else if (e.startsWith("+")) {
                        current_meta["delay"] = e
                    } else {
                        current_meta["volume"] = e
                    }
                })
                meta[one_index -1] = current_meta
                index += jump_index;
                one_index += 1;
                continue;
            } else {
                meta[one_index -1] = current_meta
                one_index += 1;
                index += 1;
                continue;
            }
        } else {
            if (current_letter == "*") {
                var next_letter = get_char(fp,index + 1);
                if (next_letter == "`") {
                    index += 3;
                } else {
                    index += 2;
                    continue;
                }
            } else {
                index += 1;
                one_index += 1;
                continue;
            }
        }
    }
    return meta;
}

function Sample(name, no, filter, volume) {
    name = name
    filter = filter || 10000
    volume = volume || 0
    mem[name + "_filter"] = new Tone.Filter(filter, 'lowpass', -96);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume}).chain(mem[name + "_filter"], mem.master)
    samples[no].connect(mem[name + "_channel"]);
    hit_map[name] = no;
}

window.Sample = Sample;

function p(s, vol, note, len, delay) {
    note = note || "C3"
    len = len || "16n"
    vol = vol || 1
    delay = delay || "+0";

    samples[s].triggerAttackRelease(note, len, delay, vol);
    for (const [key, value] of Object.entries(hit_map)) {
    	if (value == s) {
	    	mem[key + "_last"] = count 
	    }
  	}
}

window.p = p;

function pn(s, vol, note, len, delay) {
    sample_no = hit_map[s]
    note = note || "C3"
    len = len || "16n"
    vol = vol || 1
    delay = delay || "+0";
    samples[sample_no].triggerAttackRelease(note, len, delay, vol);
    for (const [key, value] of Object.entries(hit_map)) {
    	if (value == s) {
	    	mem[key + "_last"] = count 
	    }
  	}
}

window.pn = pn;



function pattern_parse(p) {
    if (!p) {
        return "";
    }
    p = p.replace(/ /g, "");
    p = p.replace(/\[.+?\]/g, "");
    var fc = p.split('')[0];
    if (fc== "p") {
        var ptype = "xo";
        var l = (p.length - 1);





    } else {
        var ptype = "hex";
        var l = (p.length) * 4;
    }



    if (ptype == "xo") {
        var fp = p.substr(1);
        fp = fp.replace(/x/g, "1");
    }

    if (ptype == "xo") {
        var fin = "";
        var done = false;
        var index = 1;
        while(1) {
            if (done) {
                break;
            }
            if (index >= fp.length) {
                done = true;
                continue;
            }
            var current_letter = fp[index - 1]
            if (current_letter) {
            if (current_letter == "*") {
                var next_letter = get_char(fp,index);
                if (next_letter == "`") {
                    var next_next_letter = get_char(fp,index + 1);
                    fin +=  lettertodec(romantogypsy(next_letter + next_next_letter));
                    index += 3;
                } else {
                    fin += lettertodec(next_letter);
                    index += 2;
                }
            } else {
                fin += current_letter;
                index += 1;
            }
            }
        }
        return fin;
    }
    else {
        var fp = hex2bin(p);
    }

    return fp;
}

function download(data, filename, type) {
................................................................................
        n = (n * -1).toFixed(digits);
    }
    return n;
}

${knob_code}
```

## 303

Taken from [endless acid banger](https://www.vitling.xyz/toys/acid-banger/).

```js
function ThreeOhUnit(audio, waveform, defaults = null, output, patternLength = 16) {
    const synth = audio.ThreeOh(waveform, defaults = defaults, output);
    function step(note) {
        note = note || {
            type: "on",
            accent: false,
            glide: true,
            note: "A3",
        };
        if (note == "off") {
            synth.noteOff();
        } else {
            synth.noteOn(note.note, note.accent, note.glide);
        }
    }
    return {
        step,
        params: synth.params
    };
}

function textNoteToNumber(note) {
    const lookupTable = new Map();
    const revLook = new Map();
    (() => {
        function add(note, n) {
            lookupTable.set(note, n);
            revLook.set(n, note);
        }
        add('A', 9);
        add('A#', 10);
        add('B', 11);
        add('C', 0);
        add('C#', 1);
        add('D', 2);
        add('D#', 3);
        add('E', 4);
        add('F', 5);
        add('F#', 6);
        add('G', 7);
        add('G#', 8);
    })();

    const o = note.substring(note.length - 1);
    const n = note.substring(0, note.length - 1);
    // @ts-ignore
    return parseInt(o) * 12 + lookupTable.get(n) + 12;
}

function midiNoteToFrequency(noteNumber) {
    return 440 * Math.pow(2, (noteNumber - 69) / 12);
}

function Audio(au = new (window.AudioContext || window.webkitAudioContext)()) {

    function masterChannel() {
        const gain = au.createGain();
        gain.gain.value = 0.5;
        const limiter = au.createDynamicsCompressor();
        limiter.attack.value = 0.005;
        limiter.release.value = 0.1;
        limiter.ratio.value = 15.0;
        limiter.knee.value = 0.0;
        limiter.threshold.value = -0.5;
        gain.connect(limiter);
        limiter.connect(au.destination);
        return {
            in: gain
        };
    }

    const master = masterChannel();

    function ThreeOh(type = "sawtooth", defaults, out = master.in) {
        defaults = defaults || {
            "cutoff": 400,
            "resonance": 15,
            "envMod": 4000,
            "decay": 0.5
        }
        const filter = au.createBiquadFilter();
        filter.type = "lowpass";
        filter.Q.value = defaults.resonance;
        filter.frequency.value = defaults.cutoff;
        const pResonance = filter.Q;
        const pCutoff = filter.frequency;

        const decayTimeNode = au.createConstantSource();
        decayTimeNode.offset.value = defaults.decay;
        decayTimeNode.start();
        const pDecay = decayTimeNode.offset;

        const env = au.createConstantSource();
        env.start();
        env.offset.value = 0.0;

        const scaleNode = au.createGain();
        scaleNode.gain.value = defaults.envMod;
        const pEnvMod = scaleNode.gain;
        env.connect(scaleNode);
        scaleNode.connect(filter.detune);
        const osc = au.createOscillator();
        osc.type = type;
        osc.frequency.value = 440;
        osc.start();
        const vca = au.createGain();
        vca.gain.value = 0.0;
        osc.connect(vca);
        vca.connect(filter);
        filter.connect(out);
        function noteOn(note, accent = false, glide = false) {
            if (accent) {
                env.offset.cancelScheduledValues(au.currentTime);
                //env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);
                env.offset.setValueAtTime(1.0, au.currentTime);
                env.offset.exponentialRampToValueAtTime(0.01, au.currentTime + pDecay.value / 3);
            }
            else {
                env.offset.cancelScheduledValues(au.currentTime);
                //env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);
                env.offset.setValueAtTime(1.0, au.currentTime);
                env.offset.exponentialRampToValueAtTime(0.01, au.currentTime + pDecay.value);
            }
            osc.frequency.cancelScheduledValues(au.currentTime);
            if (typeof note == "number") {
                osc.frequency.setTargetAtTime(note, au.currentTime, glide ? 0.02 : 0.002);
            } else {
                osc.frequency.setTargetAtTime(midiNoteToFrequency(textNoteToNumber(note)), au.currentTime, glide ? 0.02 : 0.002);
            }
            vca.gain.cancelScheduledValues(au.currentTime);
            vca.gain.setValueAtTime(accent ? 0.2 : 0.15, au.currentTime);
            //vca.gain.setTargetAtTime(accent ? 0.5 : 0.3,au.currentTime, 0.001);
            //vca.gain.setValueAtTime(0.2, au.currentTime);
            vca.gain.linearRampToValueAtTime(0.1, au.currentTime + 0.2);
        }
        function noteOff() {
            vca.gain.cancelScheduledValues(au.currentTime);
            vca.gain.setTargetAtTime(0.0, au.currentTime, 0.01);
        }
        return {
            noteOn,
            noteOff,
            params: {
                cutoff: pCutoff,
                resonance: pResonance,
                envMod: pEnvMod,
                decay: pDecay
            }
        };
    }
    return {
        ThreeOh,
        master,
        context: au
    };
}

window.Audio = Audio;
window.ThreeOhUnit = ThreeOhUnit;
```

## Autocommit

<https://xiaoouwang.medium.com/tutorial-advanced-use-of-watchdog-in-python-excluding-files-a-git-auto-commit-example-part-7024913ad5a8>  
<https://github.com/gitwatch/gitwatch>  

```python

import time
from watchdog.observers import Observer
from watchdog.events import RegexMatchingEventHandler
import os

def on_created(event):
    print(f"{event.src_path} has been created")
    os.system(f"git add {event.src_path}")
    os.system(f"git commit -m '{event.src_path} created'")

def on_deleted(event):
    print(f"Delete {event.src_path}!")
    os.system(f"git commit -m '{event.src_path} deleted'")


def on_modified(event):
    print(f"{event.src_path} has been modified")
    os.system(f"git add .")
    os.system(f"git commit -m '{event.src_path} modified'")

if __name__ == "__main__":
    # create the event handler
    ignore_patterns = [r"^.+/\.git.*"]
    ignore_directories = False
    case_sensitive = True
    my_event_handler = RegexMatchingEventHandler(ignore_regexes=ignore_patterns, ignore_directories=ignore_directories, case_sensitive=case_sensitive)

    my_event_handler.on_created = on_created
    my_event_handler.on_deleted = on_deleted
    my_event_handler.on_modified = on_modified

    # create an observer
    path = "."
    go_recursively = True
    my_observer = Observer()
    my_observer.schedule(my_event_handler, path, recursive=go_recursively)

    my_observer.start()
    try:
        while True:
            time.sleep(5)
    except:
        my_observer.stop()
        print("Observer Stopped")
    my_observer.join()
```

Deleted source/midi.md. 

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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

# MIDI and DAW Terms

## MIDI

<a href="https://en.wikipedia.org/wiki/MIDI">MIDI</a> changed music.

Consider what a classically trained Musician needs to do, to make his 
music heard.

He needs to,

1. Write it
2. Get a bunch of musicians
3. Practice
4. Play
5. goto 1
6. Record the Final Cut in a Studio

With MIDI,

1. Write it. Save it, with a Software
2. Get the electronic instruments to play it for him
   -or-
   Get a computer Software to play it for him
3. Tweak
4. Record the Final Cut in Software or a Studio

MIDI is - Musical Instrument Digital Interface.

It abstracts <a href="https://en.wikipedia.org/wiki/Musical_notation">Music Notation</a> into bytes.
Since its bytes, you can replay it with software.

MIDI made production,

* Dirt Cheap
* Made Producers more efficient

How about Audio Quality ?

* A Classical Ensemble still has its place. Panning is unique there.
* But MIDI + Electronic Instrument increased the Range. It helped form whole new genres in Music like EDM, IDM, SynthPunk ...

Limitations ?

* MIDI is limited to 16 instruments.
* Integers.
* 16 is a big number.
* <a href="https://en.wikipedia.org/wiki/Open_Sound_Control">OSC</a> overcomes these.

Usage
=====

To use MIDI you need,

1. A Sequencer

   This generates MIDI messages like,

    ```
   Command param1 param2 param3
   Command param1 param2
   Command param1 param2 param3
   Command param1 param2
   ...
   ```

   Important messages are,

   1. Note On => Channel [1-16]**, Pitch[0-127], Volume[0-127]
   2. Note Off                 "
   3. Controller => No [0-127], Value[0-127]

   ** Channel 10 is reserved for Drums.

   Note On and Note Off are typically sent by keys, buttons.
   Controller Messages are typically sent by knobs and pedals.

2. A Synthesizer

   This accepts MIDI data.
   It Maps channels to DSP.
   It Maps knobs** to effects like distortion and reverb.

   ** The positions of the knob are called patches.

3. A Sampler.

   This accepts MIDI data.
   It Maps channels to sound recordings.
   It Maps knobs to effects like distortion and reverb.

If you buy Music Hardware you have both 1 and 2.  The sequencing capabilities are limited in a synth,  so you can't Edit MIDI data in the instrument.

Some notes,

0. You can buy hardware and get a Synthesizer + a limited Sequencer.

1. You can buy A Sequencer and use a Computer as a Synthesizer

or

2. Use a Software Sequencer to Program your Synthesizer

or

3. Forget Hardware and go complete nuts with Software

<iframe width="480" height="360" src="//www.youtube.com/embed/VouHPeO4Gls" frameborder="0" allowfullscreen></iframe>

<p><a href="http://vimeo.com/93923609">Also, Robots love it.</a><p>

## Terms

Instruments used in Electronic Music

- Tr 909  
- Tr 303  
- Tr 808  

Instruments commonly used in Disco, Synth Wave and Funk

- Samplers
- FM Synthesiser

Rock Pedals used in

- Reverb (sludge)
- Delay (slow rock)
- Distortion (metal)

DAW Terms

- track
- sequencer
- piano roll
- OSC
- sampler
- soundfont
- synthesizer (DSP, FM, AM, AS, SS, PM)
- effect
- mixer, LFO
- automation, equalizer
- filter
- arpegiator




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

Changes to source/tweaking.md. 

1
2
3
4
5


6
7
8
9
10
11
12

# What exactly is Tweaking ?

For that you need some context.

Historically speaking, music was an accompaniment for theatrical plays. A typical song has a Theme and develops Exposition / Conflict / Resolution through time. Its not a coincidence that the sonata and the dramatic structure share the same form. In a typical play you have scenes, transitions, sets in the background and characters in the foreground. While the play progresses and characters clash you get music alongside each of these elements. Every song has a title that guides the listener to what the song is about. Typical Scenes include intro, bridge, buildup, section, breakdown and climax. What is the intro about ?  What is the bridge about ?  What is the verse about ?  What is the chorus about ?  What are the sections about ? The essential question driving any story is how to be ? In a drama this question is answered with doubts, emotion, circularity, warnings from the chorus, exposition, rises, falls, reprisals, conclusions, contradictions, denouncements, confrontations, mistakes, reversals, recognition, revelation resolution, statements and breakdowns.



Modern music has evolved to be standalone but it retains elements of theatrical story telling. You can divide a song into verses and sections. In the documentation, we will use the terms from plays. Within each musical scene you typically have,

- Background: You use layers of rhythm and groove to set the mood.
- Foreground: Lead (Soliloquy), Counterpoint (Character Conflict), Call Response(Dialogues), Motif, Ornaments (Exposition)

In Electronic Music, the foreground is mainly developed using Layers(polyrhythms) and Tweaking. Tweaking and Layers effectively function for the purposes of Exposition and Conflict. Chorus, Fade, Drop are used for transitions typically in electronic music. Tweaking is also called knob-twisting by hardware users. To compare the foreground in others,   






>
>








1
2
3
4
5
6
7
8
9
10
11
12
13
14

# What exactly is Tweaking ?

For that you need some context.

Historically speaking, music was an accompaniment for theatrical plays. A typical song has a Theme and develops Exposition / Conflict / Resolution through time. Its not a coincidence that the sonata and the dramatic structure share the same form. In a typical play you have scenes, transitions, sets in the background and characters in the foreground. While the play progresses and characters clash you get music alongside each of these elements. Every song has a title that guides the listener to what the song is about. Typical Scenes include intro, bridge, buildup, section, breakdown and climax. What is the intro about ?  What is the bridge about ?  What is the verse about ?  What is the chorus about ?  What are the sections about ? The essential question driving any story is how to be ? In a drama this question is answered with doubts, emotion, circularity, warnings from the chorus, exposition, rises, falls, reprisals, conclusions, contradictions, denouncements, confrontations, mistakes, reversals, recognition, revelation resolution, statements and breakdowns.

Here another way of thinking about it. A song is about answering a question posed the title / intro perhaps.  The question which the artist poses to the audience.  Verses are the answers. Rhythm dictates the demarcates the flow of time and seasons.

Modern music has evolved to be standalone but it retains elements of theatrical story telling. You can divide a song into verses and sections. In the documentation, we will use the terms from plays. Within each musical scene you typically have,

- Background: You use layers of rhythm and groove to set the mood.
- Foreground: Lead (Soliloquy), Counterpoint (Character Conflict), Call Response(Dialogues), Motif, Ornaments (Exposition)

In Electronic Music, the foreground is mainly developed using Layers(polyrhythms) and Tweaking. Tweaking and Layers effectively function for the purposes of Exposition and Conflict. Chorus, Fade, Drop are used for transitions typically in electronic music. Tweaking is also called knob-twisting by hardware users. To compare the foreground in others,

Changes to source/what.cog. 

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
..
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77


1. Tuna
2. Timbral
3. Tone.js
4. Underscore / Rambda
5. cellx
6. Magenta.js (Machine Learning)
7. Three.js / P5.js / D3 / Paper.js
8. Winamp Visualisations (butterchurn)

```{code-block} html
---
force: true
---
@<
................................................................................

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/) and algorave discord as @xyzzy.

## Future Features

- Saving Songs
- More Synths with Presets
- Visualisation Presets
- Autocomplete Rhythms and Chords
- Automation Recording
- Version Control
- Record
- Midi Support
- More tutorials and examples on Web APIs
- Synthesizer
- Collaboration
- Adding DJ Transition / Hints support










|







 







<

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

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
..
55
56
57
58
59
60
61

62
















1. Tuna
2. Timbral
3. Tone.js
4. Underscore / Rambda
5. cellx
6. Magenta.js (Machine Learning)
7. P5.js / D3
8. Winamp Visualisations (butterchurn)

```{code-block} html
---
force: true
---
@<
................................................................................

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/) and algorave discord as @xyzzy.

Changes to source/what.md. 

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
..
42
43
44
45
46
47
48

49
50
51
52
53
54
55
56
57
58

59
60
61
62
63
64
65
..
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94


1. Tuna
2. Timbral
3. Tone.js
4. Underscore / Rambda
5. cellx
6. Magenta.js (Machine Learning)
7. Three.js / P5.js / D3 / Paper.js
8. Winamp Visualisations (butterchurn)

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

................................................................................
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.js"></script>

<script sec="https://mohayonao.github.io/timbre.js/timbre.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tunajs/1.0.1/tuna-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js" integrity="sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==" crossorigin="anonymous"></script>
<script src="/teoria-master/teoria.js"></script>


<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/nexus-js/dist/NexusUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cellx/1.10.19/cellx.umd.min.js" integrity="sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

```

## About Author

I make [web apps](https://xyzzyapps.link) apps for a living. I started messing with algorithmic composition using pure data around 2011.  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.
................................................................................

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/) and algorave discord as @xyzzy.

## Future Features

- Saving Songs
- More Synths with Presets
- Visualisation Presets
- Autocomplete Rhythms and Chords
- Automation Recording
- Version Control
- Record
- Midi Support
- More tutorials and examples on Web APIs
- Synthesizer
- Collaboration
- Adding DJ Transition / Hints support










|







 







>










>







 







<

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

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
..
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
..
74
75
76
77
78
79
80

81
















1. Tuna
2. Timbral
3. Tone.js
4. Underscore / Rambda
5. cellx
6. Magenta.js (Machine Learning)
7. P5.js / D3
8. Winamp Visualisations (butterchurn)

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

................................................................................
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.js"></script>

<script sec="https://mohayonao.github.io/timbre.js/timbre.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tunajs/1.0.1/tuna-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js" integrity="sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==" crossorigin="anonymous"></script>
<script src="/teoria-master/teoria.js"></script>
<script src="/303.js"></script>

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/nexus-js/dist/NexusUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cellx/1.10.19/cellx.umd.min.js" integrity="sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
```

## About Author

I make [web apps](https://xyzzyapps.link) apps for a living. I started messing with algorithmic composition using pure data around 2011.  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.
................................................................................

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/) and algorave discord as @xyzzy.

Changes to templates/index.html. 

22
23
24
25
26
27
28

29
30
31
32
33
34
35
36
37
38

39
40
41
42
43
44
45
...
126
127
128
129
130
131
132




133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.js"></script>

<script sec="https://mohayonao.github.io/timbre.js/timbre.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tunajs/1.0.1/tuna-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js" integrity="sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==" crossorigin="anonymous"></script>
<script src="/teoria-master/teoria.js"></script>


<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/nexus-js/dist/NexusUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cellx/1.10.19/cellx.umd.min.js" integrity="sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>



        <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>
................................................................................
        </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>
            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>
        <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 target="_blank" href="/issue">Report bugs / Feedback</a></h5>
                <h5 class="ml-4"><a href="/song/XQAAAALHCwAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQ4SmT-79BTKosH6Xje2IYnNRgEOpeuhg9Ej9Iz-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YmslEqBloRY0JslK5KapeSFSSH9ScweRgAPu9a4t1L0-t71Xb9Eb3KJ-lezPo7xcmK9xCnNGorm__kixtPuM_8L3YNc30OA3GMBPHu5pAH__cKjLF6k5mCGKsNp8WFWYQACckBR03VaZGhfZv946NYyFQlw6boXQuVis292UUboEkaCJ0CV5wGurbJUA7il2uX-okyMSjx7WVseVG-zDQ0wBjbMLNYnXzoT0kYxI_6-GOAOVamJJHTrkulVfd1k0AgzCHByI6zCNtWyBa3i_2ks4ncMec8vqsjAy8BhwFAbKAP1RDKh7MUxwsecBuzyLR0hKGddivZmPn-xyYB-p8-Xru_Min2-3Z_3YZal2_wv8s6cIcqPAJ4wf5DH29U7le-eRLcUN6lhK77651_xeU--z7A6E3NDQ6WEb6UPc-brxTz-L-wZwFwy95QkwAZw4bWR2LNW78DVdCSnMC8zf-DVWgFkKP9SU9iGQj6yk6E8qBAlZfd3YavthZBdwhs2mtzsvIL8qcBTBRhy2Fxx5n5tLq2lXuPkH19-cqIoJCHJUjiuGKWh3PqOAnTj9n2PejvNlp1GUMMixR7YMUofcLeA5oQCQpMSuIEP8sUshtk3zY35vG4xr3FfPj7OZiOQx5jRtMaw7l8xqFVm_PZ-kEgxoIVFtpZFcgsACnuBeJF1yZ2ss1GN95XEt9BsF3UY_UM1x8ePgY8BL4WH7BcHZRCOV2YZeRXZ6sYLNjKBjGVD_FAR_ZL6yd6l_1wqpQJPb3lL1fhBecNTcaXAn61RhySOvokAJ5TcrTtqdhsGEBUnaQOGRIfKU0NV4zPmgTm9TLASz5gs1VRoUZ06htWirfNfjiWNrbw8I9ggo8KMKwDZ2v4CnfqyL4eCpFNZjVIYOEWGGktLAadafQjdjOkWHWF8KIdr3uPBt1kXY_-IEkn11gjmn1q9ybgMLxriz7kWqzyawAEpqM27wzIwET2smzbJ-zHcx01rdHu3AqLMHk-AliQLGvGknluJNjWmK-WFwZUR8ZokJ6cVYW70a6X1dYWncQsPwyC3AOplDyUChlC_Rmgvz9fqeMs-fXub0odr01b7PFrraLWJ02Xk7trVq_Gqh8V2A2LATUKewJT05dG0bVJTBdM9n86C-mgyLf7s7JeNf9ul97CsS3BalNZ--N0hfkPbT_VPU9heFko9goG_mkF7Ky6FbtVpERCqw7UbvPgdFdIOEkoqPYEwAmjwzva2U-7cLo3g3uEQq1NBV3C8LijP10-1Avqu2df_R8XtykOk4H8yitylcxka4vSq1Jo2fv-wp74EiJi6Tn6T3epZJYXAMBRXRxozyl1r4lbOqRjDfqjWRTRrr8l9U2iKbAiIz6Ssy74Ic9sQABR9F4UahwsDQuJgjOHKdaLXmBHoPuD7nX_9mMYV">Example1</a></h5>
                <h5 class="ml-4"><a href="/song/XQAAAALYEwAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9NTfIT-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YnQ2gSfpzY3zlYLujavQRq73hSEM-RaGxTxuud9naok9rMpYn-UCaNiF2zrnnqUB61s_22pYOE_9KuFo7vEJMCtU2bkxyNdgSXzwmIDuo8OyxcIh9HQP59UZbNRixlBnmw73PnywS5DJBoH8NEIAnlLpL4rqaokfN9Cfte0Id3929n26IjA7zVZF75ovX37KO1xT9iBa8gt-w8cvYBdIdVL5JUOrbf0ccVJSoXGFoM0U4GXoEDThw00FdKnfsq1WeJjEQt4Qn8f90TkkQgkpSajR9dA0AJBqKDuVeEgDoFsbVI-ZZVvJW2dD_9GIm5PpQSTzpuBslzD7ZJQSI3XA1g2F_QP4w6U4rOrTMZUQSr___s22d8Plp0FbffDCq8dri0C8kUYPqS_np_Nnr7sDY9KsxgNZJmUxYkt1XBTO3iWmR6RZ7OFk6PZ8R44NXwhvxbUEikMoboPSW1XPiV4xtCfZb4qE4yCP2xHPlEniUhcNrWc5608hrNkVfpQUmYLFvXFTyUHA4aOkRDoHf0jHwGzyBV-YanP65YlZpupZC4oW3bjhO01tfh_qYWNA_ZpDVCCXRoGZJfrBjkmaYom9Gd6mvGVzillbk6LD0_Amu_Zublb4_AZ1SAxKSWlMfbmbXQfW16RSMidtmTCKAMmF9LCONKcjTR_1P2vU3fPR7hBhRtbtNR0xNEfRstXJ81ZcyC5YTK8dnpMwMXKk5uoaBMDbochbAKXaswgZKIn2usyi5Z4pyQf8xCSheQawyYSA031ZHA3wRuq_7rjhn0bXZrEGnB0QFzxgM-dYsY7CUojKr8ziZGXGb9zoVHvGDI0SIFyFIrMs6kEzpZAq_CnJyqJi4nbbqfoHlE3nDyLNKFk1e4OHqPsU9G1LRNnHBwSjiJCnvZO_xv_VQbtWmQwLrT7j6PZeXvNOz-yKWQFcE-0RXn6-EuqT7LNTF1GSo2o9AFS5Z2PJqIXioD9ebr9xjFXNrfTdIe32dgcgQHVHNyjEIH22AABUQWYtHRvZQpcfsUjJQM140MJ8nmpjmxlhtAMEstPzbGYUKZdjhF1LkeePxXD46zniN9cFEtRPTNR9luP4W2rhfHnvP4_tRAipmQiB_6RSRvLaiVYfkYYXdzMkX_M5blfwCKQ-DyDFy0hTw3mYZ-SbYT11RVO-5dEm_YntYmgQOI1FI7AhMxpmyE27Lwb73oDO0SeS-SDj4T6nbfltfHdWDPFaeUWd12KRmI-E8AQCcnmJayoBnMXyXNw3muX0319WhuitTtab3n3vwZM1e7ku11q1rNoaA3VXLbBJdyS1Vxvdvm8Tled56S54siOsEYGRqmdiC3gO2ZGaBq68SJZ9zxe9yttNFEXFFgWYFnIn_EMSTNj1ILB0wkOQPzsjFXEEa3W6esXTujFuoHK05q4rrfYicKZkq01hfaoZcovIbDFNyGtpgEzn-BFPJXKWwqn5gkgrvZiYxVxG7a449Gjj_R2HqNbbiTmd1la0MKDnVLWv9yXXRdRLQrKC4Z2kAJIOdwxluk6fRBFzRWT_o046yjM-nvgp3KLJU-n_CWu3mgfmQi5vCbNxRczEeyaJGg3DJL-anxXk0A2CFsFCXRLccmhHV7MjQdh4sdvnvl3JO1Ypt1_nsBXQJqXvahwkjpEC5jzduvTd0rIHgDBAzO3PA7YNjWF_r1EmagtsB_1VFSRqAQdXjbEep8SLKNqv8N7ILkix2NeTM30r9xyXtXcGOOmoQK4AMk1tHBmQ4m6YYNalWXJ_aGIjdBgx4jgsRYjWp1H9qRr0wMkmG75zOSbuOy_lg5-C-xbszvp7B5YELZblpjnpXCW8AhXMWCLM_iG16lkgw24Z40VWh4Q9DCXoMgZmOXm-98WidEFfkMP_8L7sdQjWRxMAodkLhUkHnsBRlYNChmAexNvzKW3xiiDhC_k6qKRfldVgCGSBFfpldJF_8e7EyQ">Example2</a></h5>
                <h5 class="ml-4"><a href="/docs/demo.html">See Demo Song // Techno</a></h5>
            </hstack>

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

    <script>
        riot.compile(function() {








>










>







 







>
>
>
>
|
<
<
|
<
<





|
<
<
|
<








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
...
128
129
130
131
132
133
134
135
136
137
138
139


140


141
142
143
144
145
146


147

148
149
150
151
152
153
154

<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@^1.0.0/es6/music_vae.js"></script>

<script sec="https://mohayonao.github.io/timbre.js/timbre.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tunajs/1.0.1/tuna-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js" integrity="sha512-gwSDP1iEKl4KG0wi3N89RAJU91s78jb/TGC6lsbF5IyR2c19Rn7Jl1icK4K4kUiJNwQUEPI7o98T+GJVWNuvIQ==" crossorigin="anonymous"></script>
<script src="/teoria-master/teoria.js"></script>
<script src="/303.js"></script>

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn@2.6.7/lib/butterchurn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/butterchurn-presets@2.4.7/lib/butterchurnPresets.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/webmidi@2.0.0"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/nexus-js/dist/NexusUI.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cellx/1.10.19/cellx.umd.min.js" integrity="sha512-ojEcAP3e6N+n5MDKPW6CexXzuLDahDPkNZmzyRV4t2zqh9nwljJNuV8JGa+xjpnAaGB/FhsAU7P6IHEP0dtJQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>


        <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>
................................................................................
        </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 + Demo</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">Tutorial</a></h5>

            </hstack>

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

    <script>
        riot.compile(function() {