⌈⌋ branch:  Bitrhythm


Check-in [a03a381331]

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

Overview
Comment:Cleanup of Docs
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: a03a38133144bd53b40680b7dec24d427ddca0c370056dd53f4993ab247a6d66
User & Date: dev 2021-11-16 10:11:35
Context
2022-02-15
23:20
Cleanup post presentation Worklet code check-in: 941581eece user: dev tags: trunk
2021-11-16
10:11
Cleanup of Docs check-in: a03a381331 user: dev tags: trunk
2021-11-13
18:29
Minor updates check-in: f4bfc3000a user: dev tags: trunk
Changes

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

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
    <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>
................................................................................
 <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>
................................................................................


              </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">







|
|







 







|









|







 







|






<
<
<
<
<



|







 







|
|







32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
    <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 other limitations" href="limitations.html" />
    <link rel="prev" title="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 class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................


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

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

Changes to build/html/bookmarks.html.

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
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>







|









|







 







|






<
<
<
<
<



|







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
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/changelog.html.

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
..
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
...
221
222
223
224
225
226
227










228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
    <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" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 <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 current active">
  <a class="current reference internal" href="#">
   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>
................................................................................
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>    <span class="n">Theme</span> <span class="n">changes</span>
    <span class="n">Lots</span> <span class="n">of</span> <span class="n">Docs</span>
    <span class="n">Tutorials</span>
    <span class="n">Working</span> <span class="n">visuals</span>
    <span class="n">Code</span> <span class="n">Mirror</span> <span class="n">Issue</span>
</pre></div>
</div>










</div>


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

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







|







 







|









|







 







|






<
<
<
<
<



|







 







>
>
>
>
>
>
>
>
>
>









|







32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
..
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
...
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
    <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="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" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
................................................................................
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>    <span class="n">Theme</span> <span class="n">changes</span>
    <span class="n">Lots</span> <span class="n">of</span> <span class="n">Docs</span>
    <span class="n">Tutorials</span>
    <span class="n">Working</span> <span class="n">visuals</span>
    <span class="n">Code</span> <span class="n">Mirror</span> <span class="n">Issue</span>
</pre></div>
</div>
<p>Oct - Nov 2021 - ADC21</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>    <span class="n">Updated</span> <span class="n">the</span> <span class="n">sequencer</span> <span class="n">notation</span>
    <span class="n">Second</span> <span class="n">Demo</span> <span class="n">Song</span>
    <span class="n">Autocommit</span>
    <span class="n">Keyboard</span> <span class="n">Bindings</span>
    <span class="n">Reverting</span> <span class="n">to</span> <span class="n">setInterval</span>
    <span class="n">Added</span> <span class="n">code</span> <span class="k">for</span> <span class="n">p5</span>
    <span class="n">Update</span> <span class="n">the</span> <span class="n">docs</span>
</pre></div>
</div>
</div>


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

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

Changes to build/html/credits.html.

33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
    <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>
................................................................................
 <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>
................................................................................


              </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">







|







 







|









|







 







|






<
<
<
<
<



|







 







|







33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
    <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="Saving and other limitations" 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>
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Credits
  </a>
 </li>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="limitations.html" title="previous page">Saving and other limitations</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">

Changes to build/html/demo.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
...
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
...
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
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
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
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
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

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo and Tutorial &#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">
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </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>
................................................................................
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            
            <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="#video">
   Video
  </a>












 </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>
</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="demo-and-tutorial">
































































































































<h1>Demo and Tutorial<a class="headerlink" href="#demo-and-tutorial" title="Permalink to this headline">¶</a></h1>




































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


























































































































































































