kieran-mcauliffe/max-mod-enum
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'main' (#6) from main into nn-communication

Browse Source 
Reviewed-on: https://gitea.lz-storage.synology.me/kieran-mcauliffe/max-mod-enum/pulls/6
This commit is contained in:
kieran-mcauliffe 2024-10-15 12:27:53 +02:00
commit aebfbe5277
6 changed files with 407 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
common.js
View File

@ -5,7 +5,8 @@ function isNumeric(str) {
} }
function DropDown(props) { function DropDown(props) {
return e('select', {type: "number", onChange: props.onChange, value: props.value}, let className = props.locked ? 'locked-component' : '';
return e('select', {className, type: "number", onChange: props.onChange, value: props.value},
...props.options.map((item) => Option(item))); ...props.options.map((item) => Option(item)));
} }
@ -18,11 +19,13 @@ function Label(text){
} }
function NumberBox(props){ function NumberBox(props){
return e('input', {type: "number", onChange: props.onChange, step: props.step, value: props.value, className: props.className}, null); let extraClassName = props.locked ? ' locked-component' : '';
return e('input', {type: "number", onChange: props.onChange, step: props.step, value: props.value, className: props.className + extraClassName}, null);
} }
function TextBox(props){ function TextBox(props){
return e('input', {type: "text", value: props.value, onChange: props.onChange, id: props.id}); let className = props.locked ? 'locked-component' : '';
return e('input', {className, type: "text", value: props.value, onChange: props.onChange, id: props.id});
} }
function Option(str, value){ function Option(str, value){
@ -30,7 +33,8 @@ function Option(str, value){
} }
function Button(props){ function Button(props){
return e('button', {onClick: props.onClick}, props.text); let className = props.locked ? 'locked-component' : '';
return e('button', {onClick: props.onClick, className}, props.text);
} }
function Switch(props){ function Switch(props){

20
enums.js
View File

@ -5,13 +5,13 @@
// NOT A REACT FUNCTIONAL COMPONENT. MERELY RETURNS AN ARRAY WHICH IS UNPACKED // NOT A REACT FUNCTIONAL COMPONENT. MERELY RETURNS AN ARRAY WHICH IS UNPACKED
function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames, setEnumNames, djParam){ function EnumeratorItems(index, enumBreakPoints, setEnumBreakPoints, enumNames, setEnumNames, djParam, locked){
let items = []; let items = [];
for (let i = 0; i < MAXENUMPOINTS; i++){ for (let i = 0; i < MAXENUMPOINTS; i++){
items.push(ListItem(e(TextBox, {onChange: CreateMatrixParamChanger(enumNames, setEnumNames, index, i), value: enumNames[index][i], id:`text-${djParam}-${enumNames[index][i]}`}, null))); items.push(ListItem(e(TextBox, {locked, onChange: CreateMatrixParamChanger(enumNames, setEnumNames, index, i), value: enumNames[index][i], id:`text-${djParam}-${enumNames[index][i]}`}, null)));
// Add 1 to make up for the lower enum bound // Add 1 to make up for the lower enum bound
items.push(ListItem(e(NumberBox, {onChange: CreateMatrixParamChanger(enumBreakPoints, setEnumBreakPoints, index, i + 1), value:enumBreakPoints[index][i + 1]}, null))); items.push(ListItem(e(NumberBox, {locked, onChange: CreateMatrixParamChanger(enumBreakPoints, setEnumBreakPoints, index, i + 1), value:enumBreakPoints[index][i + 1]}, null)));
} }
return items; return items;
} }
@ -20,13 +20,13 @@ function EnumeratorRow(props){
let linkedText = props.linked ? "<- mods" : ""; let linkedText = props.linked ? "<- mods" : "";
let content = e('ul', {className: 'lfo-item', id: `${props.djParam}-enum-row`}, let content = e('ul', {className: 'lfo-item', id: `${props.djParam}-enum-row`},
ListItem(DropDown({onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})), ListItem(DropDown({locked:props.locked, onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})), ListItem(DropDown({locked:props.locked, onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
ListItem(e(NumberBox, {onChange: props.setEnumItemCounts, step:1, value:props.enumItems, className: 'enum-count'}, null)), ListItem(e(NumberBox, {locked:props.locked, onChange: props.setEnumItemCounts, step:1, value:props.enumItems, className: 'enum-count'}, null)),
ListItem(e(NumberBox, {onChange: CreateMatrixParamChanger(props.enumBreakPoints, props.setEnumBreakPoints, props.index, 0), value:props.enumBreakPoints[props.index][0], step:0.1}, null)), ListItem(e(NumberBox, {locked:props.locked, onChange: CreateMatrixParamChanger(props.enumBreakPoints, props.setEnumBreakPoints, props.index, 0), value:props.enumBreakPoints[props.index][0], step:0.1}, null)),
...(EnumeratorItems(props.index, props.enumBreakPoints, props.setEnumBreakPoints, props.enumNames, props.setEnumNames, props.djParam).slice(0, props.enumItems * 2)), ...(EnumeratorItems(props.index, props.enumBreakPoints, props.setEnumBreakPoints, props.enumNames, props.setEnumNames, props.djParam, props.locked).slice(0, props.enumItems * 2)),
ListItem(e(Button, {text:'+', onClick: props.addEnum}, null)), ListItem(e(Button, {locked:props.locked, text:'+', onClick: props.addEnum}, null)),
ListItem(e(Button, {text:'-', onClick: props.removeEnum}, null)), ListItem(e(Button, {locked:props.locked, text:'-', onClick: props.removeEnum}, null)),
ListItem(e("div", {className:"linked"}, linkedText)) ListItem(e("div", {className:"linked"}, linkedText))
); );
if (props.visible){ if (props.visible){

6
example.maxpat
View File

@ -168,7 +168,7 @@
"numoutlets" : 1, "numoutlets" : 1,
"outlettype" : [ "" ], "outlettype" : [ "" ],
"patching_rect" : [ 586.0, 713.0, 89.0, 36.0 ], "patching_rect" : [ 586.0, 713.0, 89.0, 36.0 ],
"text" : "harmoniclarity 40.156651" "text" : "harmoniclarity 14.213599"
} }
} }
@ -181,7 +181,7 @@
"numoutlets" : 1, "numoutlets" : 1,
"outlettype" : [ "" ], "outlettype" : [ "" ],
"patching_rect" : [ 491.0, 713.0, 85.0, 36.0 ], "patching_rect" : [ 491.0, 713.0, 85.0, 36.0 ],
"text" : "event_length 29.843349" "text" : "event_length 55.786401"
} }
} }
@ -194,7 +194,7 @@
"numoutlets" : 1, "numoutlets" : 1,
"outlettype" : [ "" ], "outlettype" : [ "" ],
"patching_rect" : [ 385.0, 715.0, 84.0, 36.0 ], "patching_rect" : [ 385.0, 715.0, 84.0, 36.0 ],
"text" : "metriclarity 0.5" "text" : "metriclarity 79.192955"
} }
} }

