1---
2title: Visual Feedback
3layout: ../../layouts/MainLayout.astro
4---
5
6import { MiniRepl } from '../../docs/MiniRepl';
7import { JsDoc } from '../../docs/JsDoc';
8
9# Visual Feedback
10
11There are several function that add visual feedback to your patterns.
12
13## Mini Notation Highlighting
14
15When you write mini notation with "double quotes" or \`backticks\`, the active parts of the mini notation will be highlighted:
16
17<MiniRepl
18  client:idle
19  tune={`n("<0 2 1 3 2>*8")
20.scale("<A1 D2>/4:minor:pentatonic")
21.s("supersaw").lpf(300).lpenv("<4 3 2>\*4")`}
22/>
23
24You can change the color as well, even pattern it:
25
26<MiniRepl
27  client:idle
28  tune={`n("<0 2 1 3 2>*8")
29.scale("<A1 D2>/4:minor:pentatonic")
30.s("supersaw").lpf(300).lpenv("<4 3 2>*4")
31.color("cyan magenta")`}
32/>
33
34## Global vs Inline Visuals
35
36The following functions all come with in 2 variants.
37
38**Without prefix**: renders the visual to the background of the page:
39
40<MiniRepl client:idle tune={`note("c a f e").color("white").punchcard()`} />
41
42**With `_` prefix**: renders the visual inside the code. Allows for multiple visuals
43
44<MiniRepl client:idle tune={`note("c a f e").color("white")._punchcard()`} />
45
46Here we see the 2 variants for `punchcard`. The same goes for all others below.
47To improve readability the following demos will all use the inline variant.
48
49## Punchcard / Pianoroll
50
51These 2 functions render a pianoroll style visual.
52The only difference between the 2 is that `pianoroll` will render the pattern directly,
53while `punchcard` will also take the transformations into account that occur afterwards:
54
55<MiniRepl
56  client:idle
57  tune={`note("c a f e").color("white")
58._punchcard()
59.color("cyan")`}
60  autodraw
61/>
62
63Here, the `color` is still visible in the visual, even if it is applied after `_punchcard`.
64On the contrary, the color is not visible when using `_pianoroll`:
65
66<MiniRepl
67  client:idle
68  tune={`note("c a f e").color("white")
69._pianoroll()
70.color("cyan")`}
71  autodraw
72/>
73
74import Box from '@components/Box.astro';
75
76<br />
77
78<Box>
79
80`punchcard` is less resource intensive because it uses the same data as used for the mini notation highlighting.
81
82</Box>
83
84The visual can be customized by passing options. Those options are the same for both functions.
85
86What follows is the API doc of all the options you can pass:
87
88<JsDoc client:idle name="pianoroll" h={0} />
89
90## Spiral
91
92<JsDoc client:idle name="spiral" h={0} />
93
94## Scope
95
96<JsDoc client:idle name="scope" h={0} />
97
98## Pitchwheel
99
100<JsDoc client:idle name="pitchwheel" h={0} />
101
102## Spectrum
103
104<JsDoc client:idle name="spectrum" h={0} />
105
106## markcss
107
108<JsDoc client:idle name="markcss" h={0} />