English | Mandarin | Spanish | Japanese | Hungarian | Italian | Korean | German | French

Сейчас вы можете вообще ничего не знать о vvvv, поэтому мы постараемся объяснить каждый шаг, необходимый для полного понимания того, что происходит в каждый конкретный момент упражнения. Скорее всего, самый первый вопрос звучит как а куда теперь надо нажать? Конечно, можно отдельно посмотреть подробное описание интерфейса Подробно об интерфейсе, но лучше пока остаться в этом упражнении или обязательно сюда вернуться!

Ну что, понеслось? Не совсем.

Итак, перед вами пустое серое окно (если нет, то вернитесь в Вводный урок) и вы думаете, где же все меню и кнопки по которым можно покликать и самому разобраться? А вот где.

Главное меню

Нажмите среднюю кнопку на мыши (или ПРОБЕЛ + правая кнопка мыши, если у вас нет третьей кнопки). Перед вами главное меню. Здесь есть все обычные функции главных меню.

Сейчас создайте новый патч (New Patch или CTRL+P) и обратите внимание, что новый патч появляется рядом с курсором мыши. Это позволяет вам сразу перетащить окно в удобное место на экране.

Вызываем первый нод

Теперь сделайте двойной щелчок левой кнопкой мыши в любом месте в патче (внутри серого окна). Появится серая плашка с мигающим курсором внутри. Так vvvv предлагает ввести название нужного нода. Стоп. Пока мы не знаем ни одного названия. Огласите весь список, пожалуйста.
Кликните правой кнопкой внутри серой плашки с курсором. Должен пооявиться алфавитный список всех нодов. Используя колесо прокрутки на мыши можно просмотреть весь список. Обычную полосу прокрутки можно включить клавишей ПРОБЕЛ.
При наведении курсора на название нода, в большинстве случаев, появляется кратное описание назначения этого нода.

Если сдвинуть курсор мыши влево от списка нодов, то должен появиться другой список. Это те же самые ноды, но разложенные по категориям. Прокрутите этот список вниз до категории Value и кликните на нод + (Value). Внимание! + (Value Spectral) ? Это совсем другая команда!

• Личный совет. Повторите вызов списка несколько раз. Эта функция в интерфейсе очень удобна и пользоваться ей будете часто.

Так же можно посмотреть видео урок на английском Video Tutorial.

Категории и названия нодов

Название нода состоит из нескольких частей:
Название (Категория Версия1 Версия2 ... ВерсияN)
Номер версии не обязателен и почти не встречается. По настоящему важна привязка нода к конкретной категории (категория указывается в скобках за названием). Так ноды с одинаковым названием, например + , могут относиться к разным категориям (например + (Value), + (String), + (Color), ...).

Value - это все числовые значения
String - это все текстовые блоки
Color - это значения цвета
Transform - это категория управления матрицами трансформаций и т.д.

• Личное наблюдение. Подробные описания конкретных категорий вы найдете ниже или поймете самостоятельно. Названия категорий, как говорится, интуитивно понятны. Иногда можно случайно поставить одноименный нод не из той категорий, но такие ошибки сразу замечаются и легко исправляются.

Убедитесь что вы выбрали нужный нод (при наведении курсора на нод появляется всплывающая подсказка с описанием) Здесь нам нужен нод + (Value)
В любой момент вы можете перетащить нод в нужное место в патче, нажав и удерживая левую кнопку мыши на ноде.

Теперь наведите курсор на входные пины, чтобы увидеть установленные значения. По умолчанию оба значения равны нулю. Изменить значение можно двумя способами. Либо кликнуть на входной пин правой кнопкой мыши, ввести значение с клавиатуры и нажать ENTER. Либо нажав и удерживая правую кнопку мыши на значении, провести мышью вверх (большее значение) или вниз (меньшее значение).
Изменив входные значения, наведите курсор на выходной пин и вы увидите результат сложения. Вот с этого все и начинается.

IOBoxes

Чтобы легче контролировать входные и выходные значения используйте ноды, называющиеся IOBox. В них не выполняется никаких вычислений, а только устанавливаются, хранятся и отображаются текущие значения.
Кликните левой кнопкой в пустое место в патче. В серой плашке с курсором кликните правой кнопкой и промотайте список до IOBox (Value Advanced). Выберите его левым кликом. Этот нод понадобится вам чаще других, поэтому он вынесен в отдельный список. Двойной щелчок правой кнопкой открывает список часто используемых нодов.

Соединяем ноды

Чтобы соединить IOBox с + (Value) наведите курсор на выходной пин IOBox и один раз кликните левой кнопкой нажмите. Обратите внимание, что все пины, к которым можно подсоединить это значение, стали крупнее. Теперь нужно подвести линию ко входному пину + (Value) и еще раз кликнуть левой кнопкой. Если по пути от выходного пина к входному, кликать левой кнопкой в пустые места патча, на линии создаются узлы и можно рисовать связи кривой линией.
Добавьте IOBoxes ко всем пинам + (Value)

Смотрите также Video Tutorial.

Отменить создание связи можно правым щелчком мыши. Удалить существующую связь можно выбрав линию левым кликом (линия должна стать жирной), и нажав DEL или BACKSPACE.

Изменение значений в IOBox влечет изменение значений в выходном и входном пине: кликните в IOBox правой кнопкой и удерживая нажатой правую кнопку, поводите мышью вверх или вниз. Чтобы вернуться к значению по умолчанию, нажмите ALT+ правая кнопка мыши поверх IOBox .

Перекур и продолжим через пару минут!

Рендеринг

Как же нас все это приближает к искомому Привет, мир спросите вы? Да никак. Потому что, чтобы видеть на мониторе какой-либо результат, нам нужен рендер. В vvvv есть несколько типов рендера (таким образом vvvv может отображать разные типы данных из одного патча). Дла нашей задачи нам потребуется нод GDI рендера Renderer (GDI).

