forked from GBrachetta/Musical-Dice
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
416 lines (399 loc) · 22.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Musical Dice: A new take on Mozart's music game">
<meta name="keywords" content="music, composition, Mozart, random, randomisation, game, minuetto, piano">
<meta name="author" content="Guillermo Brachetta">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/images/favicon-96x96.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/superhero/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Musical Dice</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="60">
<!-- Navbar -->
<nav class="navbar navbar-expand-sm navbar-light bg-primary fixed-top">
<a class="navbar-brand scrolling-link" href="#title">
<img src="assets/images/logo.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#my-navbar"
aria-controls="my-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="my-navbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#title" class="scrolling-link nav-link">Top</a>
</li>
<li class="nav-item">
<a href="#mozart" class="scrolling-link nav-link">Mozart</a>
</li>
<li class="nav-item">
<a href="#rules" class="scrolling-link nav-link">Rules</a>
</li>
<li class="nav-item">
<a href="#game" class="scrolling-link nav-link">Game</a>
</li>
</ul>
</div>
</nav>
<!-- Jumbotron Title-->
<div id="title" class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Musical Dice</h1>
<p class="lead">A new take on Mozart's game</p>
<div class="my-2 hr"></div>
<a class="mt-4 btn btn-primary btn-lg scrolling-link" href="#game" role="button">Play the game!</a>
<div id="guille"></div>
</div>
</div>
<!-- History of the game -->
<section class="container">
<div class="row">
<div class="col">
<h3 id="history" class="my-4 titles pt-3">
The Original Game
</h3>
<p class="paragraphs">
A <em>Musikalisches Würfelspiel</em> ("musical dice game") was a technique that randomly 'generated'
music from precomposed options. These 'games' were quite popular throughout Western
Europe in the 18th century. Several different games were devised, some that did not require dice,
but merely 'choosing a random number.'
</p>
<p class="paragraphs">The earliest example is Johann Philipp Kirnberger's <em>Der allezeit fertige
Menuetten- und Polonaisencomponist</em> ("The Ever-Ready Minuet and Polonaise Composer") (1757
[1st edition; revised 2nd 1783]). Examples by well known composers include C. P. E. Bach's
<em>Einfall, einen doppelten Contrapunct in der Octave von sechs Tacten zu machen, ohne die Regeln
davon zu wissen</em> ("A method for making six bars of double counterpoint at the octave without
knowing the rules") (1758) and Maximilian Stadler's <em>Table pour composer des minuets et des Trios
à la infinie; avec deux dez à jouer</em> ("A table for composing minuets and trios to infinity,
by playing with two dice") (1780).
</p>
<p>The way these games work may be understood in analogy to sentence construction:
</p>
<div class="row justify-content-center mt-5 mb-4">
<div class="col-12">
<table class="table table-responsive table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>The cow</td>
<td>ran</td>
<td>past</td>
<td>the field.</td>
</tr>
<tr>
<th scope="row">2</th>
<td>The pig</td>
<td>walked</td>
<td>through</td>
<td>the yard.</td>
</tr>
<tr>
<th scope="row">3</th>
<td>The sheep</td>
<td>ran</td>
<td>into</td>
<td>the marsh.</td>
</tr>
</tbody>
</table>
</div>
</div>
<p class="paragraphs">
A die is rolled for each column in the table, and the result of the die roll determines which word
in that column is used. For example, rolling 2,3,1,3 would give the expression "The pig ran past the
marsh". Each progression is essentially the same, although the number of available outcomes in each
column may differ. The outcomes are also variations of each other rather than being entirely
different. In this example, the outcomes within each column, each represent the same part of speech
(noun/verb/etc), therefore the constructed sentence makes sense whichever way it is put together .
</p>
<h3 id="mozart" class="my-4 titles pt-3">
Mozart's version
</h3>
<p class="paragraphs">
The most well-known was published in 1792, by Mozart's publisher Nikolaus Simrock in Berlin (K.
294dK3 or K. 516fK6). The game was attributed to Mozart, but this attribution has not been
authenticated. The dice rolls randomly selected small sections of music, which would be patched
together to create a musical piece. This game is capable of producing 11 ^ 16 =
45.949.729.863.572.161 different yet similar waltzes. Some measures have only one possibility no
matter what the roll of the dice (measures 8/16) while other measures have a different possibility
for each roll (measures 1/16).
</p>
<img src="assets/images/mozart-game.jpg" alt="Original Rules" class="my-4 img-fluid" />
<p class="paragraphs">
Mozart's manuscript, written in 1787, consisting of 176 one-bar fragments of music, appears to be
some kind of game or system for constructing music out of two-bar fragments, but contains no
instructions and there is no evidence that dice were involved.
</p>
<p>
The titles of the supposed Mozart compositions are:
</p>
<ul class="pl-3">
<li class="paragraphs">
<em>Anleitung zum Componieren von Walzern so viele man will vermittelst zweier Würfel, ohne
etwas von der Musik oder Composition zu verstehen</em> ("Instructions for the composition
of as many waltzes as one desires with two dice, without understanding anything about music or
composition")
</li>
<li>
<em>Anleitung zum Componieren von Polonaisen</em> ("Instructions for the composition of
polonaises")
</li>
</ul>
<h3 id="my-version" class="my-4 titles pt-3">
My version
</h3>
<p class="paragraphs">
I decided to compose 12 different pieces, each containing 24 measures in triple time. They all
follow the same harmonic pattern and could therefore be considered a single theme with 11
variations.
</p>
<p class="paragraphs">
I divided each of the pieces into 12 fragments (meaning that each fragment consists of 2 measures)
and composed them in a way that any fragment can be connected to, or followed by a fragment from any
of the other pieces.
</p>
<p class="paragraphs">
Each piece is structured with a part 'A' of 4 fragments (8 measures) and a part 'B' of 8 fragments
(16 measures).
</p>
<h3 id="rules" class="my-4 titles pt-3">
The Instructions
</h3>
<p class="paragraphs mb-4">
The rules of the game are very simple, and you are free to break them at any time!
</p>
<ul class="list-group">
<li class="list-group-item">Listen to any or all of the twelve original minuetti.</li>
<li class="hr"></li>
<li class="list-group-item">From the row beneath, select which of the minuetti you would like to
include in the randomisation (suggestion: start with all twelve!)</li>
<li class="hr"></li>
<li class="list-group-item">Play your randomly generated minuetto, or click on the button to create
a new randomisation.</li>
<li class="hr"></li>
<li class="list-group-item">You can click on the individual cells to listen to the two measures
corresponding to that cell.</li>
<li class="hr"></li>
<li class="list-group-item">Have fun and remember: there are <strong
class="span-bold">8,916,100,448,256</strong> possible combinations, so it's
quite unlikely you will hear the same piece ever again!</li>
</ul>
</div>
</div>
</section>
<!-- Game -->
<!-- Jumbotron Game -->
<div class="jumbotron jumbotron-fluid mt-5" id="game">
<div class="container">
<h2 class="display-4">The Game</h2>
<div id="warning" class="row pt-5 mt-5">
<div class="col-12 warning-title">YOUR BROWSER IS NOT SUPPORTED!</div>
<div class="col-12 pt-5 pb-3">To ensure the best experience with this app, please use a modern browser
compatible with the latest technology available, such as <a href="https://www.google.com/chrome/"
target="_blank"><span>Chrome</span></a> or <a href="https://www.mozilla.org/en-US/firefox/new/"
target="_blank"><span>Firefox</span> </a>.</div>
</div>
</div>
</div>
<!-- Grid original minuetti -->
<div class="container">
<p class="text-center lead"><em> Click on the buttons to listen to the 12 original minuetti</em></p>
<div id="minuetti" class="row text-center mx-0 py-3 mb-3">
</div>
<p class="mb-3 lead text-center"><em>Select below which of the above pieces you would like to include or exclude
to randomise from (grid will be repopulated accordingly).</em>
</p>
<div id="checkboxes-minuetti"
class="row checkbox-tags justify-content-center mx-0 px-0 pb-0 form-group mb-4 mb-md-5">
</div>
</div>
<!-- Randomiser -->
<div class="container">
<p class="text-center lead"><em> Click on randomise to create a new random minuetto from your selection</em></p>
<div class="row text-center pt-3 mt-3 mb-4 my-md-5">
<div class="col-12">
<button id="btn-randomise" class="main-action-buttons btn btn-primary btn-lg mb-1">Randomise!</button>
</div>
</div>
</div>
<!-- Dynamic Game Grid -->
<div class="container" id="music-grid"></div>
<!-- Player -->
<div class="container">
<div class="row text-center my-4 my-md-5">
<div id="main-button" class="col-12 mb-3">
<button id="play-minuetto" class="main-action-buttons btn btn-primary btn-lg">Play Minuetto</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-4 col-lg-3 mr-auto my-md-4 my-0 mt-4 mb-1">
<h4 class="font-weight-bold text-uppercase mb-4">Disclaimer</h4>
<p>The <span class="span-bold">Musical Dice</span> was made with love and passion for educational
purposes.</p>
<p>All the music in this app was composed by the author.</p>
</div>
<div class="clearfix w-100 d-md-none hr"></div>
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<h4 class="font-weight-bold text-uppercase mb-4">About</h4>
<ul class="list-unstyled list-links">
<li>
<a href="https://github.com/GBrachetta/" target="_blank" rel="noopener">PROJECTS</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#aboutModal">ABOUT ME</a>
</li>
<li>
<a href="https://www.brachetta.com/" target="_blank" rel="noopener">WEBSITE</a>
</li>
<li>
<a href="#" data-toggle="modal" data-target="#formModal">CONTACT</a>
</li>
</ul>
</div>
<div class="clearfix w-100 d-md-none hr"></div>
<div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">
<h4 class="font-weight-bold text-uppercase mb-4">Address</h4>
<ul class="list-unstyled">
<li>
<p><i class="fas fa-home mr-3"></i> Waddenweg 149, 2134XL Hoofddorp, The Netherlands</p>
</li>
<li>
<p><i class="fas fa-envelope mr-3"></i> [email protected]</p>
</li>
<li>
<p><i class="fas fa-phone mr-3"></i> + 31 6 51 06 30 02</p>
</li>
</ul>
</div>
<div class="clearfix w-100 d-md-none hr"></div>
<div class="col-md-2 col-lg-2 text-center mx-auto my-4 social">
<h4 class="font-weight-bold text-uppercase mb-4">Follow Me</h4>
<a href="https://www.facebook.com/" target="_blank" rel="noopener">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.twitter.com/" target="_blank" rel="noopener">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/" target="_blank" rel="noopener">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
<div class="footer-copyright text-center py-3">
©
<script>
document.write(new Date().getFullYear());
</script>
Copyright: <span class="my-name"> Guillermo Brachetta</span>
</div>
</footer>
<!-- Modal About Me -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="modal-about-label"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-about-label">About me</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3 class="heading-modal">Guillermo Brachetta</h3>
<img src="assets/images/avatar.png" alt="avatar" class="img-fluid my-3" />
<p>I'm a passionate musician.<br />Well, that is true; but it is also true that I am passionate
about everything I do. <br>It is music, for sure, and it is coding as well.<br />Fortunatelly I
was
able to combine two of my passions and obsessions in this app.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Form -->
<div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="modal-contact-Label"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-contact-Label">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row">
<div class="col-12 container">
<form id="form-contact">
<h5 class="my-4">Please fill in the form to get in touch.</h5>
<fieldset>
<div class="row justify-content-between">
<div class="col-12 form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control" name="from_name" id="inputName"
placeholder="Enter Name" required />
</div>
<div class="col-12">
<label for="inputEmail">Email address</label>
<input type="email" name="from_email" class="form-control" id="inputEmail"
aria-describedby="emailHelp" placeholder="Enter email" required />
<small id="emailHelp" class="form-text text-muted">I'll never share your email
with anyone else.</small>
</div>
</div>
<div class="form-group">
<label for="textArea">Leave your message here</label>
<textarea name="info_request" class="form-control" id="textArea" rows="5"
required></textarea>
</div>
<div class="row my-5 text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</div>
<div id="messages"></div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Button back to top -->
<a href="#title" id="btn-to-top" class="scrolling-link floating-btn" title="Go to top" aria-label="Go back to top">
<i class="fas fa-arrow-circle-up fa-3x" aria-hidden="true"></i>
</a>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js"></script>
<script src="assets/js/sendEmail.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.3/howler.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>