Як це працює
Нагорі липка пісочниця. Там справжня Hydra (hydra-synth), вона малює прямо в цій сторінці. Біля кожного прикладу є кнопка ▶ підставити і запустити: вона кладе код у поле й одразу малює. Спершу дивишся тут, потім повторюєш руками в mandflok і ставиш галочку.
У полі пісочниці теж працюють Ctrl+Enter (запустити) і Ctrl+. (стоп), як у mandflok. Мікрофон не потрібен.
Перша картинка
Відкрий сесію з Hydra
Тисни flok.mandrock.me/#targets=hydra. Створиться нова сесія з випадковою назвою і панеллю Hydra.
Угорі панелі вже стоять чотири рядки коментарів (// …). Їх можна не чіпати, вони нічого не малюють. Пиши під ними.
Один рядок + Ctrl+Enter
osc().out()У mandflok: курсор у рядок, Ctrl+Enter (на Mac Cmd+Enter). Згасити все: Ctrl+.
.out() у кінці обов'язковий, без нього нічого не малюється. mandflok ще й плавно перетікає зі старої картинки в нову, тож секундна пауза нормальна, нічого не зламалось.osc: три ручки
osc(частота, швидкість, колір)
osc(10, 0.1, 0).out()osc(40, 0.1, 0).out()osc(10, 0.5, 0).out()osc(10, 0.1, 2).out()У mandflok міняй одне число за раз і тисни Ctrl+Enter знову. Так одразу видно, що зробила саме ця ручка.
Ланцюг: колір, поворот, калейдоскоп
Кожна крапка міняє картинку
osc(20, 0.1, 1.5).color(1, 0.3, 0.4).out()osc(20, 0.1, 1.5).rotate(0.5).out()osc(20, 0.1, 1.5).kaleid(5).out()Тепер усе разом
osc(20, 0.1, 1.5).color(1, 0.3, 0.4).rotate(0.5).kaleid(5).out()Це ланцюжок, як query builder: where()->orderBy()->limit(). Порядок має значення. Поміняй .rotate і .kaleid місцями й подивись, що зміниться.
Рух: modulate(noise())
Шум штовхає пікселі
osc(20, 0.1, 1.5).kaleid(5).modulate(noise(3), 0.2).out()Покрути силу
osc(20, 0.1, 1.5).kaleid(5).modulate(noise(3), 0.6).out()0.05 ледь хитає, 0.6 розмазує в рідину. Обидва варіанти правильні, обирай за смаком.
Можеш подивитись на сам шум: noise(3).out(). Так видно, чим саме штовхають.
Пам'ять: src(o0)
Картинка бачить свій попередній кадр
osc(20, 0.1, 1.5).kaleid(5).blend(src(o0).scale(1.02), 0.85).out()src(o0).rotate(0.02).blend(osc(30, 0.1, 2).kaleid(3), 0.1).out()У mandflok o0 працює так само. o1, o2, o3 теж вільні, ними можна гратись пізніше.
Живі параметри: () => time
Число, яке саме себе змінює
osc(20, 0.1, 1.5).rotate(() => Math.sin(time) * 0.5).out()osc(20, 0.1, 1.5).kaleid(() => 4 + Math.sin(time) * 2).out()Чому це просто
() => … — звичайна JS-стрілка, ти пишеш такі в колбеках постійно. Тут вона повертає число замість масиву.
Хочеш повільніше — Math.sin(time * 0.3). Швидше — time * 3.
Мікро-візуал
Усе вивчене в одному блоці
osc(18, 0.08, 1.4)
.color(1, 0.25, 0.35)
.kaleid(() => 4 + Math.sin(time * 0.5) * 2)
.rotate(() => time * 0.1)
.modulate(noise(2.5), 0.15)
.blend(src(o0).scale(1.015), 0.8)
.out()Лист у кінці
Відкривається, коли всі галочки стоять.
Ти почав з osc().out() — одинадцяти символів — і побачив смуги через секунду. Далі ти додавав по одній речі: три ручки осцилятора, колір, поворот, калейдоскоп, шум, пам'ять кадру, час. Жоден крок не вимагав таланту. Кожен вимагав одного рішення: змінити число й подивитись ще раз.
За цю сесію ти запустив код у пісочниці кілька разів і пройшов усі галочки. Останнє, що ти запускав тут:
—
А в mandflok у тебе світиться візуал, де одне число вже твоє, тож він не з уроку. Так виглядає людина, яка вміє вчитися: менша задача, швидкий відгук, ще один крок.
Те, що колись «не виходило», було задачею дев'ятого рівня без перших восьми. Сьогодні ти пройшов першу, і світиться вона твоїми руками.
Видихни. Залиш картинку крутитись або згаси її через Ctrl+. і просто подивись, як вона тане. На сьогодні досить.
— Claude, з https://learn.mandrock.me/
Далі
Hydra слухає · урок 02
Ритм через масиви, mini-notation зі Strudel через P() і справжній спектр через fft(). Наприкінці буде міні-сет, де звук і світло працюють в одній сесії.
Шпаргалка
Усі функції Hydra з цього уроку — на одній сторінці: джерела, геометрія, колір, модуляція, аудіо-реактивність, готові патчі. Приклади копіюються кліком.