397
lfogui.css
View File

@ -1,181 +1,272 @@
html, * {
body { --locked-color: #5fadbf;
width: 100%; --unlocked-color: #ff5153;
height: 100%; }
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
ul { html, body {
list-style-type: none; width: 100%;
margin: 0; height: 100%;
padding: 0; margin: 0px;
overflow: hidden; border: 0;
background-color: #333333; overflow: hidden; /* Disable scrollbars */
} display: block; /* No floating content on sides */
}
li { ul {
float: left; list-style-type: none;
} margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
input[type=number] { input[type=number] {
width: 50px; width: 50px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
input[type=text] { input[type=text] {
width: 60px; width: 60px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
} }
.timeInput { .timeInput {
width: 80px; width: 80px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#matrix { #matrix {
background-color: aquamarine; background-color: aquamarine;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.numbox-unclicked { .numbox-unclicked {
user-select: none; user-select: none;
border: solid; border: solid;
font-size: 12vw; font-size: 12vw;
} }
.numbox-clicked { .numbox-clicked {
user-select: none; user-select: none;
border : solid; border : solid;
font-size: 12vw; font-size: 12vw;
} }
.param-input-label { .param-input-label {
width: 93%; width: 93%;
font-size: 5vw; font-size: 5vw;
} }
.lfo-input-label { .lfo-input-label {
width: 40%; width: 40%;
font-size: 5vw; font-size: 5vw;
} }
/* The switch - the box around the slider */ /* The switch - the box around the slider */
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 30px; width: 30px;
height: 17px; height: 17px;
} }
/* Hide default HTML checkbox */ /* Hide default HTML checkbox */
.switch input { .switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
/* The slider */ /* The slider */
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: #ccc;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 13px; height: 13px;
width: 13px; width: 13px;
left: 2px; left: 2px;
bottom: 2px; bottom: 2px;
background-color: white; background-color: white;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
input:checked + .slider { input:checked + .slider {
background-color: #2196F3; background-color: #2196F3;
} }
input:focus + .slider { input:focus + .slider {
box-shadow: 0 0 1px #2196F3; box-shadow: 0 0 1px #2196F3;
} }
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(13px); -webkit-transform: translateX(13px);
-ms-transform: translateX(13px); -ms-transform: translateX(13px);
transform: translateX(13px); transform: translateX(13px);
} }
/* Rounded sliders */ /* Rounded sliders */
.slider.round { .slider.round {
border-radius: 17px; border-radius: 17px;
} }
.slider.round:before { .slider.round:before {
border-radius: 50%; border-radius: 50%;
} }
h5 { h5 {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.enum-count { .enum-count {
background-color: aquamarine; background-color: aquamarine;
} }
.label { .label {
background-color: aliceblue; background-color: aliceblue;
padding: 0 4px 0 4px; padding: 0 4px 0 4px;
margin: 0 2px 0 2px; margin: 0 2px 0 2px;
border-color: #333333; border-color: #333333;
border-width: 1px; border-width: 1px;
} }
.base-val { .base-val {
background-color: lightgray; background-color: lightgray;
border-color: #333333; border-color: #333333;
border-width: 1px; border-width: 1px;
width: 50px; width: 50px;
margin-left: 2px; margin-left: 2px;
margin-top: 1px; margin-top: 1px;
} }
.linked { .linked {
color: red; color: red;
border-width: 1px; border-width: 1px;
width: 50px; width: 50px;
font-size: small; font-size: small;
margin-left: 2px; margin-left: 2px;
margin-top: 5px; margin-top: 5px;
} }
@keyframes pulse-animation { @keyframes pulse-animation {
0% { 0% {
color: black; color: black;
} }
100% { 100% {
color: red; color: red;
} }
} }
#pulse { #pulse {
animation: pulse-animation 0.2s normal; animation: pulse-animation 0.2s normal;
} }
/* :::::::::::::: LOCK CSS */
.locked-component {
pointer-events: none;
background-color: #333333;
color : white;
}
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
/* Locked */
.lock {
margin-top: 14px;
width: 24px;
height: 21px;
border: 3px solid var(--locked-color);
border-radius: 5px;
position: relative;
cursor: pointer;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.lock:after {
content: "";
display: block;
background: var(--locked-color);
width: 3px;
height: 7px;
position: absolute;
top: 50%;
left: 50%;
margin: -3.5px 0 0 -2px;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.lock:before {
content: "";
display: block;
width: 10px;
height: 10px;
bottom: 100%;
position: absolute;
left: 50%;
margin-left: -8px;
border: 3px solid var(--locked-color);
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom: 0;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
/* Locked Hover */
.lock:hover:before {
height: 12px;
}
/* Unlocked */
.unlocked {
transform: rotate(10deg);
}
.unlocked:before {
bottom: 130%;
left: 31%;
margin-left: -11.5px;
transform: rotate(-45deg);
}
.unlocked,
.unlocked:before {
border-color: var(--unlocked-color);
}
.unlocked:after {
background: var(--unlocked-color);
}
/* Unlocked Hover */
.unlocked:hover {
transform: rotate(3deg);
}
.unlocked:hover:before {
height: 10px;
left: 40%;
bottom: 124%;
transform: rotate(-30deg);
}

63
lfogui.js
View File

@ -20,6 +20,11 @@ const ViewModes = Object.freeze({
ENUM: 1 ENUM: 1
}); });
const LockModes = Object.freeze({
UNLOCK: 0,
LOCK: 1
});
var modPhases = Array(MAXLFOS).fill(0); var modPhases = Array(MAXLFOS).fill(0);
var firstUpdateTime = Date.now(); var firstUpdateTime = Date.now();
@ -67,11 +72,20 @@ function MasterLfoHandler(){
setViewMode(ViewModes.MOD); setViewMode(ViewModes.MOD);
}; };
const [lockMode, setLockMode] = React.useState(LockModes.LOCK);
const toggleLockMode = () => {
if (lockMode === LockModes.UNLOCK)
setLockMode(LockModes.LOCK);
else
setLockMode(LockModes.UNLOCK);
};
/// MODULATOR ARRAYS /// MODULATOR ARRAYS
const [userDefinedWave, setUserDefinedWave] = React.useState(Array(50).fill(0)); const [userDefinedWave, setUserDefinedWave] = React.useState(Array(50).fill(0));
const [modVisibleArr, setModVisibleArr] = React.useState(initVisArr); const [modVisibleArr, setModVisibleArr] = React.useState(initVisArr);
const [modTypeArr, setModTypeArr] = React.useState(Array(MAXLFOS).fill('LFO'));
const [modInstanceNumArr, setModInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1')); const [modInstanceNumArr, setModInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1'));
const [modCenterVals, setModCenterVals] = React.useState({'1':{}, '2':{}, '3':{}, '4':{}}); const [modCenterVals, setModCenterVals] = React.useState({'1':{}, '2':{}, '3':{}, '4':{}});
@ -79,6 +93,7 @@ function MasterLfoHandler(){
const [ticks, setTicks] = React.useState(0); const [ticks, setTicks] = React.useState(0);
const [beatsInMeasure, setBeatsInMeasure] = React.useState(4); const [beatsInMeasure, setBeatsInMeasure] = React.useState(4);
const [noiseTypeArr, setNoiseTypeArr] = React.useState(Array(MAXLFOS).fill('Sine Int.'));
const [shapeArr, setShapeArr] = React.useState(Array(MAXLFOS).fill('Sine')); const [shapeArr, setShapeArr] = React.useState(Array(MAXLFOS).fill('Sine'));
const [djParamArr, setDjParamArr] = React.useState(Array(MAXLFOS).fill('NONE')); const [djParamArr, setDjParamArr] = React.useState(Array(MAXLFOS).fill('NONE'));
@ -88,11 +103,15 @@ function MasterLfoHandler(){
const [minArr, setMinArr] = React.useState(Array(MAXLFOS).fill('0')); const [minArr, setMinArr] = React.useState(Array(MAXLFOS).fill('0'));
const [maxArr, setMaxArr] = React.useState(Array(MAXLFOS).fill('1')); const [maxArr, setMaxArr] = React.useState(Array(MAXLFOS).fill('1'));
const [phaseArr, setPhaseArr] = React.useState(Array(MAXLFOS).fill('0')); const [initPhaseArr, setInitPhaseArr] = React.useState(Array(MAXLFOS).fill('0'));
const [lastPhaseArr, setLastPhaseArr] = React.useState(Array(MAXLFOS).fill(0));
const [cachedNoiseValueArr, setCachedNoiseValueArr] = React.useState(Array(MAXLFOS).fill([0, 0]));
const allModArrays = [modVisibleArr, modInstanceNumArr, shapeArr, djParamArr, freqArr, minArr, maxArr, phaseArr];
const allModSetters = [setModVisibleArr, setModInstanceNumArr, setShapeArr, setDjParamArr, setFreqArr, setMinArr, setMaxArr, setPhaseArr];
const modBlankVals = [true, '1', SHAPETYPES[0], MODPARAMOPTIONS[0], '1hz', '0', '1', '0']; const allModArrays = [modVisibleArr, modTypeArr, modInstanceNumArr, shapeArr, noiseTypeArr, djParamArr, freqArr, minArr, maxArr, initPhaseArr, lastPhaseArr, cachedNoiseValueArr];
const allModSetters = [setModVisibleArr, setModTypeArr, setModInstanceNumArr, setShapeArr, setNoiseTypeArr, setDjParamArr, setFreqArr, setMinArr, setMaxArr, setInitPhaseArr, lastPhaseArr, cachedNoiseValueArr];
const modBlankVals = [true, 'LFO', '1', SHAPETYPES[0], MODPARAMOPTIONS[0], "Sine Int.", '1hz', '0', '1', '0', 0, [0, 0]];
/// ENUMERATOR ARRAYS /// ENUMERATOR ARRAYS
@ -136,7 +155,6 @@ function MasterLfoHandler(){
React.useEffect(() => { React.useEffect(() => {
function handleLoad(event) { function handleLoad(event) {
window.max.getDict(event.detail, (dict) => { window.max.getDict(event.detail, (dict) => {
for (let i = 0; i<allModArrays.length; i++) { for (let i = 0; i<allModArrays.length; i++) {
@ -224,8 +242,8 @@ function MasterLfoHandler(){
function handleTick(event) { function handleTick(event) {
let time = (Date.now() - firstUpdateTime) / 1000; let time = (Date.now() - firstUpdateTime) / 1000;
let noiseData = {lastPhaseArr, setLastPhaseArr, cachedNoiseValueArr, setCachedNoiseValueArr, noiseTypeArr};
operateModulators(modVisibleArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, phaseArr, userDefinedWave, time, beatsInMeasure, ticks); operateModulators(modVisibleArr, modTypeArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, initPhaseArr, noiseData, userDefinedWave, time, beatsInMeasure, ticks);
} }
function handleTimeSig(event) { function handleTimeSig(event) {
@ -278,7 +296,7 @@ function MasterLfoHandler(){
window.removeEventListener('userWave', handleChangeUserWave); window.removeEventListener('userWave', handleChangeUserWave);
window.removeEventListener('maxTicks', handleMaxTicks); window.removeEventListener('maxTicks', handleMaxTicks);
}; };
}, [...allModArrays, ...allEnumArrays, ...allEnumMats, modCenterVals, render, beatsInMeasure, ticks]); }, [...allModArrays, ...allEnumArrays, ...allEnumMats, userDefinedWave, modCenterVals, render, beatsInMeasure, ticks]);
function CheckLinked(inst, param, checkInstArr, checkParamArr){ function CheckLinked(inst, param, checkInstArr, checkParamArr){
@ -299,10 +317,17 @@ function MasterLfoHandler(){
modContents.push( modContents.push(
e(LfoRow, { e(LfoRow, {
locked : lockMode,
instanceNum : modInstanceNumArr[i], instanceNum : modInstanceNumArr[i],
setInstanceNum: CreateParamChanger(modInstanceNumArr, setModInstanceNumArr, i), setInstanceNum: CreateParamChanger(modInstanceNumArr, setModInstanceNumArr, i),
type: modTypeArr[i],
setType: CreateParamChanger(modTypeArr, setModTypeArr, i),
shape: shapeArr[i], shape: shapeArr[i],
setShape: CreateParamChanger(shapeArr, setShapeArr, i), setShape: CreateParamChanger(shapeArr, setShapeArr, i),
noise: noiseTypeArr[i],
setNoise: CreateParamChanger(noiseTypeArr, setNoiseTypeArr, i),
djParam: djParamArr[i], djParam: djParamArr[i],
setDjParam: CreateParamChanger(djParamArr, setDjParamArr, i), setDjParam: CreateParamChanger(djParamArr, setDjParamArr, i),
centerVals: modCenterVals, centerVals: modCenterVals,
@ -318,13 +343,15 @@ function MasterLfoHandler(){
max: maxArr[i], max: maxArr[i],
setMax: CreateParamChanger(maxArr, setMaxArr, i), setMax: CreateParamChanger(maxArr, setMaxArr, i),
phase: phaseArr[i], phase: initPhaseArr[i],
setPhase: CreateParamChanger(phaseArr, setPhaseArr, i), setPhase: CreateParamChanger(initPhaseArr, setInitPhaseArr, i),
visible: modVisibleArr[i], visible: modVisibleArr[i],
linked: CheckLinked(modInstanceNumArr[i], djParamArr[i], enumInstanceNumArr, enumDjParamArr), linked: CheckLinked(modInstanceNumArr[i], djParamArr[i], enumInstanceNumArr, enumDjParamArr),
addLfo: () => { addLfo: () => {
if (id < MAXLFOS - 1){ if (id < MAXLFOS - 1){
if (modVisibleArr[id + 1]){ if (modVisibleArr[id + 1]){
let emptyIndex = modVisibleArr.findIndex((item) => !item); let emptyIndex = modVisibleArr.findIndex((item) => !item);
@ -340,6 +367,7 @@ function MasterLfoHandler(){
} }
} }
else { else {
log("adding lfo");
for (var j = 0; j < allModArrays.length; j++){ // no space below, easy. for (var j = 0; j < allModArrays.length; j++){ // no space below, easy.
let array = allModArrays[j]; let array = allModArrays[j];
array[id + 1] = modBlankVals[j]; array[id + 1] = modBlankVals[j];
@ -371,7 +399,7 @@ function MasterLfoHandler(){
enumContents.push( enumContents.push(
e(EnumeratorRow, { e(EnumeratorRow, {
index: i, index: i,
locked : lockMode,
instanceNum : enumInstanceNumArr[i], instanceNum : enumInstanceNumArr[i],
setInstanceNum: CreateParamChanger(enumInstanceNumArr, setEnumInstanceNumArr, i), setInstanceNum: CreateParamChanger(enumInstanceNumArr, setEnumInstanceNumArr, i),
enumItems: enumItemCounts[i], enumItems: enumItemCounts[i],
@ -453,8 +481,19 @@ function MasterLfoHandler(){
labels = ENUMERATORLABELS; labels = ENUMERATORLABELS;
} }
let lockClass;
if (lockMode == LockModes.LOCK){
lockClass = 'lock';
}
else {
lockClass = 'lock unlocked';
}
return e('div', null, return e('div', null,
e(Switch, {ontoggle: toggleViewMode}, null), e('div', {className: 'container'},
e(Switch, {ontoggle: toggleViewMode}, null),
e('span', {className: lockClass, onClick: toggleLockMode}, null)),
e('h5', null, title), e('h5', null, title),
e('ul', null, ...labels.map(x => ListItem(Label(x)))), e('ul', null, ...labels.map(x => ListItem(Label(x)))),
e('div', {id: 'grid'}, ...grid) e('div', {id: 'grid'}, ...grid)

101
modulators.js
View File

@ -2,7 +2,10 @@
// MODULATORS // MODULATORS
///////////////////////// /////////////////////////
var TYPEOPTIONS = ["LFO", "Noise"];
var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom"]; var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom"];
var NOISETYPES = ["Rand", "Line Int.", "Sine Int."]
var INSTANCEOPTIONS = ["1", "2", "3", "4"]; var INSTANCEOPTIONS = ["1", "2", "3", "4"];
@ -28,11 +31,20 @@ function LfoRow(props){
if (!center) if (!center)
center = 0; center = 0;
let typeOption = null;
if (props.type == "LFO"){
typeOption = ListItem(DropDown({locked:props.locked, onChange: props.setShape, value:props.shape, options: SHAPETYPES}));
}
else if (props.type == "Noise"){
typeOption = ListItem(DropDown({locked:props.locked, onChange: props.setNoise, value:props.noise, options: NOISETYPES}));
}
let content = e('ul', {className: 'lfo-item'}, let content = e('ul', {className: 'lfo-item'},
ListItem(DropDown({onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})), ListItem(DropDown({locked:props.locked, onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
ListItem(ControlType()), ListItem(DropDown({locked:props.locked, options: TYPEOPTIONS, onChange: props.setType, value:props.type})),
ListItem(DropDown({onChange: props.setShape, value:props.shape, options: SHAPETYPES})), typeOption,
ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})), ListItem(DropDown({locked:props.locked, onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
ListItem(e("input", {onChange:props.setFreq, value:props.freq, className:"timeInput"}, null)), ListItem(e("input", {onChange:props.setFreq, value:props.freq, className:"timeInput"}, null)),
ListItem(e(NumberBox, {onChange:props.setMin, value:props.min, step:0.1}, null)), ListItem(e(NumberBox, {onChange:props.setMin, value:props.min, step:0.1}, null)),
ListItem(e(NumberBox, {onChange:props.setMax, value:props.max, step:0.1}, null)), ListItem(e(NumberBox, {onChange:props.setMax, value:props.max, step:0.1}, null)),
@ -40,8 +52,8 @@ function LfoRow(props){
ListItem(e(NumberBox, {onChange:props.setPhase, value:props.phase, step:0.1}, null)), ListItem(e(NumberBox, {onChange:props.setPhase, value:props.phase, step:0.1}, null)),
ListItem(e("div", {className:"base-val"}, center.toString())), ListItem(e("div", {className:"base-val"}, center.toString())),
ListItem(e("input", {type: 'range', min: 0, max: 1, step: 0.01, readonly: true, id: `slider-${props.instanceNum}-${props.djParam}`})), ListItem(e("input", {type: 'range', min: 0, max: 1, step: 0.01, readonly: true, id: `slider-${props.instanceNum}-${props.djParam}`})),
ListItem(e(Button, {text:'+', onClick: props.addLfo}, null)), ListItem(e(Button, {text:'+', onClick: props.addLfo, locked: props.locked}, null)),
ListItem(e(Button, {text:'-', onClick: props.removeLfo}, null)), ListItem(e(Button, {text:'-', onClick: props.removeLfo, locked: props.locked}, null)),
ListItem(e("div", {className:"linked"}, linkedText)), ListItem(e("div", {className:"linked"}, linkedText)),
); );
if (props.visible){ if (props.visible){
@ -66,7 +78,7 @@ function indexWave(type, phase, userDefinedWave){
} }
} }
function operateModulators(visibleArr, instanceNumArr, paramNames, centers, freqs, mins, maxs, waveTypes, phaseArr, userDefinedWave, currTime, beatsInMeasure, ticks){ function operateModulators(visibleArr, typeArr, instanceNumArr, paramNames, centers, freqs, mins, maxs, waveTypes, phaseArr, noiseData, userDefinedWave, currTime, beatsInMeasure, ticks){
for (let i=0; i<paramNames.length; i++){ for (let i=0; i<paramNames.length; i++){
if (visibleArr[i]){ if (visibleArr[i]){
@ -76,15 +88,20 @@ function operateModulators(visibleArr, instanceNumArr, paramNames, centers, freq
if (centers[inst].hasOwnProperty(name)){ if (centers[inst].hasOwnProperty(name)){
center = centers[inst][name]; center = centers[inst][name];
} }
let output = operateModulator(center, inst, freqs[i], mins[i], maxs[i], waveTypes[i], phaseArr, i, userDefinedWave, name, currTime, beatsInMeasure, ticks);
let output = 0;
if (typeArr[i] == "LFO")
output = operateLFO(center, inst, freqs[i], mins[i], maxs[i], waveTypes[i], phaseArr, i, userDefinedWave, name, currTime, beatsInMeasure, ticks);
else
output = operateNoise(center, inst, freqs[i], mins[i], maxs[i], waveTypes[i], phaseArr, i, name, noiseData, currTime, beatsInMeasure, ticks);
if (name !== "NONE") if (name !== "NONE")
window.dispatchEvent(new CustomEvent('enum', {'detail' : [inst, name, output]})); window.dispatchEvent(new CustomEvent('enum', {'detail' : [inst, name, output]}));
} }
} }
} }
function operateModulator(center, inst, timeBaseStr, min, max, waveType, phaseArr, phaseI, userDefinedWave, name, currTime, beatsInMeasure, maxTicks){ function operateLFO(center, inst, timeBaseStr, min, max, waveType, phaseArr, phaseIndex, userDefinedWave, name, currTime, beatsInMeasure, maxTicks){
let amp = parseFloat(max) - parseFloat(min); let amp = parseFloat(max) - parseFloat(min);
let phaseType; let phaseType;
let timeBase; let timeBase;
@ -93,16 +110,76 @@ function operateModulator(center, inst, timeBaseStr, min, max, waveType, phaseAr
let phase; let phase;
if (phaseType === PhaseTypes.TIME) if (phaseType === PhaseTypes.TIME)
phase = (currTime * timeBase + parseFloat(phaseArr[phaseI])) % 1.00; phase = (currTime * timeBase + parseFloat(phaseArr[phaseIndex])) % 1.00;
else if (phaseType === PhaseTypes.MUSICAL) else if (phaseType === PhaseTypes.MUSICAL)
phase = (maxTicks % timeBase) / timeBase; phase = (maxTicks % timeBase) / timeBase;
let unscaled = indexWave(waveType, phase, userDefinedWave); let unscaled = indexWave(waveType, phase, userDefinedWave);
syncDisplay(inst, name, unscaled);
return unscaled * amp + center + parseFloat(min);
}
function syncDisplay(inst, name, val) {
let el = document.getElementById(`slider-${inst}-${name}`); let el = document.getElementById(`slider-${inst}-${name}`);
if (el) if (el)
el.value = unscaled; el.value = val;
}
// For now, we're only using sine interpolation
function operateNoise(center, inst, timeBaseStr, min, max, waveType, phaseArr, index, name, noiseData, currTime, beatsInMeasure, maxTicks){
let amp = parseFloat(max) - parseFloat(min);
let phaseType;
let timeBase;
let noiseType = noiseData.noiseTypeArr[index];
[timeBase, phaseType] = parseLfoTime(timeBaseStr, beatsInMeasure);
let phase;
if (phaseType === PhaseTypes.TIME)
phase = (currTime * timeBase + parseFloat(phaseArr[index])) % 1.00;
else if (phaseType === PhaseTypes.MUSICAL)
phase = (maxTicks % timeBase) / timeBase;
if (noiseData.cachedNoiseValueArr[index][0] == 0 || noiseData.lastPhaseArr[index] > phase){ // occurs if the phase reset to 0 or at the very start
noiseData.cachedNoiseValueArr[index][0] = noiseData.cachedNoiseValueArr[index][1];
if (noiseData.cachedNoiseValueArr[index][0] == 0)
noiseData.cachedNoiseValueArr[index][0] = center;
noiseData.cachedNoiseValueArr[index][1] = Math.random();
noiseData.setCachedNoiseValueArr(noiseData.cachedNoiseValueArr);
}
noiseData.lastPhaseArr[index] = phase;
noiseData.setLastPhaseArr(noiseData.lastPhaseArr);
let sinePhase = (Math.sin(Math.PI + Math.PI * phase) + 1) / 2
//let unscaled = (noiseData.cachedNoiseValueArr[index][1] - noiseData.cachedNoiseValueArr[index][0]) * sinePhase + noiseData.cachedNoiseValueArr[index][0];
let unscaled = interpolateNoise(noiseData.noiseTypeArr[index], noiseData.cachedNoiseValueArr[index][0], noiseData.cachedNoiseValueArr[index][1], phase);
syncDisplay(inst, name, unscaled);
return unscaled * amp + center + parseFloat(min); return unscaled * amp + center + parseFloat(min);
}
function interpolateNoise(type, cachedVal1, cachedVal2, phase){
let interpVal;
switch (type){
case "Sine Int.":
interpVal = (Math.sin(Math.PI + Math.PI * phase) + 1) / 2;
break;
case "Rand":
interpVal = 0;
break;
case "Line Int.":
interpVal = phase;
break;
}
return (cachedVal2 - cachedVal1) * interpVal + cachedVal1;
} }
// actual returns the period for musical timing, to avoid floating point errors // actual returns the period for musical timing, to avoid floating point errors