diff --git a/bin/em/variabletime/web/js/audio.js b/bin/em/variabletime/web/js/audio.js index 9c3b4f6..5f62997 100644 --- a/bin/em/variabletime/web/js/audio.js +++ b/bin/em/variabletime/web/js/audio.js @@ -247,24 +247,24 @@ const Audio = function(tp, record) { audioOptions.classList.add(toCssClass('audioOptionscolor')); switch(propTitle.split('.')[1]) { case 'r': { - audioOptions.style.background = 'rgba(255,0,0,0.2)'; // AUDIO COLOR + audioOptions.style.background = config.audio.colors.options_r_background; break; } case 'g': { - audioOptions.style.background = 'rgba(0,255,0,0.2)'; // AUDIO COLOR + audioOptions.style.background = config.audio.colors.options_g_background; break; } case 'b': { - audioOptions.style.background = 'rgba(0,0,255,0.2)'; // AUDIO COLOR + audioOptions.style.background = config.audio.colors.options_b_background; break; } case 'a': { - audioOptions.style.background = 'rgba(255,255,255,0.2)'; // AUDIO COLOR + audioOptions.style.background = config.audio.colors.options_a_background; break; } } } else { - audioOptions.style.background = 'rgba(163, 163, 163, 0.2)'; // AUDIO COLOR + audioOptions.style.background = config.audio.colors.options_background; // AUDIO COLOR } audioOptions.style.order = parseInt(container.style.order) + 1; @@ -491,8 +491,9 @@ const Audio = function(tp, record) { fft_selectDom.style.width = '100%'; fft_selectDom.style.height = '100%'; fft_selectDom.style.pointerEvents = 'none'; - fft_selectDom.style.backgroundColor = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR - fft_selectDom.style.border = 'none'; // AUDIO COLOR + fft_selectDom.style.backgroundColor = config.audio.colors.overlay; + fft_selectDom.style.border = config.audio.colors.overlay_stroke; + fft_selectDom.style.mixBlendMode = config.audio.colors.overlay_blendmode; fft_Dom.append(fft_imgDom); fft_Dom.append(fft_selectDom); @@ -956,7 +957,7 @@ const Audio = function(tp, record) { drawVisual = requestAnimationFrame(drawAlt); canvasKeys.forEach((k) => { - canvasCombos[k][1].fillStyle = "rgb(0, 0, 0)"; // AUDIO COLOR + canvasCombos[k][1].fillStyle = config.audio.colors.background_fill; canvasCombos[k][1].fillRect(0, 0, w, h); const layerID = canvasCombos[k][2]; const m = mapping[layerID][k]; @@ -965,14 +966,14 @@ const Audio = function(tp, record) { const sw = m.max_freq - m.min_freq; const sy = h - (m.max_in * verticalFactor); const sh = (m.max_in - m.min_in) * verticalFactor; - canvasCombos[k][1].fillStyle = "rgb(80, 80, 80)"; // AUDIO COLOR + canvasCombos[k][1].fillStyle = config.audio.colors.select_fill; canvasCombos[k][1].fillRect(sx, sy, sw, sh); } else if (m.sync === 'pitch' || m.sync === 'clarity') { const sx = m.min_freq; const sw = m.max_freq - m.min_freq; const sy = 0; const sh = h; - canvasCombos[k][1].fillStyle = "rgb(80, 80, 80)"; // AUDIO COLOR + canvasCombos[k][1].fillStyle = config.audio.colors.select_fill; canvasCombos[k][1].fillRect(sx, sy, sw, sh); } }); @@ -1036,7 +1037,7 @@ const Audio = function(tp, record) { r.max_i = v; } r.max_ri += v * f; - let fillStyle = 'rgb(200,200,200)'; + let fillStyle = config.audio.colors.frequency_fill; for (let k_i = 0; k_i < canvasKeys.length; k_i++) { // NOTE: this is not the most efficient way to do it const k = canvasKeys[k_i]; @@ -1065,6 +1066,7 @@ const Audio = function(tp, record) { r.max_ri /= r.total_v; analysedResults[source].mappings.forEach((m) => { m.max_ri /= m.total_v; + m.c = m.max_v / m.total_v; }); }); for (let k_i = 0; k_i < canvasKeys.length; k_i++) { @@ -1076,17 +1078,24 @@ const Audio = function(tp, record) { const sw = m.max_freq - m.min_freq; const sy = h - (m.max_in * verticalFactor); const sh = (m.max_in - m.min_in) * verticalFactor; - canvasCombos[k][1].lineWidth = 1; // AUDIO COLOR - canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR + canvasCombos[k][1].lineWidth = config.audio.colors.select_stroke_width; + canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke; canvasCombos[k][1].strokeRect(sx, sy, sw, sh); } else if (m.sync === 'pitch' || m.sync === 'clarity') { const sx = m.min_freq; const sw = m.max_freq - m.min_freq; const sy = 0; const sh = h; - canvasCombos[k][1].lineWidth = 1; // AUDIO COLOR - canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR + canvasCombos[k][1].lineWidth = config.audio.colors.select_stroke_width; + canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke; canvasCombos[k][1].strokeRect(sx, sy, sw, sh); + if (m.sync === 'pitch') { + canvasCombos[k][1].lineWidth = config.audio.colors.highlight_stroke_width; + canvasCombos[k][1].strokeStyle = config.audio.colors.highlight_2_stroke; + canvasCombos[k][1].strokeRect(m.max_ri, 0, 1, sh); + canvasCombos[k][1].strokeStyle = config.audio.colors.highlight_stroke; + canvasCombos[k][1].strokeRect(m.max_i, 0, 1, sh); + } } } @@ -1122,8 +1131,7 @@ const Audio = function(tp, record) { break; } case 'clarity': { - const clarity = m.max_v / m.total_v; - const a = mapValue(clarity, 0.01, 0.05, m.min_out, m.max_out, true); + const a = mapValue(m.c, 0.01, 0.05, m.min_out, m.max_out, true); if (!isNaN(a)) { m.value = m.value * m.smoothing + (1.0 - m.smoothing) * a; propsToSet.push({ diff --git a/bin/em/variabletime/web/js/config.js b/bin/em/variabletime/web/js/config.js index 5cf06c3..ec0879f 100644 --- a/bin/em/variabletime/web/js/config.js +++ b/bin/em/variabletime/web/js/config.js @@ -113,6 +113,29 @@ const config = { ignoreOutboundFrequencies: true, pitchCombineFrequencies: false, rolloverResetLoop: true, + colors: { + background_fill: 'hsla(166, 74%, 20%, 1.0)', + select_fill: 'hsla(166, 52%, 42%, 1.0)', + select_stroke: 'hsla(166, 74%, 92%, 1.0)', + select_stroke_width: 1, + highlight_stroke: 'hsla(64, 100%, 64%, 1.0)', + highlight_stroke_width: 1, + highlight_2_stroke: 'hsla(166, 74%, 64%, 1.0)', + frequency_fill: 'hsla(166, 74%, 84%, 1.0)', + options_r_background: 'hsla(360, 100%, 50%, 0.2)', + options_g_background: 'hsla(120, 100%, 50%, 0.2)', + options_b_background: 'hsla(240, 100%, 50%, 0.2)', + options_a_background: 'hsla(0, 0%, 100%, 0.2)', + options_background: 'hsla(0, 0%, 64%, 0.2)', + // overlay is the div used for mouse interactions + // it spans over the whole canvas. + // it can be used to adjust the color underneath. + overlay: 'rgba(28, 186, 148, 0.0)', + // gradient needs backgroundImage not backgroundColor in audio.js + //overlay: 'linear-gradient(red, yellow)', + overlay_stroke: 'none', + overlay_blendmode: 'color', + }, }, record: { active: true,