Processing:Среда разработки Processing

Содержание

Среда разработки Processing

Справочник языка Processing

Библиотеки

Примеры

Режимы программирования

Перевод: Максим Кузьмин

Проверка/Оформление/Редактирование: Мякишев Е.А.

Среда разработки Processing

Краткое описание

Среда разработки Processing (PDE или Processing Development Environment) упрощает разработку Processing-программ. Программы пишутся в текстовом редакторе и запускаются при помощи нажатия на клавишу Run. Компьютерная программа, разработанная в Processing, называется «скетчем». Скетчи хранятся в «скетчбуке» (это папка на вашем ПК).

Скетчи могут рисовать 2D и 3D-мерную графику. Визуализатор, используемый по умолчанию, предназначен для рисования 2D-графики. Визуализатор P3D позволяет рисовать 3D-графику, куда входит управление камерой, освещением и материалами. Визуализатор P2D быстрее, но рисует 2D-графику с меньшей точностью. Оба визуализатора – P2D и P3D – будут работать быстрее, если ваш компьютер оснащен видеокартой, совместимой с OpenGL.

Возможности Processing мощно расширить при помощи библиотек и инструментов. Библиотеки позволяют скетчам делать вещи, на которые не способен основной код Processing. Членами сообщества Processing разработаны сотни библиотек, которые можно добавить в свои скетчи и дополнить их новым функционалом – проигрыванием звуков, а также обработкой компьютерного зрения и продвинутой 3D-геометрии. Инструменты позволяют упростить разработку скетчей, оснащая PDE дополнительными элементами интерфейса (вроде меню для выбора цветов).

Processing может работать в разных режимах программирования – это позволяет программировать на разных языках, а также запускать скетчи на разных платформах. По умолчанию стоит режим Java. Другие режимы программирования можно загрузить, кликнув в PDE на кнопку в правом верхнем углу, а затем нажав в появившемся меню на «Add Mode...».

Среда разработки Processing (PDE)

Среда разработки Processing (PDE) состоит из простого текстового редактора для написания кода, области для сообщений, текстовой консоли, панели вкладок для управления файлами, панели инструментов с кнопками для наиболее частых действий и нескольких меню. В разных режимах программирования эти меню могут быть разными. В данном случае описывается режим Java, выставленный по умолчанию.

Программы, создаваемые при помощи Processing, называется «скетчами». Эти скетчи пишутся в текстовом редакторе. Он поддерживает функции копирования/вставки и поиска/замены текста. Область для сообщений дает обратную связь во время сохранения и экспорта скетчей, а также показывает ошибки. Консоль показывает выходные текстовые данные скетчей, включая полные сообщения об ошибках и текст, сообщаемый скетчами при помощи функций print() и println(). Помните, что консоль работает нормально, только если сообщения появляются время от времени – для работы на высокой скорости в реальном времени она не предназначена.

Кнопки на панели управления предназначены для запуска и остановки программ:

• Run – Запускает скетч. В режиме Java компилирует код и открывает новое дисплейное окно.

• Stop – Завершает работу скетча.

Дополнительные команды можно найти в шести верхних меню: File, Edit, Sketch, Debug, Tools и Help. Эти контекстно-зависимые меню, поэтому вам будут доступны только те меню, что релевантны для выполняемой в данный момент работы.

File

