Визуальная обратная связь 🌀 Bulka

Визуальная обратная связь

Существует несколько функций, которые добавляют визуальную обратную связь к вашим patterns.

Подсветка Mini Notation

Когда вы пишете mini notation с “двойными кавычками” или `обратными кавычками`, активные части mini notation будут подсвечиваться:

n("<0 2 1 3 2>*8")
.scale("<A1 D2>/4:minor:pentatonic")
.s("supersaw").lpf(300).lpenv("<4 3 2>*4")

Вы также можете изменить цвет, даже создать pattern для него:

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")

Глобальные против встроенных визуализаций

Следующие функции имеют 2 варианта.

Без префикса: рендерит визуализацию на фон страницы:

note("c a f e").color("white").punchcard()

С префиксом _: рендерит визуализацию внутри кода. Позволяет использовать несколько визуализаций

note("c a f e").color("white")._punchcard()

Здесь мы видим 2 варианта для punchcard. То же самое работает для всех остальных ниже. Для улучшения читаемости следующие демонстрации будут использовать встроенный вариант.

Punchcard / Pianoroll

Эти 2 функции рендерят визуализацию в стиле pianoroll. Единственная разница между ними в том, что pianoroll будет рендерить pattern напрямую, в то время как punchcard также будет учитывать трансформации, которые происходят после:

note("c a f e").color("white")
._punchcard()
.color("cyan")

Здесь color все еще виден в визуализации, даже если он применен после _punchcard. Напротив, цвет не виден при использовании _pianoroll:

note("c a f e").color("white")
._pianoroll()
.color("cyan")

punchcard менее ресурсоемкий, потому что использует те же данные, что и для подсветки mini notation.

Визуализация может быть настроена путем передачи опций. Эти опции одинаковы для обеих функций.

Далее следует API документация всех опций, которые вы можете передать:

Synonyms: punchcard

Визуализирует pattern в виде прокручивающегося 'pianoroll', отображаемого на фоне редактора. Чтобы показать pianoroll для всех выполняющихся pattern, используйте all(pianoroll). Чтобы pianoroll появился под pattern вместо этого, добавьте префикс _, например: sound("bd sd")._pianoroll().

  • options (Object): Объект, содержащий все следующие необязательные параметры в виде пар ключ-значение:
  • cycles (integer): количество циклов для одновременного отображения - по умолчанию 4
  • playhead (number): позиция активных нот на оси времени - от 0 до 1, по умолчанию 0.5
  • vertical (boolean): отображает roll вертикально - по умолчанию 0
  • labels (boolean): отображает метки на отдельных нотах (см. функцию label) - по умолчанию 0
  • flipTime (boolean): меняет направление roll - по умолчанию 0
  • flipValues (boolean): меняет относительное расположение нот на оси значений - по умолчанию 0
  • overscan (number): просматривает X циклов за пределами окна циклов для предварительного отображения нот - по умолчанию 1
  • hideNegative (boolean): скрывает ноты с отрицательным временем (до начала воспроизведения pattern) - по умолчанию 0
  • smear (boolean): ноты оставляют сплошной след - по умолчанию 0
  • fold (boolean): ноты занимают полную ширину оси значений - по умолчанию 0
  • active (string): шестнадцатеричный или CSS цвет активных нот - по умолчанию #FFCA28
  • inactive (string): шестнадцатеричный или CSS цвет неактивных нот - по умолчанию #7491D2
  • background (string): шестнадцатеричный или CSS цвет фона - по умолчанию transparent
  • playheadColor (string): шестнадцатеричный или CSS цвет линии, представляющей playhead - по умолчанию white
  • fill (boolean): ноты заполнены цветом (иначе отображается только метка) - по умолчанию 0
  • fillActive (boolean): активные ноты заполнены цветом - по умолчанию 0
  • stroke (boolean): ноты отображаются с цветными границами - по умолчанию 0
  • strokeActive (boolean): активные ноты отображаются с цветными границами - по умолчанию 0
  • hideInactive (boolean): отображаются только активные ноты - по умолчанию 0
  • colorizeInactive (boolean): использовать цвет ноты для неактивных нот - по умолчанию 1
  • fontFamily (string): определяет шрифт, используемый для меток нот - по умолчанию 'monospace'
  • minMidi (integer): минимальное значение ноты для отображения на оси значений - по умолчанию 10
  • maxMidi (integer): максимальное значение ноты для отображения на оси значений - по умолчанию 90
  • autorange (boolean): автоматически вычисляет параметры minMidi и maxMidi - по умолчанию 0
