diff options
author | sternenseemann <git@lukasepple.de> | 2017-09-07 19:35:58 +0200 |
---|---|---|
committer | sternenseemann <git@lukasepple.de> | 2017-09-07 19:37:10 +0200 |
commit | ed32f62724227c02261ce4b26f49b475db342cc2 (patch) | |
tree | c76bcc48c8891e738ef38a9b7c4fb33dbb43a9d0 /web | |
parent | d1e9e24850775424919c300a2df57c171a8bd56c (diff) |
Use pretty Unicode chars to represent graph nodes
Also regrouped and changed the buttons
Diffstat (limited to 'web')
-rw-r--r-- | web/source/custom.css | 3 | ||||
-rw-r--r-- | web/source/index.html | 6 | ||||
-rw-r--r-- | web/source/main.js | 122 | ||||
-rw-r--r-- | web/yarn.lock | 70 |
4 files changed, 147 insertions, 54 deletions
diff --git a/web/source/custom.css b/web/source/custom.css index d05fc34..9e7c17c 100644 --- a/web/source/custom.css +++ b/web/source/custom.css @@ -7,9 +7,8 @@ body { #network { width: 79%; - height: 800px; float:left; - border-top: 1px solid #232200; + height: 100vh; } #sidebar { diff --git a/web/source/index.html b/web/source/index.html index 4200267..14c08dc 100644 --- a/web/source/index.html +++ b/web/source/index.html @@ -13,13 +13,13 @@ <div id="network"></div> <div id="sidebar"> <h1>likely music</h1> - <input type="number" min="0" id="hop-count" placeholder="Max. song length (in notes)"> <h2>General Settings</h2> <button id="set-starting-node">Set starting node</button> <button id="show-starting-node">Show starting node</button> <h2>Generate an interpretation</h2> - <button id="gen-midi">MIDI interpretation</button> - <button id="gen-wav">WAV interpretation</button> + <input type="number" min="0" id="hop-count" placeholder="Max. song length (in notes)"> + <button id="play">Play</button> + <button id="gen-midi">Download MIDI</button> <h2>Load or Save Work</h2> <button id="gen-score">Save</button> <label for="upload-score" class="custom-file"> diff --git a/web/source/main.js b/web/source/main.js index 2e099b1..2dd126b 100644 --- a/web/source/main.js +++ b/web/source/main.js @@ -20,16 +20,16 @@ const valid_pitches = [ const display_pitches = [ 'C♯♯', 'C♯', 'C', 'D♯♯', 'C♭', 'D♯', - 'C♭♭', 'D', 'E♯♯', + 'C𝄫', 'D', 'E♯♯', 'D♭', 'E♯', 'F♯♯', - 'D♭♭', 'E', 'F♯', + 'D𝄫', 'E', 'F♯', 'E♭', 'F', 'Gff', - 'E♭♭', 'F♭', 'G♯', - 'F♭♭', 'G', 'A♯♯', - 'G♭', 'A♯', 'G♭♭', + 'E𝄫', 'F♭', 'G♯', + 'F𝄫', 'G', 'A♯♯', + 'G♭', 'A♯', 'G𝄫', 'A', 'B♯♯', 'A♭', - 'B♯', 'A♭♭', 'B', - 'B♭', 'B♭♭', 'Rest' + 'B♯', 'A𝄫', 'B', + 'B♭', 'B𝄫', 'Rest' ]; function displayPitch(pitch) { @@ -41,6 +41,90 @@ function displayPitch(pitch) { } } +function standard_rests(dur) { + if(dur.numerator === 1) { + switch(dur.denominator) { + case 1: + return '𝄻'; + break; + case 2: + return '𝄼'; + break; + case 4: + return '𝄽'; + break; + case 8: + return '𝄾'; + break; + case 16: + return '𝄿'; + break; + case 32: + return '𝅀'; + break; + case 64: + return '𝅁' + break; + case 128: + return '𝅂' + break; + default: + return null; + break; + } + } else { + return null; + } +} + +function standard_notes(dur) { + if(dur.numerator === 1) { + switch(dur.denominator) { + case 1: + return '𝅝'; + break; + case 2: + return '𝅗𝅥'; + break; + case 4: + return '𝅘𝅥'; + break; + case 8: + return '𝅘𝅥𝅮'; + break; + case 16: + return '𝅘𝅥𝅯'; + break; + case 32: + return '𝅘𝅥𝅰'; + break; + case 64: + return '𝅘𝅥𝅱' + break; + case 128: + return '𝅘𝅥𝅲' + break; + default: + return null; + break; + } + } else if(dur.numerator === 2 && dur.denominator === 1) { + return '𝅜' + } else { + return null; + } +} + +function musical_symbol(lookup, dur) { + const dot = '𝅭𝅭 '; + var standard_symbol = lookup(dur); + if(standard_symbol !== null) { + return standard_symbol; + } else { + return dur.toString(); + } +} + class Music { constructor(dur, pitch_class, octave) { this.dur = dur; @@ -54,14 +138,22 @@ class Music { toString() { if(this.pitch === 'Rest') { - return `${displayPitch(this.pitch)} for -${this.dur.toString()}`; + return `${displayPitch(this.pitch)} for ${this.dur.toString()}`; + } else { + return `${displayPitch(this.pitch)}${this.octave} for ${this.dur.toString()}`; + } + } + + nodeText() { + if(this.pitch === 'Rest') { + // alignment using a space! #justvisjsthings + return ` ${musical_symbol(standard_rests, this.dur)}`; } else { - return `${this.octave}${displayPitch(this.pitch)} for -${this.dur.toString()}`; + return `${musical_symbol(standard_notes, this.dur)} ${displayPitch(this.pitch)}${this.octave}` } } + static fromObject(obj) { return new Music(Rational.fromObject(obj.dur), obj.pitch, Number(obj.octave)); } @@ -120,7 +212,7 @@ function importGraphData(g) { var edgeSet = new vis.DataSet({}); for(let node of g.nodes) { var music = Music.fromObject(node.music); - var data = { id: node.id, label: music }; + var data = { id: node.id, label: music.nodeText() }; nodeData = nodeData.set(node.id, { nodeData: data, music: node.music }); nodeSet.add(data); } @@ -181,7 +273,7 @@ function genericEditNode(data, callback) { document.getElementById('denominator').value); var music = new Music(duration, document.getElementById('pitch').value, Number(document.getElementById('octave').value)); - data.label = music.toString(); + data.label = music.nodeText(); clearOverlay(); callback(data); nodeData = nodeData.set(data.id, { music: music, nodeData: data }); @@ -393,7 +485,9 @@ function init() { }, chosen: true, font: { - color: 'white' + color: 'white', + size: 20, + align: 'center' }, shape: 'circle', }, diff --git a/web/yarn.lock b/web/yarn.lock index 97aa2e4..ed7cc31 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -28,8 +28,8 @@ acorn@^4.0.3: resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787" acorn@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75" + version "5.1.2" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7" ajv-keywords@^1.0.0: version "1.5.1" @@ -749,14 +749,15 @@ browser-resolve@^1.11.0, browser-resolve@^1.7.0: resolve "1.1.7" browserify-aes@^1.0.0, browserify-aes@^1.0.4: - version "1.0.6" - resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a" + version "1.0.8" + resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.8.tgz#c8fa3b1b7585bb7ba77c5560b60996ddec6d5309" dependencies: - buffer-xor "^1.0.2" + buffer-xor "^1.0.3" cipher-base "^1.0.0" create-hash "^1.1.0" - evp_bytestokey "^1.0.0" + evp_bytestokey "^1.0.3" inherits "^2.0.1" + safe-buffer "^5.0.1" browserify-cipher@^1.0.0: version "1.0.0" @@ -858,7 +859,7 @@ browserslist@^2.1.2: caniuse-lite "^1.0.30000718" electron-to-chromium "^1.3.18" -buffer-xor@^1.0.2: +buffer-xor@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9" @@ -892,8 +893,8 @@ callsites@^0.2.0: resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca" caniuse-lite@^1.0.30000718: - version "1.0.30000718" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz#0dd24290beb11310b2d80f6b70a823c2a65a6fad" + version "1.0.30000726" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000726.tgz#966a753fa107a09d4131cf8b3d616723a06ccf7e" caseless@~0.12.0: version "0.12.0" @@ -1037,8 +1038,8 @@ convert-source-map@~1.1.0: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860" core-js@^2.4.0, core-js@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086" + version "2.5.1" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b" core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" @@ -1223,8 +1224,8 @@ ecc-jsbn@~0.1.1: jsbn "~0.1.0" electron-to-chromium@^1.3.18: - version "1.3.18" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c" + version "1.3.20" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.20.tgz#2eedd5ccbae7ddc557f68ad1fce9c172e915e4e5" elliptic@^6.0.0: version "6.4.0" @@ -1299,8 +1300,8 @@ eslint-scope@^3.7.1: estraverse "^4.1.1" eslint@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.5.0.tgz#bb75d3b8bde97fb5e13efcd539744677feb019c3" + version "4.6.1" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.6.1.tgz#ddc7fc7fd70bf93205b0b3449bb16a1e9e7d4950" dependencies: ajv "^5.2.0" babel-code-frame "^6.22.0" @@ -1376,9 +1377,9 @@ events@~1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924" -evp_bytestokey@^1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.2.tgz#f66bb88ecd57f71a766821e20283ea38c68bf80a" +evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02" dependencies: md5.js "^1.3.4" safe-buffer "^5.1.1" @@ -1751,8 +1752,8 @@ inline-source-map@~0.6.0: source-map "~0.5.3" inquirer@^3.0.6: - version "3.2.2" - resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.2.tgz#c2aaede1507cc54d826818737742d621bef2e823" + version "3.2.3" + resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.3.tgz#1c7b1731cf77b934ec47d22c9ac5aa8fe7fbe095" dependencies: ansi-escapes "^2.0.0" chalk "^2.0.0" @@ -2106,15 +2107,15 @@ miller-rabin@^4.0.0: bn.js "^4.0.0" brorand "^1.0.1" -mime-db@~1.29.0: - version "1.29.0" - resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.29.0.tgz#48d26d235589651704ac5916ca06001914266878" +mime-db@~1.30.0: + version "1.30.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01" mime-types@^2.1.12, mime-types@~2.1.7: - version "2.1.16" - resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.16.tgz#2b858a52e5ecd516db897ac2be87487830698e23" + version "2.1.17" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a" dependencies: - mime-db "~1.29.0" + mime-db "~1.30.0" mimic-fn@^1.0.0: version "1.1.0" @@ -2181,8 +2182,8 @@ mute-stream@0.0.7: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab" nan@^2.3.0: - version "2.6.2" - resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.2.tgz#e4ff34e6c95fdfb5aecc08de6596f43605a7db45" + version "2.7.0" + resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46" natural-compare@^1.4.0: version "1.4.0" @@ -2581,11 +2582,10 @@ regenerator-transform@^0.10.0: private "^0.1.6" regex-cache@^0.4.2: - version "0.4.3" - resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145" + version "0.4.4" + resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd" dependencies: is-equal-shallow "^0.1.3" - is-primitive "^2.0.0" regexpu-core@^2.0.0: version "2.0.0" @@ -2774,8 +2774,8 @@ sntp@1.x.x: hoek "2.x.x" source-map-support@^0.4.15: - version "0.4.16" - resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.16.tgz#16fecf98212467d017d586a2af68d628b9421cd8" + version "0.4.17" + resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.17.tgz#6f2150553e6375375d0ccb3180502b78c18ba430" dependencies: source-map "^0.5.6" @@ -2906,8 +2906,8 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" supports-color@^4.0.0: - version "4.2.1" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836" + version "4.4.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.4.0.tgz#883f7ddabc165142b2a61427f3352ded195d1a3e" dependencies: has-flag "^2.0.0" |