• New. Создает новый скетч в новом окне. Он будет назван на основе текущей даты в формате «sketch_ГГММДДa».
• Open... Открывает скетч в новом окне.
• Open Recent. Позволяет выбрать из списка недавно закрытых скетчей.
• Sketchbook... Открывает новое окно со списком скетчей, находящихся в «скетчбуке».
• Examples... Открывает новое окно со списком скетчей-примеров.
• Close. Закрывает скетч, который находится на переднем плане. Если это единственный скетч, открытый в PDE, система спросит вас, хотите ли вы выйти. Чтобы избежать этого вопроса, при выходе из PDE используйте Quit вместо Close.
• Save. Сохраняет открытый скетч в его текущем состоянии.
• Save as... Сохраняет открытый в данный момент скетч, предлагая сохранить его под другим названием. Не заменяет предыдущую версию этого скетча.
• Export. Экспортирует приложение Java в виде исполняемого файла и открывает папку, содержащую экспортированные файлы.
• Page Setup. Открывает новое окно с настройками для печати.
• Print (Ctrl+P). Печатает код, находящийся в текстовом редакторе.
• Preferences. Открывает новое окно, в котором можно поменять настройки PDE (на Mac OS X этот пункт расположен в меню Processing).
• Quit. Закрывает все окна и выходит из среды разработки Processing (на Mac OS X этот пункт расположен в меню Processing).

Edit