note("c2 a2 eb2")
.euclid(5,8)
.s('sawtooth')
.lpenv(4).lpf(300)
.pianoroll({ labels: 1 })

Spiral

Отображает спиральную визуализацию.

  • options (Object): Объект, содержащий все следующие необязательные параметры в виде пар ключ-значение:
  • stretch (number): управляет соотношением вращений за цикл, где 1 = 1 цикл / 360 градусов
  • size (number): диаметр спирали
  • thickness (number): толщина линии
  • cap (string): стиль концов линий: butt (по умолчанию), round, square
  • inset (string): количество вращений до начала спирали (по умолчанию 3)
  • playheadColor (string): цвет playhead, по умолчанию white
  • playheadLength (number): длина playhead во вращениях, по умолчанию 0.02
  • playheadThickness (number): толщина playhead, по умолчанию равна thickness
  • padding (number): пространство вокруг спирали
  • steady (number): устойчивость спирали относительно playhead. 1 = спираль не двигается, двигается playhead.
  • activeColor (number): цвет активного сегмента. по умолчанию foreground темы
  • inactiveColor (number): цвет неактивных сегментов. по умолчанию gutterForeground темы
  • colorizeInactive (boolean): окрашивать ли неактивные сегменты, по умолчанию 0
  • fade (boolean): затухают ли прошлое и будущее. по умолчанию 1
  • logSpiral (boolean): должна ли спираль быть логарифмической. по умолчанию 0
note("c2 a2 eb2")
.euclid(5,8)
.s('sawtooth')
.lpenv(4).lpf(300)
._spiral({ steady: .96 })

Scope

Synonyms: tscope

Рендерит осциллограф для временной области аудиосигнала.

  • config (object): Опциональная конфигурация с параметрами:
  • align (boolean): Если 1, осциллограф будет выровнен по первому пересечению нуля. По умолчанию 1
  • color (string): Цвет линии в виде hex или названия цвета. По умолчанию белый.
  • thickness (number): Толщина линии. По умолчанию 3
  • scale (number): Масштабирует ось y. По умолчанию 0.25
  • pos (number): Позиция по оси y относительно высоты экрана. 0 = верх, 1 = низ экрана
  • trigger (number): Значение амплитуды, используемое для выравнивания осциллографа. По умолчанию 0.
s("sawtooth")._scope()

Pitchwheel

Отрисовывает круг высот для визуализации частот в пределах одной октавы

  • hapcircles (number):
  • circle (number):
  • edo (number):
  • root (string):
  • thickness (number):
  • hapRadius (number):
  • mode (string):
  • margin (number):
n("0 .. 12").scale("C:chromatic")
.s("sawtooth")
.lpf(500)
._pitchwheel()

Spectrum

Рендерит анализатор спектра для входящего аудиосигнала.

  • config (object): Опциональная конфигурация с параметрами:
  • thickness (integer): Толщина линии в px (по умолчанию 3)
  • speed (integer): Скорость прокрутки (по умолчанию 1)
  • min (integer): Минимальное значение в db (по умолчанию -80)
  • max (integer): Максимальное значение в db (по умолчанию 0)
n("<0 4 <2 3> 1>*3")
.off(1/8, add(n(5)))
.off(1/5, add(n(7)))
.scale("d3:minor:pentatonic")
.s('sine')
.dec(.3).room(.5)
._spectrum()

markcss

Переопределяет css для выделенных событий. Обязательно используйте одинарные кавычки!

    note("c a f e")
    .markcss('text-decoration:underline')