PageSourceSearch

https://teropa.info/loop/

html teropa.info collected 2026-10-03 19:02:51 UTC 50,232 bytes, 968 lines download raw bytes

1<html>
2  <head>
3    <title>How Generative Music Works</title>
4    <meta name="viewport" content="width=device-width, initial-scale=1">
5    <meta charset="utf-8">
6  <link href="main.54e7500caa24b03b8d84635513477cb4.css" rel="stylesheet"></head>
7  <body>
8    <div id="impress" data-width="1600" data-height="900">
9        <div id="title" class="step" data-x="-500" data-y="-900">
10            <h1>How Generative Music Works</h1>
11            <h2>A Perspective</h2>
12            <footer style="opacity: 0">
13              <span class="mode-read">Use space bar to advance</span>
14              <span class="mode-present">@teropa</span>
15            </footer>
16        </div>
17        <div id="generative" class="step centered-content" data-x="-500" data-y="0">
18          <h2>
19            This presentation is about making music<br>
20            by designing systems that make music.
21          </h2>
22        </div>
23        <div id="systemdefinition" class="step centered-content future" data-x="-570" data-y="80" data-scale="0.2">
24          <div class="card">
25            <h3><em>System</em></h3>
26            <ol>
27              <li><span class="mechanism">A set of things working together as parts of a mechanism</span> or an interconnecting network; a complex whole.</li>
28              <li class="scheme">A set of principles or procedures according to which something is done; an organized scheme or method.</li>
29            </ol>
30            <em>Oxford English Dictionary</em>
31          </div>
32        </div>
33        <div id="itsgonnarain" class="step centered-content future" data-x="-2600" data-y="-200" data-scale="1">
34          <div class="text-content">
35            <p class="state state-init mode-read">
36              For his 1965 composition &ldquo;It's Gonna Rain&rdquo;, Steve Reich
37              designed a generative mechanical system.
38            </p>
39            <p class="state state-init mode-present">
40              Steve Reich: It's Gonna Rain (1965)
41            </p>
42            <p class="state state-recorders mode-read is-hidden">
43              It was a system of two tape recorders.
44            </p>
45            <p class="state state-recorders mode-present is-hidden">
46              A system of two tape recorders
47            </p>
48            <p class="state state-speech mode-read is-hidden">
49              Reich had made field recordings of speech on tape.
50            </p>
51            <p class="state state-speech mode-present is-hidden">
52              With recorded speech
53            </p>
54            <p class="state state-loops mode-read is-hidden">
55              He made two short identical loops from his recordings. One for each tape recorder.
56            </p>
57            <p class="state state-loops mode-present is-hidden">
58              Two identical loops
59            </p>
60            <p class="state state-speeds mode-read is-hidden">
61              The tape recorders were set to slightly different speeds.<br>
62              One would play a little faster than the other.
63            </p>
64            <p class="state state-speeds mode-present is-hidden">
65              With slightly different speeds
66            </p>
67            <p class="state state-process mode-read is-hidden">
68              This started a <em>phasing</em> process. A continuously changing soundscape was generated from the short loops.
69            </p>
70            <p class="state state-process mode-present is-hidden">
71              A generative phasing process
72            </p>
73            <div class="state state-quote is-hidden">
74              <blockquote>
75                  <p>Though I may have the pleasure of discovering musical processes and composing the
76                    musical material to run through them, once the process is set up and loaded it runs by
77                    itself.</p>
78              </blockquote>
79              <p class="quote-attrib">Steve Reich, <a href="http://www.bussigel.com/systemsforplay/wp-content/uploads/2014/02/Reich_Gradual-Process.pdf" target="_blank">Music as a Gradual Process</a>, 1968.</p>
80            </div>
81          </div>
82          <div class="vis">
83            <canvas class="canvas"></canvas>
84          </div>
85          <div class="controls" style="opacity: 0">
86            <div class="pad"></div>
87            <div class="playpause">
88              <button class="play-button">&#9658;</button>
89              <button class="pause-button" style="display: none;">&#10073;&#10073;</button>
90            </div>
91            <input type="range" min=0 max=10000 step=0.1 value=0>
92            <div class="pad"></div>
93          </div>
94          <footer class="clip-src" style="opacity: 0">
95              Clip from a <a href="https://www.youtube.com/watch?v=yg7kKJsFpvc" target="_blank">Steve Reich interview on q on CBC</a>.
96          </footer>
97        </div>
98        <div id="reichphasing" class="step centered-content future" data-x="-3900" data-y="25" data-scale="0.5">
99          <div class="text-content">
100            <p class="mode-read">Once Reich had discovered this generative process in tape, he applied it to other media.</p>
101            <p class="mode-present">Reich's phasing process in other media</p>
102          </div>
103          <div class="videos">
104            <figure class="pendulum">
105              <div class="vidcontainer"><img></div>
106              <figcaption>Steve Reich: Pendulum Music. <br><a href="https://www.youtube.com/watch?v=fU6qDeJPT-w" target="_blank">Interpretation by Joan Cerver&#xF3;, V&#xED;ctor Trescol&#xED;, Isabel Le&#xF3;n, Estefan&#xED;a S&#xE1;nchez</a>.</figcaption>
107            </figure>
108            <figure class="pianophase">
109              <div class="vidcontainer"><img></div>
110              <figcaption>Steve Reich: Piano Phase. <br><a href="http://www.chenalexander.com/Piano-Phase" target="_blank">Visualization by Alexander Chen</a>.</figcaption>
111            </figure>
112          </div>
113        </div>
114        <div id="airports" class="step future" data-x="-2600" data-y="800">
115          <div class="text-content">
116            <p class="state state-init mode-read">
117              Brian Eno was inspired by &ldquo;It's Gonna Rain&rdquo;, and used the same phasing process on &ldquo;Music for Airports&rdquo; in 1978.
118            </p>
119            <p class="state state-init mode-present">
120              Brian Eno: Music for Airports (1978)
121            </p>
122            <p class="state state-recorders mode-read is-hidden">
123              His design had seven tape recorders instead of two.
124            </p>
125            <p class="state state-recorders mode-present is-hidden">
126              A system of seven tape recorders
127            </p>
128            <p class="state state-loops mode-read is-hidden">
129              And the tape loops were a lot longer. Each had slightly different length.
130            </p>
131            <p class="state state-loops mode-present is-hidden">
132              With long loops, different length for each
133            </p>
134            <p class="state state-notes mode-read is-hidden">
135              Eno recorded one musical note on each loop.
136            </p>
137            <p class="state state-notes mode-present is-hidden">
138              One musical note per loop                
139            </p>
140            <p class="state state-play mode-read is-hidden">
141              This is the system that generated track 2 of &ldquo;Music for Airports&rdquo;.
142            </p>
143            <p class="state state-play mode-present is-hidden">
144              A generative phasing process
145            </p>
146            <div class="state state-quote is-hidden">
147              <blockquote>
148                <p>The thing about pieces like this is that they are actually of almost infinite length.
149                They simply don't reconfigure the same way again. This is music for free in a sense. The considerations that are important, then, become questions of how the system works and most important of all, what you feed into the system.</p>
150              </blockquote>
151              <p class="quote-attrib">Brian Eno, <a href="http://www.inmotionmagazine.com/eno1.html" target="_blank">Generative Music</a>, 1996.</p>
152            </div>
153          </div>
154          <div class="vis">
155            <canvas class="canvas"></canvas>
156          </div> 
157        </div>
158        <div id="systems-again" class="step centered-content future" data-x="-570" data-y="80" data-scale="0.2">
159        </div>
160        <div id="inc" class="step centered-content future" data-x="-2600" data-y="1700">
161          <div class="text-content">
162            <p class="state state-init mode-read">
163              Terry Riley’s &ldquo;In C&rdquo; from 1964 is a composition expressed as a set of principles and procedures.
164            </p>
165            <p class="state state-init mode-present">
166              Terry Riley: In C (1964)
167            </p>
168            <p class="state state-social-system mode-read is-hidden">
169              It's a generative <em>social system</em>.
170            </p>
171            <p class="state state-social-system mode-present is-hidden">
172              A system of rules & principles. A generative <em>social system</em>.
173            </p>
174            <p class="state state-loops-instructions mode-read is-hidden">
175              <span class="loops-desc">It consists of a sequence of 53 short loops&hellip;</span>
176              <span class="instructions-desc">&hellip;and a set of instructions for playing them.</span>
177            </p>
178            <p class="state state-loops-instructions mode-present is-hidden">
179              <span class="loops-desc">53 short loops&hellip;</span>
180              <span class="instructions-desc">&hellip;instructions for playing</span>
181            </p>
182            <p class="state state-performance mode-read is-hidden">
183              Every performer can repeat each loop for as long as they like.<br/>
184              As long as collectively the group stays within a few loops of each other.
185            </p>
186            <p class="state state-performance mode-present is-hidden">
187              Repeat each loop as many times as you like
188            </p>
189          </div>
190          <div class="vis">
191            <img class="score">
192            <img class="instructions">
193          </div>
194        </div>
195        <div id="incplayer" class="step centered-content future" data-x="-2600" data-y="2600">
196          <div class="text-content">
197            <p class="state state-init mode-read">
198              With this simple blueprint you get a system that generates a new version every time it's played. <br>No two performances will ever be the same.
199            </p>
200            <p class="state state-init mode-present">
201              A new realization of the score generated every time
202            </p>
203            <p class="state state-regenerate mode-read is-hidden">
204              The system is simulated here by a quintet of marimbas.<br>
205              Use the slider to see how they generate a different performance every time.
206            </p>
207            <p class="state state-regenerate mode-present is-hidden">
208              No two performances will ever be the same
209            </p>
210            <div class="state state-quote is-hidden">
211              <blockquote>
212                <p>
213                  After working with tape loops and repetition a lot, I had this idea of a musical universe emerging that I hadn&#x2019;t heard before coming together. Since then, I&#x2019;ve always liked to include something in the mix that has some chance operational qual
213ity about it. I like to continue surprising myself.
214                </p>
215              </blockquote>
216              <p class="quote-attrib">Terry Riley, <a href="http://www.innerviews.org/inner/riley.html" target="_blank">2014</a>.</p>
217            </div>
218          </div>
219          <div class="vis">
220            <div class="controls">
221              <div class="rows">
222              </div>
223              <div class="playpause">
224                <button class="play-button">&#9658;</button>
225                <button class="pause-button" style="display: none;">&#10073;&#10073;</button>
226              </div>
227            </div>
228            <div class="player">
229              <div class="cnvs">
230               <canvas resize></canvas>
231              </div>
232              <input type="range" min=0 max=10000 step=1 value=0>    
233            </div>
234          </div>
235          <footer>
236            See also: <a href='https://teropa.info/blog/2017/01/23/terry-rileys-in-c' target='_blank'>Terry Riley's In C: A Journey Through a Musical Possibility Space</a>
237          </footer>
238        </div>
239        <div id="methodvsproduct" class="step transient future" data-x="-4600" data-y="1200" data-scale="4.5">
240          <div class="half">
241            <h2>Generative Method</h2>
242            <p class="mode-read">
243              “It's Gonna Rain” and "Music for Airports" were made using generative <em>methods</em>.
244            </p>
245            <p class="mode-read">
246              But the results don't retain that generative nature. Every time you listen to these pieces, you hear the same thing.
247            </p>
248          </div>
249          <div class="half">
250            <h2>Generative Product</h2>
251            <p class="mode-read">
252              &ldquo;In C&ldquo;, by contrast, is a generative <em>product</em>. It was not just generated once by the composer, but is generated anew every time.
253            </p>
254            <p class="mode-read">
255              For &ldquo;In C&rdquo; the system itself is shared, not just its outputs. Anyone can use the score to generate a new version. That happens somewhere in the world almost every day.
256            </p>
257          </div>
258        </div>
259        <div id="reflection" class="step future" data-x="-500" data-y="1500" data-scale="0.5">
260          <div class="text-content">
261            <p class="state state-init mode-read">
262              Eno's latest album, Reflection, is both:<br>
263              A generative product made using generative methods.
264            </p>
265            <p class="state state-init mode-present">
266              Brian Eno: Reflection (2017)<br>
267              Both generative method and product
268            </p>
269            <p class="state state-app mode-read is-hidden">
270              You can get &ldquo;Reflection&ldquo; as an app.
271              <br>
272              The generative system itself is installed to your phone.<br> It produces an infinite stream of unique music.
273            </p>
274            <p class="state state-app mode-present is-hidden">
275              App edition contains the generative system itself
276            </p>
277          </div>
278          <div class="phone">
279            <video loop></video>            
280          </div>
281          <footer>
282            <a href="http://www.generativemusic.com/reflection.html" target="_blank">Brian Eno: Reflection</a>
283          </footer>
284        </div>
285        <div id="softwareoverview" class="step transient" data-x="0" data-y="1300" data-scale="4.5">
286          <p class="mode-read">
287            &ldquo;Reflection&rdquo; is a generative <em><strong>software system</strong></em>. That makes it easy to deliver to listeners.
288            <br>
289            Much easier than reel-to-reel tape recorders.
290          </p>
291          <p class="mode-read">
292            This presentation is another example of that convenience: Several generative software systems are embedded right onto this webpage.
293          </p>
294          <p class="mode-present">
295            Software Systems
296          </p>
297        </div>
298        <div id="randomness" class="step centered-content" data-x="-1000" data-y="2200">
299          <div class="text-content">
300            <p class="state state-init mode-read">
301              Apart from the ease of delivery, software systems have a few other benefits.
302            </p>
303            <p class="state state-init mode-present">
304              Other Benefits of Using Software
305            </p>
306            <p class="state state-randomness mode-read is-hidden">
307              <span>One of them is their capability to make lots of <em class="shuffle" style="width: 212px">random choices</em> efficiently.<br>
308              And <em><strong class="shuffle" style="width: 180px">randomness</strong></em> is an incredibly useful generative technique.</span>
309            </p>
310            <p class="state state-randomness mode-present is-hidden">
311              <span class="shuffle">Randomness</span>
312            </p>
313          </div>
314        </div>
315        <div id="stochasticdrummachine" class="step centered-content future" data-x="-1000" data-y="3000">
316          <div class="text-content">
317            <p class="state state-init mode-read">
318              Here's an example of a generative tool that is all about randomness.
319            </p>
320            <p class="state state-init mode-present">
321              Generative Randomness
322            </p>
323            <p class="state state-machine mode-read is-hidden">
324              It's a drum machine. One that generates random drum patterns.
325            </p>
326            <p class="state state-machine mode-present is-hidden">
327              A Stochastic Drum Machine
328            </p>
329            <p class="state state-neversame mode-read is-hidden">
330              You can generate as many patterns as you want and never get the same one twice.
331            </p>
332            <p class="state state-neversame mode-present is-hidden">
333              Never generates the same pattern twice
334            </p>
335            <p class="state state-spacesize mode-read is-hidden">
336              That's because there are about 12,000,000,000,000,000 different possible combinations.
337            </p>
338            <p class="state state-spacesize mode-present is-hidden">
339              About 12,000,000,000,000,000 patterns
340            </p>
341            <p class="state state-border mode-read is-hidden">
342              The &ldquo;Deviations&rdquo; slider turns up the randomness even more.<br/>
343              You can use it to explore the border between order and chaos. 
344            </p>
345            <p class="state state-border mode-present is-hidden">
346              Crank randomness up to 11 with &ldquo;Deviations&rdquo;
347            </p>
348          </div>
349          <div class="vis">
350            <div class="container">
351              <div class="controls">
352                <div class="left">
353                  <button class="generate-pattern">
354                    Generate New Pattern
355                  </button>
356                </div>
357                <label class="control">
358                    Deviations                    
359                  <input class="deviations-control" class="mdl-slider mdl-js-slider" type="range"
360                  min="0" max="1" value="0" step="0.05" tabindex="2">
361                  </label>
362              </div>
363              <div class="sequencer-container"></div>
364              <div class="loading">
365                Loading...
366              </div>
367            </div>
368          </div>
369          <footer>
370            <a href="https://codepen.io/teropa/pen/PKoYXM" target="_blank">Full version & source code</a>
371          </footer>
372        </div>
373        <div id="cage" class="step centered-content future" data-x="100" data-y="2800" data-scale="0.5">
374          <div class="text-content">
375            <p class="state state-init mode-read">
376              John Cage was a pioneer in the use of randomness in music composition.
377            </p>
378            <p class="state state-init mode-present">
379              John Cage's<br>Chance Procedures
380            </p>
381            <p class="state state-questions mode-read is-hidden">
382              <span>His method ever since the 1950s was to <br><em>&ldquo;ask questions rather than make choices&rdquo;.</em><br>
383              This is a generative system.</span>
384            </p>
385            <p class="state state-questions mode-present is-hidden">
386              <em>&ldquo;Asking questions rather than making choices&rdquo;</em>
387            </p>
388            <p class="state state-possibility-space mode-read is-hidden">
389              By asking a question you set up a possibility space: That of all the possible answers.<br><br>
390              For example, <em>&ldquo;what duration should this note have?&rdquo;</em>
391            </p>
392            <p class="state state-possibility-space mode-present is-hidden">
393              A question creates a possibility space
394            </p>
395            <p class="state state-random-selection mode-read is-hidden">
396              By then letting a random process answer the question, you generate the result.
397            </p>
398            <p class="state state-random-selection mode-present is-hidden">
399              Random selection generates an answer
400            </p>
401            <p class="state state-drummachine mode-read is-hidden">
402              <span>
403                Almost all generative music systems are elaborations of this core idea.<br><br>
404                This is also what the drum machine does. We ask <em>"what drum pattern should I use?"</em> and the system randomly selects an answer.
405              </span>
406            </p>
407            <p class="state state-drummachine mode-present is-hidden">
408              In the drum machine: <em>&ldquo;What drum pattern should I use?&rdquo;</em>
409            </p>
410            <div class="state state-quote is-hidden">
411              <blockquote>
412                <p>Then the answers, instead of coming from my likes and dislikes, come from chance operations, and that has the effect of opening me to possibilities that I hadn't considered.</p>
413                <p>Chance-determined answers will open my mind to the world around.</p>
414              </blockquote>
415              <p class="quote-attrib">John Cage, <a href="http://www.moredarkthanshark.org/eno_int_ammusic-sum85.html" target="_blank">1985</a>.</p>
416            </div>    
417          </div>
418          <div class="vis"></div>
419        </div>
420        <div id="algorithms" class="step centered-content future" data-x="1300" data-y="2000">
421          <div class="text-content">
422            <p class="state state-init mode-read">
423              <span>Another thing software is good at is <em>algorithms</em>.</span>
424            </p>
425            <p class="state state-init mode-present">
426              Algorithms
427            </p>
428            <p class="state state-description mode-read is-hidden">
429              That is, following a clear plan, making calculations, and doing formal reasoning.
430            </p>
431            <p class="state state-description mode-present is-hidden">
432              Following a plan,<br>making calculations,<br>doing formal reasoning.
433            </p>
434          </div>
435        </div>
436        <div id="generativegrammars" class="step centered-content future" data-x="1300" data-y="2750" data-scale="0.5">
437          <div class="text-content">
438            <p class="state state-init mode-read">
439              <span><em>Generative grammars</em> represent an algorithmic approach to music generation.</span>
440            </p>
441            <p class="state state-init mode-present">
442              Generative Grammars
443            </p>
444            <p class="state state-chomsky mode-read is-hidden">
445              The idea comes from linguistics, where it was first developed by Noam Chomsky in the 1950s.
446            </p>
447            <p class="state state-chomsky mode-present is-hidden">
448              From linguistics, Noam Chomsky
449            </p>
450            <p class="state state-system mode-read is-hidden">
451              <span>It's about formalizing the rules of language into a system that is capable of generating sentences of the language.</span>
452            </p>
453            <p class="state state-system mode-present is-hidden">
454                Formalizing the rules of language into a system
455            </p>
456            <p class="state state-languages mode-read is-hidden">
457              For Chomsky it was all about natural language. But it can also be applied to musical languages.
458            </p>
459            <p class="state state-languages mode-present is-hidden">
460              For musical language too?
461            </p>
462          </div>
463          <div class="vis">
464            <img>
465          </div>
466        </div>
467        <div id="additiverhythmgrammar" class="step centered-content future" data-x="3400" data-y="2550" data-scale="0.5">
468          <ul class="table">
469            <li class="build build-pattern is-hidden">
470              <div class="expr"><span>pattern</span></div>
471              <div class="term">cell</div>
472              <div class="term">cell&nbsp;&nbsp;pattern</div>
473            </li>
474            <li class="build build-cell is-hidden">
475              <div class="expr"><span>cell</span></div>
476              <div class="term">twoBeatCell</div>
477              <div class="term">threeBeatCell</div>
478            </li>
479            <li class="build build-twobeatcell is-hidden">
480              <div class="expr"><span>twoBeatCell</span></div>
481              <div class="term">eighth&nbsp;&nbsp;eighth</div>
482              <div class="term">quarter</div>
483            </li>
484            <li class="build build-threebeatcell is-hidden">
485              <div class="expr"><span>threeBeatCell</span></div>
486              <div class="term">eighth&nbsp;&nbsp;eighth&nbsp;&nbsp;eighth</div>
487              <div class="term">eighth&nbsp;&nbsp;quarter</div>
488              <div class="term">quarter&nbsp;&nbsp;eighth</div>
489            </li>
490            <li class="build build-notes is-hidden">
491                <div class="expr"><span>quarter</span></div>
492                <div class="term"><i class="quarter-note"></i></div>
493                <div class="term"><i class="quarter-rest"></i></div>
494              </li>
495            <li class="build build-notes is-hidden">
496              <div class="expr"><span>eighth</span></div>
497              <div class="term"><i class="eighth-note"></i></div>
498              <div class="term"><i class="eighth-rest"></i></div>
499            </li>
500          </ul>
501          <div class="text-content">
502            <p class="state state-init mode-read">
503              <span>Let's define a generative grammar for <em>additive rhythm</em>.</span>
504            </p>
505            <p class="state state-init mode-present">
506              An additive rhythm grammar
507            </p>
508            <p class="state state-cell mode-read is-hidden">
509              <span>Additive rhythm patterns consist of rhythmic <em>cells</em>.</span> 
510              <span>A cell can be either two or three beats long.</span>
511            </p>
512            <p class="state state-cell mode-present is-hidden">
513              <span>Consists of <em>cells</em> that are two or three beats long</span> 
514            </p>
515            <p class="state state-twobeatcell mode-read is-hidden">
516              <span>A two-beat cell is either two eighths or one quarter.</span>
517            </p>
518            <p class="state state-twobeatcell mode-present is-hidden">
519              <span>A two beat cell is two eights or one quarter</span>
520            </p>
521            <p class="state state-threebeatcell mode-read is-hidden">
522              <span>A three-beat cell is either three eighths, or an eighth and a quarter in either order.</span>
523            </p>
524            <p class="state state-threebeatcell mode-present is-hidden">
525              <span>A three beat cell is three eighths, or an eighth and a quarter.</span>
526            </p>
527            <p class="state state-notes mode-read is-hidden">
528              <span>
529                Each quarter and eighth can be either a note or a rest.
530                <br><br>
531                Now we have hierarchically defined what a &ldquo;cell&rdquo;
532                means in this language, all the way down to the atomic level.
533              </span>
534            </p>
535            <p class="state state-notes mode-present is-hidden">
536              <span>Quarters and eighths are notes or rests</span>
537            </p>
538            <p class="state state-pattern mode-read is-hidden">
539              <span>
540                A full pattern is either a single cell, or a cell followed by another pattern.
541                <br><br>
542                This definition is <em>recursive</em>, and makes it possible to express multi-cell patterns.
543              </span>
544            </p>
545            <p class="state state-pattern mode-present is-hidden">
546              <span>A pattern is a cell or a cell followed by another pattern.<br>A <em>recursive</em> definition.</span>
547            </p>
548          </div>
549        </div>
550        <div id="polyloops" class="step centered-content future" data-x="2550" data-y="2750">
551          <div class="text-content">
552            <p class="state state-init mode-read">
553              Once you have a grammar, you can generate rhythm patterns by expanding it.
554            </p>
555            <p class="state state-init mode-present">
556              Generating patterns from the grammar
557            </p>
558            <p class="state state-choose mode-read is-hidden">
559              Whenever there are two or more options, you choose one randomly.
560            </p>
561            <p class="state state-choose mode-present is-hidden">
562              When there's more than one option, choose randomly
563            </p>
564            <p class="state state-randomness mode-read is-hidden">
565              So randomness is again the tool that wields the generative power here.
566              <br>It's just used in a more constrained form this time.
567            </p>
568            <p class="state state-randomness mode-present is-hidden">
569              Randomness in a very constrained form
570            </p>
571            <p class="state state-poly mode-read is-hidden">
572              <span>When you generate two or more patterns simultaneously, you get <em>polyrhythms</em>.</span>
573            </p>
574            <p class="state state-poly mode-present is-hidden">
575              Multiple patterns make a polyrhythm
576            </p>
577          </div>
578          <div class="vis">  
579            <div class="vis-line">
580              <button class="regen-0">&#8635;</button>
581              <div class="vis-0 notes"></div>
582            </div>
583            <div class="space"></div>
584            <div class="vis-line">
585              <button class="regen-1">&#8635;</button>
586              <div class="vis-1 notes"></div>
587            </div>
588            <div class="space"></div>
589            <div class="vis-line">
590              <button class="regen-2">&#8635;</button>
591              <div class="vis-2 notes"></div>
592            </div>
593            <div class="margin"></div>            
594          </div>
595          <footer>
596            <a href="https://codepen.io/teropa/pen/rzQMEG" target="_blank">Full version & source code</a>
597          </footer>
598        </div>
599        <div id="connected" class="step centered-content future" data-x="3900" data-y="1750">
600          <div class="text-content">
601            <p class="state state-init mode-read">
602              Software also makes it easy to connect systems to the external world.
603            </p>
604            <p class="state state-init mode-present">
605              Connected Software
606            </p>
607            <p class="state state-devices mode-read is-hidden">
608              The devices running these systems are equipped with sensors, interfaces, and network connections.
609            </p>
610            <p class="state state-devices mode-present is-hidden">
611              Through sensors, interfaces, network connections
612            </p>
613            <p class="state state-react mode-read is-hidden">
614              <span>That means you can make a generative musical system that <em>plays off of other systems</em>.</span>
615            </p>
616            <p class="state state-react mode-present is-hidden">
617              <span>Generative systems that play off of <em>other systems</em></span>
618            </p>
619          </div>
620        </div>
621        <div id="tramsofhelsinki" class="step centered-content future" data-x="1800" data-y="1150" data-scale="0.75">
622          <div class="vis">
623              <div class="map"></div>
624              <div class="effects">
625                <h1>Helsinki <span class="current-time"></span></h1>
626              </div>
627              <div class="lines">
628                <div class="line"></div>
629                <div class="line"></div>
630                <div class="line"></div>
631                <div class="line"></div>
632                <div class="line"></div>
633                <div class="line"></div>
634                <div class="line"></div>
635                <div class="line"></div>
636                <div class="line"></div>
637                <div class="line"></div>
638              </div>
639          </div>
640          <p class="state state-init mode-read">
641            This system generates music from the Helsinki tram system.
642          </p>
643          <p class="state state-init mode-present">
644            Generating music from the Helsinki tram system
645          </p>
646          <p class="state state-data mode-read is-hidden">
647            <span class="day">It is using real-time data to track where each tram is right now.</span>
648            <span class="night">It's likely to be quiet now because few trams run at night. Check back later ;)</span>
649          </p>
650          <p class="state state-data mode-present is-hidden">
651            Using real time tracking data
652          </p>
653          <p class="state state-listen"></p>           
654        </div>
655        <div id="tramszoomout" class="step centered-content future" data-x="1800" data-y="1050" data-scale="1.1">
656          <div class="text-content">
657            <p class="state state-init mode-read">
658              The trams are playing a pentatonic scale, mapped to central Helsinki.
659            </p>
660            <p class="state state-init mode-present">
661              A pentatonic scale mapped to central Helsinki
662            </p>
663            <p class="state state-random mode-read is-hidden">
664              In some sense, this is just randomness again.<br>The music is incidental - the tram drivers aren't deliberately playing music to you.
665            </p>
666            <p class="state state-random mode-present is-hidden">
667                Randomness again - because mapping is incidental
668            </p>
669            <p class="state state-romantic mode-read is-hidden">
670              But the conceptual layer is significant.<br>The idea that you're listening to the city's nervous system changes the way you experience the music.
671            </p>
672            <p class="state state-romantic mode-present is-hidden">
673              <span>Conceptual layer adds meaning - <em>&ldquo;listening to the city&rdquo;</em></span>
674            </p>
675          </div>
676          <div class="the-rest">
677            <ul class="scale">
678              <li class="note">E4</li>
679              <li class="note">D4</li>
680              <li class="note">C4</li>
681              <li class="note">A3</li>
682              <li class="note">G3</li>
683              <li class="note">E3</li>
684              <li class="note">D3</li>
685              <li class="note">C3</li>
686              <li class="note">A2</li>
687              <li class="note">G2</li>
688            </ul>      
689          </div>
690          <footer>
691            <a href="https://codepen.io/teropa/pen/mBbPEe" target="_blank">Full version & source code</a>
692          </footer>
693        </div>
694        <div id="datasonification" class="step centered-content future" data-x="1400" data-y="350" data-scale="0.5">
695          <div class="text-content">
696            <p class="mode-read">This was an example of <em>data sonification</em>:<br> Generative musical systems riding on events or data produced by other systems.</p>
697            <p class="mode-present">Data Sonification</p>
698          </div>
699          <div class="videos">
700            <figure class="atlas">
701              <div class="vidcontainer"><img></video></div>
702              <figcaption>Brian Foo: <a href="http://eclipticalis.com/" target="_blank">Music Eclipticalis</a>. Based on &ldquo;Atlas Eclipticalis&rdquo; by John Cage.</figcaption>
703            </figure>
704            <figure class="wiki">
705              <div class="vidcontainer"><img></video></div>
706              <figcaption>Hatnote, Stephen LaPorte, and Mahmoud Hashemi: <a href="http://listen.hatnote.com/" target="_blank">Listen to Wikipedia</a>.</figcaption>
707            </figure>
708          </div>
709        </div>
710        <div id="hooman" class="step centered-content future" data-x="3600" data-y="900">
711          <div class="text-content">
712            <p class="state state-init mode-read">
713              Speaking of connecting musical systems to other systems, how about the most interesting systems of them all: Human beings?
714            </p>
715            <p class="state state-init mode-present">
716              The most interesting systems in the world: Human beings
717            </p>
718            <p class="state state-interactive mode-read is-hidden">
719              <span>This is the realm of<br> <em>interactive generative systems</em>.</span>
720            </p>
721            <p class="state state-interactive mode-present is-hidden">
722              Interactive Generative Systems
723            </p>
724          </div>
725          <div class="vis">
726            <img>
727            <footer>
728              Image: <a href="https://www.flickr.com/photos/bionicteaching/14092973648" target="_blank">Tom Woodward</a>
729            </footer>
730          </div>
731        </div>
732        <div id="trope" class="step centered-content future" data-x="4350" data-y="100" data-scale="0.5">
733          <img>
734          <div class="text-content">
735            <p class="state state-init mode-read">
736              Eno's &ldquo;Trope&rdquo; is an example of a generative system that's also interactive.
737            </p>
738            <p class="state state-init mode-present">
739              Brian Eno & Peter Chilvers: Trope (2009)
740            </p>
741            <p class="state state-interactive mode-read is-hidden">
742              It lets <em>the listener</em> complete the music.
743            </p>
744            <p class="state state-interactive mode-present is-hidden">
745              The listener completes the music
746            </p>
747            <p class="state state-blurring mode-read is-hidden">
748              This starts to blur the boundary between composer and listener.
749            </p>
750            <p class="state state-blurring mode-present is-hidden">
751              Blurring boundary between composer and listener
752            </p>
753            <p class="state state-control mode-read is-hidden">
754              On the one hand, the composer gives up some control by leaving artistic decisions unmade.
755            </p>
756            <p class="state state-control mode-present is-hidden">
757              Composer gives up control, <br>leaving artistic decisions open
758            </p>
759            <p class="state state-system-designer mode-read is-hidden">
760              On the other hand, the composer still has the ultimate control, as a <em>system designer</em>.<br> They design the generative space the listener explores.
761            </p>
762            <p class="state state-system-designer mode-present is-hidden">
763              <span>Composer as <em>system designer</em></span>
764            </p>
765            <p class="state state-listen"></p>
766          </div>
767          <footer><a href="http://www.generativemusic.com/trope.html" target="_blank">Trope</a> by Brian Eno and Peter Chilvers</footer>
768        </div>
769        <div id="musicmouse" class="step centered-content future" data-x="2800" data-y="-100">
770          <div class="text-content">
771            <p class="state state-init mode-read">
772              These interactive generative systems can be designed to give the user varying degrees of freedom.
773            </p>
774            <p class="state state-init mode-present">
775              Degrees of freedom for the user vary
776            </p>
777            <p class="state state-cocreation mode-read is-hidden">
778              <span>When there's more freedom, the interaction becomes about <em>co-creation</em> between a musician and a generative system.</span>
779            </p>
780            <p class="state state-cocreation mode-present is-hidden">
781              <span>More freedom leads to <em>co-creation</em> between musician and generative system</span>
782            </p>
783            <p class="state state-mm mode-read is-hidden">
784              Laurie Spiegel's &ldquo;Music Mouse&rdquo; from 1986 is a seminal example of such a system.
785            </p>
786            <p class="state state-mm mode-present is-hidden">
787              Laurie Spiegel: <br>Music Mouse (1986)
788            </p>
789            <p class="state state-algorithmic mode-read is-hidden">
790              It contains algorithmic and random procedures for generating and timing notes.
791            </p>
792            <p class="state state-algorithmic mode-present is-hidden">
793              Algorithmic and random procedures
794            </p>
795            <p class="state state-agency mode-read is-hidden">
796              <span>
797                But ultimately it lets you, the musician, control the structure of the music.
798                <br><br>
799                The result is a <em>collaboration</em> between you and Music Mouse.
800              </span>
801            </p>
802            <p class="state state-agency mode-present is-hidden">
803              But you are in control
804            </p>
805            <div class="state state-quote is-hidden">
806              <blockquote>
807                <p>I know that a lot of the ways that music is integrated to our lives is changing.</p>
808                <p>One of the big changes is that music is becoming a process that people can participate in - rather than a bunch of fixed, finite entities called pieces that you can listen to that are the same every time.</p>
809              </blockquote>
810              <p class="quote-attrib">Laurie Spiegel, <a href="https://archive.org/stream/09-commodore-magazine/Commodore_Magazine_Vol-08-N09_1987_Sep#page/n57/mode/2up" target="_blank">1987</a>.</p>
811            </div>
812          </div>
813          <div class="vis">
814            <div class="keyboards">
815            </div>
816            <footer>
817              A partial emulation of
818              <a href="http://retiary.org/ls/index.html" target="_blank">Laurie Spiegel</a>'s
819              <a href="http://retiary.org/ls/programs.html" target="_blank">&ldquo;Music Mouse - An Intelligent Instrument&rdquo;</a>.
820              <br>Use 'z' and 'x' to transpose, 'c' to toggle generative pattern. <a href="https://teropa.info/musicmouse" target="_blank">More features here</a>.
821            </footer>
822          </div>
823        </div>
824        <div id="models" class="step centered-content future" data-x="4400" data-y="-1000">
825          <div class="text-content">
826            <p class="state state-init mode-read">
827              <span>Another form of human-machine interaction is <em>teaching</em> machines how to do things.</span>
828            </p>
829            <p class="state state-init mode-present">
830              Teaching a machine to do things
831            </p>
832            <p class="state state-learn mode-read is-hidden">
833              <span>Rather than design a generative system, you can have a computer <em>learn</em> one<br> by showing it examples of the kind of music you want it to generate.</span>
834            </p>
835            <p class="state state-learn mode-present is-hidden">
836              Not designing a generative system, but having a computer learn one
837            </p>
838            <p class="state state-ml mode-read is-hidden">
839              <span>This is what <em>machine learning</em> is all about.</span>
840            </p>
841            <p class="state state-ml mode-present is-hidden">
842              <span>Machine Learning</span>
843            </p>
844          </div>
845          <div class="vis">
846            <img>
847          </div>
848        </div>
849        <div id="markovplayer" class="step centered-content future" data-x="2800" data-y="-1000">
850          <div class="vis">
851            <div class="visualization">
852            </div>
853            <div class="controls">
854              <canvas nx="keyboard" id="markovOnScreenKeyb"></canvas>
855              <footer>
856                Play with mouse, keyboard, or MIDI keyboard (Chrome only)
857                <button class="clear-button">Clear</button>
858                <br>See also: <a href="https://codepen.io/teropa/pen/bRqYVj" target="_blank">Dancing Markov Gymnopédies</a>
859              </footer>
860            </div>
861          </div>
862          <div class="text-content">
863            <p class="state state-init mode-read">
864              <span><em>Markov chains</em> are an old, but still effective, example of the machine learning approach.</span>
865            </p>
866            <p class="state state-init mode-present">
867              Markov Chains
868            </p>
869            <p class="state state-models mode-read is-hidden">
870              A Markov chain is a mathematical model of how events follow other events over time. Events such as notes in a melody.
871            </p>
872            <p class="state state-models mode-present is-hidden">
873              Mathematical models of events over time
874            </p>
875            <p class="state state-train mode-read is-hidden">
876              <span>You can <em>train</em> a Markov chain by playing it some music. It learns the music you play and builds up a graph model of it.</span>
877            </p>
878            <p class="state state-train mode-present is-hidden">
879                Train a model by playing music
880            </p>
881            <p class="state state-generate mode-read is-hidden">
882              <span>You can then <em>generate</em> new music by having the Markov chain randomly walk its graph, following the connections it learned.</span>
883            </p>
884            <p class="state state-generate mode-present is-hidden">
885              Then generate from the learned model
886            </p>
887            <p class="state state-limited mode-read is-hidden">
888              It's a limited method because such a simple model can only capture a limited amount of information. In this case it only learns about short-term melodic progression. <br>But it can still be useful.
889            </p>
890            <p class="state state-limited mode-present is-hidden">
891              Limited but still effective!
892            </p>
893          </div>
894        </div>
895        <div id="deeplearning" class="step centered-content future" data-x="1300" data-y="-850" data-scale="0.5">
896          <div class="text-content">
897            <p class="state state-init mode-read">
898              Markov chains are an ancestor of contemporary machine learning approaches to music generation, such as deep neural networks.
899            </p>
900            <p class="state state-init mode-present">
901              Contemporary machine learning: Deep neural networks
902            </p>
903            <p class="state state-neuralnet mode-read is-hidden">
904              Deep neural networks are highly complex statistical models and they're usually trained using large amounts of data.
905            </p>
906            <p class="state state-neuralnet mode-present is-hidden">
907              Large amounts of data, complex
908            </p>
909            <p class="state state-same mode-read is-hidden">
910              But fundamentally they work just like Markov chains: You teach the machine how music works by showing it examples. It builds up a model of the music and then uses the model to generate new music.
911            </p>
912            <p class="state state-same mode-present is-hidden">
913              But still about teaching the computer by example, like Markov chains
914            </p>
915          </div>
916          <div class="vis">
917            <a href="https://magenta.tensorflow.org/performance-rnn-browser" target="_blank"><img class="performancernn"></a>
918            <a href="https://magenta.tensorflow.org/nsynth" target="_blank"><img class="nsynth"></a>
919            <footer>
920              See <a href="https://medium.com/artists-and-machine-intelligence/neural-nets-for-generating-music-f46dffac21c0" target="_blank">Neural Nets for Generating Music</a> by Kyle McDonald.
921            </footer>
922          </div>
923        </div>
924        <div id="overview" class="step centered-content future" data-x="250" data-y="1400" data-scale="6">
925          <h2>Systems</h2>
926          <div class="text-content">
927            <p class="state state-init mode-read">
928              This is what the generative music landscape looks like to me.
929            </p>
930            <p class="state state-init mode-present">
931              The generative music landscape
932            </p>
933            <p class="state state-systems mode-read is-hidden">
934              It is inhabited by various kinds of systems.
935            </p>
936            <p class="state state-systems mode-present is-hidden">
937              Inhabited by <em>systems</em>
938            </p>
939            <p class="state state-designing mode-read is-hidden">
940              Making generative music is all about the process of <em>designing</em> those systems.
941            </p>
942            <p class="state state-designing mode-present is-hidden">
943              Making generative music is <em>systems design</em>.
944            </p>
945          </div>
946        </div>
947        <div id="links" class="step future" data-x="250" data-y="1150" data-scale="8">
948          <div class="frame frame-left"></div>
949          <div class="frame frame-top">
950            <div class="frame-content">
951              <h2 class="mode-present">teropa.info/loop</h2>
952              <h2 class="mode-read">Thanks for viewing!</h2>
953            </div>
954          </div>
955          <div class="frame frame-right"></div>
956          <div class="frame frame-bottom">
957            <div class="frame-content">
958              <p class="twitter-handle"><a href="https://twitter.com/teropa" target="_blank">teropa</a></p>
959              <p>[email protected]</p>
960              <p><a href="https://ctpt.co" target="_blank">Counterpoint</a></p>
961            </div>
962          </div>
963        </div>
964    </div>
965    
965<script src="static_assets/tracery.js"></script>
965
966    
966<script src="static_assets/audiokeys.js"></script>
966
967  
967<script type="text/javascript" src="bundle.js"></script>
967</body>
968 </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.