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 “It's Gonna Rain”, 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">►</button>
89 <button class="pause-button" style="display: none;">❙❙</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ó, Víctor Trescolí, Isabel León, Estefanía Sá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 “It's Gonna Rain”, and used the same phasing process on “Music for Airports” 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 “Music for Airports”. 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 “In C” 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…</span> 176 <span class="instructions-desc">…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…</span> 180 <span class="instructions-desc">…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’t heard before coming together. Since then, I’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">►</button> 225 <button class="pause-button" style="display: none;">❙❙</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 “In C“, 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 “In C” 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 “Reflection“ 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 “Reflection” 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 “Deviations” 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 “Deviations” 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>“ask questions rather than make choices”.</em><br> 383 This is a generative system.</span> 384 </p> 385 <p class="state state-questions mode-present is-hidden"> 386 <em>“Asking questions rather than making choices”</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>“what duration should this note have?”</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>“What drum pattern should I use?”</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 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 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 eighth eighth</div> 487 <div class="term">eighth quarter</div> 488 <div class="term">quarter 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 “cell” 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">↻</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">↻</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">↻</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>“listening to the city”</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 “Atlas Eclipticalis” 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 “Trope” 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 “Music Mouse” 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">“Music Mouse - An Intelligent Instrument”</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.