variablelab/variabletime
variablelab/variabletime
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: variablelab:8a92646038e6d119f9562ce6e8afaae521c5a628
Branches Tags
variablelab:main
variablelab:audio
..
compare: variablelab:4ef2ee46708f93d95aeeb37204c2352d34d3ad08
Branches Tags
variablelab:audio
variablelab:main

No commits in common. "8a92646038e6d119f9562ce6e8afaae521c5a628" and "4ef2ee46708f93d95aeeb37204c2352d34d3ad08" have entirely different histories.
8a92646038 ... 4ef2ee4670

3 changed files with 17 additions and 50 deletions
Show stats Expand all files Collapse all files

42
bin/em/variabletime/web/js/audio.js
View file

@ -247,24 +247,24 @@ const Audio = function(tp, record) {
audioOptions.classList.add(toCssClass('audioOptionscolor')); audioOptions.classList.add(toCssClass('audioOptionscolor'));
switch(propTitle.split('.')[1]) { switch(propTitle.split('.')[1]) {
case 'r': { case 'r': {
audioOptions.style.background = config.audio.colors.options_r_background; audioOptions.style.background = 'rgba(255,0,0,0.2)'; // AUDIO COLOR
break; break;
} }
case 'g': { case 'g': {
audioOptions.style.background = config.audio.colors.options_g_background; audioOptions.style.background = 'rgba(0,255,0,0.2)'; // AUDIO COLOR
break; break;
} }
case 'b': { case 'b': {
audioOptions.style.background = config.audio.colors.options_b_background; audioOptions.style.background = 'rgba(0,0,255,0.2)'; // AUDIO COLOR
break; break;
} }
case 'a': { case 'a': {
audioOptions.style.background = config.audio.colors.options_a_background; audioOptions.style.background = 'rgba(255,255,255,0.2)'; // AUDIO COLOR
break; break;
} }
} }
} else { } 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; 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.width = '100%';
fft_selectDom.style.height = '100%'; fft_selectDom.style.height = '100%';
fft_selectDom.style.pointerEvents = 'none'; fft_selectDom.style.pointerEvents = 'none';
fft_selectDom.style.backgroundColor = config.audio.colors.overlay; fft_selectDom.style.backgroundColor = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR
fft_selectDom.style.border = config.audio.colors.overlay_stroke; fft_selectDom.style.border = 'none'; // AUDIO COLOR
fft_selectDom.style.mixBlendMode = config.audio.colors.overlay_blendmode;
fft_Dom.append(fft_imgDom); fft_Dom.append(fft_imgDom);
fft_Dom.append(fft_selectDom); fft_Dom.append(fft_selectDom);
@ -957,7 +956,7 @@ const Audio = function(tp, record) {
drawVisual = requestAnimationFrame(drawAlt); drawVisual = requestAnimationFrame(drawAlt);
canvasKeys.forEach((k) => { 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); canvasCombos[k][1].fillRect(0, 0, w, h);
const layerID = canvasCombos[k][2]; const layerID = canvasCombos[k][2];
const m = mapping[layerID][k]; const m = mapping[layerID][k];
@ -966,14 +965,14 @@ const Audio = function(tp, record) {
const sw = m.max_freq - m.min_freq; const sw = m.max_freq - m.min_freq;
const sy = h - (m.max_in * verticalFactor); const sy = h - (m.max_in * verticalFactor);
const sh = (m.max_in - m.min_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); canvasCombos[k][1].fillRect(sx, sy, sw, sh);
} else if (m.sync === 'pitch' || m.sync === 'clarity') { } else if (m.sync === 'pitch' || m.sync === 'clarity') {
const sx = m.min_freq; const sx = m.min_freq;
const sw = m.max_freq - m.min_freq; const sw = m.max_freq - m.min_freq;
const sy = 0; const sy = 0;
const sh = h; 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); canvasCombos[k][1].fillRect(sx, sy, sw, sh);
} }
}); });
@ -1037,7 +1036,7 @@ const Audio = function(tp, record) {
r.max_i = v; r.max_i = v;
} }
r.max_ri += v * f; 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++) { for (let k_i = 0; k_i < canvasKeys.length; k_i++) {
// NOTE: this is not the most efficient way to do it // NOTE: this is not the most efficient way to do it
const k = canvasKeys[k_i]; const k = canvasKeys[k_i];
@ -1066,7 +1065,6 @@ const Audio = function(tp, record) {
r.max_ri /= r.total_v; r.max_ri /= r.total_v;
analysedResults[source].mappings.forEach((m) => { analysedResults[source].mappings.forEach((m) => {
m.max_ri /= m.total_v; 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++) { 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 sw = m.max_freq - m.min_freq;
const sy = h - (m.max_in * verticalFactor); const sy = h - (m.max_in * verticalFactor);
const sh = (m.max_in - m.min_in) * verticalFactor; const sh = (m.max_in - m.min_in) * verticalFactor;
canvasCombos[k][1].lineWidth = config.audio.colors.select_stroke_width; canvasCombos[k][1].lineWidth = 1; // AUDIO COLOR
canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke; canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR
canvasCombos[k][1].strokeRect(sx, sy, sw, sh); canvasCombos[k][1].strokeRect(sx, sy, sw, sh);
} else if (m.sync === 'pitch' || m.sync === 'clarity') { } else if (m.sync === 'pitch' || m.sync === 'clarity') {
const sx = m.min_freq; const sx = m.min_freq;
const sw = m.max_freq - m.min_freq; const sw = m.max_freq - m.min_freq;
const sy = 0; const sy = 0;
const sh = h; const sh = h;
canvasCombos[k][1].lineWidth = config.audio.colors.select_stroke_width; canvasCombos[k][1].lineWidth = 1; // AUDIO COLOR
canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke; canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR
canvasCombos[k][1].strokeRect(sx, sy, sw, sh); 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; break;
} }
case 'clarity': { 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)) { if (!isNaN(a)) {
m.value = m.value * m.smoothing + (1.0 - m.smoothing) * a; m.value = m.value * m.smoothing + (1.0 - m.smoothing) * a;
propsToSet.push({ propsToSet.push({

23
bin/em/variabletime/web/js/config.js
View file

@ -113,29 +113,6 @@ const config = {
ignoreOutboundFrequencies: true, ignoreOutboundFrequencies: true,
pitchCombineFrequencies: false, pitchCombineFrequencies: false,
rolloverResetLoop: true, 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: { record: {
active: true, active: true,

2
bin/em/variabletime/web/js/record.js
View file

@ -320,7 +320,6 @@ const Record = function(tp) {
}; };
const cloneInput = (layer, propTitle) => { const cloneInput = (layer, propTitle) => {
return;
const panel = tp.getPanel(); const panel = tp.getPanel();
const panelPropTitle = tp.getPanelPropTitle(propTitle); const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle !== null) { if (panelPropTitle !== null) {
@ -351,7 +350,6 @@ const Record = function(tp) {
}; };
const uncloneInput = (layer, propTitle) => { const uncloneInput = (layer, propTitle) => {
return;
const panel = tp.getPanel(); const panel = tp.getPanel();
const panelPropTitle = tp.getPanelPropTitle(propTitle); const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle !== null) { if (panelPropTitle !== null) {