<iframe width="560" height="315" src="https://www.youtube.com/embed/GTfmTMrSpag" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<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="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>
<p>For an understanding of the global variables see the concepts and code walkthrough section.</p>
<div class="highlight-none notranslate"><div class="highlight"><pre><span></span>- patterns and track_no
- isHit, current_bit
- samples
- Tone
- cellx
- window and any thing included with the script tag is available here
</pre></div>
</div>
<p><code class="docutils literal notranslate"><span class="pre">mem</span></code> is short for memory. All instruments and effects are saved here so that they can be accessed everywhere.</p>
<p>Step to create the basic song.</p>
<ol class="simple">
<li><p>Click on <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Sample</span> <span class="pre">URL</span></code> to add the following URLs</p>
<ul class="simple">
<li><p>/Kick01.wav</p></li>
<li><p>/Snare19.wav</p></li>
<li><p>/Closedhat01.wav</p></li>
<li><p>/MiscSynthStab04.wav</p></li>
</ul>
</li>
<li><p>Click on <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Dial</span></code></p></li>
<li><p>Enter the following into the window</p></li>
</ol>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></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 0000 x000 0000 x000&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="n">scene2</span> <span class="o">=</span> <span class="p">[</span>
    <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>
    <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="n">handlers</span><span class="p">[</span><span class="s2">&quot;ex&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="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="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;ex&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="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="n">p</span><span class="p">(</span><span class="mi">0</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="n">p</span><span class="p">(</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">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">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="p">}</span>


</pre></div>
</div>
<p>Now try changing the code.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">patterns</span> <span class="o">=</span> <span class="n">scene2</span>
</pre></div>
</div>
<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>
<p><strong>Tweaking</strong></p>
<p>First click <code class="docutils literal notranslate"><span class="pre">+</span> <span class="pre">Number</span></code>. This is useful to check if the knob function is actually working. And click <code class="docutils literal notranslate"><span class="pre">+</span> <span class="pre">Execute</span> <span class="pre">Once</span></code></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">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.09</span><span class="p">,</span><span class="mf">1.8</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mf">1.5</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span> <span class="s2">&quot;number&quot;</span><span class="p">:</span> <span class="n">numbers</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;v&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;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>
</ul>
<p>Tip: In Tone.js you can’t call connect one after another, you need to use chain.</p>
<p>TODO: Add glide to Lead to make it more 303 sounding</p>
<p>Master is connected with Surround and Volume Limiter.
Use Gates and Limiters to avoid going deaf.</p>
<p>Tone.MultiInstrument gave lots of glitches, so custom voices are written in the voice function</p>
<p>Channels provide</p>
<ul class="simple">
<li><p>Mute</p></li>
<li><p>Solo</p></li>
</ul>
<p>More improvements for the Stab</p>
<div class="highlight-none notranslate"><div class="highlight"><pre><span></span>- Chorus or Phaser
- Compressor
- Decay in envelope
- Separate filters
- EQ
- Sends for more delay
- LFO for filters
</pre></div>
</div>
<p>Freeverb does not work and also needs Mono to function properly</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">reverb</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Freeverb</span><span class="p">()</span><span class="o">.</span><span class="n">toDestination</span><span class="p">();</span>
<span class="n">var</span> <span class="n">reverb_mono</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Mono</span><span class="p">()</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">reverb</span><span class="p">);</span>
<span class="n">reverb</span><span class="o">.</span><span class="n">dampening</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
<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="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">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">voice</span><span class="p">(</span><span class="mi">1</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">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>









|







 







|









|







 







|






<
<
<
<
<



|







 







|
|

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







|
|


<
<
<
<
<
<
<
<
<
<











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




<
<
<







 







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







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
...
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
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
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
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
...
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
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
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
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

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Getting Started &#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">
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Getting Started
  </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            
            <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="#tutorial">
   Tutorial
  </a>
  <ul class="nav section-nav flex-column">
   <li class="toc-h3 nav-item toc-entry">
    <a class="reference internal nav-link" href="#making-a-basic-loop">
     Making a basic loop
    </a>
   </li>
   <li class="toc-h3 nav-item toc-entry">
    <a class="reference internal nav-link" href="#full-code">
     Full Code
    </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="#demo-song-2-uk-hip-hop">
   Demo Song 2 // UK Hip Hop
  </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="getting-started">
<h1>Getting Started<a class="headerlink" href="#getting-started" title="Permalink to this headline">¶</a></h1>
<div class="section" id="tutorial">
<h2>Tutorial<a class="headerlink" href="#tutorial" title="Permalink to this headline">¶</a></h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/o683v4dt6RM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<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>
<p>For an understanding of the global variables see the concepts and code walkthrough section.</p>
<div class="highlight-none notranslate"><div class="highlight"><pre><span></span>- patterns and track_no
- isHit, delta
- samples
- dials
- Tone
- cellx
- window and any thing included with the script tag is available here
</pre></div>
</div>
<p><code class="docutils literal notranslate"><span class="pre">mem</span></code> is short for memory. All instruments and effects are saved here so that they can be accessed everywhere.</p>
<p>Step to create the basic song.</p>
<ol class="simple">
<li><p>Click on <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Sample</span> <span class="pre">URL</span></code> to add the following URLs</p>
<ul class="simple">
<li><p>/Kick01.wav</p></li>
<li><p>/Snare19.wav</p></li>
<li><p>/Closedhat01.wav</p></li>
<li><p>/MiscSynthStab04.wav</p></li>
</ul>
</li>
<li><p>Click on <code class="docutils literal notranslate"><span class="pre">Add</span> <span class="pre">Dial</span></code></p></li>
<li><p>Enter the following into the window</p></li>
</ol>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></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 0000 x000 0000 x000&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="n">scene2</span> <span class="o">=</span> <span class="p">[</span>
    <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>
    <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="n">handlers</span><span class="p">[</span><span class="s2">&quot;ex&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="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="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;ex&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="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="n">p</span><span class="p">(</span><span class="mi">0</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="n">p</span><span class="p">(</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">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">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="p">}</span>


</pre></div>
</div>
<p>Now try changing the code.</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">patterns</span> <span class="o">=</span> <span class="n">scene2</span>
</pre></div>
</div>
<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>
<p><strong>Tweaking</strong></p>
<p>First click <code class="docutils literal notranslate"><span class="pre">+</span> <span class="pre">Number</span></code>. This is useful to check if the knob function is actually working. And click <code class="docutils literal notranslate"><span class="pre">+</span> <span class="pre">Execute</span> <span class="pre">Once</span></code></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">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.09</span><span class="p">,</span><span class="mf">1.8</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mf">1.5</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">2</span><span class="p">],</span> <span class="s2">&quot;number&quot;</span><span class="p">:</span> <span class="n">numbers</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="s2">&quot;v&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;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 class="section" id="making-a-basic-loop">
<h3>Making a basic loop<a class="headerlink" href="#making-a-basic-loop" title="Permalink to this headline">¶</a></h3>
<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>
</ul>
<p>Tip: In Tone.js you can’t call connect one after another, you need to use chain.</p>
<p>TODO: Add glide to Lead to make it more 303 sounding</p>
<p>Master is connected with Surround and Volume Limiter.
Use Gates and Limiters to avoid going deaf.</p>
<p>Tone.MultiInstrument gave lots of glitches, so custom voices are written in the voice function</p>
<p>Channels provide</p>
<ul class="simple">
<li><p>Mute</p></li>
<li><p>Solo</p></li>
</ul>
<p>More improvements for the Stab</p>
<div class="highlight-none notranslate"><div class="highlight"><pre><span></span>- Chorus or Phaser
- Compressor
- Decay in envelope
- Separate filters
- EQ
- Sends for more delay
- LFO for filters
</pre></div>
</div>
<p>Freeverb does not work and also needs Mono to function properly</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">reverb</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Freeverb</span><span class="p">()</span><span class="o">.</span><span class="n">toDestination</span><span class="p">();</span>
<span class="n">var</span> <span class="n">reverb_mono</span> <span class="o">=</span> <span class="n">new</span> <span class="n">Tone</span><span class="o">.</span><span class="n">Mono</span><span class="p">()</span><span class="o">.</span><span class="n">connect</span><span class="p">(</span><span class="n">reverb</span><span class="p">);</span>
<span class="n">reverb</span><span class="o">.</span><span class="n">dampening</span> <span class="o">=</span> <span class="mi">100</span><span class="p">;</span>
<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">
<h3>Full Code<a class="headerlink" href="#full-code" title="Permalink to this headline">¶</a></h3>
<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="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">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">voice</span><span class="p">(</span><span class="mi">1</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">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 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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GTfmTMrSpag" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<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>



<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="p">}</span>
    <span class="p">}</span>

<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="demo-song-2-uk-hip-hop">
<h2>Demo Song 2 // UK Hip Hop<a class="headerlink" href="#demo-song-2-uk-hip-hop" title="Permalink to this headline">¶</a></h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/9eaABgJJlUo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="nx">volume_guard1</span> <span class="o">=</span> <span class="nx">guard</span><span class="p">([</span><span class="o">-</span><span class="mf">20</span><span class="p">,</span><span class="mf">15</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">volume</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">volume_guard1</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">dials</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]()</span> <span class="o">*</span> <span class="mf">30</span><span class="p">)</span> <span class="o">-</span><span class="mf">20</span><span class="p">);</span>

<span class="nx">intro</span> <span class="o">=</span> <span class="p">[</span>
   <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x000 0000 0000 0000 &quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="nx">main</span> <span class="o">=</span> <span class="p">[</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x0x0 x0x0 x0x0 x0x0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x000 0000 0000 0000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 0000 0000 0000&quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 0000 0000 0000&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="nx">bass</span> <span class="o">=</span> <span class="p">[</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x0x0 x0x0 x0x0 x0x0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x000 0000 0000 0000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x[^B2]x.00 x[^B2]x.x[^B2]x. x[^B2]x.x[^B2]x.x[^B2]x.0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 00x[^D3]0 000x[^A2] 00x[^A2]x[^A2] 0x[^A2]0x[^A2] &quot;</span><span class="p">),</span> 
<span class="p">]</span>

<span class="nx">end</span> <span class="o">=</span> <span class="p">[</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x10x0 x0x0 x0x0 x0x0 &quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="nx">solo</span> <span class="o">=</span> <span class="p">[</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 0000 0000 0000&quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 0000 0000 0000&quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 0000 0000 0000&quot;</span><span class="p">),</span>
<span class="p">]</span>

<span class="nx">fin</span> <span class="o">=</span> <span class="nx">solo</span><span class="p">;</span>

<span class="nx">endgame</span> <span class="o">=</span> <span class="p">[</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 x000 0000 x000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x0x0 x0x0 x0x0 x0x0 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x000 0000 0000 0000 &quot;</span><span class="p">),</span>
    <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p x[^B2]x.00 x[^B2]x.x[^B2]x. x[^B2]x.x[^B2]x.x[^B2]x.0 &quot;</span><span class="p">),</span>
<span class="p">]</span>




<span class="nx">empty</span> <span class="o">=</span> <span class="nx">cellx</span><span class="p">(</span><span class="s2">&quot;p 0000 0000 0000 0000&quot;</span><span class="p">)</span>


<span class="kd">function</span> <span class="nx">once</span> <span class="p">()</span> <span class="p">{</span>
 
    
        <span class="kd">const</span> <span class="nx">setup</span> <span class="o">=</span> <span class="p">(</span> <span class="nx">instance</span> <span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">intro</span> <span class="o">=</span> <span class="p">[]</span>
        <span class="kd">var</span> <span class="nx">main</span> <span class="o">=</span> <span class="p">[]</span>
        <span class="kd">var</span> <span class="nx">bass</span> <span class="o">=</span> <span class="nx">main</span>
        <span class="kd">var</span> <span class="nx">end</span> <span class="o">=</span> <span class="p">[]</span> 
        <span class="kd">var</span> <span class="nx">solo</span> <span class="o">=</span> <span class="nx">end</span>
        <span class="kd">var</span> <span class="nx">fin</span> <span class="o">=</span> <span class="nx">end</span>
       
       <span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">old_scene</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        
        

        <span class="kd">let</span> <span class="nx">x</span> <span class="o">=</span> <span class="mf">100</span><span class="p">;</span>
        <span class="kd">let</span> <span class="nx">y</span> <span class="o">=</span> <span class="mf">100</span><span class="p">;</span>

        <span class="nx">instance</span><span class="p">.</span><span class="nx">setup</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">instance</span><span class="p">.</span><span class="nx">createCanvas</span><span class="p">(</span><span class="mf">1280</span><span class="p">,</span> <span class="mf">410</span><span class="p">);</span>
            <span class="nx">x</span><span class="p">.</span><span class="nx">canvas</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">position</span> <span class="o">=</span> <span class="s2">&quot;absolute&quot;</span><span class="p">;</span>
            <span class="nx">instance</span><span class="p">.</span><span class="nx">frameRate</span><span class="p">(</span><span class="mf">0.25</span><span class="p">);</span>
            <span class="nx">intro</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/intro/1.png&#39;</span><span class="p">));</span>
            <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/1.png&#39;</span><span class="p">));</span>
            <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/2.png&#39;</span><span class="p">));</span>
            <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/3.png&#39;</span><span class="p">));</span>
             <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/4.png&#39;</span><span class="p">));</span>
              <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/5.png&#39;</span><span class="p">));</span>
               <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/6.png&#39;</span><span class="p">));</span>
                <span class="nx">main</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/main/7.png&#39;</span><span class="p">));</span>
            <span class="nx">end</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">instance</span><span class="p">.</span><span class="nx">loadImage</span><span class="p">(</span><span class="s1">&#39;/closed/end/1.png&#39;</span><span class="p">));</span>
        <span class="p">};</span>

        <span class="nx">instance</span><span class="p">.</span><span class="nx">draw</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">old_scene</span> <span class="o">!=</span> <span class="nx">current_scene</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">old_scene</span> <span class="o">=</span> <span class="nx">current_scene</span><span class="p">;</span>
                <span class="nx">count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
            <span class="p">}</span>
           <span class="nx">instance</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
            <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">current_scene</span><span class="si">}</span><span class="sb">`</span><span class="p">)</span>
            <span class="nx">instance</span><span class="p">.</span><span class="nx">image</span><span class="p">(</span><span class="nx">c</span><span class="p">[</span><span class="nx">count</span><span class="p">],</span> <span class="mf">0</span><span class="p">,</span> <span class="mf">0</span><span class="p">);</span>
            <span class="nx">count</span> <span class="o">+=</span> <span class="mf">1</span>
            <span class="nx">count</span> <span class="o">=</span> <span class="nx">count</span> <span class="o">%</span> <span class="nx">c</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>

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

    <span class="kd">let</span> <span class="nx">myp5</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">p5</span><span class="p">(</span><span class="nx">setup</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;canvas-container&#39;</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">volume</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="o">-</span><span class="mf">30</span>

    <span class="nx">dials</span><span class="p">[</span><span class="mf">2</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">](</span><span class="mf">1</span><span class="p">)</span>
    <span class="nx">mem</span><span class="p">[</span><span class="s2">&quot;master_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="mf">10000</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="s2">&quot;master_stereo&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">StereoWidener</span><span class="p">({</span><span class="nx">width</span><span class="o">:</span> <span class="mf">0.50</span><span class="p">});</span>
    
    <span class="nx">dials</span><span class="p">[</span><span class="mf">2</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">].</span><span class="nx">onChange</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="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="s2">&quot;data&quot;</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">cutoff_guard</span> <span class="o">=</span> <span class="nx">guard</span><span class="p">([</span><span class="mf">10</span><span class="p">,</span> <span class="mf">20000</span><span class="p">]);</span>
        <span class="nx">mem</span><span class="p">[</span><span class="s2">&quot;master_filter&quot;</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">cutoff_guard</span><span class="p">(</span><span class="nx">val</span> <span class="o">*</span> <span class="mf">10000</span><span class="p">);</span>
    <span class="p">})</span>
    
    <span class="nx">dials</span><span class="p">[</span><span class="mf">3</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">](</span><span class="mf">0</span><span class="p">)</span>
    
    <span class="nx">dials</span><span class="p">[</span><span class="mf">3</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">].</span><span class="nx">onChange</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="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="s2">&quot;data&quot;</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">volume_guard1</span> <span class="o">=</span> <span class="nx">guard</span><span class="p">([</span><span class="mf">0</span><span class="p">,</span><span class="mf">1</span><span class="p">])</span>
        <span class="nx">audio</span><span class="p">.</span><span class="nx">master</span><span class="p">.</span><span class="k">in</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">volume_guard1</span><span class="p">(</span><span class="nx">val</span> <span class="o">/</span> <span class="mf">10</span><span class="p">);</span>
    <span class="p">})</span>
    
    <span class="nx">mem</span><span class="p">.</span><span class="nx">master</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="o">-</span><span class="mf">10</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="s2">&quot;master_filter&quot;</span><span class="p">],</span>  <span class="nx">mem</span><span class="p">[</span><span class="s2">&quot;master_stereo&quot;</span><span class="p">],</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Destination</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;k&quot;</span><span class="p">,</span> <span class="mf">0</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="o">-</span><span class="mf">5</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;sn1&quot;</span><span class="p">,</span><span class="mf">1</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="mf">0</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;h&quot;</span><span class="p">,</span><span class="mf">2</span><span class="p">,</span> <span class="mf">5000</span><span class="p">,</span> <span class="o">-</span><span class="mf">35</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;m&quot;</span><span class="p">,</span><span class="mf">3</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="o">-</span><span class="mf">15</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;f&quot;</span><span class="p">,</span><span class="mf">4</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="o">-</span><span class="mf">15</span><span class="p">);</span>
    
    <span class="nx">name</span> <span class="o">=</span> <span class="s2">&quot;s&quot;</span>
    <span class="nx">filter</span> <span class="o">=</span> <span class="mf">2000</span>
    <span class="nx">volume</span> <span class="o">=</span> <span class="o">-</span><span class="mf">15</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;_delay&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">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="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">pan</span><span class="o">:</span> <span class="o">-</span><span class="mf">0.25</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">name</span> <span class="o">+</span> <span class="s2">&quot;_delay&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="mf">5</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="mf">5</span><span class="p">;</span>
  
  

    
    
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;manager&quot;</span><span class="p">,</span><span class="mf">6</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="o">-</span><span class="mf">5</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;order&quot;</span><span class="p">,</span><span class="mf">7</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="o">-</span><span class="mf">15</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;cr&quot;</span><span class="p">,</span><span class="mf">8</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="o">-</span><span class="mf">15</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;piano&quot;</span><span class="p">,</span><span class="mf">9</span><span class="p">,</span> <span class="mf">400</span><span class="p">,</span> <span class="o">-</span><span class="mf">5</span><span class="p">);</span>
    <span class="nx">Sample</span><span class="p">(</span><span class="s2">&quot;sitar&quot;</span><span class="p">,</span><span class="mf">10</span><span class="p">,</span> <span class="mf">5000</span><span class="p">,</span> <span class="o">-</span><span class="mf">15</span><span class="p">);</span>
    
    <span class="kd">const</span> <span class="nx">audio</span> <span class="o">=</span> <span class="nx">Audio</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">three</span> <span class="o">=</span> <span class="nx">ThreeOhUnit</span><span class="p">(</span><span class="nx">audio</span><span class="p">,</span> <span class="s2">&quot;sawtooth&quot;</span><span class="p">,</span> <span class="p">{</span>
            <span class="s2">&quot;cutoff&quot;</span><span class="o">:</span> <span class="mf">78</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="p">)</span>
    <span class="nx">audio</span><span class="p">.</span><span class="nx">master</span><span class="p">.</span><span class="k">in</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</span><span class="p">;</span>
    <span class="nx">mem</span><span class="p">[</span><span class="s2">&quot;three&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">three</span>
    
    <span class="c1">// cutoff [30, 700], 400</span>
    <span class="c1">// resonance: [1, 30], 15</span>
    <span class="c1">// envMod: [0, 8000], 4000</span>
    <span class="c1">// decay: [0.1, 0.9], 0.5</span>
    
    <span class="nx">dials</span><span class="p">[</span><span class="mf">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">](</span><span class="mf">0.07825</span><span class="p">)</span>

    <span class="nx">dials</span><span class="p">[</span><span class="mf">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">].</span><span class="nx">onChange</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="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">e</span><span class="p">[</span><span class="s2">&quot;data&quot;</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
        <span class="nx">cutoff_guard</span> <span class="o">=</span> <span class="nx">guard</span><span class="p">([</span><span class="mf">30</span><span class="p">,</span> <span class="mf">700</span><span class="p">]);</span>
        <span class="nx">three</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">cutoff</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">cutoff_guard</span><span class="p">(</span><span class="nx">val</span> <span class="o">*</span> <span class="mf">1000</span><span class="p">);</span>
    <span class="p">})</span>
    
    
    <span class="nx">mem</span><span class="p">.</span><span class="nx">k1</span> <span class="o">=</span> <span class="nx">knob</span><span class="p">({</span><span class="nx">ramp</span> <span class="o">:</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="mf">0.25</span><span class="p">,</span> <span class="mf">0.75</span><span class="p">,</span> <span class="mf">0.25</span><span class="p">],</span> <span class="nx">step</span><span class="o">:</span> <span class="mf">0.005</span><span class="p">,</span> <span class="s2">&quot;number&quot;</span><span class="o">:</span> <span class="nx">dials</span><span class="p">[</span><span class="mf">1</span><span class="p">][</span><span class="s2">&quot;cell&quot;</span><span class="p">]</span> <span class="p">});</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="kd">let</span> <span class="nx">cutoff_guard</span> <span class="o">=</span> <span class="nx">guard</span><span class="p">([</span><span class="mf">30</span><span class="p">,</span> <span class="mf">900</span><span class="p">]);</span>
        <span class="nx">three</span><span class="p">.</span><span class="nx">params</span><span class="p">.</span><span class="nx">cutoff</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">cutoff_guard</span><span class="p">(</span><span class="nx">mem</span><span class="p">.</span><span class="nx">k1</span><span class="p">.</span><span class="nx">move</span><span class="p">()</span> <span class="o">*</span> <span class="mf">1000</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">tweak</span><span class="p">()</span> <span class="p">{</span>
 
    <span class="kd">var</span> <span class="nx">snare_count</span> <span class="o">=</span> <span class="nx">cellx</span><span class="p">(</span><span class="mf">0</span><span class="p">);</span>
    
        
    <span class="nx">snare_count</span><span class="p">.</span><span class="nx">onChange</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="kd">var</span> <span class="nx">val</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="s2">&quot;data&quot;</span><span class="p">].</span><span class="nx">value</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">val</span> <span class="o">==</span> <span class="mf">22</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;fin&quot;</span><span class="p">;</span>
             <span class="nx">p1</span><span class="p">(</span><span class="mf">8</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="mf">12.25</span><span class="p">);</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;f2&#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="nx">snare_count</span><span class="p">(</span><span class="nx">snare_count</span><span class="p">()</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">snare_count</span><span class="p">()</span> <span class="o">&lt;=</span> <span class="mf">20</span><span class="p">)</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="nx">p</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">&quot;24n&quot;</span><span class="p">,</span> <span class="kc">null</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="nx">p</span><span class="p">(</span><span class="mf">8</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">&quot;2n&quot;</span> <span class="p">);</span>
                    <span class="nx">p</span><span class="p">(</span><span class="mf">10</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">,</span> <span class="s2">&quot;A2&quot;</span><span class="p">,</span> <span class="mf">1</span><span class="p">);</span>
                <span class="p">},</span> <span class="nx">delta</span> <span class="o">*</span> <span class="mf">2</span><span class="p">)</span>
  
          <span class="p">},</span> <span class="nx">delta</span> <span class="o">*</span> <span class="mf">1.5</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="p">}</span>



