├── .gitlab-ci.yml ├── LICENSE ├── Midi ├── 001_Elton_John-1.MID ├── 002_Keith_Jarrett.MID ├── 003_Bach.MID ├── 004_Beatles_Hey_Jude.MID └── 005_Beatles_Hey_Jude_NH-1.MID ├── cacheLibraries.sh ├── circle.html ├── fonts ├── OFL.txt ├── quicksand-bold.woff └── quicksand-book.woff ├── index.css ├── index.html ├── js ├── components │ ├── clockOctave.js │ ├── intervalTable.js │ ├── pianoKeyboard.js │ ├── playRecorder.js │ ├── songLoader.js │ ├── tonnetzLike.js │ └── tonnetzView.js ├── decorators │ └── dragZoom.js ├── index.js ├── l12n.js ├── loadDeps.js ├── midiBus.js ├── mixins │ ├── clickMixins.js │ └── trajectory.js └── utils.js └── lib └── fallback ├── LICENSE.txt ├── fallback.js └── fallback.min.js /.gitlab-ci.yml: -------------------------------------------------------------------------------- 1 | pages: 2 | stage: deploy 3 | script: 4 | - mkdir .public 5 | - cp -r * .public 6 | - mv .public public 7 | artifacts: 8 | paths: 9 | - public -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Tonnetz 2 | Copyright (C) 2019 Corentin Guichaoua — Université de Strasbourg 3 | guichaoua@math.unistra.fr 4 | 5 | This program is free software: you can redistribute it and/or modify 6 | it under the terms of the GNU General Public License as published by 7 | the Free Software Foundation, either version 3 of the License, or 8 | (at your option) any later version. 9 | 10 | This program is distributed in the hope that it will be useful, 11 | but WITHOUT ANY WARRANTY; without even the implied warranty of 12 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 | GNU General Public License for more details. 14 | 15 | You should have received a copy of the GNU General Public License 16 | along with this program. If not, see . 17 | 18 | 19 | GNU GENERAL PUBLIC LICENSE 20 | Version 3, 29 June 2007 21 | 22 | Copyright (C) 2007 Free Software Foundation, Inc. 23 | Everyone is permitted to copy and distribute verbatim copies 24 | of this license document, but changing it is not allowed. 25 | 26 | Preamble 27 | 28 | The GNU General Public License is a free, copyleft license for 29 | software and other kinds of works. 30 | 31 | The licenses for most software and other practical works are designed 32 | to take away your freedom to share and change the works. By contrast, 33 | the GNU General Public License is intended to guarantee your freedom to 34 | share and change all versions of a program--to make sure it remains free 35 | software for all its users. We, the Free Software Foundation, use the 36 | GNU General Public License for most of our software; it applies also to 37 | any other work released this way by its authors. You can apply it to 38 | your programs, too. 39 | 40 | When we speak of free software, we are referring to freedom, not 41 | price. Our General Public Licenses are designed to make sure that you 42 | have the freedom to distribute copies of free software (and charge for 43 | them if you wish), that you receive source code or can get it if you 44 | want it, that you can change the software or use pieces of it in new 45 | free programs, and that you know you can do these things. 46 | 47 | To protect your rights, we need to prevent others from denying you 48 | these rights or asking you to surrender the rights. Therefore, you have 49 | certain responsibilities if you distribute copies of the software, or if 50 | you modify it: responsibilities to respect the freedom of others. 51 | 52 | For example, if you distribute copies of such a program, whether 53 | gratis or for a fee, you must pass on to the recipients the same 54 | freedoms that you received. You must make sure that they, too, receive 55 | or can get the source code. And you must show them these terms so they 56 | know their rights. 57 | 58 | Developers that use the GNU GPL protect your rights with two steps: 59 | (1) assert copyright on the software, and (2) offer you this License 60 | giving you legal permission to copy, distribute and/or modify it. 61 | 62 | For the developers' and authors' protection, the GPL clearly explains 63 | that there is no warranty for this free software. For both users' and 64 | authors' sake, the GPL requires that modified versions be marked as 65 | changed, so that their problems will not be attributed erroneously to 66 | authors of previous versions. 67 | 68 | Some devices are designed to deny users access to install or run 69 | modified versions of the software inside them, although the manufacturer 70 | can do so. This is fundamentally incompatible with the aim of 71 | protecting users' freedom to change the software. The systematic 72 | pattern of such abuse occurs in the area of products for individuals to 73 | use, which is precisely where it is most unacceptable. Therefore, we 74 | have designed this version of the GPL to prohibit the practice for those 75 | products. If such problems arise substantially in other domains, we 76 | stand ready to extend this provision to those domains in future versions 77 | of the GPL, as needed to protect the freedom of users. 78 | 79 | Finally, every program is threatened constantly by software patents. 80 | States should not allow patents to restrict development and use of 81 | software on general-purpose computers, but in those that do, we wish to 82 | avoid the special danger that patents applied to a free program could 83 | make it effectively proprietary. To prevent this, the GPL assures that 84 | patents cannot be used to render the program non-free. 85 | 86 | The precise terms and conditions for copying, distribution and 87 | modification follow. 88 | 89 | TERMS AND CONDITIONS 90 | 91 | 0. Definitions. 92 | 93 | "This License" refers to version 3 of the GNU General Public License. 94 | 95 | "Copyright" also means copyright-like laws that apply to other kinds of 96 | works, such as semiconductor masks. 97 | 98 | "The Program" refers to any copyrightable work licensed under this 99 | License. Each licensee is addressed as "you". "Licensees" and 100 | "recipients" may be individuals or organizations. 101 | 102 | To "modify" a work means to copy from or adapt all or part of the work 103 | in a fashion requiring copyright permission, other than the making of an 104 | exact copy. The resulting work is called a "modified version" of the 105 | earlier work or a work "based on" the earlier work. 106 | 107 | A "covered work" means either the unmodified Program or a work based 108 | on the Program. 109 | 110 | To "propagate" a work means to do anything with it that, without 111 | permission, would make you directly or secondarily liable for 112 | infringement under applicable copyright law, except executing it on a 113 | computer or modifying a private copy. Propagation includes copying, 114 | distribution (with or without modification), making available to the 115 | public, and in some countries other activities as well. 116 | 117 | To "convey" a work means any kind of propagation that enables other 118 | parties to make or receive copies. Mere interaction with a user through 119 | a computer network, with no transfer of a copy, is not conveying. 120 | 121 | An interactive user interface displays "Appropriate Legal Notices" 122 | to the extent that it includes a convenient and prominently visible 123 | feature that (1) displays an appropriate copyright notice, and (2) 124 | tells the user that there is no warranty for the work (except to the 125 | extent that warranties are provided), that licensees may convey the 126 | work under this License, and how to view a copy of this License. If 127 | the interface presents a list of user commands or options, such as a 128 | menu, a prominent item in the list meets this criterion. 129 | 130 | 1. Source Code. 131 | 132 | The "source code" for a work means the preferred form of the work 133 | for making modifications to it. "Object code" means any non-source 134 | form of a work. 135 | 136 | A "Standard Interface" means an interface that either is an official 137 | standard defined by a recognized standards body, or, in the case of 138 | interfaces specified for a particular programming language, one that 139 | is widely used among developers working in that language. 140 | 141 | The "System Libraries" of an executable work include anything, other 142 | than the work as a whole, that (a) is included in the normal form of 143 | packaging a Major Component, but which is not part of that Major 144 | Component, and (b) serves only to enable use of the work with that 145 | Major Component, or to implement a Standard Interface for which an 146 | implementation is available to the public in source code form. A 147 | "Major Component", in this context, means a major essential component 148 | (kernel, window system, and so on) of the specific operating system 149 | (if any) on which the executable work runs, or a compiler used to 150 | produce the work, or an object code interpreter used to run it. 151 | 152 | The "Corresponding Source" for a work in object code form means all 153 | the source code needed to generate, install, and (for an executable 154 | work) run the object code and to modify the work, including scripts to 155 | control those activities. However, it does not include the work's 156 | System Libraries, or general-purpose tools or generally available free 157 | programs which are used unmodified in performing those activities but 158 | which are not part of the work. For example, Corresponding Source 159 | includes interface definition files associated with source files for 160 | the work, and the source code for shared libraries and dynamically 161 | linked subprograms that the work is specifically designed to require, 162 | such as by intimate data communication or control flow between those 163 | subprograms and other parts of the work. 164 | 165 | The Corresponding Source need not include anything that users 166 | can regenerate automatically from other parts of the Corresponding 167 | Source. 168 | 169 | The Corresponding Source for a work in source code form is that 170 | same work. 171 | 172 | 2. Basic Permissions. 173 | 174 | All rights granted under this License are granted for the term of 175 | copyright on the Program, and are irrevocable provided the stated 176 | conditions are met. This License explicitly affirms your unlimited 177 | permission to run the unmodified Program. The output from running a 178 | covered work is covered by this License only if the output, given its 179 | content, constitutes a covered work. This License acknowledges your 180 | rights of fair use or other equivalent, as provided by copyright law. 181 | 182 | You may make, run and propagate covered works that you do not 183 | convey, without conditions so long as your license otherwise remains 184 | in force. You may convey covered works to others for the sole purpose 185 | of having them make modifications exclusively for you, or provide you 186 | with facilities for running those works, provided that you comply with 187 | the terms of this License in conveying all material for which you do 188 | not control copyright. Those thus making or running the covered works 189 | for you must do so exclusively on your behalf, under your direction 190 | and control, on terms that prohibit them from making any copies of 191 | your copyrighted material outside their relationship with you. 192 | 193 | Conveying under any other circumstances is permitted solely under 194 | the conditions stated below. Sublicensing is not allowed; section 10 195 | makes it unnecessary. 196 | 197 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 198 | 199 | No covered work shall be deemed part of an effective technological 200 | measure under any applicable law fulfilling obligations under article 201 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 202 | similar laws prohibiting or restricting circumvention of such 203 | measures. 204 | 205 | When you convey a covered work, you waive any legal power to forbid 206 | circumvention of technological measures to the extent such circumvention 207 | is effected by exercising rights under this License with respect to 208 | the covered work, and you disclaim any intention to limit operation or 209 | modification of the work as a means of enforcing, against the work's 210 | users, your or third parties' legal rights to forbid circumvention of 211 | technological measures. 212 | 213 | 4. Conveying Verbatim Copies. 214 | 215 | You may convey verbatim copies of the Program's source code as you 216 | receive it, in any medium, provided that you conspicuously and 217 | appropriately publish on each copy an appropriate copyright notice; 218 | keep intact all notices stating that this License and any 219 | non-permissive terms added in accord with section 7 apply to the code; 220 | keep intact all notices of the absence of any warranty; and give all 221 | recipients a copy of this License along with the Program. 222 | 223 | You may charge any price or no price for each copy that you convey, 224 | and you may offer support or warranty protection for a fee. 225 | 226 | 5. Conveying Modified Source Versions. 227 | 228 | You may convey a work based on the Program, or the modifications to 229 | produce it from the Program, in the form of source code under the 230 | terms of section 4, provided that you also meet all of these conditions: 231 | 232 | a) The work must carry prominent notices stating that you modified 233 | it, and giving a relevant date. 234 | 235 | b) The work must carry prominent notices stating that it is 236 | released under this License and any conditions added under section 237 | 7. This requirement modifies the requirement in section 4 to 238 | "keep intact all notices". 239 | 240 | c) You must license the entire work, as a whole, under this 241 | License to anyone who comes into possession of a copy. This 242 | License will therefore apply, along with any applicable section 7 243 | additional terms, to the whole of the work, and all its parts, 244 | regardless of how they are packaged. This License gives no 245 | permission to license the work in any other way, but it does not 246 | invalidate such permission if you have separately received it. 247 | 248 | d) If the work has interactive user interfaces, each must display 249 | Appropriate Legal Notices; however, if the Program has interactive 250 | interfaces that do not display Appropriate Legal Notices, your 251 | work need not make them do so. 252 | 253 | A compilation of a covered work with other separate and independent 254 | works, which are not by their nature extensions of the covered work, 255 | and which are not combined with it such as to form a larger program, 256 | in or on a volume of a storage or distribution medium, is called an 257 | "aggregate" if the compilation and its resulting copyright are not 258 | used to limit the access or legal rights of the compilation's users 259 | beyond what the individual works permit. Inclusion of a covered work 260 | in an aggregate does not cause this License to apply to the other 261 | parts of the aggregate. 262 | 263 | 6. Conveying Non-Source Forms. 264 | 265 | You may convey a covered work in object code form under the terms 266 | of sections 4 and 5, provided that you also convey the 267 | machine-readable Corresponding Source under the terms of this License, 268 | in one of these ways: 269 | 270 | a) Convey the object code in, or embodied in, a physical product 271 | (including a physical distribution medium), accompanied by the 272 | Corresponding Source fixed on a durable physical medium 273 | customarily used for software interchange. 274 | 275 | b) Convey the object code in, or embodied in, a physical product 276 | (including a physical distribution medium), accompanied by a 277 | written offer, valid for at least three years and valid for as 278 | long as you offer spare parts or customer support for that product 279 | model, to give anyone who possesses the object code either (1) a 280 | copy of the Corresponding Source for all the software in the 281 | product that is covered by this License, on a durable physical 282 | medium customarily used for software interchange, for a price no 283 | more than your reasonable cost of physically performing this 284 | conveying of source, or (2) access to copy the 285 | Corresponding Source from a network server at no charge. 286 | 287 | c) Convey individual copies of the object code with a copy of the 288 | written offer to provide the Corresponding Source. This 289 | alternative is allowed only occasionally and noncommercially, and 290 | only if you received the object code with such an offer, in accord 291 | with subsection 6b. 292 | 293 | d) Convey the object code by offering access from a designated 294 | place (gratis or for a charge), and offer equivalent access to the 295 | Corresponding Source in the same way through the same place at no 296 | further charge. You need not require recipients to copy the 297 | Corresponding Source along with the object code. If the place to 298 | copy the object code is a network server, the Corresponding Source 299 | may be on a different server (operated by you or a third party) 300 | that supports equivalent copying facilities, provided you maintain 301 | clear directions next to the object code saying where to find the 302 | Corresponding Source. Regardless of what server hosts the 303 | Corresponding Source, you remain obligated to ensure that it is 304 | available for as long as needed to satisfy these requirements. 305 | 306 | e) Convey the object code using peer-to-peer transmission, provided 307 | you inform other peers where the object code and Corresponding 308 | Source of the work are being offered to the general public at no 309 | charge under subsection 6d. 310 | 311 | A separable portion of the object code, whose source code is excluded 312 | from the Corresponding Source as a System Library, need not be 313 | included in conveying the object code work. 314 | 315 | A "User Product" is either (1) a "consumer product", which means any 316 | tangible personal property which is normally used for personal, family, 317 | or household purposes, or (2) anything designed or sold for incorporation 318 | into a dwelling. In determining whether a product is a consumer product, 319 | doubtful cases shall be resolved in favor of coverage. For a particular 320 | product received by a particular user, "normally used" refers to a 321 | typical or common use of that class of product, regardless of the status 322 | of the particular user or of the way in which the particular user 323 | actually uses, or expects or is expected to use, the product. A product 324 | is a consumer product regardless of whether the product has substantial 325 | commercial, industrial or non-consumer uses, unless such uses represent 326 | the only significant mode of use of the product. 327 | 328 | "Installation Information" for a User Product means any methods, 329 | procedures, authorization keys, or other information required to install 330 | and execute modified versions of a covered work in that User Product from 331 | a modified version of its Corresponding Source. The information must 332 | suffice to ensure that the continued functioning of the modified object 333 | code is in no case prevented or interfered with solely because 334 | modification has been made. 335 | 336 | If you convey an object code work under this section in, or with, or 337 | specifically for use in, a User Product, and the conveying occurs as 338 | part of a transaction in which the right of possession and use of the 339 | User Product is transferred to the recipient in perpetuity or for a 340 | fixed term (regardless of how the transaction is characterized), the 341 | Corresponding Source conveyed under this section must be accompanied 342 | by the Installation Information. But this requirement does not apply 343 | if neither you nor any third party retains the ability to install 344 | modified object code on the User Product (for example, the work has 345 | been installed in ROM). 346 | 347 | The requirement to provide Installation Information does not include a 348 | requirement to continue to provide support service, warranty, or updates 349 | for a work that has been modified or installed by the recipient, or for 350 | the User Product in which it has been modified or installed. Access to a 351 | network may be denied when the modification itself materially and 352 | adversely affects the operation of the network or violates the rules and 353 | protocols for communication across the network. 354 | 355 | Corresponding Source conveyed, and Installation Information provided, 356 | in accord with this section must be in a format that is publicly 357 | documented (and with an implementation available to the public in 358 | source code form), and must require no special password or key for 359 | unpacking, reading or copying. 360 | 361 | 7. Additional Terms. 362 | 363 | "Additional permissions" are terms that supplement the terms of this 364 | License by making exceptions from one or more of its conditions. 365 | Additional permissions that are applicable to the entire Program shall 366 | be treated as though they were included in this License, to the extent 367 | that they are valid under applicable law. If additional permissions 368 | apply only to part of the Program, that part may be used separately 369 | under those permissions, but the entire Program remains governed by 370 | this License without regard to the additional permissions. 371 | 372 | When you convey a copy of a covered work, you may at your option 373 | remove any additional permissions from that copy, or from any part of 374 | it. (Additional permissions may be written to require their own 375 | removal in certain cases when you modify the work.) You may place 376 | additional permissions on material, added by you to a covered work, 377 | for which you have or can give appropriate copyright permission. 378 | 379 | Notwithstanding any other provision of this License, for material you 380 | add to a covered work, you may (if authorized by the copyright holders of 381 | that material) supplement the terms of this License with terms: 382 | 383 | a) Disclaiming warranty or limiting liability differently from the 384 | terms of sections 15 and 16 of this License; or 385 | 386 | b) Requiring preservation of specified reasonable legal notices or 387 | author attributions in that material or in the Appropriate Legal 388 | Notices displayed by works containing it; or 389 | 390 | c) Prohibiting misrepresentation of the origin of that material, or 391 | requiring that modified versions of such material be marked in 392 | reasonable ways as different from the original version; or 393 | 394 | d) Limiting the use for publicity purposes of names of licensors or 395 | authors of the material; or 396 | 397 | e) Declining to grant rights under trademark law for use of some 398 | trade names, trademarks, or service marks; or 399 | 400 | f) Requiring indemnification of licensors and authors of that 401 | material by anyone who conveys the material (or modified versions of 402 | it) with contractual assumptions of liability to the recipient, for 403 | any liability that these contractual assumptions directly impose on 404 | those licensors and authors. 405 | 406 | All other non-permissive additional terms are considered "further 407 | restrictions" within the meaning of section 10. If the Program as you 408 | received it, or any part of it, contains a notice stating that it is 409 | governed by this License along with a term that is a further 410 | restriction, you may remove that term. If a license document contains 411 | a further restriction but permits relicensing or conveying under this 412 | License, you may add to a covered work material governed by the terms 413 | of that license document, provided that the further restriction does 414 | not survive such relicensing or conveying. 415 | 416 | If you add terms to a covered work in accord with this section, you 417 | must place, in the relevant source files, a statement of the 418 | additional terms that apply to those files, or a notice indicating 419 | where to find the applicable terms. 420 | 421 | Additional terms, permissive or non-permissive, may be stated in the 422 | form of a separately written license, or stated as exceptions; 423 | the above requirements apply either way. 424 | 425 | 8. Termination. 426 | 427 | You may not propagate or modify a covered work except as expressly 428 | provided under this License. Any attempt otherwise to propagate or 429 | modify it is void, and will automatically terminate your rights under 430 | this License (including any patent licenses granted under the third 431 | paragraph of section 11). 432 | 433 | However, if you cease all violation of this License, then your 434 | license from a particular copyright holder is reinstated (a) 435 | provisionally, unless and until the copyright holder explicitly and 436 | finally terminates your license, and (b) permanently, if the copyright 437 | holder fails to notify you of the violation by some reasonable means 438 | prior to 60 days after the cessation. 439 | 440 | Moreover, your license from a particular copyright holder is 441 | reinstated permanently if the copyright holder notifies you of the 442 | violation by some reasonable means, this is the first time you have 443 | received notice of violation of this License (for any work) from that 444 | copyright holder, and you cure the violation prior to 30 days after 445 | your receipt of the notice. 446 | 447 | Termination of your rights under this section does not terminate the 448 | licenses of parties who have received copies or rights from you under 449 | this License. If your rights have been terminated and not permanently 450 | reinstated, you do not qualify to receive new licenses for the same 451 | material under section 10. 452 | 453 | 9. Acceptance Not Required for Having Copies. 454 | 455 | You are not required to accept this License in order to receive or 456 | run a copy of the Program. Ancillary propagation of a covered work 457 | occurring solely as a consequence of using peer-to-peer transmission 458 | to receive a copy likewise does not require acceptance. However, 459 | nothing other than this License grants you permission to propagate or 460 | modify any covered work. These actions infringe copyright if you do 461 | not accept this License. Therefore, by modifying or propagating a 462 | covered work, you indicate your acceptance of this License to do so. 463 | 464 | 10. Automatic Licensing of Downstream Recipients. 465 | 466 | Each time you convey a covered work, the recipient automatically 467 | receives a license from the original licensors, to run, modify and 468 | propagate that work, subject to this License. You are not responsible 469 | for enforcing compliance by third parties with this License. 470 | 471 | An "entity transaction" is a transaction transferring control of an 472 | organization, or substantially all assets of one, or subdividing an 473 | organization, or merging organizations. If propagation of a covered 474 | work results from an entity transaction, each party to that 475 | transaction who receives a copy of the work also receives whatever 476 | licenses to the work the party's predecessor in interest had or could 477 | give under the previous paragraph, plus a right to possession of the 478 | Corresponding Source of the work from the predecessor in interest, if 479 | the predecessor has it or can get it with reasonable efforts. 480 | 481 | You may not impose any further restrictions on the exercise of the 482 | rights granted or affirmed under this License. For example, you may 483 | not impose a license fee, royalty, or other charge for exercise of 484 | rights granted under this License, and you may not initiate litigation 485 | (including a cross-claim or counterclaim in a lawsuit) alleging that 486 | any patent claim is infringed by making, using, selling, offering for 487 | sale, or importing the Program or any portion of it. 488 | 489 | 11. Patents. 490 | 491 | A "contributor" is a copyright holder who authorizes use under this 492 | License of the Program or a work on which the Program is based. The 493 | work thus licensed is called the contributor's "contributor version". 494 | 495 | A contributor's "essential patent claims" are all patent claims 496 | owned or controlled by the contributor, whether already acquired or 497 | hereafter acquired, that would be infringed by some manner, permitted 498 | by this License, of making, using, or selling its contributor version, 499 | but do not include claims that would be infringed only as a 500 | consequence of further modification of the contributor version. For 501 | purposes of this definition, "control" includes the right to grant 502 | patent sublicenses in a manner consistent with the requirements of 503 | this License. 504 | 505 | Each contributor grants you a non-exclusive, worldwide, royalty-free 506 | patent license under the contributor's essential patent claims, to 507 | make, use, sell, offer for sale, import and otherwise run, modify and 508 | propagate the contents of its contributor version. 509 | 510 | In the following three paragraphs, a "patent license" is any express 511 | agreement or commitment, however denominated, not to enforce a patent 512 | (such as an express permission to practice a patent or covenant not to 513 | sue for patent infringement). To "grant" such a patent license to a 514 | party means to make such an agreement or commitment not to enforce a 515 | patent against the party. 516 | 517 | If you convey a covered work, knowingly relying on a patent license, 518 | and the Corresponding Source of the work is not available for anyone 519 | to copy, free of charge and under the terms of this License, through a 520 | publicly available network server or other readily accessible means, 521 | then you must either (1) cause the Corresponding Source to be so 522 | available, or (2) arrange to deprive yourself of the benefit of the 523 | patent license for this particular work, or (3) arrange, in a manner 524 | consistent with the requirements of this License, to extend the patent 525 | license to downstream recipients. "Knowingly relying" means you have 526 | actual knowledge that, but for the patent license, your conveying the 527 | covered work in a country, or your recipient's use of the covered work 528 | in a country, would infringe one or more identifiable patents in that 529 | country that you have reason to believe are valid. 530 | 531 | If, pursuant to or in connection with a single transaction or 532 | arrangement, you convey, or propagate by procuring conveyance of, a 533 | covered work, and grant a patent license to some of the parties 534 | receiving the covered work authorizing them to use, propagate, modify 535 | or convey a specific copy of the covered work, then the patent license 536 | you grant is automatically extended to all recipients of the covered 537 | work and works based on it. 538 | 539 | A patent license is "discriminatory" if it does not include within 540 | the scope of its coverage, prohibits the exercise of, or is 541 | conditioned on the non-exercise of one or more of the rights that are 542 | specifically granted under this License. You may not convey a covered 543 | work if you are a party to an arrangement with a third party that is 544 | in the business of distributing software, under which you make payment 545 | to the third party based on the extent of your activity of conveying 546 | the work, and under which the third party grants, to any of the 547 | parties who would receive the covered work from you, a discriminatory 548 | patent license (a) in connection with copies of the covered work 549 | conveyed by you (or copies made from those copies), or (b) primarily 550 | for and in connection with specific products or compilations that 551 | contain the covered work, unless you entered into that arrangement, 552 | or that patent license was granted, prior to 28 March 2007. 553 | 554 | Nothing in this License shall be construed as excluding or limiting 555 | any implied license or other defenses to infringement that may 556 | otherwise be available to you under applicable patent law. 557 | 558 | 12. No Surrender of Others' Freedom. 559 | 560 | If conditions are imposed on you (whether by court order, agreement or 561 | otherwise) that contradict the conditions of this License, they do not 562 | excuse you from the conditions of this License. If you cannot convey a 563 | covered work so as to satisfy simultaneously your obligations under this 564 | License and any other pertinent obligations, then as a consequence you may 565 | not convey it at all. For example, if you agree to terms that obligate you 566 | to collect a royalty for further conveying from those to whom you convey 567 | the Program, the only way you could satisfy both those terms and this 568 | License would be to refrain entirely from conveying the Program. 569 | 570 | 13. Use with the GNU Affero General Public License. 571 | 572 | Notwithstanding any other provision of this License, you have 573 | permission to link or combine any covered work with a work licensed 574 | under version 3 of the GNU Affero General Public License into a single 575 | combined work, and to convey the resulting work. The terms of this 576 | License will continue to apply to the part which is the covered work, 577 | but the special requirements of the GNU Affero General Public License, 578 | section 13, concerning interaction through a network will apply to the 579 | combination as such. 580 | 581 | 14. Revised Versions of this License. 582 | 583 | The Free Software Foundation may publish revised and/or new versions of 584 | the GNU General Public License from time to time. Such new versions will 585 | be similar in spirit to the present version, but may differ in detail to 586 | address new problems or concerns. 587 | 588 | Each version is given a distinguishing version number. If the 589 | Program specifies that a certain numbered version of the GNU General 590 | Public License "or any later version" applies to it, you have the 591 | option of following the terms and conditions either of that numbered 592 | version or of any later version published by the Free Software 593 | Foundation. If the Program does not specify a version number of the 594 | GNU General Public License, you may choose any version ever published 595 | by the Free Software Foundation. 596 | 597 | If the Program specifies that a proxy can decide which future 598 | versions of the GNU General Public License can be used, that proxy's 599 | public statement of acceptance of a version permanently authorizes you 600 | to choose that version for the Program. 601 | 602 | Later license versions may give you additional or different 603 | permissions. However, no additional obligations are imposed on any 604 | author or copyright holder as a result of your choosing to follow a 605 | later version. 606 | 607 | 15. Disclaimer of Warranty. 608 | 609 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 610 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 611 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 612 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 613 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 614 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 615 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 616 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 617 | 618 | 16. Limitation of Liability. 619 | 620 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 621 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 622 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 623 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 624 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 625 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 626 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 627 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 628 | SUCH DAMAGES. 629 | 630 | 17. Interpretation of Sections 15 and 16. 631 | 632 | If the disclaimer of warranty and limitation of liability provided 633 | above cannot be given local legal effect according to their terms, 634 | reviewing courts shall apply local law that most closely approximates 635 | an absolute waiver of all civil liability in connection with the 636 | Program, unless a warranty or assumption of liability accompanies a 637 | copy of the Program in return for a fee. 638 | 639 | END OF TERMS AND CONDITIONS -------------------------------------------------------------------------------- /Midi/001_Elton_John-1.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/Midi/001_Elton_John-1.MID -------------------------------------------------------------------------------- /Midi/002_Keith_Jarrett.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/Midi/002_Keith_Jarrett.MID -------------------------------------------------------------------------------- /Midi/003_Bach.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/Midi/003_Bach.MID -------------------------------------------------------------------------------- /Midi/004_Beatles_Hey_Jude.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/Midi/004_Beatles_Hey_Jude.MID -------------------------------------------------------------------------------- /Midi/005_Beatles_Hey_Jude_NH-1.MID: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/Midi/005_Beatles_Hey_Jude_NH-1.MID -------------------------------------------------------------------------------- /cacheLibraries.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # Caches required libraries to local disk for offline access (or if the cdn fails) 3 | 4 | mkdir -p lib/JZZ lib/Vue 5 | 6 | curl https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js > lib/Vue/vue.min.js 7 | curl https://cdn.jsdelivr.net/npm/jzz > lib/JZZ/jzz.js 8 | curl https://cdn.jsdelivr.net/npm/jzz-synth-tiny > lib/JZZ/JZZ.synth.Tiny.min.js 9 | curl https://cdn.jsdelivr.net/npm/jzz-input-kbd > lib/JZZ/jzz-input-kbd.js 10 | curl https://cdn.jsdelivr.net/npm/jzz-midi-smf > lib/JZZ/jzz-midi-smf.js 11 | curl https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js > lib/GSAP 12 | -------------------------------------------------------------------------------- /circle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Tonnetz – One Key, Many Representations 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 | -------------------------------------------------------------------------------- /fonts/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2011 The Quicksand Project Authors (https://github.com/andrew-paglinawan/QuicksandFamily), with Reserved Font Name “Quicksand”. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /fonts/quicksand-bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/fonts/quicksand-bold.woff -------------------------------------------------------------------------------- /fonts/quicksand-book.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IMAGINARY/web-hexachord/597b24f829b076b2f72b2fd8a2a06a8f21361e99/fonts/quicksand-book.woff -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* Author: Corentin Guichaoua, Philipp Legner */ 2 | 3 | @font-face { 4 | font-family: 'Quicksand'; 5 | font-style: normal; 6 | font-weight: normal; 7 | src: url('fonts/quicksand-book.woff') format('woff'); 8 | } 9 | 10 | @font-face { 11 | font-family: 'Quicksand'; 12 | font-style: normal; 13 | font-weight: 700; 14 | src: url('fonts/quicksand-bold.woff') format('woff'); 15 | } 16 | 17 | html, body { margin: 0; padding: 0; font-family: 'Quicksand'; color: #323248; } 18 | [v-cloak] { display: none; } 19 | 20 | .header { display: flex; } 21 | .header > * { width: 8%; flex-grow: 1; height: 20px; } 22 | 23 | h1 { text-align: center; text-transform: uppercase; margin: 12px 0 4px; font-size: 40px; } 24 | h2 { text-align: center; text-transform: uppercase; color: #aaa; margin: 0 0 20px; } 25 | 26 | div { /* No reason for anything to be selectable */ 27 | -webkit-user-select: none; /* Safari 3.1+ */ 28 | -moz-user-select: none; /* Firefox 2+ */ 29 | -ms-user-select: none; /* IE 10+ */ 30 | user-select: none; /* Standard syntax */ 31 | } 32 | 33 | .reset { cursor: pointer; position: fixed; top: 30px; right: 10px; font-size: 14px; color: #aaa; } 34 | .reset:hover { text-decoration: underline; } 35 | 36 | .languageSwitcher { cursor: pointer; position: fixed; top: 30px; left: 10px; font-size: 14px; color: #aaa; } 37 | .languageSwitcher div:hover { text-decoration: underline; } 38 | 39 | .columns { display: flex; flex-wrap: wrap; justify-content: center; } 40 | .col-1 { max-width: 1000px; margin: 20px; flex: 3 1 450px; } 41 | .col-2 { max-width: 320px; margin: 20px; flex: 1 1 135px; } 42 | 43 | button { cursor: pointer; outline: none; font-size: 18px; font-family: inherit; 44 | line-height: 1.5em; padding: 0 10px; } 45 | 46 | .button-row { display: flex; margin: 0 0 0 1px; } 47 | .options { flex-grow: 1; display: flex; flex-wrap: wrap; } 48 | .button-row button { width: 16%; border: 1px solid #323248; margin: -1px 0 0 -1px; flex-grow: 1; 49 | transition: background .2s, color .2s; } 50 | .button-row button:hover { background-color: #ccc; } 51 | .button-row button.active { background-color: #323248; color: #fff; } 52 | .options + button { flex-shrink: 0; border-bottom-right-radius: 6px; width: 14%; } 53 | .button-row button:nth-child(7) { border-bottom-left-radius: 6px; } 54 | 55 | @media screen and (max-width: 820px) { button { font-size: 14px; } } 56 | @media screen and (max-width: 490px) { button { font-size: 12px; } } 57 | 58 | .warning { text-align: center; color: #aaa; font-style: italic; margin: 10px 0 0; } 59 | 60 | circle { fill: white; stroke: #aaa; } 61 | line { stroke: #aaa; } 62 | polygon { stroke: #aaa; fill : white; } 63 | text { fill: #aaa; font-size: 14px; text-anchor: middle; dominant-baseline: mathematical; } 64 | 65 | .tonnetz, .clock { display: block; user-select: none; max-width: 100%; height: auto; } 66 | .tonnetz { border: 1px solid #323248; border-radius: 6px 6px 0 0; box-sizing: border-box; } 67 | .clock { stroke-width: 2px; margin-bottom: 10px; } 68 | .clock text { font-weight: 700; font-size: 24px} 69 | .noteClock circle { r: 24 } 70 | 71 | .activeDichord, .activeTrichord { stroke: #323248; stroke-width: 2; fill: #ccc; } 72 | .activeNode + text { fill: white; } 73 | .activeTrichord + text { fill: #323248; } 74 | .clockPolygon { fill: #ccc; stroke: #323248; stroke-width: 3; } 75 | 76 | .visitedNode { fill: lightyellow; } 77 | .visitedDichord { stroke-width : 2; } 78 | .visitedTrichord { fill : lightgreen; } 79 | 80 | /*Tonnetz-specific stylings */ 81 | .tonnetzNote circle { r: 12 } 82 | .tonnetzDichord circle { r: 2} 83 | /* .tonnetzTrichord */ 84 | /* CWT-specific stylings*/ 85 | /* .chickenNote */ 86 | .chickenDichord circle { r: 2} 87 | .chickenTrichord circle { r: 10 } 88 | .chickenTrichord text {font-size: 70%} 89 | 90 | .key-selector { display: flex; flex-wrap: wrap; justify-content: center; } 91 | .key-selector button { background: white; width: 28px; height: 28px; border: 2px solid #aaa; 92 | color: #aaa; padding: 0; margin: 2px; line-height: 25px; font-size: 14px; 93 | border-radius: 20px; font-weight: 700; } 94 | .key-selector .activeNode { color: white; } 95 | 96 | .activeNode[data-key="3"] { fill: #b30469; stroke: #b30469; background: #b30469; border-color: #b30469; } 97 | .activeNode[data-key="4"] { fill: #822b9b; stroke: #822b9b; background: #822b9b; border-color: #822b9b; } 98 | .activeNode[data-key="5"] { fill: #5053cd; stroke: #5053cd; background: #5053cd; border-color: #5053cd; } 99 | .activeNode[data-key="6"] { fill: #1f7aff; stroke: #1f7aff; background: #1f7aff; border-color: #1f7aff; } 100 | .activeNode[data-key="7"] { fill: #258dab; stroke: #258dab; background: #258dab; border-color: #258dab; } 101 | .activeNode[data-key="8"] { fill: #2ba058; stroke: #2ba058; background: #2ba058; border-color: #2ba058; } 102 | .activeNode[data-key="9"] { fill: #31b304; stroke: #31b304; background: #31b304; border-color: #31b304; } 103 | .activeNode[data-key="10"] { fill: #76a90d; stroke: #76a90d; background: #76a90d; border-color: #76a90d; } 104 | .activeNode[data-key="11"] { fill: #e6bd00; stroke: #e6bd00; background: #e6bd00; border-color: #e6bd00; } 105 | .activeNode[data-key="0"] { fill: #ff941f; stroke: #ff941f; background: #ff941f; border-color: #ff941f; } 106 | .activeNode[data-key="1"] { fill: #e66438; stroke: #e66438; background: #e66438; border-color: #e66438; } 107 | .activeNode[data-key="2"] { fill: #cc3450; stroke: #cc3450; background: #cc3450; border-color: #cc3450; } 108 | 109 | .record { width: 100%; margin: 12px 20px 32px; text-align: center; } 110 | .record button { border: none; background: #ddd; border-radius: 4px; line-height: 32px; 111 | padding: 0 16px; margin: 4px; font-size: 16px; transition: background .2s; } 112 | .record button:hover, .record button:focus { background: #bbb; } 113 | .record button[disabled] { display: none; } /* Don't buttons when disabled. */ 114 | 115 | .modal-background { position: fixed; top: 0; left: 0; bottom: 0; right: 0; 116 | background: rgba(0,0,0,0.6); z-index: 1; } 117 | .modal { position: fixed; z-index: 1; background: white; border-radius: 16px; font-size: 18px; 118 | width: 480px; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 40px); 119 | padding: 10px 20px; } 120 | .modal p, .modal form { margin: .8em 0; } 121 | .modal hr { border: 0; border-bottom: 1px solid #ccc; } 122 | .modal input { max-width: 100%; box-sizing: border-box; font-family: inherit; text-align: center; 123 | font-size: 16px; } 124 | 125 | .song-select { width: 100%; } 126 | 127 | .piano-wrap { position: relative; height: 151px; overflow: hidden; } 128 | #piano { position: absolute; left: 50%; margin-left: -740px; } 129 | #piano .inner { text-align: center; display: block; font-size: 14px; margin-top: 4px; } 130 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Tonnetz – One Key, Many Representations 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 |

{{ strings.title }}

28 |

{{ strings.subtitle }}

29 | 30 |
{{ strings.reset }}
31 | 32 |
33 |
34 | 35 |
36 | 37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /js/components/clockOctave.js: -------------------------------------------------------------------------------- 1 | 2 | // Note component : a clickable circle with the note name 3 | let noteClock = { 4 | mixins: [activableMixin], 5 | computed: { 6 | strings:function(){ 7 | return this.$root.strings 8 | } 9 | }, 10 | template: ` 11 | 12 | 13 | 14 | 15 | {{ strings.notes[notes[0].id] }} 16 | 17 | 18 | ` 19 | } 20 | 21 | //The circle representation 22 | let clockOctave = { 23 | components:{ 24 | clickToPlayWrapper, 25 | noteClock 26 | }, 27 | props: { 28 | height: Number, 29 | width: Number, 30 | nodeRadius: { 31 | type:Number, 32 | default:24 33 | }, 34 | notes: Array, 35 | intervals: { 36 | type: Number, 37 | default: 1 38 | } 39 | }, 40 | computed: { 41 | center: function(){ 42 | return {y:this.height/2,x:this.width/2} 43 | }, 44 | radius: function(){ 45 | const nodeRadius = 24; 46 | const nodeStrokeWidth = 2; //TODO: dynamically adjust values according to the style sheet 47 | return Math.min(this.height/2,this.width/2) - nodeRadius - nodeStrokeWidth/2; 48 | }, 49 | viewbox: function(){ 50 | return `0 0 ${this.width} ${this.height}` 51 | }, 52 | getCoords: function(){ 53 | var result = []; 54 | for(i of range(0,12)){ 55 | if(this.notes[mod(i*this.intervals,12)].count>0){ 56 | let node = mod(i*this.intervals,12); 57 | result.push(this.position(node)) 58 | } 59 | } 60 | return result; 61 | }, 62 | points: function (){ 63 | return this.getCoords.map( ({x,y}) => `${x},${y}` ).join(' ') 64 | }, 65 | //Returns the number of active notes 66 | noteCount: function (){ 67 | return this.notes.reduce( (count,note) => (note.count>0 ? count+1 : count),0); 68 | } 69 | }, 70 | methods: { 71 | node2Notes: function (nodes){ 72 | return nodes.map(node => this.notes[mod(node,12)]) 73 | }, 74 | genKey: function (n){ 75 | return "circle_"+n[0]; 76 | }, 77 | nodesToPitches: function(nodes){ 78 | let A3 = 57; 79 | return nodes.map(node => A3+node); 80 | }, 81 | position(node){ 82 | let theta = -2*Math.PI*(mod(this.intervals*(node-3),12)/12 - 1/4); 83 | return pos = { 84 | x: this.center.x+this.radius*Math.cos(theta), 85 | y: this.center.y-this.radius*Math.sin(theta) 86 | } 87 | }, 88 | posToTransform(pos){ 89 | return `translate(${pos.x},${pos.y})` 90 | } 91 | }, 92 | template: ` 93 | 96 | 97 | 99 | 103 | 106 | 107 | 108 | ` 109 | } 110 | 111 | var Tonnetz_clockOctave = true -------------------------------------------------------------------------------- /js/components/intervalTable.js: -------------------------------------------------------------------------------- 1 | //Table displaying the interval content 2 | let intervalTable = { 3 | props:{ 4 | notes:{ 5 | type:Array, 6 | required: true 7 | } 8 | }, 9 | computed:{ 10 | intervalContent: function(){ 11 | let length = this.notes.length 12 | let result = Array(length).fill(0) 13 | for(index1 of range(0,length)){ 14 | if(this.notes[index1].count){ 15 | for(index2 of range(0,length)){ 16 | if(this.notes[index2].count){ 17 | result[mod(index2-index1,12)]+=1 18 | } 19 | } 20 | } 21 | } 22 | return result 23 | } 24 | }, 25 | template:` 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
Interval{{key}}
Content{{ic}}
36 | ` 37 | } 38 | 39 | 40 | 41 | var Tonnetz_intervalTable = true -------------------------------------------------------------------------------- /js/components/pianoKeyboard.js: -------------------------------------------------------------------------------- 1 | // A wrapper component for JZZ's keyboard element 2 | let pianoKeyboard = { 3 | props:{ 4 | id:{ 5 | type:String, 6 | default: 'piano' 7 | }, 8 | keybinds:{ 9 | type:Boolean, 10 | default: false 11 | } 12 | }, 13 | template: ` 14 |
15 |
16 | `, 17 | mounted: function(){ 18 | piano = JZZ.input.Kbd( 19 | { 20 | at:this.id, 21 | from:'C3', 22 | to:'B7', 23 | onCreate:function() { 24 | this.getBlackKeys().setStyle({color:'#fff'}); 25 | 26 | if(this.keybinds){ 27 | this.getKey('C5').setInnerHTML('W'); 28 | this.getKey('C#5').setInnerHTML('S'); 29 | this.getKey('D5').setInnerHTML('X'); 30 | this.getKey('D#5').setInnerHTML('D'); 31 | this.getKey('E5').setInnerHTML('C'); 32 | this.getKey('F5').setInnerHTML('V'); 33 | this.getKey('F#5').setInnerHTML('G'); 34 | this.getKey('G5').setInnerHTML('B'); 35 | this.getKey('G#5').setInnerHTML('H'); 36 | this.getKey('A5').setInnerHTML('N'); 37 | this.getKey('A#5').setInnerHTML('J'); 38 | } 39 | } 40 | }); 41 | midiBus.midiThru.connect(piano); 42 | piano.connect(midiBus.midiThru); 43 | } 44 | } 45 | 46 | var Tonnetz_piano = true -------------------------------------------------------------------------------- /js/components/playRecorder.js: -------------------------------------------------------------------------------- 1 | let playRecorder = { 2 | components: {songLoader}, 3 | data: function(){return{ 4 | // The Midi player provided by JZZ 5 | player: {playing:false, play:noop, pause:noop, stop: noop, resume:noop}, 6 | // Is recording in progress? 7 | recording: false, 8 | // Is the modal window open? 9 | modal: false, 10 | startTime:undefined, 11 | SMF:undefined, 12 | recording:false 13 | }}, 14 | computed:{ 15 | strings: function(){return this.$root.strings} 16 | }, 17 | methods:{ 18 | resetNotes: function(){ 19 | this.$emit('reset-notes'); 20 | }, 21 | //Toggles playback 22 | playPause: function() { 23 | if (this.player.playing) { 24 | this.player.pause(); 25 | }else if(this.player.paused){ 26 | this.player.resume(); 27 | }else{ 28 | this.resetNotes(); 29 | this.player.play(); 30 | } 31 | }, 32 | // Stops playback 33 | stop: function(){ 34 | if(this.player){ 35 | this.player.stop(); 36 | } 37 | setTimeout(this.resetNotes,10); // Reset in a timer in case some timers could not be cleared 38 | //This can occur when some events'handling are queued behind this function 39 | }, 40 | // Loads a Midi File from its byte representation 41 | load: function(data, name) { 42 | this.modal=false; 43 | this.resetNotes(); 44 | if(this.player.playing){ 45 | this.stop(); 46 | } 47 | try { 48 | this.SMF = JZZ.MIDI.SMF(data); 49 | this.player = this.SMF.player(); 50 | this.player.connect(midiBus.midiThru); 51 | this.player.play(); 52 | } catch (e) { 53 | console.log(e); 54 | throw e; 55 | } 56 | }, 57 | // Loads the recorded midi 58 | fromTrajectory : function () { 59 | //Stop playback to avoid overlapping 60 | if(this.player.playing){ 61 | this.stop(); 62 | } 63 | this.SMF=this.SMF; 64 | this.player = this.SMF.player(); 65 | this.player.connect(midiBus.midiThru); 66 | this.resetNotes(); 67 | }, 68 | rotate: function(){ 69 | this.stop() 70 | this.rotateTrajectory(this.SMF); 71 | // Does the player really need to be reassigned ? 72 | this.player=this.SMF.player(); 73 | this.player.connect(midiBus.midiThru); 74 | 75 | this.player.play(); 76 | }, 77 | translate: function(translate=1){ 78 | this.stop() 79 | this.translateTrajectory(this.SMF,translate); 80 | // Does the player really need to be reassigned ? 81 | this.player=this.SMF.player(); 82 | this.player.connect(midiBus.midiThru); 83 | 84 | this.player.play(); 85 | }, 86 | //Simple version operating on pitches alone 87 | rotateTrajectory : function (SMF) { 88 | for (SMFTrack of SMF){ 89 | let symmetryCenter = undefined; 90 | for (SME of SMFTrack){ 91 | let note = SME.getNote(); 92 | if(note !== undefined){ 93 | if (symmetryCenter === undefined){ 94 | symmetryCenter = note; 95 | }else{ 96 | noteIntervalClass = mod(2*(symmetryCenter - note),12) 97 | // If the interval is a fifth or more, take the descending interval instead 98 | if(noteIntervalClass > 6){ 99 | note += noteIntervalClass-12 100 | }else{ 101 | note += noteIntervalClass 102 | } 103 | } 104 | SME.setNote(note); 105 | } 106 | } 107 | } 108 | }, 109 | // Transposes a recording by a given number of semitones 110 | translateTrajectory : function (SMF,translate) { 111 | for (SMFTrack of SMF){ 112 | for (SME of SMFTrack){ 113 | let note = SME.getNote(); 114 | if(note !== undefined){ 115 | SME.setNote(note+translate); 116 | } 117 | } 118 | } 119 | }, 120 | // Toggles recording and performs setup and unwinding of the recording 121 | recordToggle: function(){ 122 | if(this.recording){ 123 | this.recording = false; 124 | this.SMF[0].add(new Date().getTime() - this.startTime,JZZ.MIDI.smfEndOfTrack()); 125 | this.recording = false; 126 | this.stop(); 127 | this.fromTrajectory(); 128 | }else{ 129 | this.recording = true; 130 | this.SMF = new JZZ.MIDI.SMF(0,500); // 500 tpb, 120 bpm => 1 tick per millisecond 131 | this.SMF.push(new JZZ.MIDI.SMF.MTrk()); 132 | this.SMF[0].add(0,JZZ.MIDI.smfBPM(120)); 133 | this.startTime = new Date().getTime(); 134 | this.recording = true; 135 | } 136 | }, 137 | midiHandler: function(midiEvent){ 138 | if(this.recording){ 139 | if(midiEvent.isNoteOn()){ 140 | this.SMF[0].add(new Date().getTime()-this.startTime,JZZ.MIDI.noteOn(midiEvent.getChannel(),midiEvent.getNote(),midiEvent[2])) 141 | }else if(midiEvent.isNoteOff()){ 142 | this.SMF[0].add(new Date().getTime()-this.startTime,JZZ.MIDI.noteOff(midiEvent.getChannel(),midiEvent.getNote())); 143 | }else if(midiEvent.ff!==0x51){ // Ignore tempo events which mess with timing 144 | this.SMF[0].add(new Date().getTime()-this.startTime,midiEvent); 145 | } 146 | } 147 | }, 148 | download: function(){ 149 | let str = this.SMF.dump(); // MIDI file dumped as a string 150 | let b64 = JZZ.lib.toBase64(str); // convert to base-64 string 151 | 152 | let uri = 'data:audio/midi;base64,' + b64; // data URI 153 | var element = document.createElement('a'); 154 | element.setAttribute('href', uri); 155 | element.setAttribute('download', 'export.mid'); 156 | 157 | element.style.display = 'none'; 158 | document.body.appendChild(element); 159 | 160 | element.click(); 161 | 162 | document.body.removeChild(element); 163 | } 164 | }, 165 | mounted: function(){ 166 | midiBus.connect(this.midiHandler); 167 | }, 168 | template: ` 169 |
170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 |
179 | ` 180 | } 181 | 182 | var Tonnetz_playRecorder = true -------------------------------------------------------------------------------- /js/components/songLoader.js: -------------------------------------------------------------------------------- 1 | // Component to handle loading a MIDI file (including a modal window) 2 | let songLoader = { 3 | props:{ 4 | fileBrowser: Boolean, // Enable loading files from disk 5 | freeURL: Boolean // Enable loading files from a distant URL 6 | }, 7 | data: function(){return { 8 | // List of preset songs 9 | //STRETCH: Turn into a basic song library 10 | files: [ 11 | { 12 | humanName:"Elton John — Your Song", 13 | fileName:"Midi/001_Elton_John-1.MID" 14 | }, 15 | { 16 | humanName:"Keith Jarrett — Extract of the Köln Concert", 17 | fileName:"Midi/002_Keith_Jarrett.MID" 18 | }, 19 | { 20 | humanName:"J. S. Bach — Aria of the Orchestral Suite n°3 (BWV 1068)", 21 | fileName:"Midi/003_Bach.MID" 22 | }, 23 | { 24 | humanName:"The Beatles — Hey Jude", 25 | fileName:"Midi/004_Beatles_Hey_Jude.MID" 26 | }, 27 | { 28 | humanName:"The Beatles — Hey Jude (Negative Harmony Revised)", 29 | fileName:"Midi/005_Beatles_Hey_Jude_NH-1.MID" 30 | }, 31 | ], 32 | }}, 33 | methods:{ 34 | // Loads a Midi File from a file on disk 35 | fromFile: function () { 36 | if (window.FileReader) { 37 | var reader = new FileReader(); 38 | var f = document.getElementById('file').files[0]; 39 | _this = this; 40 | reader.onload = function(e) { 41 | var data = ''; 42 | var bytes = new Uint8Array(e.target.result); 43 | data = bytes.reduce((d,byte) => d+String.fromCharCode(byte),'') 44 | 45 | _this.$emit('load',data, f.name); 46 | } 47 | ; 48 | reader.readAsArrayBuffer(f); 49 | } else 50 | console.log('File API is not supported in this browser.'); 51 | }, 52 | // Loads a distant Midi file 53 | fromURL: function (url) { 54 | //var url = document.getElementById('url').value; 55 | try { 56 | var xhttp = new XMLHttpRequest(); 57 | _this = this; 58 | xhttp.onreadystatechange = function() { 59 | if (this.readyState == 4) { 60 | if (this.status == 200) { 61 | var r = xhttp.responseText; 62 | var data = ''; 63 | for (var i = 0; i < r.length; i++) 64 | data += String.fromCharCode(r.charCodeAt(i) & 0xff); 65 | _this.$emit('load',data, url); 66 | }else{ 67 | console.log("Couldn't execute xhttp request."); 68 | } 69 | } 70 | } 71 | ; 72 | xhttp.overrideMimeType('text/plain; charset=x-user-defined'); 73 | xhttp.open('GET', encodeURIComponent(url), true); 74 | xhttp.send(); 75 | } catch (e) { 76 | console.log("Couldn't execute xhttp request."); 77 | } 78 | }, 79 | // Loads the preset demo song 80 | fromBase64: function () { 81 | this.$emit('load', JZZ.lib.fromBase64(data), 'Base64 data'); 82 | }, 83 | }, 84 | template: ` 85 |
86 |
87 |
88 |

89 | 95 | 100 |
101 |
102 | ` 103 | } 104 | 105 | // Example data : 'Mary had a little lamb' 106 | var data = '\ 107 | TVRoZAAAAAYAAQADAGRNVHJrAAAAGgD/AwtMaXR0bGUgTGFtYgD/UQMKLCsA/y8ATVRyawAAAPIA/wMF\ 108 | V29yZHMA/wEYQFRNYXJ5IFdhcyBBIExpdHRsZSBMYW1lZP8BA1xNYTL/AQNyeSAy/wEEd2FzIDL/AQJh\ 109 | IDL/AQNsaXQy/wEEdGxlIDL/AQVsYW1lLGT/AQQvTGl0Mv8BBHRsZSAy/wEFbGFtZSxk/wEEL0xpdDL/\ 110 | AQR0bGUgMv8BBWxhbWUsZP8BAy9NYTL/AQNyeSAy/wEEd2FzIDL/AQJhIDL/AQNsaXQy/wEEdGxlIDL/\ 111 | AQVsYW1lLDL/AQMvQSAy/wEDbGl0Mv8BBHRsZSAy/wEFbGFtZSAy/wEEd2FzIDL/AQRoZXIhAP8vAE1U\ 112 | cmsAAAC5AP8DBU11c2ljAMALZJBAfzJAAAA+fzI+AAA8fzI8AAA+fzI+AABAfzJAAABAfzJAAABAf1pA\ 113 | AAo+fzI+AAA+fzI+AAA+f1o+AApAfzJAAABDfzJDAABDf1pDAApAfzJAAAA+fzI+AAA8fzI8AAA+fzI+\ 114 | AABAfzJAAABAfzJAAABAf1pAAAo+fzI+AAA+fzI+AABAfzJAAAA+fzI+AAA8f2RAZABDZABIf1o8AABA\ 115 | AABDAABIAAr/LwA='; 116 | 117 | var Tonnetz_loader = true -------------------------------------------------------------------------------- /js/components/tonnetzLike.js: -------------------------------------------------------------------------------- 1 | 2 | // Note component : a clickable circle with the note name 3 | let noteTonnetz = { 4 | mixins: [activableMixin], 5 | computed:{ 6 | strings: function (){ 7 | return this.$root.strings 8 | } 9 | }, 10 | template: ` 11 | 12 | 14 | 15 | 16 | {{ strings.notes[notes[0].id] }} 17 | 18 | 19 | ` 20 | }; 21 | 22 | // Common code to all chord components 23 | let chord = { 24 | mixins: [activableMixin], 25 | props: { 26 | shape:{ //Relative (Tonnetz) coordinates of the chord 27 | type: Array, 28 | required: true 29 | } 30 | }, 31 | computed: { 32 | coords: function (){ // Relative SVG coordinates of the chord's notes 33 | return this.shape.map(logicalToSvg); 34 | }, 35 | center: function (){ // The barycenter of the coordinates 36 | return {x:average(this.coords.map(({x}) => x)), 37 | y:average(this.coords.map(({y}) => y))} 38 | } 39 | } 40 | } 41 | 42 | // Dichord component : a clickable line between the two notes that it contains, with a small circle for easier clicking 43 | let dichordTonnetz = { 44 | extends: chord, 45 | computed: { 46 | coordsHTML: function (){ // Repackages coordinates in the HTML/SVG format for lines 47 | return { 48 | x1 : this.coords[0].x, 49 | x2 : this.coords[1].x, 50 | y1 : this.coords[0].y, 51 | y2 : this.coords[1].y 52 | } 53 | } 54 | }, 55 | template: ` 56 | 57 | 59 | 60 | 62 | 63 | 64 | ` 65 | }; 66 | 67 | // Trichord component : a clickable triangle between the three notes that it contains 68 | let trichordTonnetz = { 69 | extends: chord, 70 | computed: { 71 | points: function (){ // Coordinates in the HTML format for polygons 72 | return this.coords.map( ({x,y}) => `${x},${y}` ).join(' ') 73 | } 74 | }, 75 | template: ` 76 | 79 | ` 80 | }; 81 | 82 | // Tonnetz-like component : A large component that holds the Tonnetz or the Chicken-Wire 83 | let tonnetzLike = { 84 | props: { 85 | notes: Array, // The notes and their status, forwarded from an upper-level 86 | intervals: { // The intervals from which to build the Tonnetz 87 | type: Array, 88 | default: () => [3,4,5] 89 | }, 90 | bounds: { // The bounds of the drawing area 91 | type: Object 92 | } 93 | }, 94 | computed: { 95 | // Returns the notes which fit in the drawing area 96 | // Actually also returns nodes which don't fit but for which a chord fits 97 | nodeList: function (){ 98 | var nodes = []; 99 | var xmin = Math.floor(this.bounds.xmin/(baseSize*xstep)) 100 | var xmax = Math.ceil(this.bounds.xmax/(baseSize*xstep)) 101 | for(xi of range(xmin,xmax+1)){ 102 | ymin = Math.floor(this.bounds.ymin/(baseSize)-xi/2) 103 | ymax = Math.ceil(this.bounds.ymax/(baseSize)-xi/2) 104 | for(yi of range(ymin,ymax+1)){ 105 | let node = {x:xi,y:yi}; 106 | nodes.push(node) 107 | } 108 | } 109 | return nodes; 110 | }, 111 | // Returns the dichords which fit in the drawing area 112 | dichordList: function (){ 113 | var nodes = []; 114 | //For each root 115 | for(node of this.nodeList){ 116 | nodes.push([{x:node.x,y:node.y},{x:node.x+1,y:node.y }]); 117 | nodes.push([{x:node.x,y:node.y},{x:node.x ,y:node.y+1}]); 118 | nodes.push([{x:node.x,y:node.y},{x:node.x-1,y:node.y+1}]); 119 | } 120 | return nodes; 121 | }, 122 | // Returns the triangles which fit in the drawing area 123 | trichordList: function (){ 124 | var nodes = []; 125 | //For each root (though actually the fifth) 126 | for(node of this.nodeList){ 127 | nodes.push([{x:node.x,y:node.y},{x:node.x+1,y:node.y },{x:node.x,y:node.y+1}]); 128 | nodes.push([{x:node.x,y:node.y},{x:node.x-1,y:node.y+1},{x:node.x,y:node.y+1}]); 129 | } 130 | return nodes; 131 | } 132 | }, 133 | methods: { 134 | // Converts an array of nodes to an array of the corresponding notes 135 | node2Notes: function (nodes){ 136 | return nodes.map(node => this.notes[mod(-node.x*this.intervals[0]+node.y*this.intervals[2],12)]) 137 | }, 138 | // Converts an array of nodes to an array of the corresponding Midi pitches 139 | nodesToPitches: function(nodes){ 140 | return nodes.map(nodeIt => { 141 | let x = 81-nodeIt.x*this.intervals[0]+nodeIt.y*(this.intervals[2]-12) 142 | return Math.max(x,mod(x,12)) 143 | }); 144 | }, 145 | // Returns the svg transform string corresponding to a node's position 146 | position: function(node){ 147 | let {x,y} = logicalToSvg(node) 148 | return `translate(${x} ${y})` 149 | }, 150 | // Returns the relative shape of an array of nodes 151 | shape: function(nodes){ 152 | return nodes.map(node => ({ 153 | x:node.x-nodes[0].x, 154 | y:node.y-nodes[0].y 155 | })); 156 | }, 157 | // Unique identifier for an array of nodes 158 | genKey: function (n){ 159 | return n.map(function textify(node){return `${node.x},${node.y}`}).join(' ') 160 | } 161 | }, 162 | subtemplateNote:` 163 | 166 | 172 | `, 173 | subtemplateDichord:` 174 | 177 | 181 | `, 182 | subtemplateTrichord:` 183 | 186 | 189 | ` 190 | }; 191 | 192 | // Specialisation of tonnetzLike to draw a Tonnetz 193 | let tonnetzPlan = { 194 | components: { 195 | clickToPlayWrapper, 196 | 'note': noteTonnetz, 197 | 'dichord': dichordTonnetz, 198 | 'trichord': trichordTonnetz 199 | }, 200 | extends: tonnetzLike, 201 | mixins: [traceHandler], 202 | template: ` 203 | 204 | ${tonnetzLike.subtemplateNote} 205 | ${tonnetzLike.subtemplateDichord} 206 | ${tonnetzLike.subtemplateTrichord} 207 | 208 | ` 209 | } 210 | 211 | // ----------------------- Chicken Wire --------------------------- 212 | 213 | // The chicken-wire's trichord component : a clickable circle representing the chord 214 | let trichordChicken = { 215 | extends: chord, 216 | props: ['id'], 217 | computed: { 218 | strings: function (){ 219 | return this.$root.strings 220 | }, 221 | text: function(){ 222 | //Is this a major or minor chord ? 223 | //I.E. is the matching triangle in the Tonnetz right- or left-pointed 224 | var major = (this.shape[0].y == this.shape[1].y); 225 | if (major){ 226 | return this.strings.notes[this.notes[2].id]; // notes[2] is the root 227 | }else{ 228 | var display = this.strings.notes[this.notes[2].id]; 229 | return display[0].toLowerCase() + display.substring(1); //Uncapitalize the root, leave the alteration 230 | } 231 | } 232 | }, 233 | template: ` 234 | 235 | 237 | 238 | 239 | {{ text }} 240 | 241 | 242 | ` 243 | } 244 | 245 | // The chicken-wire's dichord component: a line between the two trichords that contain the same notes, 246 | // with a small circle for easier clicking 247 | let dichordChicken = { 248 | extends: chord, 249 | computed: { 250 | coordsHTML: function (){ 251 | //Orientation of the notes axis 252 | let dx = this.coords[1].x - this.coords[0].x; 253 | let dy = this.coords[1].y - this.coords[0].y; 254 | //The rotation that sends (1,0) to (dx,dy) 255 | let rotate = function(point){ 256 | return {x: (dx*point.x-dy*point.y), 257 | y: (dy*point.x+dx*point.y)}; 258 | }; 259 | //The extremities of the segment if the points were 0,0 and 1,0 260 | const p1 = {x:0.5,y:xstep/3}; 261 | const p2 = {x:0.5,y:-xstep/3}; 262 | return { 263 | x1 : rotate(p1).x, 264 | x2 : rotate(p2).x, 265 | y1 : rotate(p1).y, 266 | y2 : rotate(p2).y 267 | } 268 | } 269 | }, 270 | template: ` 271 | 272 | 274 | 275 | 277 | 278 | 279 | ` 280 | } 281 | 282 | // The chicken-wire's note component: A clickable hexagon located between all the chords that use that note 283 | let noteChicken = { 284 | mixins: [activableMixin], 285 | props: ['notes','nodes'], 286 | computed: { 287 | coords: function (){ 288 | return[ 289 | {x:+baseSize*xstep/3, y:+baseSize/2}, 290 | {x:-baseSize*xstep/3, y:+baseSize/2}, 291 | {x:-baseSize*2*xstep/3,y:0}, 292 | {x:-baseSize*xstep/3, y:-baseSize/2}, 293 | {x:+baseSize*xstep/3, y:-baseSize/2}, 294 | {x:+baseSize*2*xstep/3,y:0} 295 | ] 296 | }, 297 | points: function (){ 298 | return this.coords.map( ({x,y}) => `${x},${y}` ).join(' ') 299 | } 300 | }, 301 | template: ` 302 | 304 | ` 305 | } 306 | 307 | // Specialisation of tonnetzLike to draw the Chickenwire Torus 308 | let chickenWire = { 309 | components: { 310 | clickToPlayWrapper, 311 | 'note': noteChicken, 312 | 'dichord': dichordChicken, 313 | 'trichord': trichordChicken 314 | }, 315 | extends: tonnetzLike, 316 | mixins: [traceHandler], 317 | template: ` 318 | 319 | ${tonnetzLike.subtemplateTrichord} 320 | ${tonnetzLike.subtemplateDichord} 321 | ${tonnetzLike.subtemplateNote} 322 | 323 | ` 324 | } 325 | 326 | var Tonnetz_tonnetzLike = true -------------------------------------------------------------------------------- /js/components/tonnetzView.js: -------------------------------------------------------------------------------- 1 | //Component aggregating a tonnetz with a selector 2 | 3 | let tonnetze3 = [ 4 | [1,1,10], 5 | [1,2,9], 6 | [1,3,8], 7 | [1,4,7], 8 | [1,5,6], 9 | [2,2,8], 10 | [2,3,7], 11 | [2,4,6], 12 | [2,5,5], 13 | [3,4,5], 14 | [3,3,6], 15 | [4,4,4] 16 | ]; 17 | 18 | let tonnetzSelector = { 19 | props:{ 20 | value:{ 21 | type:Object 22 | } 23 | }, 24 | data:function(){return{ 25 | tonnetze:tonnetze3, 26 | }}, 27 | computed:{ 28 | strings: function(){return this.$root.strings} 29 | }, 30 | template:` 31 |
32 |
33 | 38 |
39 | 43 |
44 | ` 45 | } 46 | 47 | let tonnetzView = { 48 | components: {tonnetzPlan,chickenWire,dragZoomSvg,tonnetzSelector}, 49 | props:{ 50 | // The initial value for the Tonnetz 51 | initTonnetz:{ 52 | type: Array, 53 | default: () => [3,4,5] 54 | }, 55 | // The initial type of display 56 | initType:{ 57 | type: String, 58 | default: 'tonnetz' 59 | }, 60 | notes:{ 61 | type:Array, 62 | required: true 63 | }, 64 | // Should we draw the trajectory ? 65 | trace:{ 66 | type:Boolean, 67 | default:false 68 | } 69 | }, 70 | data: function(){return{ 71 | // The list of all 3-interval Tonnetze 72 | tonnetze: tonnetze3, 73 | graph: { 74 | // The selected interval set 75 | intervals:tonnetze3.find(value => arrayEquals(this.initTonnetz,value)), //Find so that the arrays compare equal 76 | // The type of representation for the main window ('tonnetz' or 'chicken') 77 | type: this.initType 78 | }, 79 | // Should drag and zoom be locked ? 80 | lock: true, 81 | strings:this.$root.strings, 82 | }}, 83 | computed:{ 84 | intervals: function(){ 85 | return this.graph.intervals 86 | }, 87 | type: function(){ 88 | return this.graph.type 89 | }, 90 | isConnected: function(){ 91 | return this.intervals.reduce(gcd,12)===1; 92 | } 93 | }, 94 | template:` 95 |
96 | 97 | 101 | 102 | 103 | 104 |

{{ strings.connected }}

105 |
106 | ` 107 | } 108 | 109 | var Tonnetz_tonnetzView = true; -------------------------------------------------------------------------------- /js/decorators/dragZoom.js: -------------------------------------------------------------------------------- 1 | // Slotted component that handles the drag and zoom logic on an svg 2 | let dragZoomSvg = { 3 | props: { 4 | height: Number, // Height of the View (before reactive scaling) 5 | width: Number, // Width of the View (before reactive scaling) 6 | scaleBounds: { 7 | type: Object, // Min and max zoom level 8 | default: () => ({mini: 1, maxi: 2}) 9 | }, 10 | lock: { // Flag for deactivating DragNZoom functions 11 | type: Boolean, 12 | default: false 13 | } 14 | }, 15 | data: function(){return{ 16 | //Transformation data 17 | tx : 0, 18 | ty : 0, 19 | scale : 2, 20 | //Capture data 21 | captureMouse: false, 22 | clickedPos : {x:0,y:0}, 23 | }}, 24 | computed: { 25 | transform: function(){ 26 | return `scale(${this.scale}) translate(${this.tx} ${this.ty})` 27 | }, 28 | viewbox: function(){ 29 | return `0 0 ${this.width} ${this.height}` 30 | }, 31 | bounds: function(){ //SVG coordinates of the bounds to forward to children components 32 | return{ 33 | xmin:-this.tx, 34 | ymin:-this.ty, 35 | xmax:-this.tx+this.width /this.scale, 36 | ymax:-this.ty+this.height/this.scale, 37 | } 38 | } 39 | }, 40 | watch:{ 41 | lock: this.captureOff 42 | }, 43 | methods: { 44 | zoomInOut: function (wheelEvent){ 45 | if(this.lock) return; //Ignore if locked 46 | 47 | var multiplier = Math.exp(-wheelEvent.deltaY/600) 48 | // Bound the multiplier to acceptable values 49 | multiplier = bound(multiplier,this.scaleBounds.mini/this.scale, 50 | this.scaleBounds.maxi/this.scale); 51 | if(multiplier===1){ 52 | return //Don't bother with the rest if nothing changes 53 | } 54 | 55 | //Find the pointer's position in the svg referential: this will be the fixed point of the zoom 56 | 57 | //On Firefox, offset is relative to the DOM element from which the event is fired, 58 | //not that in which it is handled, so this doesn't work everywhere 59 | //var pointer = {x:wheelEvent.offsetX,y:wheelEvent.offsetY}; 60 | //Workaround: 61 | let pointer = {x: wheelEvent.clientX - this.$el.getBoundingClientRect().left, 62 | y: wheelEvent.clientY - this.$el.getBoundingClientRect().top}; 63 | 64 | //There is probably a better way to find it 65 | var pointerSvg = ({x:pointer.x/this.scale-this.tx, 66 | y:pointer.y/this.scale-this.ty}); 67 | 68 | //Update translation to keep the point under the pointer in place 69 | this.tx = (this.tx + pointerSvg.x)/multiplier - pointerSvg.x 70 | this.ty = (this.ty + pointerSvg.y)/multiplier - pointerSvg.y 71 | this.scale = this.scale*multiplier 72 | return 73 | }, 74 | drag: function (event){ 75 | if (this.captureMouse){ 76 | var dx = event.clientX - this.clickedPos.x 77 | var dy = event.clientY - this.clickedPos.y 78 | this.tx += dx / this.scale 79 | this.ty += dy / this.scale 80 | this.clickedPos = {x:event.clientX,y:event.clientY} 81 | } 82 | return 83 | }, 84 | captureOn: function (event){ 85 | if(this.lock) return // Ignore if locked 86 | this.captureMouse = true 87 | this.clickedPos = {x:event.clientX,y:event.clientY} 88 | return 89 | }, 90 | captureOff: function (event){ 91 | this.captureMouse = false 92 | return 93 | }, 94 | // Centers the view to the (SVG) coordinates specified 95 | panTo: function(targetPosition){ 96 | if(targetPosition.x > this.bounds.xmin && targetPosition.x < this.bounds.xmax 97 | &&targetPosition.y > this.bounds.ymin && targetPosition.y < this.bounds.ymax) 98 | { 99 | return 100 | }else{ 101 | newPos = { 102 | tx:- targetPosition.x + this.width/this.scale/2, 103 | ty:- targetPosition.y + this.height/this.scale/2 104 | }; 105 | TweenLite.to(this,1,newPos); 106 | } 107 | } 108 | }, 109 | mounted(){ 110 | this.$on('pan',this.panTo); 111 | }, 112 | template: ` 113 | 121 | 122 | 123 | 124 | 125 | ` 126 | } 127 | 128 | var Tonnetz_dragZoom = true -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | //Author: Corentin Guichaoua 2 | 3 | // Vue.config.devtools = true 4 | // Vue.config.performance = true 5 | 6 | 7 | // ============================================================================ 8 | 9 | // Reload the screen after 2 minutes of inactivity. 10 | let timeout = null; 11 | function restartTimeout() { 12 | clearTimeout(timeout); 13 | // timeout = setTimeout(() => window.location.reload(), 1000 * 120); // 2 mins 14 | } 15 | document.addEventListener('touchdown', restartTimeout); 16 | document.addEventListener('mousemove', restartTimeout); 17 | //An additional listener is added upon connecting a Midi Input 18 | 19 | // ============================================================================ 20 | // Geometry constants and coordinate conversions 21 | 22 | const xstep=Math.sqrt(3)/2 //Ratio of horizontal to vertical spacing = height of an equilateral triangle 23 | const baseSize=50 //Base scale: height of a vartical step (in svg coordinates) 24 | 25 | // Conversion between tonnetz coordinates and svg coordinates 26 | const logicalToSvgX = node => node.x * xstep * baseSize; 27 | const logicalToSvgY = node => (node.y + node.x/2) * baseSize; 28 | const logicalToSvg = node => ({x:logicalToSvgX(node), y:logicalToSvgY(node)}) 29 | 30 | 31 | // ============================================================================ 32 | // Vue components and mixins 33 | 34 | var piano; //Variable to hold the virtual piano (built later once JZZ is loaded) 35 | //var midiBus; //Variable to hold the bus for upgoing midiEvents (built once Vue is loaded) 36 | var proto; //Variable to hold the main app Object (built once everything is loaded) 37 | 38 | 39 | 40 | // Global object to store recording and its state 41 | var record = { 42 | startTime:undefined, 43 | SMF:undefined, 44 | recording:false 45 | } 46 | 47 | // Wait for libraries to be loaded 48 | fallback.ready(function(){ 49 | 50 | // The App's main object, handling global concerns 51 | proto = new Vue({ 52 | el: '#proto', 53 | components: {clockOctave,songLoader,pianoKeyboard,playRecorder,tonnetzView,languageSelector,intervalTable}, 54 | data: { 55 | // The list of all 3-interval Tonnetze 56 | tonnetze: tonnetze3, 57 | // The selected interval set 58 | intervals: tonnetze3[9], 59 | // The type of representation for the main window ('tonnetz' or 'chicken') 60 | type: 'tonnetz', 61 | // The list of all notes: their name and their status 62 | notes: Array.from(Array(12),(_x,index) => ({id:index,count:0})), 63 | // notes: (strings[language] || strings.en).notes.map( function(note_name_local, index) { 64 | // // use text for display and id for CSS styling 65 | // return {text: note_name_local, id: strings.en.notes[index], count: 0}; 66 | // }), 67 | // Synthetiser engine 68 | synth: JZZ.synth.Tiny(), 69 | //synth:JZZ.synth.MIDIjs({ 70 | //TODO: Use a soundfont from our own server 71 | //soundfontUrl: "https://raw.githubusercontent.com/mudcube/MIDI.js/master/examples/soundfont/", 72 | //instrument: "acoustic_grand_piano" }) 73 | //.or(function(){ proto.loaded(); alert('Cannot load MIDI.js!\n' + this.err()); }) 74 | //.and(function(){ proto.loaded(); }), 75 | // Azerty keyboard bindings 76 | ascii: JZZ.input.ASCII({ 77 | W:'C5', S:'C#5', X:'D5', D:'D#5', C:'E5', V:'F5', 78 | G:'F#5', B:'G5', H:'Ab5', N:'A5', J:'Bb5', M:'B5' 79 | }), 80 | 81 | // Should trajectory drawing be active? 82 | trace: false, 83 | // The localisation strings 84 | allStrings: strings, 85 | // The picked locale 86 | language: language || en 87 | }, 88 | computed:{ 89 | complementNotes: function(){ 90 | return this.notes.map(note => ({id:note.id, count:note.count?0:1})); 91 | }, 92 | strings: function(){ 93 | return strings[this.language] 94 | } 95 | }, 96 | created: function(){ 97 | //Delay connection of MIDI devices to let JZZ finish its initialisation 98 | let deviceUpdate=this.deviceUpdate; // This is required to bring deviceUpdate into the lambda's context 99 | setTimeout(function(){deviceUpdate({inputs:{added:JZZ().info().inputs}})},1000); 100 | //Add a watcher to connect (and disconnect) new devices to the app 101 | JZZ().onChange(this.deviceUpdate); 102 | }, 103 | methods:{ 104 | //Handler for JZZ device change event 105 | deviceUpdate: function({inputs:{added,removed}}){ 106 | console.log('Updating MIDI devices'); 107 | if(added){ 108 | for(device of added){ 109 | JZZ().openMidiIn(device.name) 110 | .connect(midiBus.midiThru) // Send the keyboard's events to the midi bus which will relay them 111 | .connect(restartTimeout); // Reset the page's timeout upon input 112 | console.log('Added device: ',device); 113 | } 114 | } 115 | if(removed){ 116 | for(device of removed){ 117 | JZZ().openMidiIn(device.name).disconnect(midiBus.midiThru); 118 | console.log('Removed device: ',device); 119 | } 120 | } 121 | this.resetNotes(); // Connection/Disconnection can cause unbalanced note events 122 | }, 123 | 124 | //Handler for Midi events coming from JZZ 125 | midiHandler: function (midiEvent){ 126 | noteIndex = (midiEvent.getNote()+3) %12 127 | if(midiEvent.isNoteOn()){ 128 | this.notes[noteIndex].count++; 129 | }else if(midiEvent.isNoteOff()){ 130 | if(this.notes[noteIndex].count > 0){ 131 | this.notes[noteIndex].count--; 132 | }else{ 133 | console.log('Warning: ignored unbalanced noteOff event', midiEvent); 134 | } 135 | } 136 | }, 137 | resetNotes: function(){ 138 | for (note of this.notes){ 139 | note.count = 0; 140 | } 141 | }, 142 | traceToggle: function(){ 143 | this.trace = !this.trace; 144 | }, 145 | // Handlers for playback events fired from the app 146 | noteOn: function(pitches){ 147 | //var notes = this.node2Notes(nodes); 148 | for (var pitch of pitches){ 149 | midiBus.midiThru.noteOn(0,pitch,100); 150 | } 151 | }, 152 | noteOff: function(pitches){ 153 | //var notes = this.node2Notes(nodes); 154 | for (var pitch of pitches){ 155 | midiBus.midiThru.noteOff(0,pitch,100); 156 | } 157 | }, 158 | // Hard reset for the whole page 159 | reset(option) { 160 | if(option){ 161 | window.location.search = '?hl='+option; 162 | console.log(window.location) 163 | } 164 | else{ 165 | window.location.reload(); 166 | } 167 | } 168 | }, 169 | mounted(){ 170 | //Handle midiBus events 171 | midiBus.$on('note-on',this.noteOn); 172 | midiBus.$on('note-off',this.noteOff); 173 | 174 | //Connect the Midi 175 | this.ascii.connect(midiBus.midiThru); 176 | midiBus.midiThru.connect(this.synth); 177 | midiBus.midiThru.connect(this.midiHandler); 178 | } 179 | }) 180 | 181 | }) // fallback.ready -------------------------------------------------------------------------------- /js/l12n.js: -------------------------------------------------------------------------------- 1 | // ============================================================================ 2 | // i18n Strings 3 | 4 | const strings = { 5 | en: { 6 | title: 'The Tonnetz', 7 | subtitle: 'One key – many representations', 8 | dual: 'Dual', 9 | reset: 'Reset', 10 | load: 'Load Midi File', 11 | start: '⏺ Start Recording', 12 | stopRecord: '⏺⏹ Stop Recording', 13 | play: '▶️ Play', 14 | stopPlay: '⏹ Stop Playing', 15 | pause: '⏸ Pause', 16 | rotate: 'Rotate 180°', 17 | translate: 'Translate', 18 | export: 'Export', 19 | connected: 'This Tonnetz is non-connected and doesn’t contain every note.', 20 | notes: ['A', 'A♯', 'B', 'C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯'] 21 | }, 22 | de: { 23 | title: 'Das Tonnetz', 24 | subtitle: 'Ein Klang – viele Darstellungen', 25 | dual: 'Dual', 26 | reset: 'Zurücksetzen', 27 | load: 'Midi Datei Laden', 28 | start: '⏺ Aufnehmen', 29 | stopRecord: '⏺⏹ Aufnahme Stoppen', 30 | play: '▶️ Abspielen', 31 | stopPlay: '⏹ Abspiel Stoppen', 32 | pause: '⏸ Pause', 33 | rotate: '180° Rotieren', 34 | translate: 'Verschieben', 35 | export: 'Exportieren', // Needs checking 36 | connected: 'Dieses Tonnetz ist nicht verbunden, und enthält nicht alle Noten.', 37 | notes: ['A', 'B', 'H', 'C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯'] 38 | }, 39 | fr: { 40 | title: 'Le Tonnetz', 41 | subtitle: 'Note unique — Représentations nombreuses', 42 | dual: 'Dual', 43 | reset: 'Réinitialiser', 44 | load: 'Charger des données Midi', 45 | start: '⏺ Enregistrer', 46 | stopRecord: "⏺⏹ Arrêter l'enregistrement", 47 | play: '▶️ Lecture', 48 | stopPlay: '⏹ Arrêt', 49 | pause: '⏸ Pause', 50 | rotate: 'Rotation à 180°', 51 | translate: 'Translation', 52 | export: 'Exporter', 53 | connected: "Ce Tonnetz n'est pas connexe et ne contient pas toutes les notes.", 54 | notes: ['La', 'La♯', 'Si', 'Do', 'Do♯', 'Ré', 'Ré♯', 'Mi', 'Fa', 'Fa♯', 'Sol', 'Sol♯'] 55 | }, 56 | hi: { 57 | title: 'सरगम', 58 | subtitle: 'एक स्वर, रूप अनेक', 59 | dual: 'Dual', 60 | reset: 'Reset', 61 | load: 'मिडी फाइल खोलें', 62 | start: '⏺ रिकॉर्डिंग शुरू करें', 63 | stopRecord: '⏺⏹ रिकॉर्डिंग ख़त्म करें', 64 | play: '▶️ Play', 65 | stopPlay: '⏹ Stop Playing', 66 | pause: '⏸ Pause', 67 | rotate: '180° पलटें', 68 | translate: 'अनुवाद करें', 69 | export: 'Export', // Needs translation 70 | connected: 'इस जोड़ में सभी स्वर नहीं है.', 71 | notes: ['ध', 'निb', 'नि', 'सा', 'रेb', 'रे', 'गb', 'ग', 'म', 'पb', 'प', 'धb'] 72 | } 73 | } 74 | 75 | const search = location.search.match(/hl=(\w*)/); 76 | const language = strings.hasOwnProperty(search) ? search[1] : 'en'; 77 | 78 | let languageSelector = { 79 | props:{ 80 | value:{ 81 | type:String 82 | }, 83 | languages:{ 84 | type:Array, 85 | required:true 86 | } 87 | }, 88 | template:` 89 |
90 |
92 | {{ lang }} 93 |
94 |
95 | ` 96 | } 97 | 98 | var Tonnetz_l12n = true -------------------------------------------------------------------------------- /js/loadDeps.js: -------------------------------------------------------------------------------- 1 | /* Loads libraries required by the application using fallback 2 | First attempt to retrieve them online, otherwise load local copies */ 3 | 4 | // Find the script's directory to use paths relative to it and not the html 5 | let scripts= document.getElementsByTagName('script'); 6 | let path= scripts[scripts.length-1].src.split('?')[0]; // remove any ?query 7 | let mydir= path.split('/').slice(0, -1).join('/')+'/'; // remove last filename part of path 8 | 9 | fallback.load({ 10 | //Vue: Main framework for reactive elements 11 | Vue: [ 12 | 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js', 13 | mydir+'../lib/Vue/vue.min.js' 14 | ], 15 | //JZZ: Midi library 16 | JZZ: [ 17 | 'https://cdn.jsdelivr.net/npm/jzz@0.8.8/javascript/JZZ.min.js', 18 | mydir+'../lib/JZZ/jzz.js' 19 | ], 20 | //JZZ.Tiny: Basic Synthetizer 21 | 'JZZ.synth.Tiny': [ 22 | 'https://cdn.jsdelivr.net/npm/jzz-synth-tiny', 23 | mydir+'../lib/JZZ/JZZ.synth.Tiny.min.js' 24 | ], 25 | //JZZ.Kbd: Keyboard bindings and virtual piano keyboard 26 | 'JZZ.input.Kbd': [ 27 | 'https://cdn.jsdelivr.net/npm/jzz-input-kbd', 28 | mydir+'../lib/JZZ/jzz-input-kbd.js' 29 | ], 30 | //JZZ.SMF: Standard Midi File support 31 | 'JZZ.MIDI.SMF': [ 32 | 'https://cdn.jsdelivr.net/npm/jzz-midi-smf', 33 | mydir+'../lib/JZZ/jzz-midi-smf.js' 34 | ], 35 | TweenLite: [ 36 | 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js', 37 | mydir+'../lib/GSAP' 38 | ], 39 | //TODO: Use proper submodule structure 40 | // Tonnetz submodules 41 | // Small hack: these variables are defined to let fallback know that the module loaded 42 | 'Tonnetz_utils':[ 43 | mydir+'utils.js' 44 | ], 45 | 'Tonnetz_l12n':[ 46 | mydir+'l12n.js' 47 | ], 48 | 'Tonnetz_mixins':[ 49 | mydir+'mixins/clickMixins.js' 50 | ], 51 | 'Tonnetz_trajectory':[ 52 | mydir+'mixins/trajectory.js' 53 | ], 54 | 'Tonnetz_dragZoom':[ 55 | mydir+'decorators/dragZoom.js' 56 | ], 57 | 'Tonnetz_piano':[ 58 | mydir+'components/pianoKeyboard.js' 59 | ], 60 | 'Tonnetz_loader':[ 61 | mydir+'components/songLoader.js' 62 | ], 63 | 'Tonnetz_tonnetzLike':[ 64 | mydir+'components/tonnetzLike.js' 65 | ], 66 | 'Tonnetz_clockOctave':[ 67 | mydir+'components/clockOctave.js' 68 | ], 69 | 'Tonnetz_playRecorder':[ 70 | mydir+'components/playRecorder.js' 71 | ], 72 | 'Tonnetz_midiBus':[ 73 | mydir+'midiBus.js' 74 | ], 75 | 'Tonnetz_tonnetzView':[ 76 | mydir+'components/tonnetzView.js' 77 | ], 78 | 'Tonnetz_intervalTable':[ 79 | mydir+'components/intervalTable.js' 80 | ] 81 | },{ 82 | shim:{ 83 | // Wait for JZZ to be loaded before loading its submodules 84 | 'JZZ.synth.Tiny': ['JZZ'], 85 | 'JZZ.input.Kbd': ['JZZ'], 86 | 'JZZ.MIDI.SMF': ['JZZ'], 87 | 'Tonnetz_tonnetzLike': ['Tonnetz_mixins'], 88 | 'Tonnetz_clockOctave': ['Tonnetz_mixins'], 89 | 'Tonnetz_playRecorder': ['Tonnetz_midiBus', 'Tonnetz_loader','Tonnetz_utils'], 90 | 'Tonnetz_midiBus': ['Vue','JZZ'], 91 | 'Tonnetz_tonnetzView': ['Tonnetz_tonnetzLike'] 92 | } 93 | } 94 | ) -------------------------------------------------------------------------------- /js/midiBus.js: -------------------------------------------------------------------------------- 1 | // Empty Vue instance to act as a bus for note interaction Events 2 | var midiBus=new Vue({ 3 | data: function(){return { 4 | midiThru:JZZ.Widget() 5 | }}, 6 | methods:{ 7 | connect: function(output){ 8 | this.midiThru.connect(output) 9 | } 10 | } 11 | }); 12 | 13 | var Tonnetz_midiBus = true; -------------------------------------------------------------------------------- /js/mixins/clickMixins.js: -------------------------------------------------------------------------------- 1 | // Mixins used in various components 2 | 3 | // Provides MIDI playback on click for the slotted element 4 | // The slotted element must be valid svg markup 5 | let clickToPlayWrapper = { 6 | props: { 7 | pitches: { //The midi pitches to be played upon activation 8 | type:Array, 9 | required:true, 10 | validator: function(pitches){ 11 | return pitches.every( isMidiPitch ) 12 | } 13 | } 14 | }, 15 | data: function (){return{ 16 | clicked: false 17 | }}, 18 | methods:{ 19 | clickOn: function(){ 20 | if(!this.clicked){ 21 | this.clicked=true; 22 | midiBus.$emit('note-on',this.pitches); 23 | } 24 | }, 25 | clickOff: function(){ 26 | if(this.clicked){ 27 | this.clicked=false; 28 | midiBus.$emit('note-off',this.pitches); 29 | } 30 | }, 31 | enter: function(event){ 32 | if(event.pressure!==0){//Pointer is down 33 | this.clickOn(); 34 | } 35 | } 36 | }, 37 | template:` 38 | 45 | 46 | 47 | ` 48 | } 49 | 50 | // Provides the isActive check 51 | // Must still be used in the template to have any effect 52 | var activableMixin = { 53 | props: { 54 | notes:{ 55 | type: Array, 56 | required: true 57 | }, 58 | forceState:{ // -1, 0, 1, 2 for free, inactive, traversed and active respectively 59 | type: Number, 60 | default: -1, 61 | validator: n => [-1,0,1,2].includes(n) 62 | } 63 | }, 64 | computed: { 65 | isActive : function(){ 66 | return (this.forceState===-1 && this.notes.every(elem => elem.count > 0)) // State is free and notes are active 67 | || this.forceState===2; // or state is forced active 68 | }, 69 | semiActive: function(){ 70 | return this.forceState === 1; 71 | } 72 | } 73 | } 74 | 75 | var Tonnetz_mixins = true -------------------------------------------------------------------------------- /js/mixins/trajectory.js: -------------------------------------------------------------------------------- 1 | 2 | // Mixin that groups the trajectory functionnality. Calls on TonnetzLike properties and methods 3 | let traceHandler = { 4 | props:{ 5 | trace: { 6 | type: Boolean, 7 | default: false 8 | } 9 | }, 10 | data: function(){return { 11 | trajectory : [], // The array of the traversed note nodes. A trajectory element should be a pair of a MIDI event and its associated position 12 | active: [], 13 | visited: new Set() // The string keys of all visited nodes and chords 14 | }}, 15 | computed:{ 16 | // The array of nodes (resp dichords and trichords) to be rendered, paired with their status 17 | nodeStateList: function(){ 18 | return this.nodeList.map(node => ({node,status:this.status(node)}) ); 19 | }, 20 | dichordStateList: function(){ 21 | return this.dichordList.map(nodes => ({nodes,status:this.chordStatus(nodes)}) ); 22 | }, 23 | trichordStateList: function(){ 24 | return this.trichordList.map(nodes => ({nodes,status:this.chordStatus(nodes)}) ); 25 | }, 26 | memoNode2Notes: function(){ // Memoize so the returned objects evaluate as equal and no change is detected 27 | this.intervals && this.notes // Force dependency so the memo's cache is emptied 28 | return memo(this.node2Notes); 29 | }, 30 | memoShape: function(){ // Memoize so the returned objects evaluate as equal and no change is detected 31 | return memo(this.shape); 32 | } 33 | }, 34 | watch:{ 35 | trace: function(){// If trace changes, either we don't need the trajectory anymore or we start a new one. 36 | this.resetTrajectory(); 37 | }, 38 | intervals : function(){// If intervals changes, the current trajectory is no longer valid 39 | this.resetTrajectory(); 40 | } 41 | }, 42 | methods:{ 43 | // Tells whether a given node is activated (2), was activated earlier (1) or is not (0), or lets the node decide (-1) 44 | status: function(node){ 45 | if (this.trace){ 46 | let isActive = this.active.some(nodeB => nodeB.x==node.x && nodeB.y==node.y); 47 | if(isActive){ 48 | return 2; 49 | }else{ 50 | if(this.visited.has(this.genKey([node]))){ 51 | return 1; 52 | } 53 | else{ 54 | return 0; 55 | } 56 | } 57 | }else return -1; // Delegate activation control if trajectory mode is off (minimises recomputations) 58 | }, 59 | // Same as above but for chords 60 | chordStatus: function(nodes){ 61 | if(this.trace){ 62 | if(nodes.every(node => this.active.some(nodeB => nodeB.x==node.x && nodeB.y==node.y))){ 63 | return 2; 64 | }else if(this.visited.has(this.genKey(nodes))){ 65 | return 1; 66 | }else{ 67 | return 0; 68 | } 69 | }else{ 70 | return -1; 71 | } 72 | }, 73 | resetTrajectory: function(){ 74 | this.trajectory = []; 75 | this.active = []; 76 | this.visited.clear(); 77 | }, 78 | //Returns the node matching the note closest to the provided node 79 | closestNode(node,note){ 80 | // Dumb way: enumerate all neighbours up to distance 3 (max for 12 tone Tonnetze) 81 | const d1 = [{x:0,y:1},{x:0,y:-1},{x:1,y:0},{x:-1,y:0},{x:-1,y:1},{x:1,y:-1}]; // Neighbours of distance 1 82 | const d2 = [{x:0,y:2},{x:1,y:1},{x:0,y:2},{x:0,y:-2},{x:-1,y:-1},{x:-2,y:0}, //z=0 83 | {x:-1,y:2},{x:-2,y:1},{x:1,y:-2},{x:2,y:-1},{x:-2,y:2},{x:2,y:-2}]; // Neighbours of distance 2 84 | const d3 = [{x:0,y:3},{x:1,y:2},{x:2,y:1},{x:3,y:0},{x:0,y:-3},{x:-1,y:-2},{x:-2,y:-1},{x:-3,y:0}, 85 | {x:-3,y:3},{x:-3,y:2},{x:-3,y:1},{x:3,y:-3},{x:3,y:-2},{x:3,y:-1}, 86 | {x:-2,y:3},{x:-1,y:3},{x:2,y:-3},{x:1,y:-3}]; // Neighbours of distance 3 87 | if(mod(this.nodesToPitches([node])[0]-57,12)==note){ 88 | return node; 89 | } 90 | for(neighbourList of [d1,d2,d3]){ //This should be enough as no distance should exceed 3 91 | for(nodeOffset of neighbourList){ 92 | let newNode={x:node.x+nodeOffset.x,y:node.y+nodeOffset.y}; 93 | if(mod(this.nodesToPitches([newNode])[0]-57,12)==note){ 94 | return newNode; 95 | } 96 | } 97 | } 98 | console.log("Couldn't find closest neighbour"); 99 | }, 100 | // Marks active chords as visited 101 | updateChords: function(){ 102 | for(node of this.active){ 103 | for(dnode of [{x:1,y:0},{x:0,y:1},{x:-1,y:1}]){ 104 | if(this.active.some(nodeB => nodeB.x==node.x+dnode.x && nodeB.y==node.y+dnode.y)){ 105 | let nodes = [node,{x:node.x+dnode.x,y:node.y+dnode.y}]; 106 | this.visited.add(this.genKey(nodes)); 107 | } 108 | } 109 | for(dnodes of [{x1:1,x2:0,y1:0,y2:1},{x1:-1,x2:0,y1:1,y2:1}]){ 110 | if(this.active.some(nodeB => nodeB.x==node.x+dnodes.x1 && nodeB.y==node.y+dnodes.y1) 111 | && this.active.some(nodeB => nodeB.x==node.x+dnodes.x2 && nodeB.y==node.y+dnodes.y2)){ 112 | let nodes = [node,{x:node.x+dnodes.x1,y:node.y+dnodes.y1},{x:node.x+dnodes.x2,y:node.y+dnodes.y2}]; 113 | this.visited.add(this.genKey(nodes)); 114 | } 115 | } 116 | } 117 | }, 118 | addToTrajectory: function(pitches){ 119 | if(this.trace){ 120 | // First version: consider multi-pitched events as successive events 121 | for(pitch of pitches){ 122 | //Check if the note is reachable in this Tonnetz 123 | let noteNumber = mod(pitch - 9,12); 124 | let tonnetzGCD = this.intervals.reduce(gcd,12); 125 | if(!(noteNumber%tonnetzGCD)){ 126 | // The reference is the last node, or (0,0) if this is the first node 127 | let reference = this.trajectory.length > 0 ? this.trajectory[this.trajectory.length-1] : {x:0,y:0}; 128 | let node = this.closestNode(reference,noteNumber); 129 | this.trajectory.push(node); 130 | this.active.push(node); 131 | this.visited.add(this.genKey([node])); 132 | this.$parent.$emit('pan',logicalToSvg(node)); 133 | }else{ 134 | console.log("Unreachable note") 135 | } 136 | } 137 | this.updateChords(); 138 | } 139 | }, 140 | removeActive: function(pitches){ 141 | if(this.trace){ 142 | for(pitch of pitches){ 143 | let firstMatch = this.active.findIndex(node => mod(this.nodesToPitches([node]),12) === mod(pitch,12)); 144 | let node = this.active[firstMatch]; 145 | if(firstMatch !== -1){ 146 | this.active.splice(firstMatch,1); 147 | this.trajectory.push(node) 148 | }else{ 149 | console.log(`Couldn't remove pitch ${pitch} from active nodes`); 150 | } 151 | } 152 | } 153 | }, 154 | midiDispatch: function(midiEvent){ 155 | if(this.trace){ 156 | let index = record.length 157 | if(midiEvent.isNoteOn()){ 158 | this.addToTrajectory([midiEvent.getNote()]); 159 | }else if(midiEvent.isNoteOff()){ 160 | this.removeActive([midiEvent.getNote()]); 161 | } 162 | } 163 | } 164 | } 165 | } 166 | 167 | var Tonnetz_trajectory = true -------------------------------------------------------------------------------- /js/utils.js: -------------------------------------------------------------------------------- 1 | // ============================================================================ 2 | // Misc utility functions 3 | 4 | //Clips a value to remain between the bounds fixed by mini and maxi 5 | function bound(value,mini,maxi){ 6 | return Math.min(maxi,Math.max(mini,value)); 7 | } 8 | 9 | //True modulo function (always positive for positive period) 10 | function mod(value,period){ 11 | return ((value%period)+period)%period 12 | } 13 | 14 | // create a generator function returning an 15 | // iterator to a specified range of numbers 16 | function* range (begin, end, interval = 1) { 17 | for (let i = begin; i < end; i += interval) { 18 | yield i; 19 | } 20 | } 21 | 22 | //Greatest common divisor 23 | function gcd(a, b) { 24 | if ( ! b) { 25 | return a; 26 | } 27 | return gcd(b, a % b); 28 | }; 29 | 30 | // Basic memoizer 31 | // Warning: do not mutate returned objects as it will mutate the cache 32 | function memo(func){ 33 | var cache = {}; 34 | return function(){ 35 | var key = JSON.stringify(arguments); 36 | if (cache[key]){ 37 | //console.log(cache) 38 | return cache[key]; 39 | } 40 | else{ 41 | val = func.apply(null, arguments); 42 | cache[key] = val; 43 | return val; 44 | } 45 | } 46 | } 47 | 48 | //Used for validation 49 | function isSubset(a, b){ 50 | return a.every(val => b.includes(val)); 51 | } 52 | 53 | //Is pitch a valid Midi pitch ? 54 | function isMidiPitch(pitch){ 55 | return (pitch >= 0 && pitch < 128) || (JZZ.MIDI.noteValue(pitch) !== undefined); 56 | } 57 | 58 | const noop = function(){}; 59 | 60 | const average = arr => arr.reduce((a,b) => a + b, 0) / arr.length; 61 | 62 | function arrayEquals(a, b) { 63 | if (a === b) return true; 64 | if (a == null || b == null) return false; 65 | if (a.length != b.length) return false; 66 | 67 | for (var i = 0; i < a.length; ++i) { 68 | if (a[i] !== b[i]) return false; 69 | } 70 | return true; 71 | } 72 | 73 | var Tonnetz_utils = true -------------------------------------------------------------------------------- /lib/fallback/LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Dolox Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /lib/fallback/fallback.js: -------------------------------------------------------------------------------- 1 | /* fallback.js v1.1.9 | http://fallback.io/ | Salvatore Garbesi | (c) 2015 Dolox, Inc. */ 2 | 3 | (function (window, document) { 4 | 'use strict'; 5 | 6 | var fallback = { 7 | // Callback storage from .ready and inline callback. 8 | callbacks: [], 9 | 10 | // Libraries that have completed/exhausted. 11 | completed: {}, 12 | completed_count: 0, 13 | 14 | // Page `head` element. 15 | head: document.getElementsByTagName('head')[0], 16 | 17 | // Libraries that are imported are stored here. 18 | libraries: {}, 19 | libraries_count: 0, 20 | libraries_props: {}, 21 | 22 | // Spawned libraries, so they don't run over themselves. 23 | spawned: [], 24 | 25 | // Libraries that failed to load. 26 | failed: {}, 27 | failed_count: 0, 28 | 29 | // Shims that are imported are stored here. 30 | shims: {}, 31 | 32 | // Libraries successfully loaded. 33 | success: {}, 34 | success_count: 0 35 | }; 36 | 37 | // Bootstrap our library. 38 | fallback.bootstrap = function() { 39 | var index; 40 | 41 | for (index in fallback.utilities) { 42 | if (fallback.utilities[index]) { 43 | fallback.utility(fallback.utilities[index]); 44 | } 45 | } 46 | }; 47 | 48 | // Utility functions to check against variables. 49 | fallback.utilities = ['Array', 'Function', 'Object', 'String']; 50 | 51 | // Setup individual utility function. 52 | fallback.utility = function(type) { 53 | fallback['is_' + type.toLowerCase()] = function(variable) { 54 | /*eslint-disable*/ 55 | return typeof variable !== 'undefined' && Object.prototype.toString.call(variable) == '[object ' + type + ']'; 56 | /*eslint-enable*/ 57 | }; 58 | }; 59 | 60 | // Check if our variable is a function, if not make it one. 61 | fallback.callback = function(variable) { 62 | var me = this; 63 | 64 | if (!me.is_function(variable)) { 65 | variable = function() {}; 66 | } 67 | 68 | return variable; 69 | }; 70 | 71 | // indexOf isn't supported on arrays in older versions of IE! 72 | fallback.index_of = function(object, value) { 73 | var index; 74 | 75 | for (index in object) { 76 | if (object[index] === value) { 77 | return index; 78 | } 79 | } 80 | 81 | return -1; 82 | }; 83 | 84 | // Check if our variable is defined. 85 | fallback.is_defined = function(variable) { 86 | try { 87 | /*eslint-disable*/ 88 | if (eval('window.' + variable)) { 89 | return true; 90 | } 91 | /*eslint-enable*/ 92 | } catch (exception) { 93 | return false; 94 | } 95 | 96 | return false; 97 | }; 98 | 99 | fallback.add_sri_attributes = function(element, props) { 100 | var me = this; 101 | 102 | if (me.is_object(props)) { 103 | if (props.integrity) { 104 | element.setAttribute('integrity', props.integrity); 105 | } 106 | 107 | if (props.crossorigin) { 108 | element.setAttribute('crossorigin', props.crossorigin); 109 | } 110 | } 111 | }; 112 | 113 | // Import and cleanse libraries from user input. 114 | fallback.importer = function(libraries, options) { 115 | var me = this; 116 | var current, index; 117 | var library, library_props, urls; 118 | var cleansed_shims, shim, shims; 119 | var shim_libraries, shim_libraries_cleansed; 120 | 121 | // Cleanse the libraries. 122 | var cleansed_libraries = {}; 123 | 124 | for (library in libraries) { 125 | // URL list for each library. 126 | library_props = libraries[library]; 127 | 128 | // If `urls` is undefined, null or an empty string, skip, it's invalid. 129 | if (!library_props) { 130 | continue; 131 | } 132 | 133 | // If `urls` is a string, convert it to any array. 134 | if (me.is_string(library_props)) { 135 | urls = [library_props]; 136 | } else if (me.is_object(library_props)) { 137 | urls = library_props.urls; 138 | } else { 139 | // Assume an array. 140 | urls = library_props; 141 | } 142 | 143 | // If `urls` is not an array, skip, it's invalid. 144 | if (!me.is_array(urls)) { 145 | continue; 146 | } 147 | 148 | // Check to see if the library already exists, if it does, merge the new URLs. 149 | current = []; 150 | 151 | if (me.is_array(me.libraries[library])) { 152 | current = me.libraries[library]; 153 | } 154 | 155 | cleansed_libraries[library] = urls; 156 | me.libraries[library] = current.concat(urls); 157 | me.libraries_props[library] = library_props; 158 | } 159 | 160 | // Cleanse the shims. 161 | cleansed_shims = {}; 162 | 163 | if (me.is_object(options)) { 164 | // Shim aliases, `deps` and dependencies`. 165 | if (!me.is_object(options.shim)) { 166 | if (me.is_object(options.deps)) { 167 | options.shim = options.deps; 168 | } else if (me.is_object(options.dependencies)) { 169 | options.shim = options.dependencies; 170 | } 171 | } 172 | 173 | if (me.is_object(options.shim)) { 174 | shims = options.shim; 175 | 176 | for (shim in shims) { 177 | shim_libraries = shims[shim]; 178 | 179 | // If `shim` doesn't exist in libraries, skip, it's invalid. 180 | if (!me.libraries[shim]) { 181 | continue; 182 | } 183 | 184 | // If `shim_libraries` is undefined, null or an empty string, skip, it's invalid. 185 | if (!shim_libraries) { 186 | continue; 187 | } 188 | 189 | // If `shim_libraries` is a string, convert it to any array. 190 | if (me.is_string(shim_libraries)) { 191 | shim_libraries = [shim_libraries]; 192 | } 193 | 194 | // If `shim_libraries` is not an array, skip, it's invalid. 195 | if (!me.is_array(shim_libraries)) { 196 | continue; 197 | } 198 | 199 | // Check to make sure the libraries exist otherwise remove them. 200 | shim_libraries_cleansed = []; 201 | 202 | for (index in shim_libraries) { 203 | library = shim_libraries[index]; 204 | 205 | // Make sure the library actually exists and that it's not itself. 206 | if (me.libraries[library] && library !== shim) { 207 | shim_libraries_cleansed.push(library); 208 | } 209 | } 210 | 211 | // Check to see if the shim already exists, if it does, merge the new shims. 212 | current = []; 213 | 214 | if (me.is_array(me.shims[shim])) { 215 | current = me.shims[shim]; 216 | } 217 | 218 | cleansed_shims[shim] = shim_libraries_cleansed; 219 | me.shims[shim] = current.concat(shim_libraries_cleansed); 220 | } 221 | } 222 | } 223 | 224 | return { 225 | libraries: cleansed_libraries, 226 | shims: cleansed_shims 227 | }; 228 | }; 229 | 230 | // CSS check if selector exists. 231 | fallback.css = {}; 232 | 233 | fallback.css.check = function(selector) { 234 | var me = fallback; 235 | 236 | if (!document.styleSheets) { 237 | return false; 238 | } 239 | 240 | var index, stylesheet, found; 241 | 242 | for (index in document.styleSheets) { 243 | stylesheet = document.styleSheets[index]; 244 | 245 | if (stylesheet === 0) { 246 | continue; 247 | } 248 | 249 | // Issues with CORS at times, don't let the script bomb. 250 | try { 251 | if (stylesheet.rules) { 252 | found = me.css.scan(stylesheet.rules, selector); 253 | 254 | if (found) { 255 | return found; 256 | } 257 | } 258 | 259 | if (stylesheet.cssRules) { 260 | found = me.css.scan(stylesheet.cssRules, selector); 261 | 262 | if (found) { 263 | return found; 264 | } 265 | } 266 | } catch (e) { 267 | continue; 268 | } 269 | } 270 | 271 | return false; 272 | }; 273 | 274 | fallback.css.scan = function(ruleset, selector) { 275 | var index, rule; 276 | 277 | for (index in ruleset) { 278 | rule = ruleset[index]; 279 | 280 | if (rule.selectorText === selector) { 281 | return true; 282 | } 283 | } 284 | 285 | return false; 286 | }; 287 | 288 | // Spawn an instance of the library. 289 | fallback.load = function(libraries, options, callback) { 290 | var me = this; 291 | var imported, library, urls; 292 | 293 | // If `libraries` is not a object, die out. 294 | if (!me.is_object(libraries)) { 295 | return false; 296 | } 297 | 298 | // If `options` is a function, then it needs to become the callback. 299 | if (me.is_function(options)) { 300 | callback = options; 301 | options = {}; 302 | } 303 | 304 | // If `options` is not an object, convert it. 305 | if (!me.is_object(options)) { 306 | options = {}; 307 | } 308 | 309 | // Import libraries. 310 | imported = me.importer(libraries, options); 311 | 312 | // Spawn library instances from user input. 313 | for (library in imported.libraries) { 314 | urls = imported.libraries[library]; 315 | 316 | if (!me.shims[library]) { 317 | me.spawn(library, urls); 318 | } 319 | } 320 | 321 | // Fork the callback over to the `ready` function. 322 | if (me.is_function(options['callback'])) { 323 | me.ready([], options['callback']); 324 | } 325 | 326 | if (me.is_function(callback)) { 327 | me.ready([], callback); 328 | } 329 | }; 330 | 331 | // Callback array of objects. 332 | fallback.ready = function(libraries, callback) { 333 | var me = this; 334 | var index, library; 335 | 336 | if (me.is_function(libraries)) { 337 | callback = libraries; 338 | libraries = []; 339 | } else { 340 | if (!me.is_array(libraries) || me.is_string(libraries)) { 341 | libraries = [libraries]; 342 | } 343 | 344 | for (index in libraries) { 345 | library = libraries[index]; 346 | 347 | if (me.libraries[library] && !me.shims[library]) { 348 | me.spawn(library, me.libraries[library]); 349 | } 350 | } 351 | } 352 | 353 | me.callbacks.push({ 354 | callback: me.callback(callback), 355 | libraries: libraries 356 | }); 357 | 358 | return me.ready_invocation(); 359 | }; 360 | 361 | // Invoke any `ready` callbacks. 362 | fallback.ready_invocation = function() { 363 | var me = this, index, count, library, wipe, payload, processed = [], callbacks = []; 364 | 365 | for (index in me.callbacks) { 366 | // If callback is not an object, skip and remove it; 367 | payload = me.callbacks[index]; 368 | 369 | if (!me.is_object(payload) || !me.is_array(payload.libraries) || !me.is_function(payload.callback)) { 370 | continue; 371 | } 372 | 373 | wipe = false; 374 | 375 | if (payload.libraries.length > 0) { 376 | count = 0; 377 | 378 | for (library in me.success) { 379 | if (me.index_of(payload.libraries, library) >= 0) { 380 | count++; 381 | } 382 | } 383 | 384 | if (count === payload.libraries.length) { 385 | wipe = true; 386 | } 387 | } else if (me.libraries_count === me.success_count + me.failed_count) { 388 | wipe = true; 389 | } 390 | 391 | if (wipe) { 392 | callbacks.push(payload.callback); 393 | } else { 394 | processed.push(me.callbacks[index]); 395 | } 396 | } 397 | 398 | me.callbacks = processed; 399 | 400 | // We need to process the callbacks here that way they can run in parallel as well in nested callbacks and not get caught in a endless loop. 401 | for (index in callbacks) { 402 | callbacks[index](me.success, me.failed); 403 | } 404 | }; 405 | 406 | // Invoke any `shim` dependencies. 407 | fallback.shim_invocation = function() { 408 | var me = this; 409 | var count, index, shim, shimming; 410 | 411 | for (shim in me.shims) { 412 | shimming = me.shims[shim]; 413 | 414 | // If there are no shims, or the if the shim is already loaded, skip it. 415 | if (!shimming || me.success[shim]) { 416 | continue; 417 | } 418 | 419 | // Reset our counter back to 0. 420 | count = 0; 421 | 422 | // Iterate through shim dependencies and find out of all dependencies for shim were loaded. 423 | for (index in shimming) { 424 | if (me.success[shimming[index]]) { 425 | count++; 426 | } 427 | } 428 | 429 | // If all dependencies were loaded, spawn the shim. 430 | if (count === shimming.length) { 431 | me.spawn(shim, me.libraries[shim]); 432 | 433 | // Remove the shim from shim list that way it doesn't try to load it again. 434 | delete me.shims[shim]; 435 | } 436 | } 437 | }; 438 | 439 | // Initialize the spawning of a library. 440 | fallback.spawn = function(library, urls) { 441 | var me = this; 442 | 443 | // Library is already attempting to be loaded. 444 | if (me.index_of(me.spawned, library) !== -1) { 445 | return false; 446 | } 447 | 448 | me.libraries_count++; 449 | me.spawned.push(library); 450 | 451 | return me.spawn.instance(library, urls); 452 | }; 453 | 454 | // Spawn a url from the library. 455 | fallback.spawn.instance = function(library, urls) { 456 | var me = fallback; 457 | var element; 458 | var type = 'js'; 459 | 460 | var payload = { 461 | loaded: false, 462 | library: library, 463 | library_props: me.libraries_props[library], 464 | spawned: true, 465 | url: urls.shift(), 466 | urls: urls 467 | }; 468 | 469 | if (payload.url.indexOf('.css') > -1) { 470 | type = 'css'; 471 | 472 | // CSS selector already exists, do not attempt to spawn library. 473 | if (me.css.check(library)) { 474 | payload.spawned = false; 475 | return me.spawn.success(payload); 476 | } 477 | 478 | element = document.createElement('link'); 479 | element.crossorigin = true; 480 | element.rel = 'stylesheet'; 481 | element.href = payload.url; 482 | 483 | } else { 484 | // JavaScript variable already exists, do not attempt to spawn library 485 | if (me.is_defined(library)) { 486 | payload.spawned = false; 487 | return me.spawn.success(payload); 488 | } 489 | 490 | element = document.createElement('script'); 491 | element.src = payload.url; 492 | } 493 | 494 | me.add_sri_attributes(element, payload.library_props); 495 | 496 | element.onload = function() { 497 | // Checks for JavaScript library. 498 | if (type === 'js' && !me.is_defined(library)) { 499 | return me.spawn.failed(payload); 500 | } 501 | 502 | // Needed for IE11 especially. `onload` is fired even when there's a 404 for `link` elements. 503 | if (type !== 'js' && !me.css.check(library) && Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject) { 504 | return me.spawn.failed(payload); 505 | } 506 | 507 | return me.spawn.success(payload); 508 | }; 509 | 510 | element.onreadystatechange = function() { 511 | if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') { 512 | this.onreadystatechange = null; 513 | 514 | if (type === 'js' && !me.is_defined(library)) { 515 | return me.spawn.failed(payload); 516 | } 517 | 518 | return me.spawn.success(payload); 519 | } 520 | }; 521 | 522 | element.onerror = function() { 523 | return me.spawn.failed(payload); 524 | }; 525 | 526 | return me.head.appendChild(element); 527 | }; 528 | 529 | // Spawn failure callback. 530 | fallback.spawn.failed = function(payload) { 531 | var me = fallback; 532 | payload.spawned = false; 533 | 534 | if (!me.failed[payload.library]) { 535 | me.failed[payload.library] = []; 536 | } 537 | 538 | me.failed[payload.library].push(payload.url); 539 | 540 | // All URLs for the library have exhausted. 541 | if (!payload.urls.length) { 542 | me.failed_count++; 543 | return me.ready_invocation(); 544 | } 545 | 546 | // Attempt to spawn another URL. 547 | return me.spawn.instance(payload.library, payload.urls); 548 | }; 549 | 550 | // Spawn success callback. 551 | fallback.spawn.success = function(payload) { 552 | var me = fallback; 553 | 554 | // Mark the library and url as successful. 555 | if (!payload.loaded) { 556 | payload.loaded = true; 557 | me.success[payload.library] = payload.url; 558 | me.success_count++; 559 | } 560 | 561 | // Invoke any `shim` dependencies. 562 | me.shim_invocation(); 563 | 564 | // Invoke any `ready` callbacks. 565 | return me.ready_invocation(); 566 | }; 567 | 568 | fallback.bootstrap(); 569 | 570 | window.fallback = window.fbk = fallback; 571 | }(window, document)); 572 | -------------------------------------------------------------------------------- /lib/fallback/fallback.min.js: -------------------------------------------------------------------------------- 1 | /* fallback.js v1.1.9 | http://fallback.io/ | Salvatore Garbesi | (c) 2015 Dolox, Inc. */ 2 | (function(l,g){var b={g:[],B:{},C:0,head:g.getElementsByTagName("head")[0],a:{},p:0,q:{},f:[],e:{},m:0,d:{},c:{},s:0,u:function(){for(var a in b.k)b.k[a]&&b.A(b.k[a])},k:["Array","Function","Object","String"],A:function(a){b["is_"+a.toLowerCase()]=function(d){return"undefined"!==typeof d&&Object.prototype.toString.call(d)=="[object "+a+"]"}},i:function(a){this.is_function(a)||(a=function(){});return a},n:function(a,d){for(var c in a)if(a[c]===d)return c;return-1},is_defined:function(a){try{if(eval("window."+ 3 | a))return!0}catch(d){}return!1},t:function(a,d){this.is_object(d)&&(d.integrity&&a.setAttribute("integrity",d.integrity),d.crossorigin&&a.setAttribute("crossorigin",d.crossorigin))},importer:function(a,d){var c,b,e,h,m,k,g,l={};for(e in a)if(h=a[e])m=this.is_string(h)?[h]:this.is_object(h)?h.urls:h,this.is_array(m)&&(c=[],this.is_array(this.a[e])&&(c=this.a[e]),l[e]=m,this.a[e]=c.concat(m),this.q[e]=h);h={};if(this.is_object(d)&&(this.is_object(d.shim)||(this.is_object(d.deps)?d.shim=d.deps:this.is_object(d.dependencies)&& 4 | (d.shim=d.dependencies)),this.is_object(d.shim)))for(k in m=d.shim,m)if(c=m[k],this.a[k]&&c&&(this.is_string(c)&&(c=[c]),this.is_array(c))){g=[];for(b in c)e=c[b],this.a[e]&&e!==k&&g.push(e);c=[];this.is_array(this.d[k])&&(c=this.d[k]);h[k]=g;this.d[k]=c.concat(g)}return{a:l,d:h}},css:{}};b.css.l=function(a){if(!g.styleSheets)return!1;var d,c,f;for(d in g.styleSheets)if(c=g.styleSheets[d],0!==c)try{if(c.rules&&(f=b.css.r(c.rules,a))||c.cssRules&&(f=b.css.r(c.cssRules,a)))return f}catch(e){}return!1}; 5 | b.css.r=function(a,d){var c,b;for(c in a)if(b=a[c],b.selectorText===d)return!0;return!1};b.load=function(a,d,c){var b,e;if(!this.is_object(a))return!1;this.is_function(d)&&(c=d,d={});this.is_object(d)||(d={});a=this.importer(a,d);for(b in a.a)e=a.a[b],this.d[b]||this.b(b,e);this.is_function(d.callback)&&this.ready([],d.callback);this.is_function(c)&&this.ready([],c)};b.ready=function(a,b){var c,f;if(this.is_function(a))b=a,a=[];else{if(!this.is_array(a)||this.is_string(a))a=[a];for(c in a)f=a[c], 6 | this.a[f]&&!this.d[f]&&this.b(f,this.a[f])}this.g.push({i:this.i(b),a:a});return this.j()};b.j=function(){var a,b,c,f,e,h=[],g=[];for(a in this.g)if(e=this.g[a],this.is_object(e)&&this.is_array(e.a)&&this.is_function(e.i)){f=!1;if(0