Как вы знаете, если вам известно название нода, вы можете двойным щелчком левой кнопки вызвать курсор и набрать название нода с клавиатуры. Или воспользоваться списком нодов. Когда вы набираете название нода, во всплывающем меню появляются возможные варианты в зависимости от того, какие символы вы уже ввели. Стрелками вверх-вниз на клавиатуре или мышкой можно выбрать нужный нод.

Renderer (GDI) один из тех нодов, к которому привязано дополнительное окно. Как только вы вызываете рендер в патче, дополнительное окно появляется само собой. Чтобы поместить это окно в патч (как показано на скриншоте ниже) кликните левой кнопкой на нод рендера (чтобы сделать его активным)и нажмите ALT+2. Теперь рендер должен отображаться в патче. Вы можете снова сделать его отдельным окном, нажав ALT+1.

• Чтобы свернуть окно рендера и видеть только название нода нажмите ALT+3. Разные состояния рендера нужны для разных задач. Можно одновременно использовать несколько рендеров, но оставлять видимыми только те, которые нужны.

Чтобы изменить цвет фона в рендере, найдите входной пин Background Color и кликните по нему правой кнопкой. Появится окно управления цветом. Внутри этого окна вы можете:

• удерживая правую кнопку и двигая мышью вверх-вниз, изменять яркость brightness,
• удерживая правую кнопку и двигая мышью влево-вправо, изменять цвет hue,
• нажав CTRL + удерживая правую кнопку и двигая мышью вверх-вниз, изменять насыщенность saturation.
• нажав SHIFT + удерживая правую кнопку и двигая мышью вверх-вниз, изменять прозрачность alfa.

Чтобы сохранить изменения цвета, кликните левой кнопкой в любом месте в патче.

• Аналогичный результат можно получить использовав связь с IOBox (Color). Управление цветом в IOBox (Color) осуществляется так же, как в приведенном примере.

Чтобы отобразить текст в окне рендера, используйте нод Text (GDI) и соедините его с рендером. Теперь найдите входной пин, отмеченный как Text. Кликните правой кнопкой и введите hello world. Одно условие! Обязательно введите именно hello world. Это очень давняя и уважаемая традиция, относящаяся к изучению любого языка программирования или программы, поэтому не глупите. Уважайте традиции.

Теперь найдите и кликните пин ‘Font’. Во всплывающем меню отображаются все шрифты, установленные в системе. Вы можете выбрать любой понравившийся вам шрифт. В истории нет четких указаний на этот счет. Возможно Lucida Console самый простой выбор.

• Что касается кириллических символов. vvvv не разпознает кириллицу, но текстовые ноды распознают. То есть если вы пишите, например, комментарий внутри патча, вам придется писать его на английском или латинскими буквами. Но если вы вводите русский текст в текстовый нод (например, в этом упражнении привет, мир), то текст в рендере будет отображен в зависимости от выбранного шрифта. Стандартные шрифты Windows всегда отображаются корректно. Ура!

Взаимодействие

В заключение, давайте добавим немного интерактива. Допустим, мы хотим, чтобы размер текста зависел от вертикальных движений мыши, при этом минимальный размер текста (курсор на нижней границе экрана) был равен 15, а максимальный (курсор на верхней границе экрана) был равен 50. Поехали.

Получить координаты мыши очень просто. Рендер выводит координаты курсора в отдельные пины. Однако эти значения не в пикселях, а всегда в координатах от (-1, -1)/нижний левый угол до (1, 1)/верхний правый, где (0, 0) это центр окна рендера.

• Обратите внимание, что координаты выводятся при движении курсора ВНУТРИ окна рендера, а не патча. если вы вывели курсор за пределы окна рендера, на выход подаются последние актуальные координаты. Альтернативные координаты можно получить используя ноды MouseSystemWindow) и Mouse(SystemGlobal)

А вот привязка Y-координаты к размеру текста это не так просто. Потому что если установить размер текста равный 1, текст просто станет невидимым. А как мы видим 1 это максимально возможное значение координаты. Что уж говорить о нуле или -1. Однако мы можем масштабировать значения координаты Y (-1...1) до нужного нам диапазона 15...50.

Здесь очень кстати оказывается нод Map (Value). Но в этот раз, мы не будем создавать новый нод (вы уже знаете как это делать). Возьмем не нужный нам больше + (Value), дважды кликнем по нему и введем название Map (Value). Обратите внимание, что так как выходныой пин + (Value) и Map (Value) имеют одинаковое название, связь с IOBox не пропала.

Теперь соедините выходной пин Y от рендера с первым пином Map (Value) и выходной пинMap (Value) соедините с пином Size в ноде Text (GDI).

Чтобы достичь необходимого нам результата, установите следующие значения во входных пинах Map (Value):

• Source Minimum: -1
• Source Maximum: 1
• Destination Minimum: 15
• Destination Maximum: 50
• Mapping: Clamp

Теперь движение курсора вверх-вниз внутри окна рендера должно изменять размер текста в диапазоне 15-50.

Дальнейшие эксперименты

Ваш первый патч закончен и можно отдохнуть. Если же вы чувствуете, что сейчас останавливаться нельзя и хотите продолжить, рекомендуем поиграть с нодами категории GDI или посмотреть их help-патчи Где искать помощь.

Так же загляните в раздел Подробно об интерфейсе, где вы найдете еще несколько приемов для более удобного и быстрого написания патчей.

Посмотрите еще видео уроки здесь alternative 'Hello World' tutorial, и здесь, more advanced.

Если вы чувствуете себя уже достаточно уверенно в этом разделе, переходите ко следующему уроку: Ваш друг Инспектор.