<span class="nx">transition</span> <span class="o">=</span> <span class="nx">once</span><span class="p">;</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">&lt;=</span> <span class="mf">2</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;intro&quot;</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="c1">//       mem[&quot;three&quot;].step(&quot;off&quot;);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">==</span> <span class="mf">3</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">eval_guard</span> <span class="o">?</span> <span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;Start intro&quot;</span><span class="p">)</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;intro&quot;</span><span class="p">;</span>

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

<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">==</span> <span class="mf">5</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">eval_guard</span> <span class="o">?</span> <span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;Start drums&quot;</span><span class="p">)</span> <span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;main&quot;</span><span class="p">;</span>
<span class="p">}</span>


<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">==</span> <span class="mf">12</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">eval_guard</span> <span class="o">?</span> <span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;Add bass&quot;</span><span class="p">)</span><span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;bass&quot;</span><span class="p">;</span>

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

<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">==</span> <span class="mf">32</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">eval_guard</span> <span class="o">?</span><span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;Reverse &quot;</span><span class="p">)</span><span class="o">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;bass&quot;</span><span class="p">;</span>

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

<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">==</span> <span class="mf">42</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">eval_guard</span> <span class="o">?</span> <span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;End &quot;</span><span class="p">)</span><span class="o">:</span> <span class="s2">&quot;&quot;</span>
    <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;end&quot;</span><span class="p">;</span>

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

<span class="k">if</span> <span class="p">(</span><span class="nx">bars</span> <span class="o">==</span> <span class="mf">48</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">eval_guard</span> <span class="o">?</span> <span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;Solo &quot;</span><span class="p">)</span><span class="o">:</span> <span class="s2">&quot;&quot;</span>
    <span class="nx">current_scene</span> <span class="o">=</span> <span class="s2">&quot;solo&quot;</span><span class="p">;</span>
<span class="p">}</span>


    <span class="nx">transition</span> <span class="o">=</span> <span class="nx">tweak</span><span class="p">;</span>
<span class="p">}</span>


