about summary refs log tree commit diff
path: root/web
diff options
context:
space:
mode:
authorsternenseemann <git@lukasepple.de>2017-09-07 19:35:58 +0200
committersternenseemann <git@lukasepple.de>2017-09-07 19:37:10 +0200
commited32f62724227c02261ce4b26f49b475db342cc2 (patch)
treec76bcc48c8891e738ef38a9b7c4fb33dbb43a9d0 /web
parentd1e9e24850775424919c300a2df57c171a8bd56c (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.css3
-rw-r--r--web/source/index.html6
-rw-r--r--web/source/main.js122
-rw-r--r--web/yarn.lock70
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"