• Undo. Отменяет действие последней команды или удаляет последнюю написанную запись. Чтобы отменить команду Undo, нажмите на Edit > Redo.
• Redo. Отменяет действие последней команды Undo. Эта опция доступна, только если до этого была задействована команда Undo.
• Cut. Удаляет и копирует выделенный текст в неотображаемый на экране буфер обмена.
• Copy. Копирует выделенный текст в неотображаемый на экране буфер обмена.
• Copy as HTML. Форматирует код, выделенный в текстовом редакторе PDE, в HTML-код, а также копирует его в неотображаемый на экране буфер обмена, чтобы его можно было вставить куда-то еще.
• Paste. Вставляет содержимое буфера в место, на котором стоит курсор, а также заменяет выделенный текст.
• Select All. Выделяет весь текст в файле, который в данный момент открыт в текстовом редакторе.
• Auto Format. Пытается отформатировать код так, чтобы его легче было прочесть человеку. Ранее эта функция называлась Beautify.
• Comment/Uncomment. Ставит знак комментария у выделенного текста. Если у выделенного текста уже есть знак комментария, он будет убран.
• Increase Indent. Делает у текста отступ в два пробела.
• Decrease Indent (Ctrl+[). Если у текста есть отступ, у него будет убрано два пробела.
• Find... Выполняет поиск заданного текста в файле, открытом в текстовом редакторе, и дает возможность заменить его на другой текст.
• Find Text. Находит следующую позицию заданного текста в файле, открытом в текстовом редакторе.
• Find Previous. Находит предыдущую позицию заданного текста в файле, открытом в текстовом редакторе.
• Use Selection for Find. Использует выделенный текст для поиска текстовых фрагментов при помощи функций Find Next и Find Previous.

Sketch

• Run. Запускает код (компилирует код, открывает дисплейное окно и запускает внутри него скетч).
• Present. Запускает код в новом окне, растянутом на весь экран. Чтобы выйти из презентации, либо нажмите на кнопку «stop» в левом нижнем углу, либо на клавишу Escape. Цвет фона презентации можно поменять в меню Preferences.
• Tweak. Запускает код в режиме, позволяющем менять цвета и значения некоторых переменных прямо во время работы программы. Чтобы скетч можно было запустить в этом режиме, он должен быть сохранен.
• Stop. Останавливает код, если он запущен. Программы, в которых нет функции draw(), остановятся автоматически после того, как нарисуют то, что в них задано.
• Import Library. Добавляет в верхнюю часть скетча конструкции для импорта библиотек. К примеру, если нажать на Sketch > Import Library > pdf, это добавит в верхнюю часть скетча конструкцию import processing.pdf.*;. Эти импортные конструкции необходимы для использования библиотек. Поиск и установка новых библиотек осуществляется в меню Library Manager («Менеджер библиотек»), которое открывается, если нажать в PDE на Sketch > Import Library... > Add Library...
• Show Sketch Folder. Открывает папку, в которой находится текущий скетч.
• Add File... Открывает окно для навигации по файлам. С его помощью можно выбрать изображение, шрифт или другой медиа-файл, чтобы добавить его в папку данных скетча.

Debug

• Enable Debugger. Активирует отладчик. Обратите внимание, что кнопка Run изменится на Debug. Кроме того, появятся новые кнопки Continue и Step, а также отдельное окно для просмотра меняющихся переменных.
• Continue. Переходит к следующей точке останова.
• Step. Переходит к следующей строчке кода. Обратите внимание, что если дойти при помощи Step до конца текущей функции, будет вызвана команда Continue (но перед этим будет показано место вызова «закончившейся» функции).
• Step Into. Переходит внутрь функции. Работает только с пользовательскими функциями.
• Step Out. Переходит из функции в то место, где она вызвана. Работает только с пользовательскими функциями.
• Toggle Breakpoint. Добавляет или удаляет точку останова. При добавлении точки остановы номер строки заменяется на маленький ромб.

Tools

• Create Font... Конвертирует шрифт в шрифтовой формат Processing (VLW), а затем добавляет его в текущий скетч. Открывает диалоговое окно с настройками шрифта – его размера, сглаживания и того, какие именно символы нужно конвертировать. Количество памяти, требуемое для шрифта, зависит от его размера и количества конвертируемых символов, выбранных в меню «Characters...». Шрифты Processing – это текстуры, поэтому чем больше шрифт, тем больше и «тяжелее» изображение. Кроме того, шрифты можно создавать прямо в коде при помощи функции createFont().
• Color Selector... Интерфейс для выбора цветов. Для выбранного цвета будут показаны значения RGB и HSB, а также шестнадцатеричное значение (его можно скопировать в буфер обмена, нажав на кнопку Copy).
• Archive Sketch. Архивирует копию текущего скетча в формат ZIP. Архив помещается в папку, где находится сам скетч.
• Install "processing-java". Устанавливает программу «processing-java», чтобы скетчи, написанные в режиме Java, можно было компилировать и запускать из командной строки.
• Movie Maker. Создает из серии изображений видео в формате QuickTime. В настройках можно задать разрешение видео, частоту кадров, сжатие и добавить к видео аудиофайл.
• Add Tool… Открывает меню Tool Manager («Менеджер инструментов») для поиска и установки новых инструментов.

Help

• Environment. Открывает в выбранном по умолчании браузере руководство по среде разработки Processing (т.е. страницу, перевод которой вы читаете).
• Reference. Открывает в выбранном по умолчанию браузере страницу со справочником по языку Processing. В левой части страницы также есть ссылки для перехода на страницы с руководством по PDE, а также на руководства по основным библиотекам и инструментам.
• Find in Reference. Осуществляет в справочнике по языку Processing поиск по элементу, выбранному в текстовом редакторе PDE, а затем открывает в используемом по умолчанию браузере страницу справочника, соответствующую этому элементу.
• Libraries Reference. Выберите из списка библиотеку, чтобы почитать руководство по ней.
• Tools Reference. Выберите из списка инструмент, чтобы почитать руководство о нем.
• Getting Started. Открывает в выбранном по умолчанию браузере руководство «Getting started» («Первые шаги»).
• Troubleshooting. Открывает в выбранном по умолчанию браузере вики-страницу «Troubleshooting» («Решение проблем»).
• Frequently Asked Questions. Открывает в выбранном по умолчанию браузере вики-страницу с FAQ («Часто задаваемые вопросы»).
• The Processing Foundation. Открывает в выбранном по умолчанию браузере сайт Processing Foundation.
• Visit Processing.org. Открывает в используемом по умолчанию браузере сайт Processing.

Настройки

Среда разработки Processing (PDE) имеет очень гибкие настройки. Самые распространенные настройки можно найти в окне Preferences (на Windows оно расположено в меню File, а на Mac OS X – в меню Processing). Полный список настроек хранится в файле «preferences.txt». Его можно открыть и редактировать, только если PDE не запущена. Месторасположение этого файла указано в нижней части окна Preferences.

• Sketchbook location. В качестве «скетчбука» можно использовать любую папку ПК. Чтобы задать новую локацию для «скетчбука», впишите ее в это поле или нажмите на кнопку Browse и задайте ее там.
• Language. Выберите язык для интерфейса PDE. Выбрав язык, перезагрузите Processing.
• Editor and Console font. Выберите шрифт, который будет использоваться в редакторе и консоли. Примечание: выбранный язык должен соответствовать языку, используемому в текстовом редакторе. Также смотрите пункт «Enable complex text input» ниже.
• Editor font size. Задает размер шрифта кода в текстовом редакторе.
• Console font size. Задает размер шрифта текста в консоли.
• Background color when Presenting. Задает цвет фона, когда скетч запущен в режиме презентации.
• Use smooth text in editor window. По умолчанию у текста в редакторе нет сглаживания. Если поставить в этом пункте галочку, редактор переключится на сглаженный шрифт. Изменив эту настройку, перезапустите Processing.
• Enable complex text input. Позволяет текстовому редактору показывать нелатинские шрифты (вроде японского). После изменения этой настройки Processing нужно перезапустить.
• Continuously check for errors and Show warnings. Включение/выключение функций, которые постоянно проверяют и сообщают о потенциальных ошибках в коде.
• Code completion with Ctrl+Space. Включение/выключение автодополнения кода. Нажмите на Ctrl+Space, чтобы включить автодополнение кода во время печати.
• Suggest import statements. Если поставить здесь галочку, Processing будет предлагать импортировать библиотеки, если заметит в скетче их код.
• Increase maximum available memory. Выделяет больше памяти RAM для работы скетчей Processing. Скетчам, использующим медиа-файлы (изображения, аудио и т.д.) иногда требуется больше RAM. Увеличьте количество RAM, если скетч выдает ошибки о нехватке памяти.
• Delete previous folder on export. Если поставить здесь галочку (она стоит по умолчанию), Processing удалит всю папку для экспорта перед ее воссозданием и добавлением в нее новых медиа-файлов.
• Check for updates on startup. Если поставить здесь галочку (она стоит по умолчанию), PDE будет информировать вас о выходе новых обновлений при помощи маленького диалогового окна, которое будет появляться при запуске Processing.
• Run sketches on display. Если к вашему ПК подключено более одного монитора, здесь можно выбрать монитор для отображения скетча.

Скетчи и «скетчбук»

Все проекты, разработанные в Processing, называются «скетчами». У каждого скетча есть собственная папка. Главный файл каждого скетча имеет то же название, что и папка, внутри которой он находится. К примеру, если скетч называется «Sketch_123», папка для этого скетча тоже будет называться «Sketch_123», а главный файл – «Sketch_123.pde». Разрешение «pde» расшифровывается как «Processing Development Environment».

Скетчи Processing можно хранить в любом месте вашего ПК, однако по умолчанию они сохраняются в «скетчбуке», который может быть в разных местах вашего ПК или сети – это зависит от используемой ОС (Windows, Mac OS или Linux) и заданных настроек. Чтобы узнать, где находится эта папка, кликните в PDE на File > Preferences (в Mac OS – на Processing > Preferences) – месторасположение «скетчбука» должно быть написано в поле «Sketchbook location».

В папке скетча иногда есть и другие папки, в которых хранятся медиа-файлы и другой код. Когда в скетч добавляется шрифт или изображение при помощи меню Sketch > Add File…, в папке скетча создается папка «data». Кроме того, файлы можно добавлять в скетч, просто перетаскивая их в текстовый редактор PDE. Добавляемые таким образом изображения и звуковые файлы будут автоматически добавлены в папку «data» текущего скетча. Все изображения, шрифты, звуки и другие данные, загружаемые в скетч, должны находиться в этой папке.

Визуализаторы

Processing имеет четыре встроенных визуализатора. Визуализатор, используемый по умолчанию, предназначен для рисования 2D-фигур. Визуализатор P2D работает быстрее него, но рисует 2D-фигуры с меньшей точностью. Визуализатор P3D предназначен для 3D-графики и может управлять камерой, освещением и материалами. Визуализаторы P2D и P3D будут работать быстрее, если ваш ПК оснащен видеокартой, совместимой с OpenGL. Уровень сглаживания в каждом визуализаторе настраивается при помощи функции smooth(). Более подробно о ней читайте в соответствующей статье.

С релизом Processing 3.0 в PDE был добавлен еще один визуализатор – FX2D. Он предназначен для быстрого отображения 2D-графики на больших экранах с высоким разрешением и работает быстрее визуализатора, используемого по умолчанию. Визуализатор FX2D – по-прежнему экспериментальный, но в некоторых ситуациях может оказаться полезным.

Визуализатор, используемый для каждого скетча, задается при помощи функции size(). Если визуализатор не задан в size()явно – как показано в примере ниже – в скетче будет использован визуализатор по умолчанию.

void setup() {
  size(200, 200);
}

void draw() {
  background(204);
  line(width/2, height/2, mouseX, mouseY);
}

Чтобы задать другой визуализатор, добавьте size() в третий параметр. Например, так:

void setup() {
  size(200, 200, P2D);
}

void draw() {
  background(204);
  line(width/2, height/2, mouseX, mouseY);
}

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

Более подробно о визуализаторах читайте в статье о функции size().

Система координат

Processing использует декартову систему координат с началом координат в левом верхнем углу дисплейного окна. Если ваш скетч 320 пикселей в ширину и 240 пикселей в высоту, то координата (0, 0) – это крайний левый верхний пиксель экрана, а координата (320, 240) находится в правом нижнем углу. Последним видимым пикселем в правом нижнем углу экрана будет (319, 239), потому что пиксели рисуются вправо вниз от начала координат.

При работе с визуализатором P3D используется 3-мерная система координат, при которой ось Z располагается на верхнем краю экрана, а ее отрицательные значения уходят вдаль от экрана. При рисовании в 3D камера расположена по центру экрана.

Вкладки, несколько файлов и классы

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

Для управления этими файлами предназначена стрелочка справа от меню вкладок в PDE. Кликните на нее, чтобы открыть меню с опциями для создания новой вкладки, переименования текущей вкладки и удаления текущей вкладки. Вкладки предназначены для более опытных пользователей – именно поэтому меню для управления вкладками намеренно сделано менее заметным.

Для опытных пользователей

Когда запущена программа с несколькими вкладками, код группируется вместе, а классы в других вкладках становятся вложенными классами. Поскольку это вложенные классы, они не могут иметь статических переменных. Поэтому просто помещайте статические переменные вне классов (если размещать их таким образом, вам даже не придется явно указывать, что они статические). Если вы не хотите, чтобы ваш код был вложенным классом, создайте вкладку с суффиксом «.java» – благодаря этому она будет интерпретироваться как «чистый и беспримесный» код Java. Кроме того, в отдельных вкладках нельзя использовать статические классы. Впрочем, если вы так все же сделаете, вам нужно будет передать объекту в этой вкладке объект PApplet, чтобы в нем заработали PApplet-функции вроде line(), loadStrings(), saveFrame() и т.д.

Отладка

Отладчик Processing – это инструмент для диагностики проблем со скетчем. Включите его, чтобы остановить работающий скетч, а затем пройдите по всему коду строчка за строчкой. Отладчик включается, если кликнуть в PDE на Debug > Enable Debugger или нажать на кнопку с изображением бабочки, находящуюся в правом верхнем углу PDE.

Когда отладчик включен, программа работает как обычно, но останавливается на так называемых «точках останова». Чтобы создать точку останова, поставьте курсор на строчке, где хотите остановить скетч, а затем нажмите в PDE на Debug > Toggle Breakpoint. Горячие клавиши для добавления точки останова –  Ctrl + B . Чтобы удалить точку останова, снова дайте команду Toggle Breakpoint. После добавления точки останова номер строчки изменится на маленький ромб.

Запуск скетча в режиме отладки заставляет скетч останавливаться на всех точках останова. Во время паузы в отдельном окне будут показаны текущие значения переменных скетча. Вы можете либо перейти к следующей точке останова при помощи кнопки Continue, либо пройти код строчка за строчкой при помощи кнопки Step. Пошаговое перемещение работает только в пределах текущей функции.

Режимы программирования

Processing имеет несколько разных режимов программирования, что позволяет создавать программы на разных языках и запускать их на разных платформах. Режим программирования по умолчанию – это режим Java. Другие режимы программирования (вроде Android Mode или Python Mode) можно добавить, кликнув на кнопку, находящуюся в правом верхнем углу PDE, и выбрав в открывшемся меню пункт «Add Mode...».

Режим Java

Этот режим позволяет писать короткие программы для отрисовки графики на экране, но также позволяет создавать сложные программы на языке Java. Им могут пользоваться новички, но он подойдет и для разработки профессиональных Java-программ. Скетчи, написанные в этом режиме, можно экспортировать в виде приложений Java, которые затем можно будет запускать на операционных системах Linux, Mac OS X и Windows.

Для опытных пользователей

К скетчу, создаваемому в режиме Java, могут быть подключены Java-файлы с расширением «*.java». Их можно создавать прямо в PDE или скопировать в папку скетча, нажав на Sketch > Add File... или просто перетащив нужный файл в текстовый редактор. В файлах с расширением «*.java» можно писать любой Java-код. Фактически, весь Java-код можно писать прямо в среде разработки Processing, сделав подкласс на основе PApplet. Примерно так:

public class MyDemo extends PApplet {

Эта техника предназначена только для опытных разработчиков, и мы использовать ее не рекомендуем. Использование этой техники означает, что ни одна дополнительная вкладка больше не будет вложенным классом, поэтому вам нужно будет дополнительно повозиться с тем, чтобы они корректно коммуницировали друг с другом при помощи PApplet. Если вы хотите воспользоваться дополнительным функционалом Java, использовать эту технику необязательно. Если вы опытный разработчик, которому нужны более продвинутые инструменты и средства для редактирования кода, вы можете создать скетч для Processing в другом редакторе языка Java. Файл «core.jar» Processing можно использовать в качестве части любого Java-проекта.

Добавление библиотек, инструментов и режимов программирования

Processing версии 3.0 имеет набор функций для упрощения установки, обновления и удаления библиотек, инструментов, режимов программирования и скетчей-примеров.

Чтобы добавить разработанную сообществом библиотеку, кликните в PDE на Sketch > Add Library… > Import Library... Это откроет меню Library Manager (менеджер библиотек). Затем выберите нужную библиотеку и кликните на кнопку Install, чтобы ее загрузить.

Чтобы добавить разработанный сообществом инструмент, кликните в PDE на Tools > Add Tool… Затем выберите нужный инструмент и нажмите на кнопку Install, чтобы установить его.

Чтобы добавить разработанный сообществом режим программирования, кликните в PDE на кнопку, расположенную в правом верхнем углу экрана, и в появившемся меню нажмите на пункт Add Mode... Затем выберите режим, который хотите установить, и нажмите на Install.

Чтобы добавить разработанный сообществом скетч-пример, кликните в PDE на File > Examples… Откроется новое меню – кликните на кнопку Add Examples…, расположенную вверху. Откроется еще одно меню, в котором нужно выбрать нужный скетч-пример, а затем нажать на Install.

Экспорт

На этой странице вики-энциклопедии о Processing рассказывается о том, как экспортировать приложения из режима Java.