<span class="nx">patterns</span> <span class="o">=</span> <span class="nb">eval</span><span class="p">(</span><span class="sb">`</span><span class="si">${</span><span class="nx">current_scene</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
<span class="nx">always</span><span class="p">();</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">track_no</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">count</span> <span class="o">==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">cue</span><span class="p">(</span><span class="s2">&quot;Sample&quot;</span><span class="p">)</span>
    <span class="nx">p1</span><span class="p">(</span><span class="mf">7</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="mf">12.25</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">isHit</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">current_scene</span> <span class="o">==</span> <span class="s2">&quot;intro&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">p</span><span class="p">(</span><span class="mf">3</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">&quot;1n&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">current_scene</span> <span class="o">==</span> <span class="s2">&quot;fin&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">current_scene</span> <span class="o">==</span> <span class="s2">&quot;solo&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">current_scene</span> <span class="o">==</span> <span class="s2">&quot;end&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;volume&quot;</span><span class="p">],</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">],</span> <span class="s2">&quot;24n&quot;</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;delay&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="nx">track_no</span> <span class="o">==</span> <span class="mf">2</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</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">track_no</span> <span class="o">==</span> <span class="mf">3</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</span><span class="p">(</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="k">if</span> <span class="p">(</span><span class="nx">current_scene</span> <span class="o">==</span> <span class="s2">&quot;main&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;volume&quot;</span><span class="p">],</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">],</span> <span class="s2">&quot;24n&quot;</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;delay&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="nx">track_no</span> <span class="o">==</span> <span class="mf">2</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</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">track_no</span> <span class="o">==</span> <span class="mf">3</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</span><span class="p">(</span><span class="mf">2</span><span class="p">)</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">4</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</span><span class="p">(</span><span class="mf">3</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">&quot;1n&quot;</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">5</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">])</span> <span class="p">{</span>
              <span class="c1">//  mem[&quot;three&quot;].step({&quot;glide&quot;: true, &quot;accent&quot;: false, &quot;note&quot;: meta[tick][&quot;pitch&quot;]});</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
              <span class="c1">//  mem[&quot;three&quot;].step(&quot;off&quot;);</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">6</span><span class="p">)</span> <span class="p">{</span>
           <span class="nx">p</span><span class="p">(</span><span class="mf">5</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">],</span> <span class="s2">&quot;1n&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">current_scene</span> <span class="o">==</span> <span class="s2">&quot;bass&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
          <span class="nx">p</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;volume&quot;</span><span class="p">],</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">],</span> <span class="s2">&quot;24n&quot;</span><span class="p">,</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;delay&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="nx">track_no</span> <span class="o">==</span> <span class="mf">2</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</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">track_no</span> <span class="o">==</span> <span class="mf">3</span><span class="p">)</span> <span class="p">{</span>
           <span class="nx">p</span><span class="p">(</span><span class="mf">2</span><span class="p">)</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">4</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">p</span><span class="p">(</span><span class="mf">3</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s2">&quot;1n&quot;</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">track_no</span> <span class="o">==</span> <span class="mf">5</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">])</span> <span class="p">{</span>
                <span class="nx">mem</span><span class="p">[</span><span class="s2">&quot;three&quot;</span><span class="p">].</span><span class="nx">step</span><span class="p">({</span><span class="s2">&quot;glide&quot;</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="s2">&quot;accent&quot;</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span> <span class="s2">&quot;note&quot;</span><span class="o">:</span> <span class="nx">meta</span><span class="p">[</span><span class="nx">tick</span><span class="p">][</span><span class="s2">&quot;pitch&quot;</span><span class="p">]});</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">mem</span><span class="p">[</span><span class="s2">&quot;three&quot;</span><span class="p">].</span><span class="nx">step</span><span class="p">(</span><span class="s2">&quot;off&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="nx">track_no</span> <span class="o">==</span> <span class="mf">6</span><span class="p">)</span> <span class="p">{</span>
 <span class="c1">//          p(5, 0.15, meta[tick][&quot;pitch&quot;], 1);</span>
        <span class="c1">//  p(9, 1, meta[tick][&quot;pitch&quot;], 1);</span>

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


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


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

33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
    <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 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 current active">
  <a class="current reference internal" href="#">
   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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................


              </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">







|







 







|









|







 







|






<
<
<
<
<



|







 







|







33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
    <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="Core Features" 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 class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Early Attempts
  </a>
 </li>
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="changelog.html">
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Code Walkthrough
  </a>
 </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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="tweaking.html" title="previous page">Core Features</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.

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
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>







|









|







 







|






<
<
<
<
<



|







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
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/index.html.

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
...
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
...
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
                
  <div class="section" id="welcome-to-bitrhythm-s-documentation">
<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#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#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>







|









|







 







|






<
<
<
<
<



|







 







|
>




|
|
|
|
>
>
|
|



|
<
|
|
|




|







 







<
|







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
...
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
...
236
237
238
239
240
241
242

243
244
245
246
247
248
249
250
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
                
  <div class="section" id="welcome-to-bitrhythm-s-documentation">
<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#adc-2021">ADC 2021</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#inspiration-for-the-project">Inspiration for the project</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#support-this-project">Support this project</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="source-code.html">Source Code and License</a></li>
<li class="toctree-l1"><a class="reference internal" href="demo.html">Getting Started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="demo.html#tutorial">Tutorial</a><ul>
<li class="toctree-l3"><a class="reference internal" href="demo.html#making-a-basic-loop">Making a basic loop</a></li>
<li class="toctree-l3"><a class="reference internal" href="demo.html#full-code">Full Code</a></li>
</ul>
</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#demo-song-2-uk-hip-hop">Demo Song 2 // UK Hip Hop</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">Core Features</a><ul>

<li class="toctree-l2"><a class="reference internal" href="tweaking.html#sequencer-notation">Sequencer Notation</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#tweaking-and-transitions">Tweaking and Transitions</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="early-attempts.html">Early Attempts</a></li>
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog</a></li>
<li class="toctree-l1"><a class="reference internal" href="main.html">Code Walkthrough</a><ul>
<li class="toctree-l2"><a class="reference internal" href="main.html#core-tracker-loop">Core Tracker Loop</a><ul>
<li class="toctree-l3"><a class="reference internal" href="main.html#observers">Observers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="main.html#dials">Dials</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#numbers">Numbers</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autoknob">AutoKnob</a></li>
................................................................................
<li class="toctree-l2"><a class="reference internal" href="main.html#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="limitations.html">Saving and other limitations</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>

Changes to build/html/limitations.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
190
191
192
193
194
195
196
197
198


199
200
201
202
203
204
205
...
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Limitations and Recording &#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">
................................................................................
    <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 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 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>
................................................................................
    </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="limitations-and-recording">
<h1>Limitations and Recording<a class="headerlink" href="#limitations-and-recording" title="Permalink to this headline">¶</a></h1>


<ul class="simple">
<li><p>Opening developer tools might slow down the execution a bit</p></li>
<li><p>Using excessive delays and reverbs seems to cause some glitches</p></li>
<li><p>Mobile browsers don’t work properly</p></li>
<li><p>Firefox does not seem to work well with tone.js</p></li>
</ul>
<p>I use <a class="reference external" href="https://existential.audio/blackhole/">BlackHole</a> to record audio from the browser window to Reaper. You can use any screenrecording software to record the screen. Have a distinct sound to match both audio and video.</p>
................................................................................


              </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">







|







 







|







 







|









|







 







|






<
<
<
<
<



|







 







|
|
>
>







 







|







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
...
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Saving and other limitations &#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">
................................................................................
    <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="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 class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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 other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
    </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="saving-and-other-limitations">
<h1>Saving and other limitations<a class="headerlink" href="#saving-and-other-limitations" title="Permalink to this headline">¶</a></h1>
<p>There is a save button that converts the state of bitrhythm into a url paramter. This means there is an upper limit on how much code you can write, making it useful for demoscene like situations. You can share the url with tinyurl.</p>
<p>You can also download the file. Please keep a backup.</p>
<ul class="simple">
<li><p>Opening developer tools might slow down the execution a bit</p></li>
<li><p>Using excessive delays and reverbs seems to cause some glitches</p></li>
<li><p>Mobile browsers don’t work properly</p></li>
<li><p>Firefox does not seem to work well with tone.js</p></li>
</ul>
<p>I use <a class="reference external" href="https://existential.audio/blackhole/">BlackHole</a> to record audio from the browser window to Reaper. You can use any screenrecording software to record the screen. Have a distinct sound to match both audio and video.</p>
................................................................................


              </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="credits.html" title="next page">Credits</a>

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

Changes to build/html/main.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
...
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
....
1089
1090
1091
1092
1093
1094
1095
1096

1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
....
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Concepts and Code Walkthrough &#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">
................................................................................
 <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 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>
................................................................................
    </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="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="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="nb">window</span><span class="p">.</span><span class="nx">pattern_meta</span> <span class="o">=</span> <span class="nx">pattern_meta</span><span class="p">;</span>



<span class="kd">function</span> <span class="nx">cue</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">seconds</span> <span class="o">=</span> <span class="mf">5</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#cued&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</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="nx">$</span><span class="p">(</span><span class="s2">&quot;#cued&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="nx">seconds</span> <span class="o">*</span> <span class="mf">1000</span><span class="p">)</span>







|







 







|









|







 







|






<
<
<
<
<



|







 







|
|







 







|
>
|
|
|
|
<







 







<







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
...
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
....
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096

1097
1098
1099
1100
1101
1102
1103
....
1292
1293
1294
1295
1296
1297
1298

1299
1300
1301
1302
1303
1304
1305

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code Walkthrough &#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">
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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 current active">
  <a class="current reference internal" href="#">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
    </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="code-walkthrough">
<h1>Code Walkthrough<a class="headerlink" href="#code-walkthrough" title="Permalink to this headline">¶</a></h1>
<div class="section" id="core-tracker-loop">
<h2>Core Tracker Loop<a class="headerlink" href="#core-tracker-loop" title="Permalink to this headline">¶</a></h2>
<p>In bitrhythm code is evaluated for every cycle.</p>
<p>1 beat = 60 / tempo
1 cycle = 1 beat / ticks</p>
<p>For every cycle visual and audio code is evaluated.</p>
<p>The edit checkbox allows you to perform long edits, where only old code is evaluated. Once you disable it, all the new edit changes are applied in the next cycle.</p>
................................................................................
        <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;`0&#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;`1&#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;`2&#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;`3&#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;`4&#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;`5&#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="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="nb">window</span><span class="p">.</span><span class="nx">pattern_meta</span> <span class="o">=</span> <span class="nx">pattern_meta</span><span class="p">;</span>



<span class="kd">function</span> <span class="nx">cue</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">seconds</span> <span class="o">=</span> <span class="mf">5</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#cued&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</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="nx">$</span><span class="p">(</span><span class="s2">&quot;#cued&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="nx">seconds</span> <span class="o">*</span> <span class="mf">1000</span><span class="p">)</span>

Changes to build/html/samples.html.

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
    <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>
................................................................................
 <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 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>
................................................................................
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................


              </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">







|
|







 







|









|







 







|






<
<
<
<
<



|







 







|
|







32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
..
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
...
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
    <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="Core Features" href="tweaking.html" />
    <link rel="prev" title="Getting Started" 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>
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="demo.html" title="previous page">Getting Started</a>
    <a class='right-next' id="next-link" href="tweaking.html" title="next page">Core Features</a>

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

Deleted build/html/saving.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

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Saving and Sharing &#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="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>

    

    <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 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>
</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="saving-and-sharing">
<h1>Saving and Sharing<a class="headerlink" href="#saving-and-sharing" title="Permalink to this headline">¶</a></h1>
<p>There is a save button that converts the state of bitrhythm into a url paramter. This means there is an upper limit on how much code you can write, making it useful for demoscene like situations. You can share the url with tinyurl.</p>
<p>To make a complete song use <code class="docutils literal notranslate"><span class="pre">bars</span></code> to trigger multiple transitions.</p>
</div>


              </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">
      <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/search.html.

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
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>







|









|







 







|






<
<
<
<
<



|







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
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

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

32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
..
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
...
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
    <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" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................

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

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







|







 







|









|







 







|






<
<
<
<
<



|







 







|







32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
..
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
...
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
    <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="Getting Started" 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" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................

              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="what.html" title="previous page">What is bitrhythm about ?</a>
    <a class='right-next' id="next-link" href="demo.html" title="next page">Getting Started</a>

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

Changes to build/html/tweaking.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
...
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
...
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

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>What exactly is Tweaking ? &#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">
................................................................................
 <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 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">
  <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            
            <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="#is-bitrhythm-maths-heavy">
   Is Bitrhythm Maths heavy ?
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#dj-controls">
   DJ Controls
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#music-is-arrangement">
   Music is arrangement
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#see-also">
   See Also
  </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="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 />
Rock: Call Response</p>
<p>Now EDM - Dub, Techno and Jungle - are distinct musical genres. What could they possibly share ?</p>
<ol class="simple">
<li><p>All three uphold the primacy of Rhythm for start.</p></li>
<li><p>All three are instrumental.</p></li>
<li><p>Voices are used sparingly as samples.</p></li>
<li><p>All three have a tradition of live acts.</p></li>
<li><p>Dub Plates are common for these genres.</p></li>
<li><p>Melody is nothing but a repeating stab (motif)</p></li>
</ol>
<p>If you want to add a solo to EDM, you typically add a live instrument.</p>
<p>Dub Music is made by messing with the Recording Engineer’s Mixing desk. A prime example of tweaking.</p>
<iframe width="420" height="315" src="https://www.youtube.com/embed/oJs1wR8tLr4" frameborder="0" allowfullscreen></iframe>
<p>Techno is made by messing with Hardware or Hardware + Software.  Tweaking + Layering.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ppEhaH3jSzo" frameborder="0" allowfullscreen></iframe>
<p>Jungle is used as a catch all for Breakbeat, Hardcore as well. Jungle Music is made by messing with Hardware + Software combo. Complex Layering is used here.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/q72qoGYirwU" frameborder="0" allowfullscreen></iframe>
<p>Bitrhythm only supports rhythmic notations and is geared towards electronic music. My current goal is to produce an IDM track and Chiptune with it with complex rhythmic patterns. As for techno the current setup seems alright. Support will be added in the future for pitch manipulation in a different module or a different project. There is a piano module in the code with midi support but its currently deactivated.</p>
<p>You can treat a musical scale as no different than a drumset. The pentatanic scale approximately maps to a drumset and you can use techniques from <a class="reference external" href="https://www.youtube.com/watch?v=1qdyxML4tF0">melodic drumming</a> with multiple samples. This is typically how drummers approach guitars.</p>





<div class="section" id="is-bitrhythm-maths-heavy">
<h2>Is Bitrhythm Maths heavy ?<a class="headerlink" href="#is-bitrhythm-maths-heavy" title="Permalink to this headline">¶</a></h2>
<p>You will need some basic maths operations to understand and use bitrhythm effectively. These operations are about working with lists of numbers and lists of strings.</p>
<p>Some common operations on lists include</p>
<ul class="simple">
<li><p>Rotate</p></li>
<li><p>Invert</p></li>
................................................................................
<li><p>Neo-Riemannian_theory, Combinatory theory</p></li>
<li><p>Sacred Geometry</p></li>
<li><p>Circle of fifths, chord progressions</p></li>
<li><p>Set transformations like inversion on Scales</p></li>
<li><p>Licks from books</p></li>
<li><p>Randomness, I Ching, Playing Cards</p></li>
</ol>
</div>
<div class="section" id="dj-controls">
<h2>DJ Controls<a class="headerlink" href="#dj-controls" title="Permalink to this headline">¶</a></h2>
<div class="admonition-todo admonition" id="id1">
<p class="admonition-title">Todo</p>
<p>Expand</p>
</div>
<p>Essentially a DJ is like a conductor. Loops are like individual instrumentalists.</p>
<ol class="simple">
<li><p>Cueing -&gt; Mute / Solo</p></li>
<li><p>Dynamics -&gt; Volume</p></li>
<li><p>Ornamentation -&gt; Cutoff</p></li>
<li><p>Tempo, Beat Counting -&gt; Beat Matching</p></li>
</ol>
</div>
<div class="section" id="music-is-arrangement">
<h2>Music is arrangement<a class="headerlink" href="#music-is-arrangement" title="Permalink to this headline">¶</a></h2>
<iframe width="420" height="315" src="https://www.youtube.com/embed/tprMEs-zfQA" frameborder="0" allowfullscreen></iframe>
</div>
<div class="section" id="see-also">
<h2>See Also<a class="headerlink" href="#see-also" title="Permalink to this headline">¶</a></h2>
<p>In screenplays you also have a <a class="reference external" href="https://www.youtube.com/watch?v=cG5zKwmXLgo">setup / payoff</a> dynamic.</p>
<p>Setup</p>
<ul class="simple">
<li><p>Obstacles</p></li>
<li><p>Challenges</p></li>
<li><p>Forces</p></li>
<li><p>Context</p></li>
</ul>
</div>
</div>


              </div>
              
        







|







 







|









|







 







|






<
<
<
<
<



|







 







|
|



|
|



|
|
<
<
<
<
<













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







 







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







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
..
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
...
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
...
292
293
294
295
296
297
298





























299
300
301
302
303
304
305

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Core Features &#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">
................................................................................
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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="#">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            
            <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="#sequencer-notation">
   Sequencer Notation
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#tweaking-and-transitions">
   Tweaking and Transitions
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#is-bitrhythm-maths-heavy">
   Is Bitrhythm Maths heavy ?





  </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="core-features">
<h1>Core Features<a class="headerlink" href="#core-features" title="Permalink to this headline">¶</a></h1>
<div class="section" id="sequencer-notation">
<h2>Sequencer Notation<a class="headerlink" href="#sequencer-notation" title="Permalink to this headline">¶</a></h2>
<p>Bitrhythm only supports rhythmic notations and is geared towards electronic music. My current goal is to produce an IDM track, a DNB track and a Chiptune with complex rhythmic patterns. As for Techno the current setup seems alright but more support for DJ style transitions are needed.</p>
<p>You can treat a musical scale as no different than a drumset. The pentatanic scale approximately maps to a drumset and you can use techniques from <a class="reference external" href="https://www.youtube.com/watch?v=1qdyxML4tF0">melodic drumming</a> with multiple samples. This is typically how drummers approach guitars.</p>
</div>
<div class="section" id="tweaking-and-transitions">
<h2>Tweaking and Transitions<a class="headerlink" href="#tweaking-and-transitions" title="Permalink to this headline">¶</a></h2>
<p>These are key to making electronic music. Tweaking is also called Automation and knob-twisting by hardware users.</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 - scenes. 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 screenplays you also have a <a class="reference external" href="https://www.youtube.com/watch?v=cG5zKwmXLgo">setup / payoff</a> dynamic.</p>
<p>Setup</p>
<ul class="simple">
<li><p>Obstacles</p></li>
<li><p>Challenges</p></li>
<li><p>Forces</p></li>
<li><p>Context</p></li>
</ul>
<p>In Electronic Music the foreground is mainly developed via Tweaking. Tweaking effectively functions for the purposes of Exposition and Conflict. Chorus, Fade, Drop are used for transitions typically in electronic music. To compare the foreground in others,</p>
<p>Classical Music: Counterpoint and Harmony<br>
Rock: Call Response<br></p>
<p>To make a complete song in bitrhythm use <code class="docutils literal notranslate"><span class="pre">bars</span></code> to trigger multiple transitions.</p>
<p>Essentially a DJ is like a conductor. Loops are like individual instrumentalists.</p>
<ol class="simple">
<li><p>Cueing -&gt; Mute / Solo</p></li>
<li><p>Dynamics -&gt; Volume</p></li>
<li><p>Ornamentation -&gt; Cutoff</p></li>
<li><p>Tempo, Beat Counting -&gt; Beat Matching</p></li>
</ol>
<iframe width="420" height="315" src="https://www.youtube.com/embed/tprMEs-zfQA" frameborder="0" allowfullscreen></iframe>
</div>
<div class="section" id="is-bitrhythm-maths-heavy">
<h2>Is Bitrhythm Maths heavy ?<a class="headerlink" href="#is-bitrhythm-maths-heavy" title="Permalink to this headline">¶</a></h2>
<p>You will need some basic maths operations to understand and use bitrhythm effectively. These operations are about working with lists of numbers and lists of strings.</p>
<p>Some common operations on lists include</p>
<ul class="simple">
<li><p>Rotate</p></li>
<li><p>Invert</p></li>
................................................................................
<li><p>Neo-Riemannian_theory, Combinatory theory</p></li>
<li><p>Sacred Geometry</p></li>
<li><p>Circle of fifths, chord progressions</p></li>
<li><p>Set transformations like inversion on Scales</p></li>
<li><p>Licks from books</p></li>
<li><p>Randomness, I Ching, Playing Cards</p></li>
</ol>





























</div>
</div>


              </div>
              
        

Changes to build/html/what.html.

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
...
188
189
190
191
192
193
194
195
196





197
198
199
200
201
202
203
...
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
...
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
 <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">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            
            <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="#about-author">
   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>
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="what-is-bitrhythm-about">
<h1>What is bitrhythm about ?<a class="headerlink" href="#what-is-bitrhythm-about" title="Permalink to this headline">¶</a></h1>
<p>Currently this is how you can use code with music,</p>
<ol class="simple">
<li><p>VST plugins</p></li>
<li><p>DAW scripting</p></li>
<li><p>Embedded code to interact with electronics</p></li>
<li><p>ML approaches</p></li>
<li><p>Live coding</p></li>
<li><p>Use some weird algorithms / number sequences / hardcoded chords / random numbers</p></li>
<li><p>Web Audio / Audio Programming languages</p></li>
</ol>
<p>Bitrhythm offers 4-7.  In Bitrhythm you get a coding playground to explore and learn webaudio and webgl apis for the purposes of</p>
<ol class="simple">
<li><p>live visual programming</p></li>
<li><p>live audio programming</p></li>
<li><p>music sequencing</p></li>
<li><p>interactive music</p></li>
<li><p>audio visualisation</p></li>
<li><p>music learning</p></li>
</ol>
<p>Apart from the core html apis, you can also use the following libraries</p>
<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://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>
              
        







|









|







 







|






<
<
<
<
<



|







 







|
|
>
>
>
>
>







 







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






|







 







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

|






|







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
...
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
...
210
211
212
213
214
215
216
217


















218
219
220
221
222
223
224
225
226
227
228
229
230
231
...
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
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </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">
   Core Features
  </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">
   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="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            
            <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="#adc-2021">
   ADC 2021
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration-for-the-project">
   Inspiration for the project
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#support-this-project">
   Support this project
  </a>
 </li>
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="what-is-bitrhythm-about">
<h1>What is bitrhythm about ?<a class="headerlink" href="#what-is-bitrhythm-about" title="Permalink to this headline">¶</a></h1>
<p>In Bitrhythm you get a coding playground to make music with webaudio, canvas and webgl apis. You can share the final track as a URL which enables interactive music with your listener. The url size limit acts as a contraint on creativity.</p>


















<p>Apart from the core html apis, you can also use the following libraries</p>
<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 (observers)</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://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>
<p>A few things implemented from scratch in Bitrhythm are,</p>
<ol class="simple">
<li><p>DSL for describing music sequences - similar to the tracker notation</p></li>
<li><p>A core Music Loop that runs your javascript code, with an edit mode</p></li>
<li><p>A knob and guard abstraction for programming automation</p></li>
</ol>
<p>You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.</p>
<p>You can also use Bitrhythm for Live Coding and Algorithmic composition.</p>
<div class="section" id="adc-2021">
<h2>ADC 2021<a class="headerlink" href="#adc-2021" title="Permalink to this headline">¶</a></h2>

<p>I presented Bitrhythm in ADC ‘21.</p>
<p><a class="reference external" href="https://xyzzyapps.link/adc21">Slides</a></p>
<p>Video: TBD</p>
</div>
<div class="section" id="inspiration-for-the-project">
<h2>Inspiration for the project<a class="headerlink" href="#inspiration-for-the-project" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.</p>
<p>For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. <a class="reference external" href="https://www.youtube.com/watch?v=adz1Gv5Lm34">This library</a> in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.</p>
<p>After my initial work on the project in 2019, the project got sidetracked. After seeing <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a> I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.</p>
<p>The documentation for the literate programming project - wheel is <a class="reference external" href="https://xyzzyapps.link/wheel/">available here</a>.</p>
</div>
<div class="section" id="support-this-project">
<h2>Support this project<a class="headerlink" href="#support-this-project" title="Permalink to this headline">¶</a></h2>
<p>My goal is to make bitrhythm easy for both professionals and music learners. Support my work to get regular updates. Supporters will also get free accounts when I add pro features! Also get notified on latest developments and tutorials in the web audio world.</p>
<p><script src="https://gumroad.com/js/gumroad.js"></script><a class="gumroad-button" href="https://gumroad.com/l/iEVpN" target="_blank" rel="noopener"><span class="gumroad-button-logo"></span>Support Bitrhythm</a></p>
<p>You can find me on <a class="reference external" href="https://theaudioprogrammer.com/">theaudioprogrammer</a>, demoscene and algorave discord as &#64;xyzzy.</p>
</div>
</div>


              </div>
              
        

Changes to public/misc.js.

31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
...
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
        } 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);
