format

website/src/repl/components/panel/SettingsTab.jsx

@@ -6,7 +6,7 @@ import { ButtonGroup } from './Forms.jsx';
 import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
 import { confirmDialog } from '../../util.mjs';
-import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony } from '@strudel/webaudio';
+import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
@@ -108,6 +108,7 @@ export function SettingsTab({ started }) {
     audioEngineTarget,
     togglePanelTrigger,
     maxPolyphony,
+    multiChannelOrbits,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -162,6 +163,17 @@ export function SettingsTab({ started }) {
           value={maxPolyphony ?? ''}
         />
       </FormItem>
+      <FormItem>
+        <Checkbox
+          label="Multi Channel Orbits"
+          onChange={(cbEvent) => {
+            const val = cbEvent.target.checked;
+            settingsMap.setKey('multiChannelOrbits', val);
+            setMultiChannelOrbits(val);
+          }}
+          value={multiChannelOrbits}
+        />
+      </FormItem>
       <FormItem label="Theme">
         <SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
       </FormItem>

website/src/repl/useReplContext.jsx

@@ -18,7 +18,7 @@ import { setVersionDefaultsFrom } from './util.mjs';
 import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
 import { clearHydra } from '@strudel/hydra';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { settingsMap, useSettings } from '../settings.mjs';
+import { parseBoolean, settingsMap, useSettings } from '../settings.mjs';
 import {
   setActivePattern,
   setLatestCode,
@@ -36,11 +36,15 @@ import './Repl.css';
 import { setInterval, clearInterval } from 'worker-timers';
 import { getMetadata } from '../metadata_parser';
 
-const { latestCode, maxPolyphony, audioDeviceName } = settingsMap.get();
+const { latestCode, maxPolyphony, audioDeviceName, multiChannelOrbits } = settingsMap.get();
 let modulesLoading, presets, drawContext, clearCanvas, audioReady;
 
 if (typeof window !== 'undefined') {
-  audioReady = initAudioOnFirstClick({ maxPolyphony, audioDeviceName });
+  audioReady = initAudioOnFirstClick({
+    maxPolyphony,
+    audioDeviceName,
+    multiChannelOrbits: parseBoolean(multiChannelOrbits),
+  });
   modulesLoading = loadModules();
   presets = prebake();
   drawContext = getDrawContext();

website/src/settings.mjs

@@ -38,6 +38,7 @@ export const defaultSettings = {
   isButtonRowHidden: false,
   isCSSAnimationDisabled: false,
   maxPolyphony: 128,
+  multiChannelOrbits: false,
 };
 
 let search = null;
@@ -50,7 +51,7 @@ const settings_key = `strudel-settings${instance > 0 ? instance : ''}`;
 
 export const settingsMap = persistentMap(settings_key, defaultSettings);
 
-const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
+export const parseBoolean = (booleanlike) => ([true, 'true'].includes(booleanlike) ? true : false);
 
 export function useSettings() {
   const state = useStore(settingsMap);
@@ -81,6 +82,7 @@ export function useSettings() {
     isPanelPinned: parseBoolean(state.isPanelPinned),
     isPanelOpen: parseBoolean(state.isPanelOpen),
     userPatterns: userPatterns,
+    multiChannelOrbits: parseBoolean(state.multiChannelOrbits),
   };
 }