Origami Studio: Базовые понятия

8 min readMar 16, 2015

Основы визуального программирования для тех, кто учится прототипировать в Origami + Quartz Composer

По Quartz Composer практически нет подробных руководств на русском языке. Ютюб полон видео-уроков, по которым можно повторить за автором его проект, но сделать свой собственный по-прежнему сложно.

Самым полезным источником для меня оказался Quartz Composer User Guide на сайте Apple. Ниже приведен конспект его первой главы — Quartz Composer Basic Concepts:

Содержание

1. Композиции
2. Патчи
3. Три типа патчей
4. Соединения и типы данных
5. Система координат и единицы измерения

Композиции

Quartz Composer — это среда визуального программирования. Здесь программы составляются не из операторов и кода, а из патчей — заранее подготовленных модулей. Патчи выглядят как разноцветные прямоугольники, соединенные проводами, и образуют композиции.

В традиционном программировании код пишется в редакторе, а результат смотрится в другом окне (например, браузере). То же самое и здесь: окно, внутри которого собираются разноцветные прямоугольники — это редактор. А результат взаимодействия патчей мы видим в просмотрщике.

Традиционное программирование. JavaScript

Визуальное программирование. Quartz Composer

Патчи

Патч — базовый элемент Quartz Composer. Это аналог процедуры в традиционном программировании, он эквивалентен строке кода:

Кружочки с обеих сторон патча — это порты (параметры функции). Через левые порты данные поступают в патч, через правые — выводится результат преобразования.

На примере ниже четыре патча:

Fill Layer заливает фон белым цветом.
Touch отслеживает нажатие на экран.
Button отрисовывает кнопку шириной 320 px с текстом «Sign in» и скруглениями в 24 px (эти значения можно прочитать рядом с названиями портов).
Transition хранит в себе значения (Start Value, End Value), которые будут принимать Opacity и Scale кнопки по нажатию и отпусканию.

Вся эта композиция выполняет следующее:

При запуске программы фон красится в белый цвет и отрисовывается кнопка. Touch начинает отслеживать касания к экрану.
Если ничего не происходит, то значения Opacity и Scale равны Start Value = 0.95 = 95%.
Когда происходит нажатие, Touch сообщает об этом патчу Transition через порт Down, и Opacity со Scale меняются на End Value = 0.85 = 85%. Мы сразу видим, что кнопка уменьшилась и стала прозрачнее.
После отпускания кнопки Touch сообщает в Transition, что нужно вернуть значения Opacity и Scale в исходное положение — Start Value = 0.95 = 95%.

Типы патчей

Существует три типа: приемники (consumers), обработчики (processors) и поставщики (providers).

Изначально в Quartz Composer они различались цветом: поставщики — фиолетовые, обработчики — черные, приемники — синие. Обратите внимание, патчи-поставщики чаще всего имеют порты только справа — они всегда отдают данные. Аналогично у патчей-приемников чаще всего порты только слева — они всегда принимают данные от других патчей.

Origami по техническим причинам не везде смогли соблюдать эту раскраску (например, патч Pop Animation фиолетовый, хотя является обработчиком). Тем не менее все существующие сейчас патчи по функциям можно разделить на те же три группы.

Приемники (Consumer Patches)

Не смотря на свое название, приемники — это единственный тип патчей, который может отображать информацию пользователю.

Приемники выводят на экране картинки (Layer), видео, геометрические фигуры, текст (Text Layer),
Они заливают фон указанным цветом (Fill Layer) или градиентом (Gradient).
Обрамление экрана с шестым айфоном и рукой в просмотрщике — тоже результат работы патча-приемника (Viewer).
При создании прототипов для веба с помощью приемников можно превратить окно просмотрщика в окно браузера (Chrome Browser) и менять вид курсора (Cursor Control) при наведении на ссылку.

Приемники выводят не только визуальную информацию. Со второй версии в Origami появился доступ к вибратору подключенного по проводу девайса (Device Vibrate). Также Quartz Composer может выводить миди-звуки на динамик Мака (MIDI Controller Sender).

Патчи-приемники многим похожи на слои в графических программах:

1. При создании нового слоя ничего на экран не выводится, т.к. слой пуст. Чтобы поместить какое-то изображение на слой, его нужно подключить к порту Image у патча Layer:

2. Патчи-приемники можно скрывать:

3. У них есть порядок отображения. В примере, приведенном ниже, мы не увидим на экране ничего, кроме заливки Fill Layer, т.к. ее патч находится выше других слоев и перекрывает их.

Поставщики (Provider Patches)

Поставляют в композицию данные от тач-скрина, клавиатуры, мыши, микрофона, веб-камеры и т.д.

Со второй версии Origami патч Device Info дает доступ к таким свойства iOS-устройств, как 3D-ориентация (Pitch, Roll, компас), ориентация (портретная или альбомная), экран (ретиновый он или нет, его ширина и высота).

Quartz Composer совместим с пультом Apple Remote, Kinect и Leap Motion. Реальные данные подключаются в композицию через патчи XML Importer, Image Importer (можно вставить URL-ссылку на изображение), CSV Importer и др.

