move old message repeater to patch space

Author: 0la0

README.md

@@ -1,16 +1,21 @@
 ### Cycle-Patcher
 A web based environment for real-time sound synthesis and pattern generation.
 
-### Build
+### Development
 Install dependencies: `npm i`  
 Start local server: `npm start`  
 Navigate to `localhost:3001`
 
+### Build
+`npm run build`
+
 ### Browser Requirements
-This project uses
+This project has a hard dependency on
 * [Web Components V1](https://caniuse.com/#feat=custom-elementsv1)
-* [Web Midi API](https://caniuse.com/#feat=midi)
-* [Broadcast Channel](https://caniuse.com/#feat=broadcastchannel) (to run a graphics window)
+
+And feature level dependencies on
+* [Web Midi API](https://caniuse.com/#feat=midi) to interface with external synths and controllers
+* [Broadcast Channel](https://caniuse.com/#feat=broadcastchannel) to interface with a graphics window
 
 ### TODO
 * organize patcher components

package.json

@@ -5,16 +5,17 @@
   "main": "dist/index.js",
   "scripts": {
     "build:webpack": "webpack --mode=production --inline --colors --progress --content-base src",
-    "build": "npm run clean; npm run build:webpack",
+    "build:assets": "cp -r src/assets dist/assets",
+    "build": "npm run clean; npm run build:webpack; npm run build:assets",
     "clean": "rm -rf dist",
     "start": "webpack-dev-server --mode=development --inline --colors --progress --content-base src"
   },
   "devDependencies": {
     "html-webpack-plugin": "^3.2.0",
     "raw-loader": "^0.5.1",
-    "webpack": "^4.20.2",
+    "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.9"
+    "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
     "three": "^0.92.0"

src/app/components/_util/componentManager.js

@@ -6,7 +6,6 @@ import SynthNote from 'components/synth-note';
 import button from 'components/button';
 import PolyRythm from 'components/poly-rythm';
 import PolyBox from 'components/poly-box';
-import MessageFitler from 'components/message-filter';
 import Metronome from 'components/metronome';
 import ScaleSelector from 'components/scale-selector';
 import RouterOutlet from 'components/router-outlet';
@@ -43,6 +42,7 @@ import PatchLfo from 'components/patch-lfo';
 import PatchGrain from 'components/patch-grain';
 import PatchMessageSpread from 'components/patch-message-spread';
 import PatchMidiInterface from 'components/patch-midi-interface';
+import PatchMessageRepeater from 'components/patch-message-repeater';
 
 const components = [
   app,
@@ -53,7 +53,6 @@ const components = [
   button,
   PolyRythm,
   PolyBox,
-  MessageFitler,
   Metronome,
   ScaleSelector,
   RouterOutlet,
@@ -90,6 +89,7 @@ const components = [
   PatchGrain,
   PatchMessageSpread,
   PatchMidiInterface,
+  PatchMessageRepeater,
 ];
 
 components.forEach(component => customElements.define(component.tag, component.element));

src/app/components/message-filter/index.js

@@ -0,0 +1,83 @@
+import { AUDIO_TICK_MULTIPLIER } from 'services/midi/util';
+
+function getMaxFromSchedules(schedules) {
+  return schedules.reduce((max, schedule) => {
+    if (schedule.audio > max.audio) { max.audio = schedule.audio; }
+    if (schedule.midi > max.midi) { max.midi = schedule.midi; }
+    return max;
+  }, { audio: 0, midi: 0 });
+}
+
+class RepeatStrategy {
+  constructor(numRepeats, repeatFrequency, tempo, tickLength, time) {
+    this.numRepeats = numRepeats;
+    this.repeatFrequency = repeatFrequency;
+    this.tempo = tempo;
+    this.tickLength = tickLength;
+    this.time = time;
+  }
+
+  linear() {
+    return new Array(this.numRepeats).fill(null)
+      .map((n, index) => {
+        const offset = index * this.tickLength * this.repeatFrequency;
+        return {
+          audio: this.time.audio + offset,
+          midi: this.time.midi + offset * AUDIO_TICK_MULTIPLIER,
+        };
+      });
+  }
+
+  rampDown(baseTime) {
+    const baseAudio = baseTime ? baseTime.audio : this.time.audio;
+    const baseMidi = baseTime ? baseTime.midi : this.time.midi;
+    let diff = 4; // TODO: set as param
+    const offsetList = new Array(this.numRepeats).fill(null)
+      .map((n, index, array) => {
+        let offsetAudio = 0;
+        let offsetMidi = 0;
+        if (index !== 0) {
+          const lastValue = array[index - 1];
+          const offset = lastValue + this.tickLength * this.repeatFrequency * diff;
+          offsetAudio = offset;
+          offsetMidi = offset * AUDIO_TICK_MULTIPLIER;
+          diff /= 2; // TODO: set as param
+        }
+        return {
+          audio: baseAudio + offsetAudio,
+          midi: baseMidi + offsetMidi,
+        };
+      });
+    return offsetList;
+  }
+
+  rampUp(baseTime) {
+    const baseAudio = baseTime ? baseTime.audio : this.time.audio;
+    const baseMidi = baseTime ? baseTime.midi : this.time.midi;
+    const rampDownSchedules = this.rampDown();
+    const max = getMaxFromSchedules(rampDownSchedules);
+    return rampDownSchedules.map(schedule => ({
+      audio: max.audio - schedule.audio + baseAudio,
+      midi: max.midi - schedule.midi + baseAudio,
+    }));
+  }
+
+  uShaped(baseTime) {
+    const rampUpSchedules = this.rampUp(baseTime);
+    const max = getMaxFromSchedules(rampUpSchedules);
+    const rampDownSchedules = this.rampDown(max);
+    return rampUpSchedules.concat(rampDownSchedules);
+  }
+
+  nShaped(baseTime) {
+    const rampDownSchedules = this.rampDown(baseTime);
+    const max = getMaxFromSchedules(rampDownSchedules);
+    const rampUpSchedules = this.rampUp(max);
+    return rampDownSchedules.concat(rampUpSchedules);
+  }
+}
+
+export default function getTimeSchedules(numRepeats, repeatFrequency, repeatModifier, tempo, tickLength, time) {
+   const repeatStrategy = new RepeatStrategy(numRepeats, repeatFrequency, tempo, tickLength, time);
+   return repeatStrategy[repeatModifier]();
+}

src/app/components/message-filter/message-filter.css

@@ -0,0 +1,47 @@
+import BaseComponent from 'components/_util/base-component';
+import Component from 'components/_util/component';
+import { PATCH_EVENT } from 'components/patch-space/modules/PatchEvent';
+import PatchAudioModel from 'components/patch-space/modules/PatchAudioModel';
+import PatchEventModel from 'components/patch-space/modules/PatchEventModel';
+import metronomeManager from 'services/metronome/metronomeManager';
+import getTimeSchedules from './RepeatStrategy';
+
+const COMPONENT_NAME = 'patch-message-repeater';
+const style = require(`./${COMPONENT_NAME}.css`);
+const markup = require(`./${COMPONENT_NAME}.html`);
+
+class PatchMessageRepeater extends BaseComponent {
+  constructor() {
+    super(style, markup);
+    this.eventModel = new PatchEventModel(this.schedule.bind(this));
+    this.audioModel = new PatchAudioModel('Repeater', this.eventModel, PATCH_EVENT.MESSAGE, PATCH_EVENT.MESSAGE);
+    this.params = {
+      numRepeats: 0,
+      repeatFrequency: 1,
+      repeatModifier: 'linear'
+    };
+  }
+  setRepeatValue(value) {
+    this.params.numRepeats = parseInt(value, 10);
+  }
+
+  setRepeatFrequency(value) {
+    this.params.repeatFrequency = parseInt(value, 10);
+  }
+
+  setRepeatModifierValue(value) {
+    this.params.repeatModifier = value;
+  }
+
+  schedule(message) {
+    const tempo = metronomeManager.getMetronome().getTempo();
+    const tickLength = metronomeManager.getMetronome().getTickLength();
+    const timeSchedules = getTimeSchedules(this.params.numRepeats, this.params.repeatFrequency, this.params.repeatModifier, tempo, tickLength, message.time);
+    timeSchedules.forEach((timeSchedule) => {
+      const modifiedMessage = { ...message, time: { ...timeSchedule } };
+      this.eventModel.getOutlets().forEach(outlet => outlet.schedule(modifiedMessage));
+    });
+  }
+}
+
+export default new Component(COMPONENT_NAME, PatchMessageRepeater);

src/app/components/patch-message-repeater/RepeatStrategy.js

@@ -0,0 +1,10 @@
+.repeater-row {
+  justify-content: space-between;
+  align-items: center;
+  margin: 4px 0;
+  padding: 0 4px;
+}
+
+.label {
+  margin: 0 4px 0 0;
+}

src/app/components/patch-message-repeater/index.js

@@ -1,15 +1,4 @@
-
-<div class="message-filter">
-  <p class="label">Pass:</p>
-  <combo-box id="filter-select-box" change="setFilterValue">
-    <option value="1" selected>1</option>
-    <option value="2">2</option>
-    <option value="3">3</option>
-    <option value="4">4</option>
-    <option value="6">6</option>
-    <option value="8">8</option>
-  </combo-box>
-
+<div class="row repeater-row">
   <p class="label">Rep freq:</p>
   <combo-box id="repeat-frequency-select-box" change="setRepeatFrequency">
     <option value="1" selected>1</option>
@@ -19,7 +8,9 @@
     <option value="5">5</option>
     <option value="6">6</option>
   </combo-box>
+</div>
 
+<div class="row repeater-row">
   <p class="label">Rep N:</p>
   <combo-box id="repeat-select-box" change="setRepeatValue">
     <option value="1" selected>1</option>
@@ -31,13 +22,15 @@
     <option value="7">7</option>
     <option value="8">8</option>
   </combo-box>
+</div>
 
+<div class="row repeater-row">
   <p class="label">Mode</p>
   <combo-box id="repeat-modifier" change="setRepeatModifierValue">
     <option value="linear" selected>linear</option>
-    <option value="ramp-up">ramp-up</option>
-    <option value="ramp-down">ramp-down</option>
-    <option value="u-shaped">u-shaped</option>
-    <option value="n-shaped">n-shaped</option>
+    <option value="rampUp">ramp-up</option>
+    <option value="rampDown">ramp-down</option>
+    <option value="uShaped">u-shaped</option>
+    <option value="nShaped">n-shaped</option>
   </combo-box>
 </div>