From b4cfdc3c5407c92f7c1543ec7c05b7b3d9d99719 Mon Sep 17 00:00:00 2001 From: MelekTaus Date: Sat, 10 Oct 2026 14:30:09 +0200 Subject: [PATCH] Describe the Filter's editor and resizable EQ and Filter nodes (#385) - Sounds: the Filter's editor in its node and its tab, with the spectrum. - Sounds: new sections Resizing a node and Little room, the EQ's node without its help line. - Architecture: BandCurve, CurvePanel, FilterPanel, CurveFace and the corner drag in graphDrags. - Development: 1961 editor checks. Co-Authored-By: Claude Opus 5.5 --- Architecture.md | 12 ++++++++---- Development.md | 2 +- Sounds.md | 42 ++++++++++++++++++++++++++++++++++++++---- 3 files changed, 47 insertions(+), 9 deletions(-) diff --git a/Architecture.md b/Architecture.md index 8403695..4ab5cb2 100644 --- a/Architecture.md +++ b/Architecture.md @@ -368,7 +368,8 @@ src/editor/panels/ AssetPanel, assetGroups (the categories, the type groups src/editor/graph/ GraphEditor (header, breadcrumb), GraphCanvas and what it lends its gestures through `GraphCanvasHost`: wiring (making edges — a drag from a pin, the palette a drop into empty space opens, a transition armed from a state's menu), graphDrags (nodes, groups and - comments moved or resized, each gesture one undo step), annotationLayer (the boxes behind + comments moved or resized, a node whose face may be resized by its corner, #385, each + gesture one undo step), annotationLayer (the boxes behind the edges); graphView (zoom limits, grid, panAndZoom — shared with NodeBoard and the Tile tab's TileCanvas — and `inView`, which nodes are in the picture, #292), EdgeLayer (curves and fold marks), graphMenus, NodeView (and a face instead of the rows, a widget between the inputs and the outputs, #380: `nodeFace.ts`) + portRow (how an input and an output share one row, #306), NodePalette + paletteEntries (which also ranks a search), folding (hidden links, collapsed nodes), Breadcrumb + trail (the path into nested behaviors), beads (the run's pulses and the clock that launches them), AnnotationView + annotationDrag (groups and comments: what a drag carries, each thing moved once), @@ -417,9 +418,12 @@ src/editor/sound/ SoundEditor (#343: header with Play, the clip's direction browser and let go once no longer wanted) src/editor/soundfx/ SoundFxEditor (#311: the graph, a sound to try it on, Play and Stop), PreviewParams (the header's fields for the parameters a tab plays with, shared with the Instrument tab), - EqPanel + eqView (#367: the Parametric EQ's curve and band numbers, its handles on - the picture, and the spectrum behind the curve, #374), EqEditor (#370: the panel in - a tab of its own), EqFace (#381: the panel in the node), CompressorEditor + + CurvePanel + BandCurve + eqView (#367, #385: the curve of filter bands and the picked + band's numbers, its handles on the picture, the spectrum behind it, #374, and what is + left out when the room is small: `fittingCount`, `shownRows`, `apartLabels`), EqPanel + and FilterPanel (#385: the Parametric EQ's bands and a Filter's one band on it), + EqEditor (#370: either panel in a tab of its own), CurveFace (#381, #385: + the panel in the node, resizable by its corner), CompressorEditor + compressorView (#378: the Compressor's tab, its knobs, its curve with threshold and ratio to drag, and the levels in and out tinted where it squeezes), CompressorPanel + hardwareView (#379: the Compressor as a device, its meter, LEDs and plate worked diff --git a/Development.md b/Development.md index 3989d50..bb40fa9 100644 --- a/Development.md +++ b/Development.md @@ -19,7 +19,7 @@ php tests/php/accounts.test.php # the API's accoun php tests/php/snapshots.test.php # the snapshot store (#231), the same way php tests/php/releases.test.php # the release store (#266), the same way php tests/php/files.test.php # uploaded files in a folder per account (#344), the same way -node tools/seed-e2e.mjs && node tools/e2e.mjs # 1957 editor checks, screenshots in /tmp/gm-e2e-*.png +node tools/seed-e2e.mjs && node tools/e2e.mjs # 1961 editor checks, screenshots in /tmp/gm-e2e-*.png GM_STEPS=20 node tools/e2e.mjs # or 1-12, or 6,20 — a subset while working on one step ./e2e.sh start [GM_STEPS] # the same run detached, see below ./e2e.sh status # live progress, or the last run's result diff --git a/Sounds.md b/Sounds.md index 80e2778..d7e35d6 100644 --- a/Sounds.md +++ b/Sounds.md @@ -428,7 +428,7 @@ response of a Reverb, and as what the Sound FX tab tries out. Its row means noth | **Pitch** | Higher or lower, in semitones (12 is an octave, 0.5 a quarter tone). The sound **keeps its length**, also when the pitch changes while it plays. The pitch is made where the sound is read, so an effect before the Pitch acts as if it came after it. On a [Chip](Instruments#chips) of an instrument it moves the frequency of the Chip itself. Its `wet` takes the semitones from 0 up to all of them, see [below](#bypass-and-wet). | | **5-Band-EQ** | Five bands in dB: 80 Hz and 12 kHz as shelves, 250 Hz, 1 kHz and 4 kHz as peaks. A band at 0 does nothing. | | **Parametric EQ** | Up to 10 bands, each a filter of its own type, frequency, gain, Q and slope, drawn together as one curve. The node shows its editor right in the graph, and a **double-click on the node's title** opens the same in a tab. Both show the spectrum of what passes the node. A new node has no band and does nothing. See [below](#parametric-eq). | -| **Filter** | **Type** *Low-pass* (the default) takes away what is above `frequency` (Hz, 1000 by default), *High-pass* what is below it, *Band-pass* all but a band around it and *Notch* just that band. *Low shelf* and *High shelf* raise or lower everything below or above it by `gain` (dB), *Peaking* a band around it; only these three have the `gain` row. *All-pass* leaves every frequency as loud as it was and only turns its phase. `Q` (0.707 by default) says how sharp it is: at 0.707 a low- or high-pass has no bump, higher it rings at the frequency, and a band, a notch or a peak gets narrower. **Slope** makes a low-pass, high-pass, band-pass or notch steeper: *12 dB/oct* is one filter, *24* two and *48* four in a row, and only the last of them has the Q. In an [instrument](Instruments#envelopes) an Envelope can move all three numbers while a note plays. See [below](#filter). | +| **Filter** | **Type** *Low-pass* (the default) takes away what is above `frequency` (Hz, 1000 by default), *High-pass* what is below it, *Band-pass* all but a band around it and *Notch* just that band. *Low shelf* and *High shelf* raise or lower everything below or above it by `gain` (dB), *Peaking* a band around it; only these three have the `gain` row. *All-pass* leaves every frequency as loud as it was and only turns its phase. `Q` (0.707 by default) says how sharp it is: at 0.707 a low- or high-pass has no bump, higher it rings at the frequency, and a band, a notch or a peak gets narrower. **Slope** makes a low-pass, high-pass, band-pass or notch steeper: *12 dB/oct* is one filter, *24* two and *48* four in a row, and only the last of them has the Q. In an [instrument](Instruments#envelopes) an Envelope can move all three numbers while a note plays. The node draws itself as a curve and is edited right in the graph, and a **double-click on the node's title** opens the same in a tab. See [below](#filter). | | **Mix** | Blends the sounds at `a` and `b`: at 0 only `a` is heard, at 1 only `b` (0.5 is the default). **Curve** says what lies between: *Crossfade* (the default) gives half of each at 0.5, *Both at center* keeps each full up to the middle. See [below](#the-curve-of-a-mix). | | **Delay** | An echo: the sound comes back after `time`, again and again, each time `feedback` times as loud. **Sync** says what `time` counts: *Seconds*, or *Beats* in quarter notes at the tempo of the voice. `damping` makes every echo duller than the last. `wet` (0.5) is the sound alone at 0, the sound and its echoes in full at 0.5, the echoes alone at 1. **Ping-pong** sends the echoes left and right in turn. See [below](#delay-and-the-tail-of-a-voice). | | **Bitcrusher** | Makes the sound rough, like an old console. `bits` rounds it to fewer steps (8 by default), `rate` takes a sample only so many times a second and holds it until the next (8000 Hz by default), `wet` is how much of the crushed sound is heard instead of the sound itself (1 by default). See [below](#bitcrusher). | @@ -649,6 +649,17 @@ A **Filter** (#335, #318) is Web Audio's `BiquadFilterNode`, every type it has. - **Measured** (2026-10-07, e2e 34, Chrome offline): a 2 kHz sine through a low-pass at 1 kHz with Q 0.707 came out 12.37 dB quieter at 12 dB/oct and 49.5 dB quieter at 48 dB/oct. A peak of +6 dB at 1 kHz raised a 1 kHz sine by 6.00 dB, a notch there took it down by 124 dB. +- **The editor** (#385) is the curve of the [Parametric EQ](#parametric-eq) with the Filter as its one + band, the all-pass drawn flat. The node shows it between its inputs and its output, 560 x 280 + until it is [resized](#resizing-a-node), and a double-click on its title or its edge opens the + same in a tab of its own (`Filter`, `Filter 2` … as for the EQ). Dragging the handle sets + `frequency` and, for a shelf or a peak, `gain`, one undo step for both. Below the curve are *Type*, + `Hz`, `dB`, `Q` and *Slope*. A number fed by a link is greyed out and the handle leaves it alone. + The mouse wheel turns `Q` over the handle and zooms the dB elsewhere, in the tab only, as for the EQ. + Delete in the Filter's tab does nothing: there is no band to take, and the node stays. +- **Spectrum:** as for the EQ, while the node or its tab is seen, the spectrum of what passes the Filter + is drawn behind its curve, faint as it comes in and strong as it goes on. In an instrument every + voice passing the Filter feeds it. ### Parametric EQ @@ -673,8 +684,9 @@ sound FX and in an instrument alike. after loading, and it is no undo step: Ctrl+Z undoes edits, not a look at the curve. The spectrum keeps its own scale. - **In the node** (#381) the editor sits between the inputs on the left and the output on the - right, 720 x 360 at full size, the curve, the band's numbers and a line of help. It is worked - there as in the tab, and each edit is one undo step there as well. Three things differ: + right, 720 x 360 until it is [resized](#resizing-a-node), the curve and the band's numbers. The line + of help is left out there (#385). It is worked there as in the tab, and each edit is one undo step + there as well. Three things differ: - The mouse wheel zooms the graph wherever it turns, over a handle too (#383). Q and the dB zoom are set in the tab, and the node shows the dB the tab is zoomed to. - A press on the curve neither picks nor moves the node, a press on its title or its edge does. @@ -695,7 +707,8 @@ sound FX and in an instrument alike. band a sixth of an octave narrower or wider, anywhere else it zooms (see above). A right-click on a handle removes the band. - **Below the curve** are the numbers of the picked band: *Type*, `Hz`, `dB`, `Q` and *Slope*. - A row the type does nothing with is greyed out. + A row the type does nothing with is greyed out. How much of it is drawn depends on the room, see + [Little room](#little-room). - **Types:** *Peaking*, *Low shelf*, *High shelf*, *Low cut* (a high-pass), *High cut* (a low-pass), *Band-pass* and *Notch*. *Slope* (12, 24 or 48 dB/oct) is there for the cuts, the band-pass and the notch, as on the [Filter](#filter). A shelf has no Q. @@ -710,6 +723,27 @@ sound FX and in an instrument alike. - The bands are saved on the node as a list (`bands`), the zoom as a number (`range`). They have no input, so a parameter of the Input or an Envelope cannot move them. Bypass and `wet` work as on every effect. +### Resizing a node + +A Parametric EQ and a Filter node (#385) have a corner at their lower right, drawn like the one of a +floating window. Dragging it makes the editor in the node larger or smaller, down to 240 x 120, +with no upper limit. With the magnet on, the corner lands on the grid. Each drag is one undo step. +The size is saved on the node (`size`, the editor's own, without the ports beside it). A node that +was never resized keeps its full size: 720 x 360 for the EQ, 560 x 280 for the Filter. + +### Little room + +The editors of the EQ and the Filter leave things out rather than cutting them (#385), in the node, +in the tab and in a floating window alike: + +- **The row of numbers** comes in only once the curve keeps 120 pixels of height above it. Smaller, + only the curve is drawn. +- **The help line** of the tab comes in only once the row has come in as well. +- **In the row**, a group that does not fit is not drawn at all, the one on the right first: the + band count, then *Slope*, `Q`, `dB`, `Hz`, *Type*. Nothing is cut in half or scrolled. +- **The labels of the curve:** a frequency or a dB label that would run into the one before it is + left out. + ### Compressor and Limiter Both (#326) work on the whole sound passing them: on a voice that is one sound, on a