Самые популярные патчи-поставщики:

Interaction. Самый полезные его порты — Mouser Over (определяет ховер) и координаты курсора мыши — X Position, Y Position.
Interaction 2. Определяет нажатие на тач-скрин (Tap), удержание (Down) и отпускание (Up).
Touch. Передает координаты нажатия на тач-скрин.
Scroll. Имитация инерционного iOS-скролла. Свойства X Scrolling и Y Scrolling могут быть в режимах Free и Paging (послайдовое перелистывание).
Swipe. Определяет горизонтальный и вертикальный свайп.

Обработчики (Processor Patches)

Обработчики преобразуют входящие данные и передают дальше. С помощью них прототип становится похожим на настоящее приложение. Патчами-обработчиками являются:

условия if-else, по которым происходит событие (Conditional);
повторение события указанное число раз (Iterator, Counter 2);
математические и логические операции (Math, Logic);
фильтры для изображений (Gaussian Blur, Multuply, Black and White);
анимации переходов между состояниями (Pop Animation, Classic Animation);

Свой собственный код на языке JavaScript можно вписать внутрь патча-обработчика с одноименным названием JavaScript.

Макропатчи

Помимо трех основных типов патчей существуют макропатчи — папки, внутри которых можно хранить патчи.

Композиции Quartz Composer по аналогии с любым языком C и Objective-C могут содержать в себе подпрограммы. Корневой уровень композиции — основная процедура, а макропатч — ее подпрограмма. Число вложенностей макропатчей не ограничено.

Макропатчи отличаются от обычных визульно: у них квадратные углы.

Можно заходить внутрь макропатча как в обычную папку Файндера: либо по двойному клику, либо выделить макропатч курсором и нажать Cmd + ↓. Выйти на уровень выше можно с помощью иконки со стрелкой на верхней панели редактора:

При создании новой композиции в Origami (File > New Origami File) автоматически создается три патча: Viewer (телефон в окне просмотрщика), Viewer Size (выбор модели телефона) и макропатч Layer Group.

Чтобы ваш прототип отображался корректно, и взаимодействие происходило на экране телефона, нужно войти внутрь Layer Group и создавать композицию внутри него.

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

Соединения и типы данных

У каждого порта есть свой тип данных:

Из-за типов данных не все порты полностью совместимы друг с другом. Однако в языке Quartz Composer слабая типизация данных — вы можете соединять порты разных типов, если у них возможны совпадения значений. Например, почти любому порту можно присвоить значение «1» — это одновременно «true» для логики, «1» для целых чисел, «1.00» для дробных.

Или другой пример: порты патча Interaction 2 отдают только булевые переменные: true (1) и false (0), но их все равно подключают в числовые порты: Y Position воспримет 1 как 1 px, а порт Opacity — как 100% (у портов Opacity и Scale 100% соответствует единице, а к примеру, 50% соответствует 0.5).

Цвет провода показывает совместимость типа данных:

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

Также существуют провода:

голубой (тип данных: interaction) — этот тип нужен, чтобы привязать взаимодействие (клик, свайп) к конкретному слою. Если патч-поставщик не связан ни с одним патчем-приемником, то по умолчанию его взаимодействие работает на всем экране;
зеленая точка внутри порта (на рисунке выше — порт Y Rotation у патча Layer) — применяется, чтобы опубликовать порт, т.е. передать его из макропатча на уровень выше.

Система координат
и единицы измерения

Quartz Composer использует трехмерную систему координат с началом отсчета в центре экрана. Ось X направлена слева направо, ось Y — снизу вверх, ось Z — к зрителю.

По умолчанию в просмотрщике включено искажение, имитирующее работу человеческого глаза. Благодаря нему у объектов на изображение появляется сходящаяся в центр перспектива:

От искажения можно избавиться, применяя патч Layer Group для отдельных объектов. Для полного отключения эффекта требуются дополнительные плагины.

Юниты и пиксели

Изначально координаты и размеры объектов в Quartz Composer указывались в относительных величинах — юнитах. (Один юнит равен половине окна просмотрщика — расстоянию от центра экрана до правого края. Таким образом, ширина экрана на любом мониторе равнялась 2 юнитам.)

При такой системе единиц измерения чем шире окно просмотрщика, тем больше размер объекта.

Привязка только к ширине просмотрщика позволяет не искажать пропорции объектов:

Origami с первых дней работает в абсолютных величинах — пикселях. А размер объектов на экране не зависит от размеров просмотрщика.

Поэтому при использовании стандартных патчей Quartz Composer, влияющих на координаты и размеры объектов (таких как Mouse и Rounded Rectangle), требуется конвертор единиц — патч Units to Pixels:

Точка отсчета

Избавившись от юнитов, разработчики Origami сохранили ось Z и начало отсчета (0; 0) в центре окна просмотрщика. В этом различие Origami и Xcode, у которого (0; 0) находится в левом верхнем углу.