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

audio colors in config

Browse source 
dependencies hashes:
openFrameworks d78075f4bca6be2a2533c6e51a75cc1f18404501
ofxMsdfgen e14da13d02c4dff04fb69d7923469f606924e6c3
ofxGPUFont d482bb7cbdf6b296fa4ab5abcf73fb5ff8c8b239
ofxVariableLab 8df98846248a93aa068989a3ebd0d2f0f16e5e69
ofxProfiler a868e34fa1a79189dd4fbdede2938e308535e5e8
theatre 86d3e07f6f2c75fd6e08fca8c97e3617c9e23b18
This commit is contained in:
themancalledjakob 2024-03-24 11:08:00 +01:00
parent 64253eaf1f
commit 8a92646038
2 changed files with 48 additions and 17 deletions
Show stats Download patch file Download diff file 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 = 'rgba(255,0,0,0.2)'; // AUDIO COLOR audioOptions.style.background = config.audio.colors.options_r_background;
break; break;
} }
case 'g': { case 'g': {
audioOptions.style.background = 'rgba(0,255,0,0.2)'; // AUDIO COLOR audioOptions.style.background = config.audio.colors.options_g_background;
break; break;
} }
case 'b': { case 'b': {
audioOptions.style.background = 'rgba(0,0,255,0.2)'; // AUDIO COLOR audioOptions.style.background = config.audio.colors.options_b_background;
break; break;
} }
case 'a': { case 'a': {
audioOptions.style.background = 'rgba(255,255,255,0.2)'; // AUDIO COLOR audioOptions.style.background = config.audio.colors.options_a_background;
break; break;
} }
} }
} else { } 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; 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.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 = 'rgba(28, 186, 148,0.4)'; // AUDIO COLOR fft_selectDom.style.backgroundColor = config.audio.colors.overlay;
fft_selectDom.style.border = 'none'; // AUDIO COLOR 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_imgDom);
fft_Dom.append(fft_selectDom); fft_Dom.append(fft_selectDom);
@ -956,7 +957,7 @@ const Audio = function(tp, record) {
drawVisual = requestAnimationFrame(drawAlt); drawVisual = requestAnimationFrame(drawAlt);
canvasKeys.forEach((k) => { 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); 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];
@ -965,14 +966,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 = "rgb(80, 80, 80)"; // AUDIO COLOR canvasCombos[k][1].fillStyle = config.audio.colors.select_fill;
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 = "rgb(80, 80, 80)"; // AUDIO COLOR canvasCombos[k][1].fillStyle = config.audio.colors.select_fill;
canvasCombos[k][1].fillRect(sx, sy, sw, sh); canvasCombos[k][1].fillRect(sx, sy, sw, sh);
} }
}); });
@ -1036,7 +1037,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 = 'rgb(200,200,200)'; let fillStyle = config.audio.colors.frequency_fill;
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];
@ -1065,6 +1066,7 @@ 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++) {
@ -1076,17 +1078,24 @@ 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 = 1; // AUDIO COLOR canvasCombos[k][1].lineWidth = config.audio.colors.select_stroke_width;
canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke;
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 = 1; // AUDIO COLOR canvasCombos[k][1].lineWidth = config.audio.colors.select_stroke_width;
canvasCombos[k][1].strokeStyle = "rgb(255,255,255)"; // AUDIO COLOR canvasCombos[k][1].strokeStyle = config.audio.colors.select_stroke;
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);
}
} }
} }
@ -1122,8 +1131,7 @@ const Audio = function(tp, record) {
break; break;
} }
case 'clarity': { case 'clarity': {
const clarity = m.max_v / m.total_v; const a = mapValue(m.c, 0.01, 0.05, m.min_out, m.max_out, true);
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,6 +113,29 @@ 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,