................................................................................
            }
        }
    }
    return meta;
}

window.pattern_meta = pattern_meta;



function cue(html, seconds = 5) {
        $("#cued").html(html);
        setTimeout(function () {
            $("#cued").html("");
        }, seconds * 1000)







|
|
|
|
|
|







 







<







31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
...
239
240
241
242
243
244
245

246
247
248
249
250
251
252
        } else {
            return state;
        }
    }
}

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

function lettertodec(letter) {
        var bin = "";
        if (letter.match(/\d/)) {
            no = parseInt(letter);
................................................................................
            }
        }
    }
    return meta;
}

window.pattern_meta = pattern_meta;



function cue(html, seconds = 5) {
        $("#cued").html(html);
        setTimeout(function () {
            $("#cued").html("");
        }, seconds * 1000)

Deleted public/samples/bd01.wav.

cannot compute difference between binary files

Deleted public/samples/bd02.wav.

cannot compute difference between binary files

Deleted public/samples/bd03.wav.

cannot compute difference between binary files

Deleted public/samples/bd04.wav.

cannot compute difference between binary files

Deleted public/samples/bd05.wav.

cannot compute difference between binary files

Deleted public/samples/bd06.wav.

cannot compute difference between binary files

Deleted public/samples/bd07.wav.

cannot compute difference between binary files

Deleted public/samples/bd08.wav.

cannot compute difference between binary files

Deleted public/samples/bd09.wav.

cannot compute difference between binary files

Deleted public/samples/bd10.wav.

cannot compute difference between binary files

Deleted public/samples/cp01.wav.

cannot compute difference between binary files

Deleted public/samples/cp02.wav.

cannot compute difference between binary files

Deleted public/samples/cp03.wav.

cannot compute difference between binary files

Deleted public/samples/cp04.wav.

cannot compute difference between binary files

Deleted public/samples/cr01.wav.

cannot compute difference between binary files

Deleted public/samples/cr02.wav.

cannot compute difference between binary files

Deleted public/samples/cr03.wav.

cannot compute difference between binary files

Deleted public/samples/cr04.wav.

cannot compute difference between binary files

Deleted public/samples/hh01.wav.

cannot compute difference between binary files

Deleted public/samples/hh02.wav.

cannot compute difference between binary files

Deleted public/samples/hh03.wav.

cannot compute difference between binary files

Deleted public/samples/hh04.wav.

cannot compute difference between binary files

Deleted public/samples/ht01.wav.

cannot compute difference between binary files

Deleted public/samples/ht02.wav.

cannot compute difference between binary files

Deleted public/samples/ht03.wav.

cannot compute difference between binary files

Deleted public/samples/ht04.wav.

cannot compute difference between binary files

Deleted public/samples/ht05.wav.

cannot compute difference between binary files

Deleted public/samples/ht06.wav.

cannot compute difference between binary files

Deleted public/samples/ht07.wav.

cannot compute difference between binary files

Deleted public/samples/ht08.wav.

cannot compute difference between binary files

Deleted public/samples/lt01.wav.

cannot compute difference between binary files

Deleted public/samples/lt02.wav.

cannot compute difference between binary files

Deleted public/samples/lt03.wav.

cannot compute difference between binary files

Deleted public/samples/lt04.wav.

cannot compute difference between binary files

Deleted public/samples/lt05.wav.

cannot compute difference between binary files

Deleted public/samples/lt06.wav.

cannot compute difference between binary files

Deleted public/samples/lt07.wav.

cannot compute difference between binary files

Deleted public/samples/lt08.wav.

cannot compute difference between binary files

Deleted public/samples/mt01.wav.

cannot compute difference between binary files

Deleted public/samples/mt02.wav.

cannot compute difference between binary files

Deleted public/samples/mt03.wav.

cannot compute difference between binary files

Deleted public/samples/mt04.wav.

cannot compute difference between binary files

Deleted public/samples/mt05.wav.

cannot compute difference between binary files

Deleted public/samples/mt06.wav.

cannot compute difference between binary files

Deleted public/samples/mt07.wav.

cannot compute difference between binary files

Deleted public/samples/mt08.wav.

cannot compute difference between binary files

Deleted public/samples/oh01.wav.

cannot compute difference between binary files

Deleted public/samples/oh02.wav.

cannot compute difference between binary files

Deleted public/samples/oh03.wav.

cannot compute difference between binary files

Deleted public/samples/oh04.wav.

cannot compute difference between binary files

Deleted public/samples/rd01.wav.

cannot compute difference between binary files

Deleted public/samples/rd02.wav.

cannot compute difference between binary files

Deleted public/samples/rd03.wav.

cannot compute difference between binary files

Deleted public/samples/rd04.wav.

cannot compute difference between binary files

Deleted public/samples/rs01.wav.

cannot compute difference between binary files

Deleted public/samples/rs02.wav.

cannot compute difference between binary files

Deleted public/samples/sd01.wav.

cannot compute difference between binary files

Deleted public/samples/sd02.wav.

cannot compute difference between binary files

Deleted public/samples/sd03.wav.

cannot compute difference between binary files

Deleted public/samples/sd04.wav.

cannot compute difference between binary files

Deleted public/samples/sd05.wav.

cannot compute difference between binary files

Deleted public/samples/sd06.wav.

cannot compute difference between binary files

Deleted public/samples/sd07.wav.

cannot compute difference between binary files

Deleted public/samples/sd08.wav.

cannot compute difference between binary files

Deleted public/samples/sd09.wav.

cannot compute difference between binary files

Deleted public/samples/sd10.wav.

cannot compute difference between binary files

Deleted public/samples/sd11.wav.

cannot compute difference between binary files

Deleted public/samples/sd12.wav.

cannot compute difference between binary files

Deleted public/samples/sd13.wav.

cannot compute difference between binary files

Deleted public/samples/sd14.wav.

cannot compute difference between binary files

Deleted public/samples/sd15.wav.

cannot compute difference between binary files

Changes to source/changelog.md.

28
29
30
31
32
33
34













35
36
37
```
    Theme changes
    Lots of Docs
    Tutorials
    Working visuals
    Code Mirror Issue
```























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



28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
```
    Theme changes
    Lots of Docs
    Tutorials
    Working visuals
    Code Mirror Issue
```

Oct - Nov 2021 - ADC21

```
    Updated the sequencer notation
    Second Demo Song
    Autocommit
    Keyboard Bindings
    Reverting to setInterval
    Added code for p5
    Update the docs
```




Changes to source/demo.md.



1
2
3

4






















































































































































































































































































































































































5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
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
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


# Demo and Tutorial

## Video
























































































































































































































































































































































































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

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.

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])
................................................................................
     		p(6, "C3", "48n")
       }
    }

}
```


## Getting Started

This illustrates the core concepts of bitrhythm.

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

See <https://tonejs.github.io/> for more notes.

For an understanding of the global variables see the concepts and code walkthrough section.

    - patterns and track_no
    - isHit, current_bit
    - samples
    - Tone
    - cellx
    - window and any thing included with the script tag is available here

`mem` is short for memory. All instruments and effects are saved here so that they can be accessed everywhere.

Step to create the basic song.

1. Click on `Add Sample URL` to add the following URLs

    - /Kick01.wav
    - /Snare19.wav
    - /Closedhat01.wav
    - /MiscSynthStab04.wav

2. Click on `Add Dial`

3. Enter the following into the window

```
scene1 = [
    cellx("p 1000 1000 1000 1000"),
    cellx("p 00x0 00x0 00x0 00x0"),
    cellx("p 0000 x000 0000 x000"),
]

