---
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} />