Интерактивный туториал Hydra 🌀 Bulka

Интерактивный туториал Hydra

Добро пожаловать в пошаговый туториал по Hydra! Каждый пример можно редактировать и запускать прямо здесь.

Шаг 1: Ваш первый визуал

Начнём с самого простого — создадим осциллятор. Нажмите play чтобы увидеть результат:

Попробуйте: Измените число внутри osc() на 10, 50 или 100 и посмотрите что изменится!

Шаг 2: Параметры осциллятора

Осциллятор osc() принимает три параметра:

  • frequency — частота полос
  • sync — скорость движения
  • offset — цветовое смещение

Попробуйте:

  • Измените первое число (частота): 5, 20, 60
  • Измените третье число (цвет): 0, 0.5, 1.5

Шаг 3: Добавляем трансформации

Теперь добавим трансформацию — вращение с помощью .rotate():

Попробуйте: Измените число в rotate() на 0, 1, 2, 3.14

Шаг 4: Калейдоскоп

Добавим калейдоскопический эффект с помощью .kaleid():

Попробуйте: Измените число в kaleid() на 3, 6, 8, 12

Шаг 5: Анимация со временем

Сделаем визуал динамичным! Используем функцию с time:

Ключевой момент: () => time * 0.1 — это функция, которая вычисляется каждый кадр. time — секунды с начала.

Шаг 6: Другие источники — шум

Попробуем другой источник — noise() (шум Перлина):

Шаг 7: Добавляем цвет

Окрасим шум с помощью .color():

Попробуйте:

  • Красный: .color(1, 0, 0)
  • Синий: .color(0, 0, 1)
  • Пурпурный: .color(1, 0, 1)

Шаг 8: Геометрические фигуры

Источник shape() создаёт полигоны:

Шаг 9: Сетка фигур

Добавим повторение с помощью .repeat():

Шаг 10: Смешивание источников

Смешаем два источника с помощью .blend():

Шаг 11: Разница (diff)

Вычислим разницу между двумя источниками:

Шаг 12: Модуляция — магия искажений!

Модуляция — самое интересное! Один источник искажает другой:

Попробуйте: Измените второе число в modulate() от 0.1 до 1.0

Шаг 13: Модуляция осциллятором

Попробуем другой модулятор:

Шаг 14: Комбинируем всё вместе

Теперь создадим сложный визуал:

Шаг 15: Feedback — бесконечность!

Feedback создаёт эффект бесконечного зеркала:

Шаг 16: Массивы для анимации

Массивы автоматически переключают значения:

Шаг 17: Плавные переходы

Добавим .smooth() для плавных переходов:

Шаг 18: Аудио-реактивность

Подключим визуал к звуку:

Шаг 19: Паттерны Strudel в Hydra

Функция H() связывает Strudel паттерны с Hydra:

Шаг 20: Ваш первый шедевр!

Теперь вы знаете основы! Вот финальный пример — редактируйте его как хотите:

Что дальше?

Поздравляю! Теперь вы знаете основы Hydra. Продолжайте изучение:

Совет: Экспериментируйте! Меняйте числа, комбинируйте функции, ошибайтесь — так рождается искусство!