deac/MIDI.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

new Circle of Fifths synesthesia color scheme by Joseph Johnston, designed so harmonic notes create hormonic color schemes

Browse source
This commit is contained in:
Michael Deal 2013-01-25 00:32:22 -08:00
parent fd761e1cce
commit 485a2be277
2 changed files with 45 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

54
js/MusicTheory/Synesthesia.js
View file

@ -1,6 +1,6 @@
/* /*
------------------------------------------------------------ ------------------------------------------------------------
MusicTheory.Synesthesia : 0.3 MusicTheory.Synesthesia : 0.3.1 : 01/06/2012
------------------------------------------------------------ ------------------------------------------------------------
Peacock: “Instruments to perform color-music: Two centuries of technological experimentation,” Leonardo, 21 (1988), 397-406. Peacock: “Instruments to perform color-music: Two centuries of technological experimentation,” Leonardo, 21 (1988), 397-406.
Gerstner: Karl Gerstner, The Forms of Color 1986 Gerstner: Karl Gerstner, The Forms of Color 1986
@ -19,6 +19,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
(function(root) { (function(root) {
root.data = { root.data = {
'Isaac Newton (1704)': { 'Isaac Newton (1704)': {
format: "HSL",
ref: "Gerstner, p.167", ref: "Gerstner, p.167",
english: ['red',null,'orange',null,'yellow','green',null,'blue',null,'indigo',null,'violet'], english: ['red',null,'orange',null,'yellow','green',null,'blue',null,'indigo',null,'violet'],
0: [ 0, 96, 51 ], // C 0: [ 0, 96, 51 ], // C
@ -35,6 +36,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 325, 84, 46 ] // B 11: [ 325, 84, 46 ] // B
}, },
'Louis Bertrand Castel (1734)': { 'Louis Bertrand Castel (1734)': {
format: "HSL",
ref: 'Peacock, p.400', ref: 'Peacock, p.400',
english: ['blue','blue-green','green','olive green','yellow','yellow-orange','orange','red','crimson','violet','agate','indigo'], english: ['blue','blue-green','green','olive green','yellow','yellow-orange','orange','red','crimson','violet','agate','indigo'],
0: [ 248, 82, 28 ], 0: [ 248, 82, 28 ],
@ -51,6 +53,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 302, 88, 26 ] 11: [ 302, 88, 26 ]
}, },
'George Field (1816)': { 'George Field (1816)': {
format: "HSL",
ref: 'Klein, p.69', ref: 'Klein, p.69',
english: ['blue',null,'purple',null,'red','orange',null,'yellow',null,'yellow green',null,'green'], english: ['blue',null,'purple',null,'red','orange',null,'yellow',null,'yellow green',null,'green'],
0: [ 248, 82, 28 ], 0: [ 248, 82, 28 ],
@ -67,6 +70,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 135, 76, 32 ] 11: [ 135, 76, 32 ]
}, },
'D. D. Jameson (1844)': { 'D. D. Jameson (1844)': {
format: "HSL",
ref: 'Jameson, p.12', ref: 'Jameson, p.12',
english: ['red','red-orange','orange','orange-yellow','yellow','green','green-blue','blue','blue-purple','purple','purple-violet','violet'], english: ['red','red-orange','orange','orange-yellow','yellow','green','green-blue','blue','blue-purple','purple','purple-violet','violet'],
0: [ 360, 96, 51 ], 0: [ 360, 96, 51 ],
@ -83,6 +87,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 325, 84, 46 ] 11: [ 325, 84, 46 ]
}, },
'Theodor Seemann (1881)': { 'Theodor Seemann (1881)': {
format: "HSL",
ref: 'Klein, p.86', ref: 'Klein, p.86',
english: ['carmine','scarlet','orange','yellow-orange','yellow','green','green blue','blue','indigo','violet','brown','black'], english: ['carmine','scarlet','orange','yellow-orange','yellow','green','green blue','blue','indigo','violet','brown','black'],
0: [ 0, 58, 26 ], 0: [ 0, 58, 26 ],
@ -99,6 +104,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 0, 0, 3 ] 11: [ 0, 0, 3 ]
}, },
'A. Wallace Rimington (1893)': { 'A. Wallace Rimington (1893)': {
format: "HSL",
ref: 'Peacock, p.402', ref: 'Peacock, p.402',
english: ['deep red','crimson','orange-crimson','orange','yellow','yellow-green','green','blueish green','blue-green','indigo','deep blue','violet'], english: ['deep red','crimson','orange-crimson','orange','yellow','yellow-green','green','blueish green','blue-green','indigo','deep blue','violet'],
0: [ 360, 96, 51 ], 0: [ 360, 96, 51 ],
@ -115,6 +121,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 325, 84, 46 ] 11: [ 325, 84, 46 ]
}, },
'Bainbridge Bishop (1893)': { 'Bainbridge Bishop (1893)': {
format: "HSL",
ref: 'Bishop, p.11', ref: 'Bishop, p.11',
english: ['red','orange-red or scarlet','orange','gold or yellow-orange','yellow or green-gold','yellow-green','green','greenish-blue or aquamarine','blue','indigo or violet-blue','violet','violet-red','red'], english: ['red','orange-red or scarlet','orange','gold or yellow-orange','yellow or green-gold','yellow-green','green','greenish-blue or aquamarine','blue','indigo or violet-blue','violet','violet-red','red'],
0: [ 360, 96, 51 ], 0: [ 360, 96, 51 ],
@ -131,6 +138,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 360, 96, 51 ] 11: [ 360, 96, 51 ]
}, },
'H. von Helmholtz (1910)': { 'H. von Helmholtz (1910)': {
format: "HSL",
ref: 'Helmholtz, p.22', ref: 'Helmholtz, p.22',
english: ['yellow','green','greenish blue','cayan-blue','indigo blue','violet','end of red','red','red','red','red orange','orange'], english: ['yellow','green','greenish blue','cayan-blue','indigo blue','violet','end of red','red','red','red','red orange','orange'],
0: [ 60, 90, 60 ], 0: [ 60, 90, 60 ],
@ -147,6 +155,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 28, 89, 50 ] 11: [ 28, 89, 50 ]
}, },
'Alexander Scriabin (1911)': { 'Alexander Scriabin (1911)': {
format: "HSL",
ref: 'Jones, p.104', ref: 'Jones, p.104',
english: ['red','violet','yellow','steely with the glint of metal','pearly blue the shimmer of moonshine','dark red','bright blue','rosy orange','purple','green','steely with a glint of metal','pearly blue the shimmer of moonshine'], english: ['red','violet','yellow','steely with the glint of metal','pearly blue the shimmer of moonshine','dark red','bright blue','rosy orange','purple','green','steely with a glint of metal','pearly blue the shimmer of moonshine'],
0: [ 360, 96, 51 ], 0: [ 360, 96, 51 ],
@ -163,6 +172,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 211, 70, 37 ] 11: [ 211, 70, 37 ]
}, },
'Adrian Bernard Klein (1930)': { 'Adrian Bernard Klein (1930)': {
format: "HSL",
ref: 'Klein, p.209', ref: 'Klein, p.209',
english: ['dark red','red','red orange','orange','yellow','yellow green','green','blue-green','blue','blue violet','violet','dark violet'], english: ['dark red','red','red orange','orange','yellow','yellow green','green','blue-green','blue','blue violet','violet','dark violet'],
0: [ 0, 91, 40 ], 0: [ 0, 91, 40 ],
@ -179,6 +189,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 330, 84, 34 ] 11: [ 330, 84, 34 ]
}, },
'August Aeppli (1940)': { 'August Aeppli (1940)': {
format: "HSL",
ref: 'Gerstner, p.169', ref: 'Gerstner, p.169',
english: ['red',null,'orange',null,'yellow',null,'green','blue-green',null,'ultramarine blue','violet','purple'], english: ['red',null,'orange',null,'yellow',null,'green','blue-green',null,'ultramarine blue','violet','purple'],
0: [ 0, 96, 51 ], 0: [ 0, 96, 51 ],
@ -211,6 +222,7 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
11: [ 338, 85, 37 ] 11: [ 338, 85, 37 ]
}, },
'Steve Zieverink (2004)': { 'Steve Zieverink (2004)': {
format: "HSL",
ref: 'Cincinnati Contemporary Art Center', ref: 'Cincinnati Contemporary Art Center',
english: ['yellow-green','green','blue-green','blue','indigo','violet','ultra violet','infra red','red','orange','yellow-white','yellow'], english: ['yellow-green','green','blue-green','blue','indigo','violet','ultra violet','infra red','red','orange','yellow-white','yellow'],
0: [ 73, 73, 55 ], 0: [ 73, 73, 55 ],
@ -226,7 +238,25 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
10: [ 62, 78, 74 ], 10: [ 62, 78, 74 ],
11: [ 60, 90, 60 ] 11: [ 60, 90, 60 ]
}, },
'Circle of Fifths (2012)': { 'Circle of Fifths (Johnston 2003)': {
format: "RGB",
ref: 'Joseph Johnston',
english: ['yellow', 'blue', 'orange', 'teal', 'red', 'green', 'purple', 'light orange', 'light blue', 'dark orange', 'dark green', 'violet' ],
0: [ 255, 255, 0 ],
1: [ 50, 0, 255 ],
2: [ 255, 150, 0 ],
3: [ 0, 210, 180 ],
4: [ 255, 0, 0 ],
5: [ 130, 255, 0 ],
6: [ 150, 0, 200 ],
7: [ 255, 195, 0 ],
8: [ 30, 130, 255 ],
9: [ 255, 100, 0 ],
10: [ 0, 200, 0 ],
11: [ 225, 0, 225 ]
},
'Circle of Fifths (Wheatman 2002)': {
format: "HEX",
ref: "Stuart Wheatman", // http://www.valleysfamilychurch.org/ ref: "Stuart Wheatman", // http://www.valleysfamilychurch.org/
english: [], english: [],
data: ['#122400', '#2E002E', '#002914', '#470000', '#002142', '#2E2E00', '#290052', '#003D00', '#520029', '#003D3D', '#522900', '#000080', '#244700', '#570057', '#004D26', '#7A0000', '#003B75', '#4C4D00', '#47008F', '#006100', '#850042', '#005C5C', '#804000', '#0000C7', '#366B00', '#80007F', '#00753B', '#B80000', '#0057AD', '#6B6B00', '#6600CC', '#008A00', '#B8005C', '#007F80', '#B35900', '#2424FF', '#478F00', '#AD00AD', '#00994D', '#F00000', '#0073E6', '#8F8F00', '#8A14FF', '#00AD00', '#EB0075', '#00A3A3', '#E07000', '#6B6BFF', '#5CB800', '#DB00DB', '#00C261', '#FF5757', '#3399FF', '#ADAD00', '#B56BFF', '#00D600', '#FF57AB', '#00C7C7', '#FF9124', '#9999FF', '#6EDB00', '#FF29FF', '#00E070', '#FF9999', '#7ABDFF', '#D1D100', '#D1A3FF', '#00FA00', '#FFA3D1', '#00E5E6', '#FFC285', '#C2C2FF', '#80FF00', '#FFA8FF', '#00E070', '#FFCCCC', '#C2E0FF', '#F0F000', '#EBD6FF', '#ADFFAD', '#FFD6EB', '#8AFFFF', '#FFEBD6', '#EBEBFF', '#E0FFC2', '#FFEBFF', '#E5FFF2', '#FFF5F5'] } data: ['#122400', '#2E002E', '#002914', '#470000', '#002142', '#2E2E00', '#290052', '#003D00', '#520029', '#003D3D', '#522900', '#000080', '#244700', '#570057', '#004D26', '#7A0000', '#003B75', '#4C4D00', '#47008F', '#006100', '#850042', '#005C5C', '#804000', '#0000C7', '#366B00', '#80007F', '#00753B', '#B80000', '#0057AD', '#6B6B00', '#6600CC', '#008A00', '#B8005C', '#007F80', '#B35900', '#2424FF', '#478F00', '#AD00AD', '#00994D', '#F00000', '#0073E6', '#8F8F00', '#8A14FF', '#00AD00', '#EB0075', '#00A3A3', '#E07000', '#6B6BFF', '#5CB800', '#DB00DB', '#00C261', '#FF5757', '#3399FF', '#ADAD00', '#B56BFF', '#00D600', '#FF57AB', '#00C7C7', '#FF9124', '#9999FF', '#6EDB00', '#FF29FF', '#00E070', '#FF9999', '#7ABDFF', '#D1D100', '#D1A3FF', '#00FA00', '#FFA3D1', '#00E5E6', '#FFC285', '#C2C2FF', '#80FF00', '#FFA8FF', '#00E070', '#FFCCCC', '#C2E0FF', '#F0F000', '#EBD6FF', '#ADFFAD', '#FFD6EB', '#8AFFFF', '#FFEBD6', '#EBEBFF', '#E0FFC2', '#FFEBFF', '#E5FFF2', '#FFF5F5'] }
@ -249,20 +279,22 @@ if (typeof(MusicTheory.Synesthesia) === "undefined") MusicTheory.Synesthesia = {
hsl: colors.data[note], hsl: colors.data[note],
hex: colors.data[note] hex: colors.data[note]
} }
} else { } else { // array
var clr = colors[(note + 9) % 12]; var clr = colors[(note + 9) % 12];
var H = clr.H || clr[0]; var isRGB = colors.format === "RGB";
var S = clr.S || clr[1]; if (isRGB) clr = Color.Space(clr, "RGB>HSL");
var L = clr.L || clr[2]; var H = Math.round(isRGB ? clr.H : clr[0]);
if (H == S && S == L) { var S = Math.round(isRGB ? clr.S : clr[1]);
clr = blend(parray, colors[(note + 10) % 12]); var L = Math.round(isRGB ? clr.L : clr[2]);
} if (H == S && S == L) clr = blend(parray, colors[(note + 10) % 12]);
var amount = L / 10; var amount = L / 10;
var octave = note / 12 >> 0; var octave = note / 12 >> 0;
var octaveLum = L + amount * octave - 3 * amount; // map luminance to octave var octaveLum = L + amount * octave - 3 * amount; // map luminance to octave
data[note] = { data[note] = {
hsl: 'hsla(' + H + ',' + S + '%,' + octaveLum + '%, 1)', /// hsl: 'hsla(' + H + ',' + S + '%,' + octaveLum + '%, 1)',
hex: Color.Space({H:H, S:S, L:octaveLum}, "HSL>RGB>HEX>W3") // hex: Color.Space({H:H, S:S, L:octaveLum}, "HSL>RGB>HEX>W3")
hsl: 'hsla(' + H + ',' + S + '%,' + L + '%, 1)',
hex: Color.Space({H:H, S:S, L:L}, "HSL>RGB>HEX>W3")
}; };
var parray = clr; var parray = clr;
} }

3
js/Widgets/Loader.js
View file

@ -131,6 +131,7 @@ widgets.Loader = function (configure) {
this.update = function(id, message, percent) { this.update = function(id, message, percent) {
if (!id) for (var id in this.messages); if (!id) for (var id in this.messages);
if (!id) return this.message(message);
var item = this.messages[id]; var item = this.messages[id];
item.message = message; item.message = message;
if (typeof(percent) === "number") item.span.innerHTML = percent + "%"; if (typeof(percent) === "number") item.span.innerHTML = percent + "%";
@ -262,7 +263,7 @@ widgets.Loader = function (configure) {
var style = document.createElement("style"); var style = document.createElement("style");
style.innerHTML = '\ style.innerHTML = '\
.loader { color: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100000; opacity: 0; display: none; }\ .loader { color: #fff; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100000; opacity: 0; display: none; }\
.loader span.message { line-height: 1.5em; font-family: monospace; font-size: 14px; margin: auto; opacity: 1; display: none; border-radius: 10px; padding: 0px; width: 300px; text-align: center; position: absolute; z-index: 10000; left: 0; right: 0; }\ .loader span.message { font-family: monospace; font-size: 14px; margin: auto; opacity: 1; display: none; border-radius: 10px; padding: 0px; width: 300px; text-align: center; position: absolute; z-index: 10000; left: 0; right: 0; }\
.loader span.message div { border-bottom: 1px solid #222; padding: 5px 10px; clear: both; text-align: left; opacity: 1; }\ .loader span.message div { border-bottom: 1px solid #222; padding: 5px 10px; clear: both; text-align: left; opacity: 1; }\
.loader span.message div:last-child { border-bottom: none; }\ .loader span.message div:last-child { border-bottom: none; }\
'; ';