diff --git a/bin/em/variabletime/web/js/audio.js b/bin/em/variabletime/web/js/audio.js index 5f62997..9c3b4f6 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 = config.audio.colors.options_r_background; + audioOptions.style.background = 'rgba(255,0,0,0.2)'; // AUDIO COLOR break; } case 'g': { - audioOptions.style.background = config.audio.colors.options_g_background; + audioOptions.style.background = 'rgba(0,255,0,0.2)'; // AUDIO COLOR break; } case 'b': { - audioOptions.style.background = config.audio.colors.options_b_background; + audioOptions.style.background = 'rgba(0,0,255,0.2)'; // AUDIO COLOR break; } case 'a': { - audioOptions.style.background = config.audio.colors.options_a_background; + audioOptions.style.background = 'rgba(255,255,255,0.2)'; // AUDIO COLOR break; } } } else { - audioOptions.style.background = config.audio.colors.options_background; // AUDIO COLOR + audioOptions.style.background = 'rgba(163, 163, 163, 0.2)'; // AUDIO COLOR } audioOptions.style.order = parseInt(container.style.order) + 1; @@ -491,9 +491,8 @@ const Audio = function(tp, record) { fft_selectDom.style.width = '100%'; fft_selectDom.style.height = '100%'; fft_selectDom.style.pointerEvents = 'none'; - 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_selectDom.style.backgroundColor = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR + fft_selectDom.style.border = 'none'; // AUDIO COLOR fft_Dom.append(fft_imgDom); fft_Dom.append(fft_selectDom); @@ -957,7 +956,7 @@ const Audio = function(tp, record) { drawVisual = requestAnimationFrame(drawAlt); canvasKeys.forEach((k) => { - canvasCombos[k][1].fillStyle = config.audio.colors.background_fill; + canvasCombos[k][1].fillStyle = "rgb(0, 0, 0)"; // AUDIO COLOR canvasCombos[k][1].fillRect(0, 0, w, h); const layerID = canvasCombos[k][2]; const m = mapping[layerID][k]; @@ -966,14 +965,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 = config.audio.colors.select_fill; + canvasCombos[k][1].fillStyle = "rgb(80, 80, 80)"; // AUDIO COLOR 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 = config.audio.colors.select_fill; + canvasCombos[k][1].fillStyle = "rgb(80, 80, 80)"; // AUDIO COLOR canvasCombos[k][1].fillRect(sx, sy, sw, sh); } }); @@ -1037,7 +1036,7 @@ const Audio = function(tp, record) { r.max_i = v; } r.max_ri += v * f; - let fillStyle = config.audio.colors.frequency_fill; + let fillStyle = 'rgb(200,200,200)'; 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]; @@ -1066,7 +1065,6 @@ 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++) { @@ -1078,24 +1076,17 @@ 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 = config.audio.colors.select_stroke_width; - canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke; + canvasCombos[k][1].lineWidth = 1; // AUDIO COLOR + canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR 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 = config.audio.colors.select_stroke_width; - canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke; + canvasCombos[k][1].lineWidth = 1; // AUDIO COLOR + canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR 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); - } } } @@ -1131,7 +1122,8 @@ const Audio = function(tp, record) { break; } case 'clarity': { - const a = mapValue(m.c, 0.01, 0.05, m.min_out, m.max_out, true); + const clarity = m.max_v / m.total_v; + const a = mapValue(clarity, 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 ec0879f..5cf06c3 100644 --- a/bin/em/variabletime/web/js/config.js +++ b/bin/em/variabletime/web/js/config.js @@ -113,29 +113,6 @@ 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, diff --git a/bin/em/variabletime/web/js/record.js b/bin/em/variabletime/web/js/record.js index b23e6fb..951c095 100644 --- a/bin/em/variabletime/web/js/record.js +++ b/bin/em/variabletime/web/js/record.js @@ -320,7 +320,6 @@ const Record = function(tp) { }; const cloneInput = (layer, propTitle) => { - return; const panel = tp.getPanel(); const panelPropTitle = tp.getPanelPropTitle(propTitle); if (panelPropTitle !== null) { @@ -351,7 +350,6 @@ const Record = function(tp) { }; const uncloneInput = (layer, propTitle) => { - return; const panel = tp.getPanel(); const panelPropTitle = tp.getPanelPropTitle(propTitle); if (panelPropTitle !== null) {