commit

src/App.css

@@ -12,7 +12,7 @@
 
   --shadow: 0 0 10px #0002;
   --rounded: 5px;
-  --fast: 0.25s ease;
+  --fast: 0.15s ease;
 }
 
 * {

src/components/Range.tsx

@@ -40,8 +40,6 @@ const Range = ({
     />
     <input
       type="number"
-      min={min}
-      max={max}
       step={step}
       value={value}
       onChange={(event) => onChange(Number(event.target.value))}

src/components/Select.tsx

@@ -10,12 +10,14 @@ type Props<Option> = {
 const Select = <Option extends string>({
   label,
   options,
+  value,
   onChange,
 }: Props<Option>) => (
   <label className="control">
     <span className="control-label">{label}</span>
     <select
       className={classes.select + " control-primary"}
+      value={options[value]}
       onChange={(event) => onChange(event.target.selectedIndex)}
     >
       {options.map((option, index) => (

src/sections/Drift.tsx

@@ -22,7 +22,7 @@ const Drift = () => {
         label="Seed"
         tooltip="Unique character of drift randomness."
         min={0}
-        max={999}
+        max={99}
         step={1}
         value={get.seed}
         defaultValue={defaults.drift.seed}
@@ -32,7 +32,7 @@ const Drift = () => {
         label="Step"
         tooltip="Start drifting toward new value every this number of ticks. Lower = faster, higher = slower."
         min={2 ** 2}
-        max={2 ** 11}
+        max={2 ** 10}
         step={1}
         value={get.step}
         defaultValue={defaults.drift.step}

src/sections/Duration.tsx

@@ -22,7 +22,7 @@ const Duration = () => {
         label="Seed"
         tooltip="Unique character of duration randomness."
         min={0}
-        max={999}
+        max={99}
         step={1}
         value={get.seed}
         defaultValue={defaults.duration.seed}

src/sections/Options.tsx

@@ -14,15 +14,37 @@ const Options = () => {
         label="Grid"
         tooltip="How many subdivisions per beat to show in the piano roll."
         min={1}
-        max={9}
+        max={12}
         step={1}
         value={get.grid}
         defaultValue={defaults.options.grid}
         onChange={(value) => set((state) => ({ ...state, grid: value }))}
       />
+      <Range
+        label="Gap"
+        tooltip="Minimum amount of gap to leave between each note and the next one, in ticks."
+        min={0}
+        max={20}
+        step={1}
+        value={get.gap}
+        defaultValue={defaults.options.gap}
+        onChange={(value) => set((state) => ({ ...state, gap: value }))}
+      />
+      <Checkbox
+        label="Legato"
+        tooltip="Whether to extend each note to the next one, before randomizing."
+        value={get.legato}
+        onChange={(value) => set((state) => ({ ...state, legato: value }))}
+      />
+      <Checkbox
+        label="Poly."
+        tooltip='Whether to treat notes as polyphonic. If on, "next note" in the "Gap" and "Legato" options means the next note of the same pitch. If off, it means the next note in time, regardless of pitch.'
+        value={get.poly}
+        onChange={(value) => set((state) => ({ ...state, poly: value }))}
+      />
       <Checkbox
-        label="Inc. Seed"
-        tooltip="Whether to automatically increment each seed parameter when a new file is loaded. Useful when working on lots of similar files and you don't want them to have the same randomness."
+        label="Seed+"
+        tooltip="Whether to automatically add one to each seed parameter when a new file is loaded. Useful if you're working on lots of similar files and don't want them to have the same randomness."
         value={get.incSeed}
         onChange={(value) => set((state) => ({ ...state, incSeed: value }))}
       />

src/sections/PianoRoll.module.css

@@ -17,6 +17,11 @@
   height: 25%;
 }
 
+.border {
+  fill: none;
+  stroke: var(--black);
+}
+
 .pitchBlack {
   fill: var(--off-white);
   clip-path: url(#shape);
@@ -39,29 +44,33 @@
   stroke: var(--light-gray);
 }
 
-.humanizedNotes {
+.humanizedNote {
   fill: var(--primary);
   stroke: var(--secondary);
 }
 
-.originalNotes {
-  fill: none;
-  stroke: black;
+.humanizedNote {
+  transition: opacity var(--fast);
 }
 
-.velocities {
+.originalNote {
   fill: none;
-  stroke: var(--primary);
-  stroke-width: 3;
+  stroke: var(--dark-gray);
+  transition: opacity var(--fast);
 }
 
-.border {
-  fill: none;
-  stroke: var(--black);
+svg:has(.humanizedNote:hover) .humanizedNote:not(:hover) {
+  opacity: 0.25;
 }
 
-.velocityBg {
-  fill: var(--white);
+svg:hover .originalNote {
+  opacity: 0;
+}
+
+.velocities {
+  fill: none;
+  stroke: var(--primary);
+  stroke-width: 3;
 }
 
 .drift {

src/sections/PianoRoll.tsx

@@ -30,6 +30,11 @@ const PianoRoll = () => {
   const [getBeatGuides] = useAtom(beatGuides);
   const [getHumanized] = useAtom(humanized);
 
+  /** dimensions of piano roll in svg coordinates */
+  const beatY1 = getBeatGuides[0].y1;
+  const beatY2 = getBeatGuides[0].y2;
+  const pitchWidth = getPitchGuides[0].width;
+
   useEffect(() => {
     /** padding around pan extent */
     const padding = noteHeight * 20;
@@ -46,8 +51,8 @@ const PianoRoll = () => {
       })
       /** limit translate */
       .translateExtent([
-        [0 - padding, getBeatGuides[0].y1 - padding],
-        [getPitchGuides[0].width + padding, getBeatGuides[0].y2 + padding],
+        [0 - padding, beatY1 - padding],
+        [pitchWidth + padding, beatY2 + padding],
       ])
       /** limit scale */
       .scaleExtent([0.05, 20])
@@ -83,6 +88,7 @@ const PianoRoll = () => {
       const translateX = topPanel.width / 2 - scale * (x + width / 2);
       const translateY = topPanel.height / 2 - scale * (y + height / 2);
 
+      /** apply transform */
       d3.select(topPanel.ref.current).call(
         zoom.transform,
         d3.zoomIdentity.translate(translateX, translateY).scale(scale)
@@ -97,8 +103,9 @@ const PianoRoll = () => {
       d3.select(topPanel.ref.current).call(zoom).on("dblclick.zoom", fit);
   }, [
     getMidi,
-    getBeatGuides,
-    getPitchGuides,
+    beatY1,
+    beatY2,
+    pitchWidth,
     topPanel.ref,
     topPanel.width,
     topPanel.height,
@@ -165,7 +172,7 @@ const PianoRoll = () => {
                     ? classes.beatMajor
                     : beat.type === "minor"
                     ? classes.beatMinor
-                    : classes.beatGuidesub
+                    : classes.beatSub
                 }
               />
             ))}
@@ -189,6 +196,7 @@ const PianoRoll = () => {
                 y={(127 - note.midi) * noteHeight}
                 width={note.durationTicks}
                 height={noteHeight}
+                className={classes.humanizedNote}
               />
             ))}
           </g>
@@ -202,6 +210,7 @@ const PianoRoll = () => {
                 y={(127 - note.midi) * noteHeight}
                 width={note.durationTicks}
                 height={noteHeight}
+                className={classes.originalNote}
               />
             ))}
           </g>
@@ -230,7 +239,7 @@ const PianoRoll = () => {
                     ? classes.beatMajor
                     : beat.type === "minor"
                     ? classes.beatMinor
-                    : classes.beatGuidesub
+                    : classes.beatSub
                 }
               />
             ))}
@@ -241,7 +250,7 @@ const PianoRoll = () => {
             x={0}
             y={0}
             width={getMidi?.durationTicks || 0}
-            height={bottomPanel.height}
+            height={(bottomPanel.height || 1) - 1}
             className={classes.border}
           />
 
@@ -262,7 +271,7 @@ const PianoRoll = () => {
           <path
             d={driftPath}
             transform={`translate(0, ${bottomPanel.height / 2}) scale(1, ${
-              getDrift.amount / (getDrift.amount + 5)
+              getDrift.amount / (Math.abs(getDrift.amount) + 5)
             })`}
             className={classes.drift}
             opacity={0.75}

src/sections/Start.tsx

@@ -22,7 +22,7 @@ const Start = () => {
         label="Seed"
         tooltip="Unique character of note start randomness."
         min={0}
-        max={999}
+        max={99}
         step={1}
         value={get.seed}
         defaultValue={defaults.start.seed}

src/sections/Velocity.tsx

@@ -22,7 +22,7 @@ const Velocity = () => {
         label="Seed"
         tooltip="Unique character of velocity randomness."
         min={0}
-        max={999}
+        max={99}
         step={1}
         value={get.seed}
         defaultValue={defaults.velocity.seed}