scene2 = [
    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);
    Sample("sn", 2);

    handlers["ex"] = function (val) {
        if (val > 0.5) {
            mem["start_snare"] = true;
        }
    }

    dials[0]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        handlers["ex"](val);
    })

}

if (bars <= 3 ) {
	transition = once;
} else {
	transition = tweak;
}

if (isHit) {
    if (track_no == 1) {
        p(0);
    }
    if (track_no == 2) {
        p(1);
    }
    if (track_no == 3) {
		if (mem["start_snare"]) {
            p(2);
        };
    }
}


```

Now try changing the code.

```
patterns = scene2
```

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.

Comment and Uncomment lines in the `if (isHit)` block. To mute and unmute sections.

*Note:* `mem["k0_channel"].solo = true;` is not working.

**Visuals**

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();
    }
}
```

**Tweaking**

First click `+ Number`. This is useful to check if the knob function is actually working. And click `+ Execute Once`

```
var tweak = function () {
    mem.k1 = knob({ramp : [0.09,1.8, 0.4, 2, 1.5, 1, 0.5, 3, 5, 8, 2], "number": numbers[0]["v"] });
    always = function () {
        mem["k0_filter"].frequency.value = mem.k1.move() * 1000;
    }
}
```

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

Tip: In Tone.js you can't call connect one after another, you need to use chain.

TODO: Add glide to Lead to make it more 303 sounding

Master is connected with Surround and Volume Limiter.
Use Gates and Limiters to avoid going deaf.

Tone.MultiInstrument gave lots of glitches, so custom voices are written in the voice function

Channels provide
- Mute
- Solo

More improvements for the Stab

    - Chorus or Phaser
    - Compressor
    - Decay in envelope
    - Separate filters
    - EQ
    - Sends for more delay
    - LFO for filters


Freeverb does not work and also needs Mono to function properly

```
var reverb = new Tone.Freeverb().toDestination();
var reverb_mono = new Tone.Mono().connect(reverb);
reverb.dampening = 100;
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
            }
        })
        mem[name + "_synth" + no].connect(mem[name + "_channel"]);
    }

    voice(1, "sawtooth")
    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");
}
```

>
>
|

<
>

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







<
<







 







|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<
<
<
<
<
<
<
<
<
<
<
<
<
<
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
...
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
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
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
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
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
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
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880














# Getting Started

## Tutorial


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

This illustrates the core concepts of bitrhythm.

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

See <https://tonejs.github.io/> for more notes.

For an understanding of the global variables see the concepts and code walkthrough section.

    - patterns and track_no
    - isHit, delta
    - samples
    - dials
    - Tone
    - cellx
    - window and any thing included with the script tag is available here

`mem` is short for memory. All instruments and effects are saved here so that they can be accessed everywhere.

Step to create the basic song.

1. Click on `Add Sample URL` to add the following URLs

    - /Kick01.wav
    - /Snare19.wav
    - /Closedhat01.wav
    - /MiscSynthStab04.wav

2. Click on `Add Dial`

3. Enter the following into the window

```
scene1 = [
    cellx("p 1000 1000 1000 1000"),
    cellx("p 00x0 00x0 00x0 00x0"),
    cellx("p 0000 x000 0000 x000"),
]

scene2 = [
    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);
    Sample("sn", 2);

    handlers["ex"] = function (val) {
        if (val > 0.5) {
            mem["start_snare"] = true;
        }
    }

    dials[0]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        handlers["ex"](val);
    })

}

if (bars <= 3 ) {
    transition = once;
} else {
    transition = tweak;
}

if (isHit) {
    if (track_no == 1) {
        p(0);
    }
    if (track_no == 2) {
        p(1);
    }
    if (track_no == 3) {
        if (mem["start_snare"]) {
            p(2);
        };
    }
}


```

Now try changing the code.

```
patterns = scene2
```

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.

Comment and Uncomment lines in the `if (isHit)` block. To mute and unmute sections.

*Note:* `mem["k0_channel"].solo = true;` is not working.

**Visuals**

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();
    }
}
```

**Tweaking**

First click `+ Number`. This is useful to check if the knob function is actually working. And click `+ Execute Once`

```
var tweak = function () {
    mem.k1 = knob({ramp : [0.09,1.8, 0.4, 2, 1.5, 1, 0.5, 3, 5, 8, 2], "number": numbers[0]["v"] });
    always = function () {
        mem["k0_filter"].frequency.value = mem.k1.move() * 1000;
    }
}
```

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

### Making a basic loop

- Kick + Filter
- Snare + Filter
- Snare + Filter + Delay
- High Hat
- Lead + Filter
- Dub Stab + Filter + Reverb

Tip: In Tone.js you can't call connect one after another, you need to use chain.

TODO: Add glide to Lead to make it more 303 sounding

Master is connected with Surround and Volume Limiter.
Use Gates and Limiters to avoid going deaf.

Tone.MultiInstrument gave lots of glitches, so custom voices are written in the voice function

Channels provide
- Mute
- Solo

More improvements for the Stab

    - Chorus or Phaser
    - Compressor
    - Decay in envelope
    - Separate filters
    - EQ
    - Sends for more delay
    - LFO for filters


Freeverb does not work and also needs Mono to function properly

```
var reverb = new Tone.Freeverb().toDestination();
var reverb_mono = new Tone.Mono().connect(reverb);
reverb.dampening = 100;
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
            }
        })
        mem[name + "_synth" + no].connect(mem[name + "_channel"]);
    }

    voice(1, "sawtooth")
    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");
}
```


## Demo Song 1 // Techno

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

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.

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.  



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])
................................................................................
     		p(6, "C3", "48n")
       }
    }

}
```

## Demo Song 2 // UK Hip Hop

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

