nn-communication #7
12
common.js
12
common.js
@ -5,7 +5,8 @@ function isNumeric(str) {
|
||||
}
|
||||
|
||||
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)));
|
||||
}
|
||||
|
||||
@ -18,11 +19,13 @@ function Label(text){
|
||||
}
|
||||
|
||||
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){
|
||||
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){
|
||||
@ -30,7 +33,8 @@ function Option(str, value){
|
||||
}
|
||||
|
||||
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){
|
||||
|
20
enums.js
20
enums.js
@ -5,13 +5,13 @@
|
||||
|
||||
|
||||
// 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 = [];
|
||||
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
|
||||
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;
|
||||
}
|
||||
@ -20,13 +20,13 @@ function EnumeratorRow(props){
|
||||
let linkedText = props.linked ? "<- mods" : "";
|
||||
|
||||
let content = e('ul', {className: 'lfo-item', id: `${props.djParam}-enum-row`},
|
||||
ListItem(DropDown({onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
|
||||
ListItem(DropDown({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, {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)),
|
||||
ListItem(e(Button, {text:'+', onClick: props.addEnum}, null)),
|
||||
ListItem(e(Button, {text:'-', onClick: props.removeEnum}, null)),
|
||||
ListItem(DropDown({locked:props.locked, onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
|
||||
ListItem(DropDown({locked:props.locked, onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
|
||||
ListItem(e(NumberBox, {locked:props.locked, onChange: props.setEnumItemCounts, step:1, value:props.enumItems, className: 'enum-count'}, 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, props.locked).slice(0, props.enumItems * 2)),
|
||||
ListItem(e(Button, {locked:props.locked, text:'+', onClick: props.addEnum}, null)),
|
||||
ListItem(e(Button, {locked:props.locked, text:'-', onClick: props.removeEnum}, null)),
|
||||
ListItem(e("div", {className:"linked"}, linkedText))
|
||||
);
|
||||
if (props.visible){
|
||||
|
@ -168,7 +168,7 @@
|
||||
"numoutlets" : 1,
|
||||
"outlettype" : [ "" ],
|
||||
"patching_rect" : [ 586.0, 713.0, 89.0, 36.0 ],
|
||||
"text" : "harmoniclarity 40.156651"
|
||||
"text" : "harmoniclarity 14.213599"
|
||||
}
|
||||
|
||||
}
|
||||
@ -181,7 +181,7 @@
|
||||
"numoutlets" : 1,
|
||||
"outlettype" : [ "" ],
|
||||
"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,
|
||||
"outlettype" : [ "" ],
|
||||
"patching_rect" : [ 385.0, 715.0, 84.0, 36.0 ],
|
||||
"text" : "metriclarity 0.5"
|
||||
"text" : "metriclarity 79.192955"
|
||||
}
|
||||
|
||||
}
|
||||
|
207
lfogui.css
207
lfogui.css
@ -1,90 +1,94 @@
|
||||
html,
|
||||
body {
|
||||
* {
|
||||
--locked-color: #5fadbf;
|
||||
--unlocked-color: #ff5153;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
border: 0;
|
||||
overflow: hidden; /* Disable scrollbars */
|
||||
display: block; /* No floating content on sides */
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type=number] {
|
||||
input[type=number] {
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
input[type=text] {
|
||||
width: 60px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.timeInput {
|
||||
.timeInput {
|
||||
width: 80px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#matrix {
|
||||
#matrix {
|
||||
background-color: aquamarine;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.numbox-unclicked {
|
||||
.numbox-unclicked {
|
||||
user-select: none;
|
||||
border: solid;
|
||||
font-size: 12vw;
|
||||
}
|
||||
}
|
||||
|
||||
.numbox-clicked {
|
||||
.numbox-clicked {
|
||||
user-select: none;
|
||||
border : solid;
|
||||
font-size: 12vw;
|
||||
}
|
||||
}
|
||||
|
||||
.param-input-label {
|
||||
.param-input-label {
|
||||
width: 93%;
|
||||
font-size: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
.lfo-input-label {
|
||||
.lfo-input-label {
|
||||
width: 40%;
|
||||
font-size: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
@ -94,9 +98,9 @@ html,
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 13px;
|
||||
@ -106,76 +110,163 @@ html,
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
input:checked + .slider {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #2196F3;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(13px);
|
||||
-ms-transform: translateX(13px);
|
||||
transform: translateX(13px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.enum-count {
|
||||
.enum-count {
|
||||
background-color: aquamarine;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label {
|
||||
background-color: aliceblue;
|
||||
padding: 0 4px 0 4px;
|
||||
margin: 0 2px 0 2px;
|
||||
border-color: #333333;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.base-val {
|
||||
.base-val {
|
||||
background-color: lightgray;
|
||||
border-color: #333333;
|
||||
border-width: 1px;
|
||||
width: 50px;
|
||||
margin-left: 2px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.linked {
|
||||
.linked {
|
||||
color: red;
|
||||
border-width: 1px;
|
||||
width: 50px;
|
||||
font-size: small;
|
||||
margin-left: 2px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse-animation {
|
||||
@keyframes pulse-animation {
|
||||
0% {
|
||||
color: black;
|
||||
}
|
||||
100% {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pulse {
|
||||
#pulse {
|
||||
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);
|
||||
}
|
61
lfogui.js
61
lfogui.js
@ -20,6 +20,11 @@ const ViewModes = Object.freeze({
|
||||
ENUM: 1
|
||||
});
|
||||
|
||||
const LockModes = Object.freeze({
|
||||
UNLOCK: 0,
|
||||
LOCK: 1
|
||||
});
|
||||
|
||||
|
||||
var modPhases = Array(MAXLFOS).fill(0);
|
||||
var firstUpdateTime = Date.now();
|
||||
@ -67,11 +72,20 @@ function MasterLfoHandler(){
|
||||
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
|
||||
|
||||
const [userDefinedWave, setUserDefinedWave] = React.useState(Array(50).fill(0));
|
||||
|
||||
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 [modCenterVals, setModCenterVals] = React.useState({'1':{}, '2':{}, '3':{}, '4':{}});
|
||||
@ -79,6 +93,7 @@ function MasterLfoHandler(){
|
||||
const [ticks, setTicks] = React.useState(0);
|
||||
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 [djParamArr, setDjParamArr] = React.useState(Array(MAXLFOS).fill('NONE'));
|
||||
|
||||
@ -88,11 +103,15 @@ function MasterLfoHandler(){
|
||||
const [minArr, setMinArr] = React.useState(Array(MAXLFOS).fill('0'));
|
||||
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
|
||||
@ -136,7 +155,6 @@ function MasterLfoHandler(){
|
||||
|
||||
React.useEffect(() => {
|
||||
function handleLoad(event) {
|
||||
|
||||
window.max.getDict(event.detail, (dict) => {
|
||||
|
||||
for (let i = 0; i<allModArrays.length; i++) {
|
||||
@ -224,8 +242,8 @@ function MasterLfoHandler(){
|
||||
|
||||
function handleTick(event) {
|
||||
let time = (Date.now() - firstUpdateTime) / 1000;
|
||||
|
||||
operateModulators(modVisibleArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, phaseArr, userDefinedWave, time, beatsInMeasure, ticks);
|
||||
let noiseData = {lastPhaseArr, setLastPhaseArr, cachedNoiseValueArr, setCachedNoiseValueArr, noiseTypeArr};
|
||||
operateModulators(modVisibleArr, modTypeArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, initPhaseArr, noiseData, userDefinedWave, time, beatsInMeasure, ticks);
|
||||
}
|
||||
|
||||
function handleTimeSig(event) {
|
||||
@ -278,7 +296,7 @@ function MasterLfoHandler(){
|
||||
window.removeEventListener('userWave', handleChangeUserWave);
|
||||
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){
|
||||
@ -299,10 +317,17 @@ function MasterLfoHandler(){
|
||||
modContents.push(
|
||||
|
||||
e(LfoRow, {
|
||||
locked : lockMode,
|
||||
instanceNum : modInstanceNumArr[i],
|
||||
setInstanceNum: CreateParamChanger(modInstanceNumArr, setModInstanceNumArr, i),
|
||||
|
||||
type: modTypeArr[i],
|
||||
setType: CreateParamChanger(modTypeArr, setModTypeArr, i),
|
||||
shape: shapeArr[i],
|
||||
setShape: CreateParamChanger(shapeArr, setShapeArr, i),
|
||||
|
||||
noise: noiseTypeArr[i],
|
||||
setNoise: CreateParamChanger(noiseTypeArr, setNoiseTypeArr, i),
|
||||
djParam: djParamArr[i],
|
||||
setDjParam: CreateParamChanger(djParamArr, setDjParamArr, i),
|
||||
centerVals: modCenterVals,
|
||||
@ -318,13 +343,15 @@ function MasterLfoHandler(){
|
||||
max: maxArr[i],
|
||||
setMax: CreateParamChanger(maxArr, setMaxArr, i),
|
||||
|
||||
phase: phaseArr[i],
|
||||
setPhase: CreateParamChanger(phaseArr, setPhaseArr, i),
|
||||
phase: initPhaseArr[i],
|
||||
setPhase: CreateParamChanger(initPhaseArr, setInitPhaseArr, i),
|
||||
visible: modVisibleArr[i],
|
||||
|
||||
linked: CheckLinked(modInstanceNumArr[i], djParamArr[i], enumInstanceNumArr, enumDjParamArr),
|
||||
addLfo: () => {
|
||||
|
||||
if (id < MAXLFOS - 1){
|
||||
|
||||
if (modVisibleArr[id + 1]){
|
||||
|
||||
let emptyIndex = modVisibleArr.findIndex((item) => !item);
|
||||
@ -340,6 +367,7 @@ function MasterLfoHandler(){
|
||||
}
|
||||
}
|
||||
else {
|
||||
log("adding lfo");
|
||||
for (var j = 0; j < allModArrays.length; j++){ // no space below, easy.
|
||||
let array = allModArrays[j];
|
||||
array[id + 1] = modBlankVals[j];
|
||||
@ -371,7 +399,7 @@ function MasterLfoHandler(){
|
||||
enumContents.push(
|
||||
e(EnumeratorRow, {
|
||||
index: i,
|
||||
|
||||
locked : lockMode,
|
||||
instanceNum : enumInstanceNumArr[i],
|
||||
setInstanceNum: CreateParamChanger(enumInstanceNumArr, setEnumInstanceNumArr, i),
|
||||
enumItems: enumItemCounts[i],
|
||||
@ -453,8 +481,19 @@ function MasterLfoHandler(){
|
||||
labels = ENUMERATORLABELS;
|
||||
}
|
||||
|
||||
let lockClass;
|
||||
if (lockMode == LockModes.LOCK){
|
||||
lockClass = 'lock';
|
||||
}
|
||||
else {
|
||||
lockClass = 'lock unlocked';
|
||||
}
|
||||
|
||||
return e('div', null,
|
||||
e('div', {className: 'container'},
|
||||
e(Switch, {ontoggle: toggleViewMode}, null),
|
||||
e('span', {className: lockClass, onClick: toggleLockMode}, null)),
|
||||
|
||||
e('h5', null, title),
|
||||
e('ul', null, ...labels.map(x => ListItem(Label(x)))),
|
||||
e('div', {id: 'grid'}, ...grid)
|
||||
|
101
modulators.js
101
modulators.js
@ -2,7 +2,10 @@
|
||||
// MODULATORS
|
||||
/////////////////////////
|
||||
|
||||
|
||||
var TYPEOPTIONS = ["LFO", "Noise"];
|
||||
var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square", "Custom"];
|
||||
var NOISETYPES = ["Rand", "Line Int.", "Sine Int."]
|
||||
|
||||
var INSTANCEOPTIONS = ["1", "2", "3", "4"];
|
||||
|
||||
@ -28,11 +31,20 @@ function LfoRow(props){
|
||||
if (!center)
|
||||
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'},
|
||||
ListItem(DropDown({onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
|
||||
ListItem(ControlType()),
|
||||
ListItem(DropDown({onChange: props.setShape, value:props.shape, options: SHAPETYPES})),
|
||||
ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
|
||||
ListItem(DropDown({locked:props.locked, onChange: props.setInstanceNum, value:props.instanceNum, options: INSTANCEOPTIONS})),
|
||||
ListItem(DropDown({locked:props.locked, options: TYPEOPTIONS, onChange: props.setType, value:props.type})),
|
||||
typeOption,
|
||||
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(NumberBox, {onChange:props.setMin, value:props.min, 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("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(Button, {text:'+', onClick: props.addLfo}, null)),
|
||||
ListItem(e(Button, {text:'-', onClick: props.removeLfo}, null)),
|
||||
ListItem(e(Button, {text:'+', onClick: props.addLfo, locked: props.locked}, null)),
|
||||
ListItem(e(Button, {text:'-', onClick: props.removeLfo, locked: props.locked}, null)),
|
||||
ListItem(e("div", {className:"linked"}, linkedText)),
|
||||
);
|
||||
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++){
|
||||
if (visibleArr[i]){
|
||||
|
||||
@ -76,15 +88,20 @@ function operateModulators(visibleArr, instanceNumArr, paramNames, centers, freq
|
||||
if (centers[inst].hasOwnProperty(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")
|
||||
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 phaseType;
|
||||
let timeBase;
|
||||
@ -93,16 +110,76 @@ function operateModulator(center, inst, timeBaseStr, min, max, waveType, phaseAr
|
||||
let phase;
|
||||
|
||||
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)
|
||||
phase = (maxTicks % timeBase) / timeBase;
|
||||
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}`);
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
|
Loading…
Reference in New Issue
Block a user