нажми play (Ctrl+Enter)
Этот сайт показывает анимацию с мерцанием, контрастными вспышками и быстро меняющимися цветами, синхронизированную с музыкой. В редких случаях подобное может вызвать дискомфорт или приступ у людей с фоточувствительной эпилепсией. Если у тебя или у кого-то рядом бывали такие реакции — не продолжай или смотри с осторожностью: на расстоянии от экрана, в хорошо освещённой комнате, с перерывами.
Сервис предоставляет среду для написания и исполнения пользовательского кода, включая код на языке JavaScript (через Strudel) и шейдеры на языке GLSL. Код исполняется локально в браузере пользователя. Пользователь самостоятельно и под свою полную ответственность принимает решение о запуске любого кода — как введённого им самостоятельно, так и полученного из внешних источников, в том числе по ссылкам, которыми поделились третьи лица.
Сервис предоставляется на условиях «как есть» (as is) и «по мере доступности» (as available), без каких-либо гарантий, явных или подразумеваемых. Администрация сервиса не несёт ответственности за любой прямой или косвенный ущерб, утрату данных, сбои в работе устройства или иные последствия, возникшие в результате использования сервиса и (или) исполнения любого кода.
Продолжая использование сервиса, пользователь подтверждает, что ознакомлен с настоящим уведомлением, согласен с ним и принимает указанные риски на себя.
Слева пишешь музыку на Strudel и шейдер на GLSL. Кнопка play / update применяет код вживую (или Ctrl/Cmd+Enter), stop — глушит, share — пишет видео-клип длиной в целое число циклов, link — копирует ссылку со сценой, vol — общая громкость.
Паттерны в мини-нотации: s("bd*4"), аккорды, эффекты, arrange().
Полный туториал и справка: strudel.cc/learn.
Длину лупа для uBeat можно задать комментарием // loop: N
в начале паттерна (по умолчанию 24).
Ты пишешь функцию mainImage(out vec4 fragColor, in vec2 fragCoord) —
она выполняется для каждого пикселя и возвращает его цвет. Движок прокидывает
туда «ручки» (uniforms), которые движутся под музыку. Введение в GLSL:
thebookofshaders.com.
vec2 uResolution — размер кадра в пикселяхfloat uTime — секунды с запуска (непрерывно растёт)float uKick — импульс бочки (всплеск к 1, затухает)float uSnare — импульс снейра/клэпаfloat uHat — импульс хэтовfloat uPitch — высота последней ноты в октаве, 0..1float uHue — оттенок, плавно ведётся за гармонией, 0..1float uEnergy — плотность/громкость потока, 0..1 (прокси «интро↔дроп»)float uPad — сустейн гармонических синтов (пэд), мягкая огибающаяfloat uBeat — позиция в лупе в циклах: 0..N; floor(uBeat) = номер тактаfloat uLoop — позиция в лупе нормированная 0..1 (сбрасывается в 0 на конце)float uBeatFrac — фаза внутри текущего цикла, 0..1Пример: floor(uBeat) даёт номер такта — можно менять
сцену по тактам; uLoop хорош для плавных переходов через весь луп.
.vis()Движок угадывает тип звука по имени (bd→kick, hh→hat, синты→pad). Если
грузишь свои сэмплы и хочешь точно управлять, помечай дорожку тегом:
s("mysample").vis("kick"). Доступные группы:
kick, snare, hat, pad,
bass, lead. Явный тег важнее автоугадывания.
Ctrl/Cmd + Enter — запустить / обновитьTab — принять автокомплит или сделать отступShift + Tab — убрать отступ