```js
volume_guard1 = guard([-20,15])
Tone.Master.volume.value = volume_guard1(Math.round(dials[0]["cell"]() * 30) -20);

intro = [
   cellx("p x000 0000 0000 0000 "),
]

main = [
    cellx("p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 "),
    cellx("p 0000 x000 0000 x000 "),
    cellx("p x0x0 x0x0 x0x0 x0x0 "),
    cellx("p x000 0000 0000 0000 "),
    cellx("p 0000 0000 0000 0000"),
    cellx("p 0000 0000 0000 0000"),
]

bass = [
    cellx("p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 "),
    cellx("p 0000 x000 0000 x000 "),
    cellx("p x0x0 x0x0 x0x0 x0x0 "),
    cellx("p x000 0000 0000 0000 "),
    cellx("p x[^B2]x.00 x[^B2]x.x[^B2]x. x[^B2]x.x[^B2]x.x[^B2]x.0 "),
    cellx("p 00x[^D3]0 000x[^A2] 00x[^A2]x[^A2] 0x[^A2]0x[^A2] "), 
]

end = [
    cellx("p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 "),
    cellx("p 0000 x000 0000 x000 "),
    cellx("p x10x0 x0x0 x0x0 x0x0 "),
]

solo = [
    cellx("p 0000 0000 0000 0000"),
    cellx("p 0000 0000 0000 0000"),
    cellx("p 0000 0000 0000 0000"),
]

fin = solo;

endgame = [
    cellx("p x[2;^C2;+0.01]000 0000 x[0.1]0x[1]0 00x[1]0 "),
    cellx("p 0000 x000 0000 x000 "),
    cellx("p x0x0 x0x0 x0x0 x0x0 "),
    cellx("p x000 0000 0000 0000 "),
    cellx("p x[^B2]x.00 x[^B2]x.x[^B2]x. x[^B2]x.x[^B2]x.x[^B2]x.0 "),
]




empty = cellx("p 0000 0000 0000 0000")


function once () {
 
    
        const setup = ( instance ) => {
        var intro = []
        var main = []
        var bass = main
        var end = [] 
        var solo = end
        var fin = end
       
       var count = 0;
        var old_scene = "";
        
        

        let x = 100;
        let y = 100;

        instance.setup = function() {
            var x = instance.createCanvas(1280, 410);
            x.canvas.style.position = "absolute";
            instance.frameRate(0.25);
            intro.push(instance.loadImage('/closed/intro/1.png'));
            main.push(instance.loadImage('/closed/main/1.png'));
            main.push(instance.loadImage('/closed/main/2.png'));
            main.push(instance.loadImage('/closed/main/3.png'));
             main.push(instance.loadImage('/closed/main/4.png'));
              main.push(instance.loadImage('/closed/main/5.png'));
               main.push(instance.loadImage('/closed/main/6.png'));
                main.push(instance.loadImage('/closed/main/7.png'));
            end.push(instance.loadImage('/closed/end/1.png'));
        };

        instance.draw = function() {
            if (old_scene != current_scene) {
                old_scene = current_scene;
                count = 0;
            }
           instance.clear();
            var c = eval(`${current_scene}`)
            instance.image(c[count], 0, 0);
            count += 1
            count = count % c.length;

        };
    };

    let myp5 = new p5(setup,  document.getElementById('canvas-container'));


    Tone.Master.volume.value = -30

    dials[2]["cell"](1)
    mem["master_filter"] = new Tone.Filter(10000, 'lowpass', -96);
    mem["master_stereo"] = new Tone.StereoWidener({width: 0.50});
    
    dials[2]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        var cutoff_guard = guard([10, 20000]);
        mem["master_filter"].frequency.value = cutoff_guard(val * 10000);
    })
    
    dials[3]["cell"](0)
    
    dials[3]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        var volume_guard1 = guard([0,1])
        audio.master.in.gain.value = volume_guard1(val / 10);
    })
    
    mem.master = new Tone.Channel({channelCount: 2, volume: -10}).chain(  mem["master_filter"],  mem["master_stereo"], Tone.Destination);
    Sample("k", 0, null, -5);
    Sample("sn1",1, null, 0);
    Sample("h",2, 5000, -35);
    Sample("m",3, null, -15);
    Sample("f",4, null, -15);
    
    name = "s"
    filter = 2000
    volume = -15 
    mem[name + "_filter"] = new Tone.Filter(filter, 'lowpass', -96);
    mem[name + "_delay"] = new Tone.FeedbackDelay("4n", 0.4);
    mem[name + "_channel"] = new Tone.Channel({channelCount: 2, volume: volume, pan: -0.25}).chain(mem[name + "_filter"],   mem[name + "_delay"], mem.master)
    samples[5].connect(mem[name + "_channel"]);
    hit_map[name] = 5;
  
  

    
    
    Sample("manager",6, null, -5);
    Sample("order",7, null, -15);
    Sample("cr",8, null, -15);
    Sample("piano",9, 400, -5);
    Sample("sitar",10, 5000, -15);
    
    const audio = Audio();
    const three = ThreeOhUnit(audio, "sawtooth", {
            "cutoff": 78,
            "resonance": 15,
            "envMod": 4000,
            "decay": 0.5
        }
    )
    audio.master.in.gain.value = 0;
    mem["three"] = three
    
    // cutoff [30, 700], 400
    // resonance: [1, 30], 15
    // envMod: [0, 8000], 4000
    // decay: [0.1, 0.9], 0.5
    
    dials[1]["cell"](0.07825)

    dials[1]["cell"].onChange(function (e) {
        var val = parseFloat(e["data"].value);
        cutoff_guard = guard([30, 700]);
        three.params.cutoff.value = cutoff_guard(val * 1000);
    })
    
    
    mem.k1 = knob({ramp : [0.525, 0.8, 0.4, 0.25, 0.75, 0.25], step: 0.005, "number": dials[1]["cell"] });
    always = function () {
        let cutoff_guard = guard([30, 900]);
        three.params.cutoff.value = cutoff_guard(mem.k1.move() * 1000);
    }
}

function tweak() {
 
    var snare_count = cellx(0);
    
        
    snare_count.onChange(function (e) {
        var val = parseInt(e["data"].value);
        if (val == 22) {
            current_scene = "fin";
             p1(8, null, null, 12.25);
        } 
    })
    
    
    
    Mousetrap.bind(['f2'], function(e) {
    
        snare_count(snare_count() + 1)
        if (snare_count() <= 20) {
          setTimeout(function () {
              p(0, null, null, "24n", null );
                setTimeout(function () {
                    p(8, null, null, "2n" );
                    p(10, 0.5, "A2", 1);
                }, delta * 2)
  
          }, delta * 1.5)
        }
        
        return false;
    })


    
}



transition = once;

if (bars <= 2) {
    current_scene = "intro";
} else {
//       mem["three"].step("off");
if (bars == 3) {
    eval_guard ? cue("Start intro") : "";
    current_scene = "intro";

}

if (bars == 5) {
    eval_guard ? cue("Start drums") : "";
        current_scene = "main";
}


if (bars == 12) {
    eval_guard ? cue("Add bass"): "";
    current_scene = "bass";

}

if (bars == 32) {
    eval_guard ?cue("Reverse "): "";
    current_scene = "bass";

}

if (bars == 42) {
    eval_guard ? cue("End "): ""
    current_scene = "end";

}

if (bars == 48) {
    eval_guard ? cue("Solo "): ""
    current_scene = "solo";
}


    transition = tweak;
}


patterns = eval(`${current_scene}`);
always();

if (track_no == 1) {
if (count == 0) {
    cue("Sample")
    p1(7, null, null, 12.25);
}
}

     

if (isHit) {
    if (current_scene == "intro") {
        if (track_no == 1) {
          p(3, null, null, "1n");
        }
    } else if (current_scene == "fin") {
   
    } else if (current_scene == "solo") {

 
    } else if (current_scene == "end") {
        if (track_no == 1) {
            p(0, meta[tick]["volume"], meta[tick]["pitch"], "24n", meta[tick]["delay"] );
        }
        if (track_no == 2) {
            p(1);
        }
        if (track_no == 3) {
            p(2)
        }
        
    } else if (current_scene == "main") {
        if (track_no == 1) {
            p(0, meta[tick]["volume"], meta[tick]["pitch"], "24n", meta[tick]["delay"] );
        }
        if (track_no == 2) {
            p(1);
        }
        if (track_no == 3) {
            p(2)
        }
        if (track_no == 4) {
            p(3, null, null, "1n");
        }
        if (track_no == 5) {
            if (meta[tick]["pitch"]) {
              //  mem["three"].step({"glide": true, "accent": false, "note": meta[tick]["pitch"]});
            } else {
              //  mem["three"].step("off");
            }
        }
        if (track_no == 6) {
           p(5, null, meta[tick]["pitch"], "1n");
        }
    
     } else if (current_scene == "bass") {
        if (track_no == 1) {
          p(0, meta[tick]["volume"], meta[tick]["pitch"], "24n", meta[tick]["delay"] );
        }
        if (track_no == 2) {
            p(1);
        }
        if (track_no == 3) {
           p(2)
        }
        if (track_no == 4) {
            p(3, null, null, "1n");
        }
        if (track_no == 5) {
            if (meta[tick]["pitch"]) {
                mem["three"].step({"glide": true, "accent": false, "note": meta[tick]["pitch"]});
            } else {
                mem["three"].step("off");
            }
        }
        if (track_no == 6) {
 //          p(5, 0.15, meta[tick]["pitch"], 1);
        //  p(9, 1, meta[tick]["pitch"], 1);

        }
    } 


}
```















Changes to source/limitations.md.

1




2
3
4
5
6
7
8
9
10
# Limitations and Recording





- Opening developer tools might slow down the execution a bit
- Using excessive delays and reverbs seems to cause some glitches
- Mobile browsers don't work properly
- Firefox does not seem to work well with tone.js

I use [BlackHole](https://existential.audio/blackhole/) to record audio from the browser window to Reaper. You can use any screenrecording software to record the screen. Have a distinct sound to match both audio and video.  


|
>
>
>
>









1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Saving and other limitations

There is a save button that converts the state of bitrhythm into a url paramter. This means there is an upper limit on how much code you can write, making it useful for demoscene like situations. You can share the url with tinyurl.

You can also download the file. Please keep a backup.

- Opening developer tools might slow down the execution a bit
- Using excessive delays and reverbs seems to cause some glitches
- Mobile browsers don't work properly
- Firefox does not seem to work well with tone.js

I use [BlackHole](https://existential.audio/blackhole/) to record audio from the browser window to Reaper. You can use any screenrecording software to record the screen. Have a distinct sound to match both audio and video.  


Changes to source/main.cog.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
....
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
....
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
....
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
@<
@>
This is just a sample
Copyright (C) 2021 Xyzzy Apps
See https://bitrhythm.xyzzyapps.link/docs/source-code.html for the latest source code
@@

# Concepts and Code Walkthrough

@<
import cog
import os

if DEV == "1":
    stuff = """
................................................................................
    </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>
                
                <h5 class="ml-4"><a  href="/song/XQAAAAInBwAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9OTB7Y34cZmeLb5MKZic7bXMO7vWrjHyfc2FvIP0v1Gp--NY5tUsY7sQ71Zzph5WmKUZ2oNtnxz8-HaVpK1SGQzEOq3-lWkeJ76a2J8Ng2OEZxOMNAk6VTnu8fRRTToMlowDe3wjs8DorsxdnW49ThFhGbOek4QAwzPneapDmjuDKRqiqN3btgnfZDzokeOTh6CzwAI2rBbL07YUBEFaMziOJ_2X59eW5g03eCnL7GlOCk2u6_22WnYgZPbc3RuJLf8JLAhbDrXvZHyYekrPuGo_R6V2BCPE14rZFFwJQWEqy_KDtH_YPMhj1TPS62qcPr6qAWrI9nsndpRrczwBFChHSPKiZXjCZJZKH1Kh19A4-vpXwbr1BCiNdOTQ89KKv0OXpIFUMwx5Qd5jsrb2c-hywM688F9TJtPD1rEewoJTzhpRrD0wuMN5kqGTvR2iDS2BFmWQl0GGgvUAT6D640GnQYMCeTfwpSTG7Wnq_PboBCyG_2-kdbDDHL4zgalHx4cqxZhEyUZT6bcp-kPiYnAeWzCn7Sj085jX-Cc40akEEZgjYSrwUisGwSOiePi8t-eQ5P-akBrtCgHdmnQ7rfsErnufae_Ydu2dlElNjDgk2c9CJus8ihzwpGF6FEIRuZqplgDOAgnUy9JPurT8H4dKaXV3DqhLxOhd2EGuELO7kgh67Zi_uvaOkMv1MU3VxwAnC41eJrW_VYum8p2cAvxdBi49jJZ1z9yhZAwQIYfxdSq5ECX-G7FX2drYkAYexBBepkbQzSnPrR3s5xsIRraOIbtQZwIOTfyGvTuHMrO4LlOE4Llpqt549tLwGYs0mrWp6bYksGQHS8fgAIFHyoua3VtyjlgCLaQGi8nJxp0TgsZQ60wPXf7GyXxcZ-bVZSVHGskukkCwhCuggcS_8rA6kA">Demo Song</a></h5>

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

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

    <script>
        riot.compile(function() {
................................................................................
        } 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);
................................................................................
            }
        }
    }
    return meta;
}

window.pattern_meta = pattern_meta;



function cue(html, seconds = 5) {
        $("#cued").html(html);
        setTimeout(function () {
            $("#cued").html("");
        }, seconds * 1000)







|







 







|
|

|

|







 







|
|
|
|
|
|







 







<







1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
....
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
....
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
....
1568
1569
1570
1571
1572
1573
1574

1575
1576
1577
1578
1579
1580
1581
@<
@>
This is just a sample
Copyright (C) 2021 Xyzzy Apps
See https://bitrhythm.xyzzyapps.link/docs/source-code.html for the latest source code
@@

# Code Walkthrough

@<
import cog
import os

if DEV == "1":
    stuff = """
................................................................................
    </script>

    </head>

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

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

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

    <script>
        riot.compile(function() {
................................................................................
        } else {
            return state;
        }
    }
}

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

function lettertodec(letter) {
        var bin = "";
        if (letter.match(/\d/)) {
            no = parseInt(letter);
................................................................................
            }
        }
    }
    return meta;
}

window.pattern_meta = pattern_meta;



function cue(html, seconds = 5) {
        $("#cued").html(html);
        setTimeout(function () {
            $("#cued").html("");
        }, seconds * 1000)

Changes to source/main.md.

1
2
3
4
5
6
7
8
9
...
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
....
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120

# Concepts and Code Walkthrough


## Core Tracker Loop

In bitrhythm code is evaluated for every cycle.

1 beat = 60 / tempo
................................................................................
        } 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);
................................................................................
            }
        }
    }
    return meta;
}

window.pattern_meta = pattern_meta;



function cue(html, seconds = 5) {
        $("#cued").html(html);
        setTimeout(function () {
            $("#cued").html("");
        }, seconds * 1000)

|







 







|
|
|
|
|
|







 







<







1
2
3
4
5
6
7
8
9
...
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
....
1106
1107
1108
1109
1110
1111
1112

1113
1114
1115
1116
1117
1118
1119

# Code Walkthrough


## Core Tracker Loop

In bitrhythm code is evaluated for every cycle.

1 beat = 60 / tempo
................................................................................
        } else {
            return state;
        }
    }
}

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

