Визуальная обратная связь
Существует несколько функций, которые добавляют визуальную обратную связь к вашим 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 документация всех опций, которые вы можете передать:
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
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')