cvancau/alapatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Components and Updated VCO

Browse Source
This commit is contained in:
[poww10s]
2020-11-18 16:41:31 -05:00
parent f679c3324b
commit 31a1baa7c9
4 changed files with 211 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/timbre/Timbre.js
+7
View File
@@ -1,6 +1,9 @@
import React from 'react'; import React from 'react';
import VCO from './parameters/VCO'; import VCO from './parameters/VCO';
import Mixer from './parameters/Mixer'; import Mixer from './parameters/Mixer';
import Pitch from './parameters/Pitch';
import Filter from './parameters/Filter';
import EG from './parameters/EG';
export function Timbre(props) { export function Timbre(props) {
return ( return (
@@ -8,6 +11,10 @@ export function Timbre(props) {
<VCO id="vco1" /> <VCO id="vco1" />
<VCO id="vco2" /> <VCO id="vco2" />
<Mixer id="mixer1" /> <Mixer id="mixer1" />
<Pitch id="pitch1" />
<Filter id="filter1" />
<EG id="eg1" />
<EG id="eg2" />
</div> </div>
); );
} }
src/features/timbre/parameters/Filter.js
+83
View File
@@ -0,0 +1,83 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList } from '../../helpers/Helpers';
export default function Filter(props) {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div>
<SelectList
value={parameters.filterType}
list={[
'-24db Low Pass',
'-12db Low Pass',
'Band Pass',
'High Pass',
]}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { filterType: value },
})
)
}
/>
<Slider
parameter={parameters.cutoff}
min="0"
max="127"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { cutoff: value },
})
)
}
/>
<Slider
parameter={parameters.resonance}
min="0"
max="127"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { resonance: value },
})
)
}
/>
<Slider
parameter={parameters.egIntensity}
min="-63"
max="63"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { egIntensity: value },
})
)
}
/>
<Slider
parameter={parameters.keyboardTrack}
min="-63"
max="63"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { keyboardTrack: value },
})
)
}
/>
</div>
);
}
src/features/timbre/parameters/Pitch.js
+116
View File
@@ -0,0 +1,116 @@
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList } from '../../helpers/Helpers';
export default function Pitch(props) {
const parameters = useSelector((state) => selectById(state, props.id));
const dispatch = useDispatch();
return (
<div>
<SelectList
value={parameters.voiceAssign}
list={['Mono', 'Poly', 'Unison']}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { voiceAssign: value },
})
)
}
/>
<SelectList
value={parameters.triggerMode}
list={['Single', 'Multiple']}
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { triggerMode: value },
})
)
}
/>
<Slider
parameter={parameters.transpose}
min="-24"
max="24"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { transpose: value },
})
)
}
/>
<Slider
parameter={parameters.tune}
min="-50"
max="50"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { tune: value },
})
)
}
/>
<Slider
parameter={parameters.unisonDetune}
min="0"
max="99"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { unisoneDetune: value },
})
)
}
/>
<Slider
parameter={parameters.portamento}
min="0"
max="127"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { portamento: value },
})
)
}
/>
<Slider
parameter={parameters.bendRange}
min="-12"
max="12"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { bendRange: value },
})
)
}
/>
<Slider
parameter={parameters.vibratoIntensity}
min="-63"
max="63"
onChange={(value) =>
dispatch(
parameterUpdated({
id: props.id,
changes: { vibratoIntensity: value },
})
)
}
/>
</div>
);
}
src/features/timbre/parameters/VCO.js
+5 -34
View File
@@ -1,21 +1,7 @@
import React from 'react'; import React from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { selectById, parameterUpdated } from './parameterSlice.js'; import { selectById, parameterUpdated } from './parameterSlice.js';
import { Slider, SelectList } from '../../helpers/Helpers';
const SelectList = (props) => {
const options = props.list.map((option, index) => (
<option value={option} key={index}>
{option}
</option>
));
return (
<select
value={props.value}
onChange={(e) => props.onChange(e.target.value)}>
{options}
</select>
);
};
export default function VCO(props) { export default function VCO(props) {
const parameters = useSelector((state) => selectById(state, props.id)); const parameters = useSelector((state) => selectById(state, props.id));
@@ -23,30 +9,15 @@ export default function VCO(props) {
const dispatch = useDispatch(); const dispatch = useDispatch();
return ( return (
<div> <div>
<span>Current Waveform {parameters.waveform} </span> <Slider
<button
aria-label="Increment value"
onClick={() =>
dispatch(
parameterUpdated({
id: props.id,
changes: { waveform: 'Triangle' },
})
)
}>
Set Waveform to Triangle
</button>
<span>Current Mod Value {parameters.waveMod} </span>
<input
type="range"
min="0" min="0"
max="100" max="100"
value={parameters.waveMod} parameter={parameters.waveMod}
onChange={(e) => onChange={(value) =>
dispatch( dispatch(
parameterUpdated({ parameterUpdated({
id: props.id, id: props.id,
changes: { waveMod: e.target.value }, changes: { waveMod: value },
}) })
) )
} }