function lettertodec(letter) {
        var bin = "";
        if (letter.match(/\d/)) {
            no = parseInt(letter);
................................................................................
            }
        }
    }
    return meta;
}

window.pattern_meta = pattern_meta;



function cue(html, seconds = 5) {
        $("#cued").html(html);
        setTimeout(function () {
            $("#cued").html("");
        }, seconds * 1000)

Deleted source/saving.md.

1
2
3
4
5
6
7
# Saving and Sharing

There is a save button that converts the state of bitrhythm into a url paramter. This means there is an upper limit on how much code you can write, making it useful for demoscene like situations. You can share the url with tinyurl.

To make a complete song use `bars` to trigger multiple transitions.


<
<
<
<
<
<
<














Changes to source/tweaking.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
..
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
# 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,   


Classical Music: Counterpoint and Harmony  
Rock: Call Response   

Now EDM - Dub, Techno and Jungle - are distinct musical genres. What could they possibly share ?


1. All three uphold the primacy of Rhythm for start.
2. All three are instrumental.
3. Voices are used sparingly as samples.
4. All three have a tradition of live acts.
5. Dub Plates are common for these genres.
6. Melody is nothing but a repeating stab (motif)

If you want to add a solo to EDM, you typically add a live instrument.


Dub Music is made by messing with the Recording Engineer's Mixing desk. A prime example of tweaking.



<iframe width="420" height="315" src="https://www.youtube.com/embed/oJs1wR8tLr4" frameborder="0" allowfullscreen></iframe>


Techno is made by messing with Hardware or Hardware + Software.  Tweaking + Layering.



<iframe width="560" height="315" src="https://www.youtube.com/embed/ppEhaH3jSzo" frameborder="0" allowfullscreen></iframe>


Jungle is used as a catch all for Breakbeat, Hardcore as well. Jungle Music is made by messing with Hardware + Software combo. Complex Layering is used here.

<iframe width="560" height="315" src="https://www.youtube.com/embed/q72qoGYirwU" frameborder="0" allowfullscreen></iframe>

Bitrhythm only supports rhythmic notations and is geared towards electronic music. My current goal is to produce an IDM track and Chiptune with it with complex rhythmic patterns. As for techno the current setup seems alright. Support will be added in the future for pitch manipulation in a different module or a different project. There is a piano module in the code with midi support but its currently deactivated.

You can treat a musical scale as no different than a drumset. The pentatanic scale approximately maps to a drumset and you can use techniques from [melodic drumming](https://www.youtube.com/watch?v=1qdyxML4tF0) with multiple samples. This is typically how drummers approach guitars.

## Is Bitrhythm Maths heavy ?

You will need some basic maths operations to understand and use bitrhythm effectively. These operations are about working with lists of numbers and lists of strings.

Some common operations on lists include

................................................................................
2. Neo-Riemannian_theory, Combinatory theory
3. Sacred Geometry
4. Circle of fifths, chord progressions
5. Set transformations like inversion on Scales
6. Licks from books
7. Randomness, I Ching, Playing Cards

## DJ Controls

```{todo}
Expand
```

Essentially a DJ is like a conductor. Loops are like individual instrumentalists.

1. Cueing -> Mute / Solo
2. Dynamics -> Volume
3. Ornamentation -> Cutoff
5. Tempo, Beat Counting -> Beat Matching

## Music is arrangement

<iframe width="420" height="315" src="https://www.youtube.com/embed/tprMEs-zfQA" frameborder="0" allowfullscreen></iframe>

## See Also

In screenplays you also have a [setup / payoff](https://www.youtube.com/watch?v=cG5zKwmXLgo) dynamic.

Setup
- Obstacles
- Challenges
- Forces
- Context

|

|

|

|

>
>
>
>
|


|

<
>

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

<
>

<
>
>

<
>

<
>

>
|
<
>
|

|
<
<
<
<







 







<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
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
..
86
87
88
89
90
91
92



























# Core Features

## Sequencer Notation

Bitrhythm only supports rhythmic notations and is geared towards electronic music. My current goal is to produce an IDM track, a DNB track and a Chiptune with complex rhythmic patterns. As for Techno the current setup seems alright but more support for DJ style transitions are needed.

You can treat a musical scale as no different than a drumset. The pentatanic scale approximately maps to a drumset and you can use techniques from [melodic drumming](https://www.youtube.com/watch?v=1qdyxML4tF0) with multiple samples. This is typically how drummers approach guitars.

## Tweaking and Transitions

These are key to making electronic music. Tweaking is also called Automation and knob-twisting by hardware users. 

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 - scenes. 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 screenplays you also have a [setup / payoff](https://www.youtube.com/watch?v=cG5zKwmXLgo) dynamic.






Setup
- Obstacles
- Challenges
- Forces
- Context




In Electronic Music the foreground is mainly developed via Tweaking. Tweaking effectively functions for the purposes of Exposition and Conflict. Chorus, Fade, Drop are used for transitions typically in electronic music. To compare the foreground in others,   


Classical Music: Counterpoint and Harmony<br>
Rock: Call Response<br>  


To make a complete song in bitrhythm use `bars` to trigger multiple transitions.


Essentially a DJ is like a conductor. Loops are like individual instrumentalists.

1. Cueing -> Mute / Solo
2. Dynamics -> Volume

3. Ornamentation -> Cutoff
5. Tempo, Beat Counting -> Beat Matching

<iframe width="420" height="315" src="https://www.youtube.com/embed/tprMEs-zfQA" frameborder="0" allowfullscreen></iframe>





## Is Bitrhythm Maths heavy ?

You will need some basic maths operations to understand and use bitrhythm effectively. These operations are about working with lists of numbers and lists of strings.

Some common operations on lists include

................................................................................
2. Neo-Riemannian_theory, Combinatory theory
3. Sacred Geometry
4. Circle of fifths, chord progressions
5. Set transformations like inversion on Scales
6. Licks from books
7. Randomness, I Ching, Playing Cards




























Changes to source/what.cog.

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
..
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
# What is bitrhythm about ?

Currently this is how you can use code with music,

1. VST plugins
2. DAW scripting
3. Embedded code to interact with electronics
4. ML approaches
5. Live coding
6. Use some weird algorithms / number sequences / hardcoded chords / random numbers
7. Web Audio / Audio Programming languages

Bitrhythm offers 4-7.  In Bitrhythm you get a coding playground to explore and learn webaudio and webgl apis for the purposes of

1. live visual programming
2. live audio programming
3. music sequencing
4. interactive music
5. audio visualisation
6. music learning

Apart from the core html apis, you can also use the following libraries

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
................................................................................
@<
import common
cog.out(common.external_libraries)
@>
@@
```

## 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.

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

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

## Support this project

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

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

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




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







|







 







|

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



|









|

<
1
2
3

















4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
..
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

# What is bitrhythm about ?

In Bitrhythm you get a coding playground to make music with webaudio, canvas and webgl apis. You can share the final track as a URL which enables interactive music with your listener. The url size limit acts as a contraint on creativity.


















Apart from the core html apis, you can also use the following libraries

1. Tuna
2. Timbral
3. Tone.js
4. Underscore / Rambda
5. cellx (observers)
6. Magenta.js (Machine Learning)
7. P5.js / D3
8. Winamp Visualisations (butterchurn)

```{code-block} html
---
force: true
................................................................................
@<
import common
cog.out(common.external_libraries)
@>
@@
```

A few things implemented from scratch in Bitrhythm are,

1. DSL for describing music sequences - similar to the tracker notation
2. A core Music Loop that runs your javascript code, with an edit mode
3. A knob and guard abstraction for programming automation

You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.

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

## ADC 2021

I presented Bitrhythm in ADC '21. 

[Slides](https://xyzzyapps.link/adc21)

Video: TBD

## Inspiration for the project

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

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

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

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

## Support this project

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

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

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


Changes to source/what.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
..
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
# What is bitrhythm about ?

Currently this is how you can use code with music,

1. VST plugins
2. DAW scripting
3. Embedded code to interact with electronics
4. ML approaches
5. Live coding
6. Use some weird algorithms / number sequences / hardcoded chords / random numbers
7. Web Audio / Audio Programming languages

Bitrhythm offers 4-7.  In Bitrhythm you get a coding playground to explore and learn webaudio and webgl apis for the purposes of

1. live visual programming
2. live audio programming
3. music sequencing
4. interactive music
5. audio visualisation
6. music learning

Apart from the core html apis, you can also use the following libraries

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/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.

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

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

## Support this project

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

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

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




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







|







 







|

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



|









|

<
1
2
3

















4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
..
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

# What is bitrhythm about ?

In Bitrhythm you get a coding playground to make music with webaudio, canvas and webgl apis. You can share the final track as a URL which enables interactive music with your listener. The url size limit acts as a contraint on creativity.


















Apart from the core html apis, you can also use the following libraries

1. Tuna
2. Timbral
3. Tone.js
4. Underscore / Rambda
5. cellx (observers)
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/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>
```

A few things implemented from scratch in Bitrhythm are,

1. DSL for describing music sequences - similar to the tracker notation
2. A core Music Loop that runs your javascript code, with an edit mode
3. A knob and guard abstraction for programming automation

You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.

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

## ADC 2021

I presented Bitrhythm in ADC '21. 

[Slides](https://xyzzyapps.link/adc21)

Video: TBD

## Inspiration for the project

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

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

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

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

## Support this project

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

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

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


Changes to templates/index.html.

171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
    </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>
                
                <h5 class="ml-4"><a  href="/song/XQAAAAInBwAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9OTB7Y34cZmeLb5MKZic7bXMO7vWrjHyfc2FvIP0v1Gp--NY5tUsY7sQ71Zzph5WmKUZ2oNtnxz8-HaVpK1SGQzEOq3-lWkeJ76a2J8Ng2OEZxOMNAk6VTnu8fRRTToMlowDe3wjs8DorsxdnW49ThFhGbOek4QAwzPneapDmjuDKRqiqN3btgnfZDzokeOTh6CzwAI2rBbL07YUBEFaMziOJ_2X59eW5g03eCnL7GlOCk2u6_22WnYgZPbc3RuJLf8JLAhbDrXvZHyYekrPuGo_R6V2BCPE14rZFFwJQWEqy_KDtH_YPMhj1TPS62qcPr6qAWrI9nsndpRrczwBFChHSPKiZXjCZJZKH1Kh19A4-vpXwbr1BCiNdOTQ89KKv0OXpIFUMwx5Qd5jsrb2c-hywM688F9TJtPD1rEewoJTzhpRrD0wuMN5kqGTvR2iDS2BFmWQl0GGgvUAT6D640GnQYMCeTfwpSTG7Wnq_PboBCyG_2-kdbDDHL4zgalHx4cqxZhEyUZT6bcp-kPiYnAeWzCn7Sj085jX-Cc40akEEZgjYSrwUisGwSOiePi8t-eQ5P-akBrtCgHdmnQ7rfsErnufae_Ydu2dlElNjDgk2c9CJus8ihzwpGF6FEIRuZqplgDOAgnUy9JPurT8H4dKaXV3DqhLxOhd2EGuELO7kgh67Zi_uvaOkMv1MU3VxwAnC41eJrW_VYum8p2cAvxdBi49jJZ1z9yhZAwQIYfxdSq5ECX-G7FX2drYkAYexBBepkbQzSnPrR3s5xsIRraOIbtQZwIOTfyGvTuHMrO4LlOE4Llpqt549tLwGYs0mrWp6bYksGQHS8fgAIFHyoua3VtyjlgCLaQGi8nJxp0TgsZQ60wPXf7GyXxcZ-bVZSVHGskukkCwhCuggcS_8rA6kA">Demo Song</a></h5>

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

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

    <script>
        riot.compile(function() {







|
|

|

|







171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
    </script>

    </head>

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

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

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

    <script>
        riot.compile(function() {