streamline series nodes

- sort inputs on series - fix output for arithmetic series - update harmonic series
tokens-studio · Nov 23, 2023 · 44e929d · 44e929d
1 parent 3f73235
commit 44e929d
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 96 deletions.
diff --git a/packages/graph-editor/src/components/flow/nodes/series/arithmeticNode.tsx b/packages/graph-editor/src/components/flow/nodes/series/arithmeticNode.tsx
@@ -39,20 +39,6 @@ const ArithmeticNode = (props) => {
   return (
     <Stack direction="row" gap={4}>
       <HandleContainer type="target">
-        <Handle id="base">
-          <Stack direction="row" justify="between" gap={3} align="center">
-            <Label>Base</Label>
-            {input?.base ? (
-              <PreviewNumber value={input.base} />
-            ) : (
-              <TextInput
-                data-key="base"
-                value={state.base}
-                onChange={onChange}
-              />
-            )}
-          </Stack>
-        </Handle>
 
         <Handle id="stepsDown">
           <LabelNoWrap>Steps Down</LabelNoWrap>
@@ -80,6 +66,21 @@ const ArithmeticNode = (props) => {
           )}
         </Handle>
 
+        <Handle id="base">
+          <Stack direction="row" justify="between" gap={3} align="center">
+            <Label>Base</Label>
+            {input?.base ? (
+              <PreviewNumber value={input.base} />
+            ) : (
+              <TextInput
+                data-key="base"
+                value={state.base}
+                onChange={onChange}
+              />
+            )}
+          </Stack>
+        </Handle>
+
         <Handle id="increment">
           <Stack direction="row" justify="between" gap={3} align="center">
             <Label>Increment</Label>

diff --git a/packages/graph-editor/src/components/flow/nodes/series/geometricNode.tsx b/packages/graph-editor/src/components/flow/nodes/series/geometricNode.tsx
@@ -39,26 +39,7 @@ const GeometricNode = (props) => {
   return (
     <Stack direction="row" gap={4}>
       <HandleContainer type="target">
-        <Handle id="base">
-          <LabelNoWrap>Base</LabelNoWrap>
-          {input.base ? (
-            <PreviewNumber value={input.base} />
-          ) : (
-            <TextInput data-key="base" value={state.base} onChange={onChange} />
-          )}
-        </Handle>
-        <Handle id="ratio">
-          <LabelNoWrap>Ratio</LabelNoWrap>
-          {input.ratio ? (
-            <PreviewNumber value={input.ratio} />
-          ) : (
-            <TextInput
-              data-key="ratio"
-              value={state.ratio}
-              onChange={onChange}
-            />
-          )}
-        </Handle>
+
         <Handle id="stepsDown">
           <LabelNoWrap>Steps Down</LabelNoWrap>
           {input.stepsDown ? (
@@ -71,8 +52,9 @@ const GeometricNode = (props) => {
             />
           )}
         </Handle>
+
         <Handle id="steps">
-          <LabelNoWrap>Steps</LabelNoWrap>
+          <LabelNoWrap>Steps Up</LabelNoWrap>
           {input.steps ? (
             <PreviewNumber value={input.steps} />
           ) : (
@@ -84,6 +66,28 @@ const GeometricNode = (props) => {
           )}
         </Handle>
 
+        <Handle id="base">
+          <LabelNoWrap>Base</LabelNoWrap>
+          {input.base ? (
+            <PreviewNumber value={input.base} />
+          ) : (
+            <TextInput data-key="base" value={state.base} onChange={onChange} />
+          )}
+        </Handle>
+
+        <Handle id="ratio">
+          <LabelNoWrap>Ratio</LabelNoWrap>
+          {input.ratio ? (
+            <PreviewNumber value={input.ratio} />
+          ) : (
+            <TextInput
+              data-key="ratio"
+              value={state.ratio}
+              onChange={onChange}
+            />
+          )}
+        </Handle>
+
         <Handle id="precision">
           <Stack direction="row" justify="between" align="center" gap={3}>
             <Text>Precision</Text>

diff --git a/packages/graph-editor/src/components/flow/nodes/series/harmonicNode.tsx b/packages/graph-editor/src/components/flow/nodes/series/harmonicNode.tsx
@@ -39,26 +39,7 @@ const HarmonicNode = (props) => {
   return (
     <Stack direction="row" gap={4}>
       <HandleContainer type="target">
-        <Handle id="base">
-          <LabelNoWrap>Base</LabelNoWrap>
-          {input.base ? (
-            <PreviewNumber value={input.base} />
-          ) : (
-            <TextInput data-key="base" value={state.base} onChange={onChange} />
-          )}
-        </Handle>
-        <Handle id="ratio">
-          <LabelNoWrap>Ratio</LabelNoWrap>
-          {input.ratio ? (
-            <PreviewNumber value={input.ratio} />
-          ) : (
-            <TextInput
-              data-key="ratio"
-              value={state.ratio}
-              onChange={onChange}
-            />
-          )}
-        </Handle>
+
         <Handle id="stepsDown">
           <LabelNoWrap>Steps Down</LabelNoWrap>
           {input.stepsDown ? (
@@ -71,8 +52,9 @@ const HarmonicNode = (props) => {
             />
           )}
         </Handle>
+
         <Handle id="steps">
-          <LabelNoWrap>Steps</LabelNoWrap>
+          <LabelNoWrap>Steps Up</LabelNoWrap>
           {input.steps ? (
             <PreviewNumber value={input.steps} />
           ) : (
@@ -83,6 +65,29 @@ const HarmonicNode = (props) => {
             />
           )}
         </Handle>
+
+        <Handle id="base">
+          <LabelNoWrap>Base</LabelNoWrap>
+          {input.base ? (
+            <PreviewNumber value={input.base} />
+          ) : (
+            <TextInput data-key="base" value={state.base} onChange={onChange} />
+          )}
+        </Handle>
+
+        <Handle id="ratio">
+          <LabelNoWrap>Ratio</LabelNoWrap>
+          {input.ratio ? (
+            <PreviewNumber value={input.ratio} />
+          ) : (
+            <TextInput
+              data-key="ratio"
+              value={state.ratio}
+              onChange={onChange}
+            />
+          )}
+        </Handle>
+
         <Handle id="notes">
           <LabelNoWrap>Notes</LabelNoWrap>
           {input.notes ? (

diff --git a/packages/graph-engine/src/nodes/series/arithmetic.ts b/packages/graph-engine/src/nodes/series/arithmetic.ts
@@ -10,50 +10,51 @@ export const defaults = {
   precision: 2,
 };
 
+export type ArithemeticValue = {
+  index: number;
+  value: number;
+};
+
 export const process = (input, state) => {
   const final = {
     ...state,
     ...input,
   };
 
-  const sizes: Output = [];
+  const values: ArithemeticValue[] = [];
   //Fixes issue with string concatenation
   const base = parseFloat(final.base);
   const shift = 10 ** final.precision;
 
   for (let i = Math.abs(final.stepsDown); i > 0; i--) {
     const value = Math.round((base - final.increment * i) * shift) / shift;
-    sizes.push({
-      step: 0 - i,
-      size: value,
+    values.push({
+      index: 0 - i,
+      value: value,
     });
   }
-  sizes.push({
-    step: 0,
-    size: Math.round(final.base * shift) / shift,
+  values.push({
+    index: 0,
+    value: Math.round(final.base * shift) / shift,
   });
 
   for (let i = 0; i < Math.abs(final.steps); i++) {
     const value = Math.round((base + final.increment * (i + 1)) * shift) / shift;
-    sizes.push({
-      step: i + 1,
-      size: value,
+    values.push({
+      index: i + 1,
+      value: value,
     });
   }
 
-  return sizes;
+  return values;
 };
 
-export type Output = {
-  size: number;
-  step: number;
-}[];
 
-export const mapOutput = (input, state, processed) => {
-  const mapped = { asArray: processed.map((item) => item.size) };
+export const mapOutput = (input, state, processed: ArithemeticValue[]) => {
+  const mapped = { asArray: processed };
 
   processed.forEach((item) => {
-    mapped[`${item.step}`] = item.size;
+    mapped[item.index] = item.value;
   });
   return mapped;
 };

diff --git a/packages/graph-engine/src/nodes/series/geometric.ts b/packages/graph-engine/src/nodes/series/geometric.ts
@@ -24,13 +24,13 @@ export const process = (input, state) => {
   const values: GeometricValue[] = [];
   const shift = 10 ** final.precision;
 
-  for (let i = 0 - final.stepsDown; i < final.steps; i++) {
+  for (let i = 0 - final.stepsDown; i <= final.steps; i++) {
     const value = Math.round((final.base * Math.pow(final.ratio, i)) * shift) / shift;
     values.push({
-      value,
       index: i,
+      value
     });
-  }
+  } 
 
   return values;
 };

diff --git a/packages/graph-engine/src/nodes/series/harmonic.ts b/packages/graph-engine/src/nodes/series/harmonic.ts
@@ -4,17 +4,16 @@ export const type = NodeTypes.HARMONIC_SERIES;
 
 export const defaults = {
   base: 16,
-  ratio: 1.5,
+  ratio: 2,
   stepsDown: 0,
   steps: 5,
-  notes: 1,
+  notes: 5,
   precision: 2,
 };
 
 type HarmonicValue = {
-  size: number;
-  frequency: number;
-  note: number;
+  index: number;
+  value: number;
 };
 
 export const process = (input, state) => {
@@ -25,28 +24,24 @@ export const process = (input, state) => {
 
   const values: HarmonicValue[] = [];
 
-  for (let i = 0 - final.stepsDown; i < final.steps; i++) {
-    for (let j = 0; j < final.notes; j++) {
-      const shift = 10 ** final.precision;
-      const size =
-        final.base * Math.pow(final.ratio, (i * final.notes + j) / final.notes);
-      const rounded = Math.round(size * shift) / shift;
-      values.push({
-        size: rounded,
-        frequency: i,
-        note: j,
-      });
-    }
+  for (let i = 0 - final.stepsDown; i <= final.steps; i++) {
+    const shift = 10 ** final.precision;
+    const size = final.base * Math.pow(final.ratio, (i / final.notes));
+    const rounded = Math.round(size * shift) / shift;
+    values.push({
+      index: i,
+      value: rounded,
+    });
   }
 
-  return values;
+  return values; 
 };
 
 export const mapOutput = (input, state, processed: HarmonicValue[]) => {
   const mapped = { asArray: processed };
 
   processed.forEach((item) => {
-    mapped[`${item.frequency}-${item.note}`] = item.size;
+    mapped[item.index] = item.value;
   });
   return mapped;
 };