mirror/strudel
1
0
Fork 0
mirror of https://codeberg.org/uzu/strudel synced 2026-08-15 09:38:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

doc: visual functions

Browse Source
This commit is contained in:
Felix Roos
2024-06-02 23:12:31 +02:00
parent 25981092b1
commit 1acb675f5a
7 changed files with 104 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/docs/MiniRepl.jsx
+2 -2
View File
@@ -34,9 +34,9 @@ export function MiniRepl({
}) {
const code = tunes ? tunes[0] : tune;
const id = useMemo(() => s4(), []);
const canvasId = useMemo(() => `canvas-${id}`, [id]);
autodraw = !!punchcard || !!claviature || !!autodraw;
const shouldShowCanvas = !!punchcard;
const canvasId = shouldShowCanvas ? useMemo(() => `canvas-${id}`, [id]) : null;
autodraw = !!punchcard || !!claviature || !!autodraw;
drawTime = drawTime ?? punchcard ? [0, 4] : [-2, 2];
if (claviature) {
drawTime = [0, 0];
website/src/pages/learn/visual-feedback.mdx
+48 -33
View File
@@ -31,55 +31,70 @@ You can change the color as well, even pattern it:
.color("cyan magenta")`}
/>
## Pianoroll and Punchcard
## Global vs Inline Visuals
The following functions all come with in 2 variants.
**Without prefix**: renders the visual to the background of the page:
<MiniRepl client:idle tune={`note("c a f e").color("white").punchcard()`} />
**With `_` prefix**: renders the visual inside the code. Allows for multiple visuals
<MiniRepl client:idle tune={`note("c a f e").color("white")._punchcard()`} />
Here we see the 2 variants for `punchcard`. The same goes for all others below.
To improve readability the following demos will all use the inline variant.
## Punchcard / Pianoroll
These 2 functions render a pianoroll style visual.
The only difference between the 2 is that `pianoroll` will render the pattern directly,
while `punchcard` will also take the transformations into account that occur afterwards:
<MiniRepl
client:idle
tune={`n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
._punchcard()`}
tune={`note("c a f e").color("white")
._punchcard()
.color("cyan")`}
autodraw
/>
Here, the `color` is still visible in the visual, even if it is applied after `_punchcard`.
On the contrary, the color is not visible when using `_pianoroll`:
<MiniRepl
client:idle
tune={`n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>\*4")
.\_pianoroll()`}
tune={`note("c a f e").color("white")
._pianoroll()
.color("cyan")`}
autodraw
/>
import Box from '@components/Box.astro';
<br />
<Box>
`punchcard` is less resource intensive because it uses the same data as used for the mini notation highlighting.
</Box>
The visual can be customized by passing options. Those options are the same for both functions.
What follows is the API doc of all the options you can pass:
<JsDoc client:idle name="pianoroll" h={0} />
## Spiral
<MiniRepl
client:idle
tune={`n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
._spiral()`}
autodraw
/>
<JsDoc client:idle name="spiral" h={0} />
## Scope
<MiniRepl
client:idle
tune={`n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
._scope()`}
/>
<JsDoc client:idle name="scope" h={0} />
## Pitchwheel
<MiniRepl
client:idle
tune={`n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
._pitchwheel()`}
/>
{/* <JsDoc client:idle name="pianoroll" h={0} /> */}
<JsDoc client:idle name="pitchwheel" h={0} />