38 Commits

Author SHA1 Message Date
081e33dd07 modulator noise function previous val bug 2024-11-29 14:20:29 +01:00
eb02657b4a center vals included in NN data 2024-10-22 13:27:07 +02:00
d670aefcbd enums start with NONE 2024-10-22 12:32:42 +02:00
a35fecafae NN data receiving 2024-10-22 10:58:46 +02:00
b3ba9b0f2d cachedNoise no longer an array 2024-10-18 15:34:53 +02:00
102a88b242 bugfix - modulators not properly initializing 2024-10-15 14:54:37 +02:00
aebfbe5277 Merge pull request 'main' (#6) from main into nn-communication
Reviewed-on: #6
2024-10-15 12:27:53 +02:00
2d81a832af Merge branch 'nn-communication' into main 2024-10-15 12:27:08 +02:00
cdbcf24dfc Merge pull request 'fixed userwave update' (#5) from lock into main
Reviewed-on: #5
2024-10-15 12:21:08 +02:00
64f1455f69 fixed userwave update 2024-10-14 09:16:05 +02:00
trian-gles
a855d254cd non musical timing to ms value for input from neural net 2024-10-11 15:34:37 +02:00
09a1b5f20f Merge pull request 'lock mode' (#4) from lock into main
Reviewed-on: #4
2024-10-11 13:36:54 +02:00
34e99f09fd lock mode 2024-10-11 12:52:54 +02:00
86a994546e Merge pull request 'noise-functions' (#3) from noise-functions into main
Reviewed-on: #3
2024-10-10 12:25:22 +02:00
d22cdc8401 basic random value noise functions 2024-10-10 12:23:50 +02:00
trian-gles
43e517cc4e added new init values 2024-09-26 12:40:47 +02:00
a608b083f3 working sine interpolation 2024-09-25 15:59:27 +02:00
83cf801ec3 merge conflict 2024-09-24 14:35:37 +02:00
trian-gles
45e168ba11 UI changes 2024-09-24 14:35:01 +02:00
37a65058bc Merge pull request 'musical-timing-phase' (#2) from musical-timing-phase into main
Reviewed-on: #2
2024-09-03 11:37:51 +02:00
trian-gles
45847fbae4 phase calculated from ticks 2024-09-03 11:34:32 +02:00
trian-gles
c794b5bc2f separated phase handling into two options 2024-09-02 16:58:18 +02:00
trian-gles
c8c410a38f UI changes 2024-08-08 15:31:57 +02:00
985b6c832f Merge pull request 'user defined wavetable shape' (#1) from user-defined-table into main
Reviewed-on: #1
2024-08-08 14:32:34 +02:00
trian-gles
ff0e8443fc user defined wavetable shape 2024-08-08 14:31:53 +02:00
446713d5d3 cleaned up example patch 2024-08-05 16:54:59 +02:00
2369ed5ddf instance numbering 2024-08-05 15:32:06 +02:00
071a78dc20 separate css 2024-08-05 10:08:29 +02:00
1d8610fa5f musical timing 2024-07-31 17:02:09 +02:00
ebd09dfd26 parsing for HZ 2024-07-30 15:53:35 +02:00
13cddd8f03 linking indicator 2024-07-29 13:56:45 +02:00
1f3972fc6f bugfix for deenumeration and parsing 2024-07-29 12:10:59 +02:00
b860254884 range instead of amp 2024-07-29 11:56:40 +02:00
a4842b4865 save message 2024-07-29 11:19:18 +02:00
315a8df1a0 denumeration 2024-07-26 13:52:04 +02:00
f9a8c05955 unfinished de enumeration 2024-07-24 19:31:08 +02:00
8381daf468 min and max display 2024-07-23 15:59:56 +02:00
e50e4c1e0c example with djster 2024-07-23 11:07:20 +02:00
9 changed files with 4328 additions and 347 deletions

View File

@@ -1,5 +1,12 @@
function isNumeric(str) {
if (typeof str != "string") return false // we only process strings!
return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
!isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
}
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)));
}
@@ -12,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){
@@ -24,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){
@@ -33,12 +43,12 @@ function Switch(props){
e('span', {className: 'slider round'}, null))
}
function CreateParamChanger(arr, setArr, index, cb=() => {}){
function CreateParamChanger(arr, setArr, index, postCB=() => {}, preCB=(val) => val){
return (event) => {
let newArr = arr.slice();
newArr[index] = event.target.value;
newArr[index] = preCB(event.target.value);
setArr(newArr);
cb();
postCB();
log(`${index} ${event.target.value}`);
}
}

View File

@@ -5,33 +5,48 @@
// 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;
}
function EnumeratorRow(props){
let linkedText = props.linked ? "<- mods" : "";
let content = e('ul', {className: 'lfo-item', id: `${props.djParam}-enum-row`},
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){
return content;
};
}
function denumerate(inval, count, keys, vals){
let output = inval;
for (let i=0; i < count; i++){
log(vals[i]);
if (inval == vals[i]){
output = (parseFloat(keys[i]) + parseFloat(keys[i+1])) / 2; // linear interpolate
}
}
return output;
}
function enumerate(name, inval, count, keys, vals){
function enumerate(name, inst, inval, count, keys, vals){
let output = "OUT OF RANGE";
for (let i=0; i < count + 1; i++){
if (inval <= keys[i]){
@@ -52,6 +67,6 @@ function enumerate(name, inval, count, keys, vals){
}
if (name !== "NONE")
window.max.outlet(name + " " + output);
window.max.outlet(inst + " " + name + " " + output);
}

2680
example-with-dj.maxpat Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

272
lfogui.css Normal file
View File

@@ -0,0 +1,272 @@
* {
--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 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
input[type=number] {
width: 50px;
margin: 0;
padding: 0;
}
input[type=text] {
width: 60px;
margin: 0;
padding: 0;
font-weight: bold;
}
.timeInput {
width: 80px;
margin: 0;
padding: 0;
}
#matrix {
background-color: aquamarine;
height: 100%;
width: 100%;
}
.numbox-unclicked {
user-select: none;
border: solid;
font-size: 12vw;
}
.numbox-clicked {
user-select: none;
border : solid;
font-size: 12vw;
}
.param-input-label {
width: 93%;
font-size: 5vw;
}
.lfo-input-label {
width: 40%;
font-size: 5vw;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
h5 {
margin: 0;
padding: 0;
}
.enum-count {
background-color: aquamarine;
}
.label {
background-color: aliceblue;
padding: 0 4px 0 4px;
margin: 0 2px 0 2px;
border-color: #333333;
border-width: 1px;
}
.base-val {
background-color: lightgray;
border-color: #333333;
border-width: 1px;
width: 50px;
margin-left: 2px;
margin-top: 1px;
}
.linked {
color: red;
border-width: 1px;
width: 50px;
font-size: small;
margin-left: 2px;
margin-top: 5px;
}
@keyframes pulse-animation {
0% {
color: black;
}
100% {
color: red;
}
}
#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);
}

View File

@@ -7,167 +7,7 @@
-->
<head>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
input[type=number] {
width: 50px;
margin: 0;
padding: 0;
}
input[type=text] {
width: 60px;
margin: 0;
padding: 0;
font-weight: bold;
}
#matrix {
background-color: aquamarine;
height: 100%;
width: 100%;
}
.numbox-unclicked {
user-select: none;
border: solid;
font-size: 12vw;
}
.numbox-clicked {
user-select: none;
border : solid;
font-size: 12vw;
}
.param-input-label {
width: 93%;
font-size: 5vw;
}
.lfo-input-label {
width: 40%;
font-size: 5vw;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
border-radius: 17px;
}
.slider.round:before {
border-radius: 50%;
}
h5 {
margin: 0;
padding: 0;
}
.enum-count {
background-color: aquamarine;
}
.label {
background-color: aliceblue;
padding: 0 4px 0 4px;
margin: 0 2px 0 2px;
border-color: #333333;
border-width: 1px;
}
@keyframes pulse-animation {
0% {
color: black;
}
100% {
color: red;
}
}
#pulse {
animation: pulse-animation 0.2s normal;
}
</style>
<link rel="stylesheet" href="./lfogui.css">
</head>
<body>
@@ -175,6 +15,7 @@
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./moment.js"></script>
<script src="./common.js"></script>
<script src="./enums.js"></script>
<script src="./modulators.js"></script>

304
lfogui.js
View File

@@ -4,7 +4,7 @@ var log;
if (DEBUG)
log = console.log;
else
log = window.max.outlet;
log = (msg) => {window.max.outlet("debug " + msg)};
const e = React.createElement;
@@ -20,12 +20,43 @@ const ViewModes = Object.freeze({
ENUM: 1
});
const LockModes = Object.freeze({
UNLOCK: 0,
LOCK: 1
});
var modPhases = Array(MAXLFOS).fill(0);
var firstUpdateTime = Date.now();
const MODULATORLABELS = ["-type-", "---shape---", "-------param-------", "--freq--", "--amp--", "--phase--"];
const ENUMERATORLABELS = ["---parameter---", "-# points-"];
const MODULATORLABELS = ["inst", "-type-", "---shape---", "-------param-------", "--timebase--", "-min-", "-max", "-phase-", "center"];
const ENUMERATORLABELS = ["inst", "---parameter---", "-# points-"];
function parseLfoTimeNonMusical(lfoTime){
if (lfoTime.slice(-2) == "hz"){
return parseFloat(lfoTime.slice(0, -2));
}
else if (lfoTime.slice(-2) == "ms"){
return 1000 / parseFloat(lfoTime.slice(0, -2));
}
else if (lfoTime.slice(-1) == "s"){
return 1 / parseFloat(lfoTime.slice(0, -1));
}
else if ((lfoTime.match(/:/g) || []).length == 2){
return 1 / moment.duration(lfoTime).asSeconds();
}
else if ((lfoTime.match(/\./g) || []).length == 2){
return 0; // ignore musical timings
}
else {
return 0;
}
}
function nnFreqToHzString(num){
return `${num}hz`;
}
function MasterLfoHandler(){
@@ -41,33 +72,59 @@ 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({});
const [modCenterVals, setModCenterVals] = React.useState({'1':{}, '2':{}, '3':{}, '4':{}});
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'));
const [freqArr, setFreqArr] = React.useState(Array(MAXLFOS).fill('1'));
const [ampArr, setAmpArr] = React.useState(Array(MAXLFOS).fill('1'));
const [phaseArr, setPhaseArr] = React.useState(Array(MAXLFOS).fill('0'));
const [freqArr, setFreqArr] = React.useState(Array(MAXLFOS).fill('1hz'));
const allModArrays = [modVisibleArr, shapeArr, djParamArr, freqArr, ampArr, phaseArr];
const allModSetters = [setModVisibleArr, setShapeArr, setDjParamArr, setFreqArr, setAmpArr, setPhaseArr];
const modBlankVals = [true, SHAPETYPES[0], MODPARAMOPTIONS[0], '1', '1', '0'];
// const [ampArr, setAmpArr] = React.useState(Array(MAXLFOS).fill('1'));
const [minArr, setMinArr] = React.useState(Array(MAXLFOS).fill('0'));
const [maxArr, setMaxArr] = React.useState(Array(MAXLFOS).fill('1'));
const [initPhaseArr, setInitPhaseArr] = React.useState(Array(MAXLFOS).fill('0'));
const [lastPhaseArr, setLastPhaseArr] = React.useState(Array(MAXLFOS).fill(0));
const [cachedNoiseValueArr1, setCachedNoiseValueArr1] = React.useState(Array(MAXLFOS).fill(0));
const [cachedNoiseValueArr2, setCachedNoiseValueArr2] = React.useState(Array(MAXLFOS).fill(0));
const allModArrays = [modVisibleArr, modTypeArr, modInstanceNumArr, shapeArr, noiseTypeArr, djParamArr, freqArr, minArr, maxArr, initPhaseArr, lastPhaseArr, cachedNoiseValueArr1, cachedNoiseValueArr2];
const allModSetters = [setModVisibleArr, setModTypeArr, setModInstanceNumArr, setShapeArr, setNoiseTypeArr, setDjParamArr, setFreqArr, setMinArr, setMaxArr, setInitPhaseArr, setLastPhaseArr, setCachedNoiseValueArr1, setCachedNoiseValueArr2];
const modBlankVals = [true, 'LFO', '1', SHAPETYPES[0], NOISETYPES[0], MODPARAMOPTIONS[0], '1hz', '0', '1', '0', 0, 0, 0];
/// ENUMERATOR ARRAYS
const [enumVisibleArr, setEnumVisibleArr] = React.useState(initVisArr);
const [enumInstanceNumArr, setEnumInstanceNumArr] = React.useState(Array(MAXLFOS).fill('1'));
const [enumItemCounts, setEnumItemCounts] = React.useState(Array(MAXENUMPOINTS).fill('2'));
const [enumDjParamArr, setEnumDjParamArr] = React.useState(Array(MAXENUMPOINTS).fill('attenuation'));
const [enumDjParamArr, setEnumDjParamArr] = React.useState(Array(MAXENUMPOINTS).fill('NONE'));
let baseEnumBreakpoints = Array(MAXENUMS).fill(0).map(x => Array(MAXENUMPOINTS+ 1).fill(0));
for (let i = 0; i < MAXENUMS; i++){
for (let j=0; j < MAXENUMPOINTS + 1; j++){
baseEnumBreakpoints[i][j] = j;
baseEnumBreakpoints[i][j] = j - 0.5;
}
}
const [enumBreakPoints, setEnumBreakPoints] = React.useState(baseEnumBreakpoints);
@@ -75,7 +132,7 @@ function MasterLfoHandler(){
const getBlankEnumBreakPointRow = () => {
let arr = []
for (let i=0; i< MAXENUMPOINTS + 1; i++)
arr.push(i)
arr.push(i - 0.5)
return arr;
}
@@ -84,14 +141,14 @@ function MasterLfoHandler(){
let baseEnumNames = Array(MAXENUMS).fill(0).map(x => Array(MAXENUMPOINTS).fill('param'));
const [enumNames, setEnumNames] = React.useState(baseEnumNames);
const allEnumArrays = [enumVisibleArr, enumItemCounts, enumDjParamArr];
const allEnumArrSetters = [setEnumVisibleArr, setEnumItemCounts, setEnumDjParamArr];
const allEnumArrays = [enumVisibleArr, enumInstanceNumArr, enumItemCounts, enumDjParamArr];
const allEnumArrSetters = [setEnumVisibleArr, setEnumInstanceNumArr, setEnumItemCounts, setEnumDjParamArr];
const allEnumMats = [enumBreakPoints, enumNames];
const allEnumMatSetters = [setEnumBreakPoints, setEnumNames];
const allGetEnumMatBlankVals = [getBlankEnumBreakPointRow, getBlankEnumNameRow]
const enumBlankVals = [true, 2, MODPARAMOPTIONS[0]];
const enumBlankVals = [true, '1', 2, MODPARAMOPTIONS[0]];
const [render, rerender] = React.useState(false); // BAD. I SHOULDN'T BE DOING THIS
@@ -99,25 +156,18 @@ function MasterLfoHandler(){
React.useEffect(() => {
function handleLoad(event) {
window.max.getDict(event.detail, (dict) => {
for (let i = 0; i<allModArrays.length; i++) {
for (let i = 0; i<dict.data.modArrays.length; i++) {
allModSetters[i](dict.data.modArrays[i]);
}
for (let i = 0; i<allEnumArrays.length; i++) {
allEnumArrSetters[i](dict.data.enumArrays[i]);
}
for (let i = 0; i<allEnumMats.length; i++) {
allEnumMatSetters[i](dict.data.enumMats[i]);
}
})
}
function handleSave(event) {
@@ -127,26 +177,28 @@ function MasterLfoHandler(){
'enumMats' : allEnumMats
}
window.max.setDict(event.detail, {"data" : data});
window.max.outlet("saved");
}
// only called internally by 1. Handler after modulator processing 2. LFO outputs
function handleEnum(event){
let name = event.detail[0];
let val = event.detail[1];
let inst = event.detail[0];
let name = event.detail[1];
let val = event.detail[2];
// if none of the Enums use this param, then we output it
let i = 0;
while (i < MAXENUMS){
if (enumVisibleArr[i] && enumDjParamArr[i] == name)
if (enumVisibleArr[i] && enumDjParamArr[i] == name && enumInstanceNumArr[i] == inst)
break;
i++
}
if (i == MAXENUMS){
window.max.outlet(name + ' ' + val);
window.max.outlet(inst + ' ' + name + ' ' + val);
}
else {
enumerate(name, val, enumItemCounts[i], enumBreakPoints[i], enumNames[i]);
enumerate(name, inst, val, enumItemCounts[i], enumBreakPoints[i], enumNames[i]);
}
@@ -154,76 +206,194 @@ function MasterLfoHandler(){
function handleParam(event) {
let name = event.detail[0];
let val = event.detail[1];
let inst = event.detail[0]; // djster instance
let name = event.detail[1];
let val = event.detail[2];
// CHECK FOR INDEX OF THIS NAME IN ENUM MATRIX, AND IF IT IS THERE DENUMERATE
let index = -1;
for (let i = 0; i < MAXENUMS; i++){
if (enumDjParamArr[i] == name && enumInstanceNumArr[i] == inst)
index = i;
}
if (index != -1){
val = denumerate(val, enumItemCounts[index], enumBreakPoints[index], enumNames[index]);
}
// if none of the LFOs use this param, then we send it straight to the enum
let i = 0;
while (i < MAXLFOS){
if (modVisibleArr[i] && djParamArr[i] == name)
if (modVisibleArr[i] && djParamArr[i] == name && modInstanceNumArr[i] == inst)
break;
i++
i++;
}
if (i == MAXLFOS){
window.dispatchEvent(new CustomEvent('enum', {'detail' : [name, val]}));
window.dispatchEvent(new CustomEvent('enum', {'detail' : [inst, name, val]}));
}
modCenterVals[name] = val;
modCenterVals[inst][name] = val;
setModCenterVals(modCenterVals);
rerender(!render); // BAD! SHOULD NOT BE DOING THIS!
}
function handleTick(event) {
let time = (Date.now() - firstUpdateTime) / 1000;
operateModulators(modVisibleArr, djParamArr, modCenterVals, freqArr, ampArr, shapeArr, phaseArr, time);
let noiseData = {lastPhaseArr, setLastPhaseArr, cachedNoiseValueArr1, setCachedNoiseValueArr1, cachedNoiseValueArr2, setCachedNoiseValueArr2, noiseTypeArr};
operateModulators(modVisibleArr, modTypeArr, modInstanceNumArr, djParamArr, modCenterVals, freqArr, minArr, maxArr, shapeArr, initPhaseArr, noiseData, userDefinedWave, time, beatsInMeasure, ticks);
}
function handleTimeSig(event) {
setBeatsInMeasure(parseFloat(event.detail[0]) * parseFloat(event.detail[1])/ 4);
}
function handleChangeUserWave(event){
setUserDefinedWave(event.detail);
}
function handleMaxTicks(event){
setTicks(event.detail);
}
function setNN(event){
for (let i=0; i<MAXLFOS; i++){
freqArr[i] = nnFreqToHzString(event.detail[i]);
}
setFreqArr(freqArr)
for (let i=MAXLFOS; i<MAXLFOS * 2; i++){
minArr[i - MAXLFOS] = event.detail[i];
}
setMinArr(minArr);
for (let i=MAXLFOS*2; i<MAXLFOS * 3; i++){
maxArr[i - MAXLFOS*2] = event.detail[i];
}
setMaxArr(maxArr);
for (let i=MAXLFOS*3; i<MAXLFOS * 4; i++){
initPhaseArr[i - MAXLFOS*3] = parseFloat(event.detail[i]);
}
setInitPhaseArr(initPhaseArr);
for (let i=MAXLFOS*4; i<MAXLFOS * 5; i++){
let index = i - MAXLFOS*4;
let inst = modInstanceNumArr[index];
let param = djParamArr[index];
modCenterVals[inst][param] = parseFloat(event.detail[i]);
}
setModCenterVals(modCenterVals);
rerender(!render); // BAD! SHOULD NOT BE DOING THIS!
}
function dumpNN(event){
let allNNData = [];
freqArr.forEach(element => {
allNNData.push(parseLfoTimeNonMusical(element));
});
allNNData = allNNData.concat(minArr);
allNNData = allNNData.concat(maxArr);
allNNData = allNNData.concat(initPhaseArr);
let lfoMatchedCenterVals = [];
for (let i=0; i<MAXLFOS; i++){
let inst = modInstanceNumArr[i];
let param = djParamArr[i];
lfoMatchedCenterVals.push(modCenterVals[inst][param]);
if (!lfoMatchedCenterVals[i])
lfoMatchedCenterVals[i] = 0
}
allNNData = allNNData.concat(lfoMatchedCenterVals);
window.max.outlet("NNdata " + allNNData.join(" "));
}
window.addEventListener('loadDict', handleLoad);
window.addEventListener('saveDict', handleSave);
window.addEventListener('dumpNN', dumpNN);
window.addEventListener('setNN', setNN);
window.addEventListener('tick', handleTick);
window.addEventListener('param', handleParam);
window.addEventListener('enum', handleEnum);
window.addEventListener('timesig', handleTimeSig);
window.addEventListener('userWave', handleChangeUserWave);
window.addEventListener('maxTicks', handleMaxTicks);
return () => {
window.removeEventListener('loadDict', handleLoad);
window.removeEventListener('saveDict', handleSave);
window.removeEventListener('dumpNN', dumpNN);
window.removeEventListener('setNN', setNN);
window.removeEventListener('tick', handleTick);
window.removeEventListener('param', handleParam);
window.removeEventListener('enum', handleEnum);
window.removeEventListener('timesig', handleTimeSig);
window.removeEventListener('userWave', handleChangeUserWave);
window.removeEventListener('maxTicks', handleMaxTicks);
};
}, [...allModArrays, ...allEnumArrays, ...allEnumMats, modCenterVals]);
}, [...allModArrays, ...allEnumArrays, ...allEnumMats, userDefinedWave, modCenterVals, render, beatsInMeasure, ticks]);
function CheckLinked(inst, param, checkInstArr, checkParamArr){
for (let i = 0; i < checkInstArr.length; i++){
if (checkInstArr[i] == inst && checkParamArr[i] == param)
return true;
}
return false;
}
///////
// Generate Modulators
///////
let modContents = []
for (var i = 0; i<MAXLFOS; i++){
let id = i;
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,
freq: freqArr[i],
setFreq: CreateParamChanger(freqArr, setFreqArr, i),
amp: ampArr[i],
setAmp: CreateParamChanger(ampArr, setAmpArr, i),
phase: phaseArr[i],
setPhase: CreateParamChanger(phaseArr, setPhaseArr, i),
//amp: ampArr[i],
//setAmp: CreateParamChanger(ampArr, setAmpArr, i),
min: minArr[i],
setMin : CreateParamChanger(minArr, setMinArr, i),
max: maxArr[i],
setMax: CreateParamChanger(maxArr, setMaxArr, 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);
@@ -239,6 +409,7 @@ function MasterLfoHandler(){
}
}
else {
for (var j = 0; j < allModArrays.length; j++){ // no space below, easy.
let array = allModArrays[j];
array[id + 1] = modBlankVals[j];
@@ -246,6 +417,7 @@ function MasterLfoHandler(){
}
}
rerender(!render);
}
},
removeLfo: () => {
@@ -270,6 +442,9 @@ function MasterLfoHandler(){
enumContents.push(
e(EnumeratorRow, {
index: i,
locked : lockMode,
instanceNum : enumInstanceNumArr[i],
setInstanceNum: CreateParamChanger(enumInstanceNumArr, setEnumInstanceNumArr, i),
enumItems: enumItemCounts[i],
setEnumItemCounts: CreateParamChanger(enumItemCounts, setEnumItemCounts, i),
enumBreakPoints: enumBreakPoints,
@@ -279,6 +454,7 @@ function MasterLfoHandler(){
visible: enumVisibleArr[i],
djParam: enumDjParamArr[i],
setDjParam: CreateParamChanger(enumDjParamArr, setEnumDjParamArr, i),
linked: CheckLinked(enumInstanceNumArr[i], enumDjParamArr[i], modInstanceNumArr, djParamArr),
addEnum: () => {
if (id < MAXLFOS - 1){
if (enumVisibleArr[id + 1]){ // if we need to open up space
@@ -348,8 +524,19 @@ function MasterLfoHandler(){
labels = ENUMERATORLABELS;
}
let lockClass;
if (lockMode == LockModes.LOCK){
lockClass = 'lock';
}
else {
lockClass = 'lock unlocked';
}
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('ul', null, ...labels.map(x => ListItem(Label(x)))),
e('div', {id: 'grid'}, ...grid)
@@ -365,8 +552,29 @@ if (!DEBUG){
window.dispatchEvent(new CustomEvent('saveDict', {'detail' : dictId}));
});
window.max.bindInlet("param", (paramName, val) => {
window.dispatchEvent(new CustomEvent('param', {'detail' : [paramName, val]}));
window.max.bindInlet("dumpNN", () => {
window.dispatchEvent(new CustomEvent('dumpNN'));
});
window.max.bindInlet("setNN", (...data) => {
window.dispatchEvent(new CustomEvent('setNN', {'detail' : data}));
});
window.max.bindInlet("param", (inst, paramName, val) => {
window.dispatchEvent(new CustomEvent('param', {'detail' : [inst, paramName, val]}));
});
window.max.bindInlet("timesig", (top, bottom) => {
window.dispatchEvent(new CustomEvent('timesig', {'detail' : [top, bottom]}));
});
window.max.bindInlet("ticks", (val) => {
window.dispatchEvent(new CustomEvent('maxTicks', {'detail' : val}));
});
window.max.bindInlet("userWave", (...points) => {
window.dispatchEvent(new CustomEvent('userWave', {'detail' : points}));
});
setInterval(() => {

View File

@@ -2,11 +2,22 @@
// MODULATORS
/////////////////////////
var SHAPETYPES = ["Sine", "SawUp", "SawDown", "Tri", "Square"];
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"];
const MODPARAMOPTIONS = ["NONE", "stream", "pulse_length", "eventfulness", "event_length", "metriclarity",
"harmoniclarity", "melodic_cohesion", "melody_scope", "tonic_pitch", "pitch_center", "pitch_range", "dynamics",
"attenuation", "chordal_weight", "tonality-profile", "ostinato-buffer", "ostinato", "meter", "scale"];
const PhaseTypes = Object.freeze({
MUSICAL: Symbol("musical"),
TIME: Symbol("time")
});
function ControlType(){
return e('select', {className: 'control-type'}, Option("LFO"));
}
@@ -14,23 +25,43 @@ function ControlType(){
function LfoRow(props){
let content = e('ul', {className: 'lfo-item'},
ListItem(ControlType()),
ListItem(DropDown({onChange: props.setShape, value:props.shape, options: SHAPETYPES})),
ListItem(DropDown({onChange: props.setDjParam, value: props.djParam, options: MODPARAMOPTIONS})),
ListItem(e(NumberBox, {onChange:props.setFreq, value:props.freq, step: 0.1}, null)),
ListItem(e(NumberBox, {onChange:props.setAmp, value:props.amp, step:0.1}, null)),
let linkedText = props.linked ? "-> enums" : "";
let center = props.centerVals[props.instanceNum][props.djParam];
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({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)),
//ListItem(e(NumberBox, {onChange:props.setAmp, value:props.amp, step:0.1}, null)),
ListItem(e(NumberBox, {onChange:props.setPhase, value:props.phase, step:0.1}, null)),
ListItem(e("input", {type: 'range', min: 0, max: 1, step: 0.01, readonly: true, id: `slider-${props.djParam}`})),
ListItem(e(Button, {text:'+', onClick: props.addLfo}, null)),
ListItem(e(Button, {text:'-', onClick: props.removeLfo}, 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, locked: props.locked}, null)),
ListItem(e(Button, {text:'-', onClick: props.removeLfo, locked: props.locked}, null)),
ListItem(e("div", {className:"linked"}, linkedText)),
);
if (props.visible){
return content
};
}
function indexWave(type, phase){
function indexWave(type, phase, userDefinedWave){
switch (type){
case "Sine":
return (Math.sin(phase * Math.PI * 2) / 2) + 0.5;
@@ -42,32 +73,141 @@ function indexWave(type, phase){
return phase > 0.5? (1-phase) * 2 : phase * 2;
case "Square":
return +(phase > 0.5);
case "Custom":
return parseFloat(userDefinedWave[Math.floor(phase * 50)]) / 127
}
}
function operateModulators(visibleArr, paramNames, centers, freqs, amps, waveTypes, phaseArr, time){
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]){
let name = paramNames[i];
let inst = instanceNumArr[i];
let center = 0;
if (centers.hasOwnProperty(name)){
center = centers[name];
if (centers[inst].hasOwnProperty(name)){
center = centers[inst][name];
}
let output = operateModulator(center, freqs[i], amps[i], waveTypes[i], phaseArr, i, name, time);
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' : [name, output]}));
window.dispatchEvent(new CustomEvent('enum', {'detail' : [inst, name, output]}));
}
}
}
function operateModulator(center, freq, amp, waveType, phaseArr, phaseI, name, time){
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;
let phase = (time * freq + parseFloat(phaseArr[phaseI])) % 1.00;
let unscaled = indexWave(waveType, phase);
let el = document.getElementById(`slider-${name}`);
[timeBase, phaseType] = parseLfoTime(timeBaseStr, beatsInMeasure);
let phase;
if (phaseType === PhaseTypes.TIME)
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){
return unscaled * amp + center;
}
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.cachedNoiseValueArr1[index] == 0 || noiseData.lastPhaseArr[index] > phase){ // occurs if the phase reset to 0 or at the very start
noiseData.cachedNoiseValueArr2[index] = noiseData.cachedNoiseValueArr1[index];
if (noiseData.cachedNoiseValueArr1[index] == 0)
noiseData.cachedNoiseValueArr2[index] = center;
noiseData.cachedNoiseValueArr1[index] = Math.random();
noiseData.setCachedNoiseValueArr1(noiseData.cachedNoiseValueArr1);
noiseData.setCachedNoiseValueArr2(noiseData.cachedNoiseValueArr2);
}
noiseData.lastPhaseArr[index] = phase;
noiseData.setLastPhaseArr(noiseData.lastPhaseArr);
//let unscaled = (noiseData.cachedNoiseValueArr[index][1] - noiseData.cachedNoiseValueArr[index][0]) * sinePhase + noiseData.cachedNoiseValueArr[index][0];
let unscaled = interpolateNoise(noiseType, noiseData.cachedNoiseValueArr1[index], noiseData.cachedNoiseValueArr2[index], 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
function parseLfoTime(lfoTime, beatsInMeasure){
if (lfoTime.slice(-2) == "hz"){
return [parseFloat(lfoTime.slice(0, -2)), PhaseTypes.TIME];
}
else if (lfoTime.slice(-2) == "ms"){
return [1000 / parseFloat(lfoTime.slice(0, -2)), PhaseTypes.TIME];
}
else if (lfoTime.slice(-1) == "s"){
return [1 / parseFloat(lfoTime.slice(0, -1)), PhaseTypes.TIME];
}
else if ((lfoTime.match(/:/g) || []).length == 2){
return [1 / moment.duration(lfoTime).asSeconds(), PhaseTypes.TIME];
}
else if ((lfoTime.match(/\./g) || []).length == 2){
return [musicalTimingToFreq(...lfoTime.split('.'), beatsInMeasure), PhaseTypes.MUSICAL];
}
else {
return [0, PhaseTypes.TIME];
}
}
function musicalTimingToFreq(bars, beats, ticks, beatsInMeasure){
let totalTicks = (parseFloat(bars) * parseFloat(beatsInMeasure) + parseFloat(beats)) * 480 + parseFloat(ticks);
return totalTicks;
}

2
moment.js Normal file

File diff suppressed because one or more lines are too long