mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-12 06:08:34 +00:00
109 lines
2.6 KiB
Plaintext
109 lines
2.6 KiB
Plaintext
---
|
|
title: Visual Feedback
|
|
layout: ../../layouts/MainLayout.astro
|
|
---
|
|
|
|
import { MiniRepl } from '../../docs/MiniRepl';
|
|
import { JsDoc } from '../../docs/JsDoc';
|
|
|
|
# Visual Feedback
|
|
|
|
There are several function that add visual feedback to your patterns.
|
|
|
|
## Mini Notation Highlighting
|
|
|
|
When you write mini notation with "double quotes" or \`backticks\`, the active parts of the mini notation will be highlighted:
|
|
|
|
<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")`}
|
|
/>
|
|
|
|
You can change the color as well, even pattern it:
|
|
|
|
<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")
|
|
.color("cyan magenta")`}
|
|
/>
|
|
|
|
## 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={`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={`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
|
|
|
|
<JsDoc client:idle name="spiral" h={0} />
|
|
|
|
## Scope
|
|
|
|
<JsDoc client:idle name="scope" h={0} />
|
|
|
|
## Pitchwheel
|
|
|
|
<JsDoc client:idle name="pitchwheel" h={0} />
|
|
|
|
## Spectrum
|
|
|
|
<JsDoc client:idle name="spectrum" h={0} />
|
|
|
|
## markcss
|
|
|
|
<JsDoc client:idle name="markcss" h={0} />
|