Полное руководство по языку обработки, часть I: основы

Опубликовано: 2022-03-11

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

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

Полное руководство по языку обработки, часть I: основы

В колледже я был ассистентом преподавателя программы, которая собирала старшеклассников и обучала их процессингу. У большинства из них не было сильного опыта программирования, некоторые до этого не написали ни строчки кода. Ожидалось, что всего за пять дней они выучат язык и создадут собственные простые игры. Успешность была почти стопроцентной, с неудачами мы сталкивались редко. В этой статье мы именно этим и займемся. Я сократил всю программу на две части. Первая часть, я буду говорить о языке. Я дам базовый обзор, пошаговое руководство по обработке и дам несколько советов и приемов. Затем в следующей части мы шаг за шагом создадим простую игру, каждый шаг будет подробно объяснен. Я также конвертирую код игры в JavaScript с помощью p5js, чтобы наша игра могла работать в веб-браузере.

Что вы уже должны знать

Чтобы понять и легко следовать этим статьям, вы должны иметь базовые знания в области программирования, так как я не буду говорить об основах программирования. Однако я в основном не буду касаться каких-либо продвинутых концепций программирования, поэтому достаточно поверхностного понимания. В некоторых частях я рассказываю о некоторых низкоуровневых идеях и концепциях, таких как объектно-ориентированное программирование (ООП), но они не имеют решающего значения. Это для любознательных читателей, интересующихся структурой языка. Если вы не хотите знать, вы можете просто пропустить эти части. Кроме этого, единственное, что у вас должно быть, — это стремление выучить этот удивительный язык и энтузиазм, чтобы создать свою собственную игру!

Как подписаться

Я всегда за то, чтобы изучать программирование, пробуя и экспериментируя. Чем раньше вы погрузитесь в собственную игру, тем быстрее освоитесь с Processing. Итак, это будет мое первое предложение: попробуйте каждый шаг в своей среде. Processing имеет простую и удобную IDE (например, редактор кода), это единственное, что вам нужно скачать и установить, чтобы следовать. Вы можете скачать его отсюда.

Итак, приступим!

Что такое язык обработки?

Этот раздел включает краткий технический обзор языка, его структуру и некоторые примечания о процессе компиляции и выполнения. Подробности будут включать некоторые дополнительные знания в области программирования и среды Java. Если вас пока не интересуют подробности и вам не терпится изучить и написать свою собственную игру, вы можете перейти к разделу «Основы обработки».

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

 public void setup() { // setup codes goes here } public void draw() { // draw codes goes here }

Эти блоки кода будут преобразованы во что-то вроде этого:

 public class ExampleFrame extends Frame { public ExampleFrame() { super("Embedded PApplet"); setLayout(new BorderLayout()); PApplet embed = new Embedded(); add(embed, BorderLayout.CENTER); embed.init(); } } public class Embedded extends PApplet { public void setup() { // setup codes goes here } public void draw() { // draw codes goes here } }

Вы можете видеть, что блок кода обработки был обернут классом, унаследованным от Java PApplet. Поэтому все классы, которые вы определяете в своем коде обработки, если таковые имеются, будут рассматриваться как внутренние классы.

Тот факт, что Processing основан на Java, дает нам много преимуществ, особенно если вы Java-разработчик. Мало того, что синтаксис знаком, но он также дает вам возможность делать такие вещи, как встраивание кода Java, библиотек, файлов JAR в ваши эскизы, использование ваших апплетов Processing непосредственно в ваших приложениях Java, определение классов и использование стандартных типов данных, таких как int , float, char и так далее. Вы даже можете написать свой код обработки прямо из Eclipse, если хотите потратить некоторое время на его настройку. Одна вещь, которую вы не можете сделать, это использовать компоненты AWT или Swing в ваших эскизах Processing, потому что они конфликтуют с циклической природой Processing. Но не волнуйтесь, в этой статье мы не будем делать ничего подобного.

Основы обработки

Код обработки состоит из двух основных частей: блоков настройки и рисования . Блок настройки запускается один раз при выполнении кода, а блоки отрисовки выполняются непрерывно. Основная идея обработки заключается в том, что то, что вы пишете в блоке отрисовки, будет выполняться 60 раз в секунду сверху вниз, пока ваша программа не завершится . Мы построим все, воспользовавшись этой самой идеей. Мы будем заставлять наши объекты двигаться, вести счет, обнаруживать столкновения, реализовывать гравитацию и делать почти все остальное, используя эту функцию. Этот цикл обновления является сердцевиной нашего проекта . В следующих разделах я объясню, как использовать это сердцебиение, чтобы оживить ваш код. Во-первых, позвольте представить вам Processing IDE.

IDE обработки

Если вы дочитали до этого момента и все еще не загрузили Processing IDE, сделайте это. На протяжении всей статьи я буду описывать некоторые простые задачи, которые вы можете выполнить самостоятельно, вы можете практиковаться, только если у вас есть и работает среда IDE. Вот краткое введение в IDE обработки. Это очень просто и понятно, поэтому я буду краток.

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

Кнопка в виде бабочки справа от run & stop — это отладчик . Использование отладчика требует отдельной статьи, посвященной ему. Это выходит за рамки этой статьи, так что пока можете его игнорировать. В раскрывающемся списке рядом с кнопкой отладчика можно добавлять/устанавливать моды. Моды предоставляют вам определенный функционал, позволяют писать код для Android, позволяют писать код на Python и так далее и тому подобное. Моды также не рассматриваются, поэтому вы можете оставить его в режиме Java по умолчанию и игнорировать его.

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

О редакторе кода особо говорить нечего, это просто место, где вы пишете свой код. Есть номера строк (!) В старых версиях Processing их не было, и вы не представляете, как я был счастлив, когда впервые их увидел.

Черный ящик внизу — это консоль . Мы будем использовать его для распечатки материала для быстрой отладки. На вкладке ошибок рядом с консолью будут отображаться ваши ошибки. Это также новая полезная функция, появившаяся в Processing 3.0. В старых версиях ошибки выводились на консоль и их было сложно отследить.

Блок настройки

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

 public void setup() { // Size of our sketch will be 800x600, // and use the P2D rendering engine. size(800, 600, P2D); // We could have used this function instead of size() // fullScreen(P2D); // The background color of our sketch will be black // by default, unless specified otherwise background(0); // We could have used this to set a background image. // Note that size of our sketch should be the same as the image. // background(loadImage("test.jpg")); // Shapes and objects will be filled with red by default, // unless specified otherwise. fill(255,0,0); // Shaped and objects will have a white border by default, // unless specified otherwise. stroke(255); }

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

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

размер(ширина,высота);
размер(ширина, высота, визуализатор);

Значения ширины и высоты могут быть указаны в пикселях. Функция размера принимает третий параметр, рендерер, который используется для установки механизма рендеринга, который будет использовать наш эскиз. По умолчанию средство визуализации настроено на P2D. Доступны следующие средства визуализации: P2D (Обработка 2D), P3D (Обработка 3D, следует использовать, если ваши эскизы будут включать 3D-графику) и PDF (2D-графика рисуется непосредственно в файле PDF Acrobat. Дополнительную информацию можно найти здесь). Рендереры P2D и P3D используют графическое оборудование, совместимое с OpenGL.

fullScreen() — начиная с Processing 3.0 теперь можно использовать функцию fullScreen вместо функции size(). Как и функция size(), она также должна быть в первой строке блока настройки. Использование заключается в следующем:

полноэкранный();
полноэкранный (дисплей);
полноэкранный (рендерер);
полноэкранный (дисплей, рендерер);

Если вы используете его без каких-либо параметров, ваш скетч обработки просто запустится в полноэкранном режиме и будет работать на вашем основном дисплее. Параметр display используется для установки того, на каком дисплее будет работать ваш скетч. Например, если вы подключаете внешние мониторы к своему компьютеру, вы можете установить переменную дисплея на 2 (или 3, 4 и т. д.), и ваш скетч будет работать там. Параметр «рендерер» описан выше в части size().

Блок настроек

Это еще одна функция, представленная в новой версии Processing. Это блок кода, такой же, как настройка и рисование. Это полезно, когда вы хотите определить методы size() или fullScreen() с переменными параметрами. Также необходимо определить size() и другие свойства стиля, такие как smooth(), в этом блоке кода, если вы используете какую-либо среду, отличную от собственной IDE Processing, например Eclipse. Но в большинстве случаев он вам не понадобится, точно не в этой статье.

Нарисовать блок

О блоке рисования говорить особо нечего, но в нем все особенное. Блок рисования — это место, где происходит все волшебство. Это сердце вашей программы, бьющееся 60 раз в секунду. Этот блок кода содержит всю логику вашего кода. Все ваши формы, объекты и т. д. будут записаны здесь.

Большая часть кода, о котором мы поговорим в этой статье, будет взята из блока рисования, поэтому важно, чтобы вы четко понимали, как работает этот блок кода. Чтобы дать вам демонстрацию, вот что вы можете попробовать. Во-первых, обратите внимание, что мы можем вывести что угодно на консоль с помощью методов print() или println() . Методы печати печатают только на консоль, однако println печатает и добавляет новую строку в конце, поэтому каждый println() будет печатать в отдельных строках.

Итак, взгляните на следующий блок кода. Во-первых, попробуйте угадать, что он напечатает в консоли. Тогда попробуйте:

 void setup(){ } void draw(){ int x = 0; x += 1; print(x+" "); }

Если вы угадали «1 2 3 4…», я вас понял! Это одна из путаниц в Processing. Помните, этот блок постоянно выполняется? Когда вы определяете переменную здесь, она определяется в каждом цикле снова и снова. На каждой итерации x устанавливается равным 0, увеличивается на 1 и выводится на консоль. Поэтому мы получаем результат «1 1 1 1…». Этот пример был несколько очевиден, но он может сбивать с толку, когда все немного усложняется.

Мы не хотим, чтобы x перезаписывался, так как же нам этого добиться и получить результат «1 2 3 4…»? С помощью глобальных переменных . В этом нет ничего необычного, мы только определяем переменную вне блока рисования, поэтому она не переопределяется на каждой итерации. Кроме того, область действия переменной будет доступна во всем скетче. См. код ниже:

 int x = 0; void setup(){ } void draw(){ x += 1; print(x+" "); }

Вы можете спросить себя, как может работать переменная, определенная вне наших блоков? И почему мы не использовали блок setup(), поскольку он выполняется один раз в начале? Ответ связан с объектно-ориентированным программированием и областями видимости, если вы не знакомы, то можете пропустить этот абзац. Обратитесь к той части, где я объяснил, как код Processing преобразуется в Java. Помните, как они оборачиваются классом Java? Переменные, которые мы пишем вне блоков setup() и draw(), также оборачиваются, поэтому они рассматриваются как поля внешнего класса, который оборачивает наш код. Использование x+=1 аналогично использованию this.x+=1. В нашем случае он работает так же, переменная с именем x не определена в области видимости draw(), и поиск осуществляется во внешней области видимости, которая является областью видимости this . И почему мы не определили нашу переменную x в разделе setup()? Если бы мы это сделали, область действия, в которой определяется x, была бы областью действия функции настройки, и она была бы недоступна из блока draw().

Рисование фигур и текстов

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

Прежде чем мы начнем, вы должны понять систему координат . В Обработке вы определяете координаты каждого объекта, который рисуете на экране. Система координат в пикселях. Исходная точка (т.е. начальная точка) находится в верхнем левом углу, вы должны указать свои координаты относительно этой точки. Еще одна вещь, которую вы должны знать, это то, что у каждой формы есть своя точка отсчета. Например, rect() использует верхний левый угол в качестве контрольной точки. Для ellipse() это центр. Эти опорные точки можно изменить с помощью таких методов, как rectMode() и ellipseMode(), которые я объясню в разделе свойств и настроек. Пример рисунка приведен, чтобы помочь вам лучше понять.

Эта статья представляет собой базовый обзор обработки, поэтому мы не будем касаться сложных форм, таких как вершины или трехмерные фигуры. Базовых 2D-форм на самом деле будет более чем достаточно для создания собственной игры. На рисунке вы можете увидеть примеры того, как рисуются фигуры. Каждая форма имеет свой собственный синтаксис для создания, но основная идея состоит в том, чтобы указать либо ее координаты, либо ее размеры, либо и то, и другое. Вот некоторые формы, с которыми вы должны быть знакомы (для всех значений, приведенных ниже, «x» и «y» означают координаты x и y в пикселях, «w» и «h» означают значения ширины и высоты также в пикселях):

point() - Простая точка, нужна только одна координата. Применение:

точка (х, у)
точка (x, y, z) — если вы используете 3 измерения.

line() - Для создания линии. Вы можете создать линию только с начальной и конечной точкой. Применение:

линия (x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2) — если вы используете 3 измерения.

треугольник () - для создания треугольника. Использование: треугольник (x1, y1, x2, y2, x3, y3)

quad() — для создания четырехугольника. Использование: четырехъядерный (x1, y1, x2, y2, x3, y3, x4, y4)

rect() — для создания прямоугольника. Контрольной точкой по умолчанию является верхний левый угол (см. рисунок). Вот использование:

прямоугольник (х, у, ш, ч)
rect(x, y, w, h, r) - 'r' означает радиус в пикселях для закругления углов.
rect(x, y, w, h, tl, tr, br, bl) - Радиус для верхнего левого, верхнего правого, нижнего правого, нижнего левого углов соответственно. Это тоже в пикселях.

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

эллипс (х, у, ш, ч)

arc() - Нарисовать дугу. Применение:

arc(x, y, w, h, start, stop) - 'start' и 'stop' используются для определения угла начала и окончания рисования дуги. Значения указаны в радианах. Можно использовать такие константы, как «PI, HALF_PI, QUARTER_PI и TWO_PI».
arc(x, y, w, h, start, stop, mode) - переменная 'mode' предназначена для определения стиля рендеринга дуги (строка). Доступные варианты: «OPEN, CHORD, PIE». OPEN оставит ненарисованные части без полей. CHORD дополнит ненарисованные части рамкой. PIE сделает вашу дугу похожей на круговую диаграмму.

Отображение текстов на экране похоже на отображение фигур, основная идея заключается в том, что вы определяете координату, в которой вы хотите, чтобы ваш текст отображался. Однако есть еще кое-что, связанное с обработкой текстов. У вас будет больше контроля над вашими текстами после раздела свойств и настроек, где вы узнаете, как применять настройки и свойства к объектам. А пока я покажу основы отображения текстов. Есть много способов сделать это, я покажу только самое необходимое.

text() - Показать тексты. Применение:

text(c, x, y) - 'c' означает символ, будет отображаться любой буквенно-цифровой символ.
text(c, x, y, z) - Если вы работаете с 3 измерениями.
text(str, x, y) - 'str' это отображаемая строка.
text(str, x, y, z) - Если вы работаете с 3 измерениями.
text(num, x, y) - 'num' - числовое значение, которое будет отображаться.
text(num, x, y, z) — если вы работаете с 3 измерениями.

Свойства и настройки

Первое, что следует объяснить в этом разделе, — это логика установки свойств объектов. Примерами этих свойств могут быть цвет заливки, цвет фона, граница, ширина границы, цвет границы, выравнивание фигур, стили границы и т. д.

Когда вы устанавливаете свойство, вы должны помнить, что код будет выполняться сверху вниз . Скажем, вы установили для свойства «заливка» красный цвет, все объекты, нарисованные ниже этой линии, будут залиты красным цветом, пока он не будет перезаписан другим свойством заливки. То же самое относится и к другим свойствам, однако обратите внимание, что не все свойства перезаписывают друг друга. Например, свойство «обводка» не перезаписывает свойство «заливка», вместо этого они работают вместе. Вот визуальное представление для понимания логики:

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

Вот некоторые основные свойства и настройки, которые обычно используются:

Настройки стиля

fill() — устанавливает цвет заливки для объектов. Этот параметр также используется для окрашивания текста. На данный момент нам нужно знать только следующее использование:

fill(r, g, b) - Красные, зеленые и синие значения как целое число
fill(r, g, b, a) — дополнительное альфа-значение, макс. 255

noFill() - Устанавливает прозрачный цвет заливки.

stroke() - Устанавливает цвет обводки для объектов. Свойство Stroke применимо к линиям и границам вокруг объектов. На данный момент нам нужно знать только следующее использование:

stroke(r, g, b) — значения красного, зеленого и синего в виде целых чисел.
штрих (r, g, b, a) - дополнительное альфа-значение, макс. 255

noStroke() - Удаляет обводку.

strokeWeight() - Устанавливает ширину обводки. Применение:

strokeWeight(x) - x является целым числом и представляет ширину штриха в пикселях.

background() - устанавливает цвет фона. На данный момент нам нужно знать только следующее использование:

background(r, g, b) — значения красного, зеленого и синего в виде целых чисел.
background(r, g, b, a) — дополнительное альфа-значение, макс. 255

Настройки выравнивания

ellipseMode() - Устанавливает, где взять в качестве точки отсчета выравнивание эллипсов. Применение:

ellipseMode(mode) - 'режим' является параметром, вот доступные параметры:
- ЦЕНТР (по умолчанию): Возьмите центр в качестве контрольной точки.
- РАДИУС: центр также используется в качестве контрольной точки, но в этом режиме указанные вами значения w и h обрабатываются как половинные (т. е. радиус вместо диаметра).
- УГОЛ: Берет верхний левый угол в качестве контрольной точки.
- УГОЛКИ: устанавливает первые два параметра (x и y) в качестве положения верхнего левого угла, а последние два параметра (w и h) — в качестве положения нижнего левого угла эллипса. Так что этот режим, «ширина» и «высота» значения не имеют. Думать об этом как об эллипсе (x_tl, y_tl, x_br, y_br) в этом случае больше смысла.

rectMode() - Устанавливает, где взять в качестве точки отсчета выравнивающие прямоугольники. Применение:

rectMode(mode) - 'режим' является параметром, вот доступные параметры:
- ЦЕНТР: Возьмите центр в качестве контрольной точки.
- РАДИУС: центр также используется в качестве опорной точки, но в этом режиме указанные вами значения w и h рассматриваются как половинные.
- УГОЛ (по умолчанию): В качестве контрольной точки используется верхний левый угол.
- УГОЛКИ: устанавливает первые два параметра (x и y) в качестве положения верхнего левого угла, а последние два параметра (w и h) — в качестве положения нижнего левого угла эллипса. Так что этот режим, «ширина» и «высота» значения не имеют. Думать об этом как о rect(x_tl,y_tl,x_br,y_br) в этом случае больше смысла.

Настройки, связанные с текстом

textSize() — устанавливает размер шрифта текста. Применение:

textSize(size) - Целочисленное значение нужного размера.

textLeading() - Устанавливает высоту строки ваших текстов. Применение:

textLeading(lineheight) — значение расстояния между строками в пикселях.

textAlign() - Устанавливает, где взять за точку отсчета выравнивание текстов. Применение.

textAlign(alignX) — 'alignX' для горизонтального выравнивания. В наличии: СЛЕВА, ЦЕНТР, СПРАВА
textAlign(alignX, alignY) — 'alignY' для вертикального выравнивания. Доступно: ВЕРХ, НИЗ, ЦЕНТР, БАЗА.

Анимации

Пока что мы научились рисовать объекты и тексты. Но проблема с ними в том, что они статичны. Теперь, как мы заставим их двигаться? Просто, вместо того, чтобы задавать координаты как целые числа, мы используем переменные, чтобы мы могли увеличивать/уменьшать их . Есть смысл? Взгляните на следующий код:

 // initialize x and y as 0 int x=0; int y=0; void setup(){ size(800,600); background(255); // set background color to white } void draw(){ fill(255,0,0); // fill color red stroke(0,0,255); // stroke color blue ellipseMode(CENTER); // ref. point to ellipse is its center ellipse(x, y, 20, 20); // draw the ellipse // increment x and y x+=5; y+=5; }

Видите, как мы справились с анимацией? Мы устанавливаем x и y как глобальные переменные и их начальное значение равно 0. В нашем цикле отрисовки мы создали наш эллипс, установили красный цвет заливки, синий цвет обводки и координаты x и y. Когда мы увеличиваем x и y, мяч просто меняет свое местоположение. Но с этим кодом есть проблема, вы ее заметили? В качестве легкой задачи для себя попытайтесь понять, в чем проблема, и протестируйте ее. Вот результат:

Мое намерение позволить этому случиться состояло в том, чтобы заставить вас понять, как работает циклическая природа Процессинга. Обратитесь к примеру в разделе «Нарисовать блок», вы помните, почему мы получили «1 1 1…» вместо «1 2 3…»? По той же причине, по которой мяч оставляет следы. Каждый раз, когда блок рисования выполняет итерацию, x и y увеличиваются на 5, и поэтому мяч перерисовывается на 5 пикселей вниз и вправо. Однако мяч, извлеченный из предыдущих итераций, остается в поле зрения. Как заставить их уйти? Есть предположения?

Чтобы избавиться от следов, оставляемых мячом, мы просто удаляем фон (255) из блока настройки и вставляем его в самую первую строку блока рисования. Когда наш фоновый код находился в блоке настройки, он запускался один раз в начале, делая наш фон белым. Но этого недостаточно, нам нужно установить белый фон в каждом цикле, чтобы покрыть шары, извлеченные из предыдущих циклов. Фон, являющийся первой строкой, означает, что он запускается первым, он становится базовым слоем. На каждом цикле наш холст окрашивается в белый цвет, а новые элементы рисуются поверх белого фона. Так что у нас нет следов.

В этом и заключается идея анимации вещей в Processing, программного управления координатами объектов для изменения их местоположения. Но как мы будем делать причудливые вещи, например, держать мяч на экране? Или, может быть, реализация гравитации? Я научу, как это делать, в следующей части этой статьи. Мы будем учиться, пытаясь и строя. Мы узнаем, как это сделать, и сразу применим их к нашей игре. В конце концов, у нас будет полная играбельная и, надеюсь, веселая игра.

Взаимодействие с клавиатурой и мышью

Взаимодействие с клавиатурой и мышью в Processing очень простое и понятное. Есть методы, которые вы можете вызывать для каждого события, и то, что вы пишете внутри, будет выполнено один раз, когда произойдет событие. Также есть глобальные переменные, такие как mousePressed и keyPressed, которые вы можете использовать в своем блоке рисования, чтобы воспользоваться преимуществами цикла. Вот некоторые из методов с пояснениями:

 void setup() { size(500, 500); } void draw() { if (mousePressed) { // Codes here will be executed as long as the mouse // button is pressed if (mouseButton == LEFT){ // This lines will be executed as long as // the clicked mouse button is the left mouse // button. } } if (keyPressed) { // Codes here will be executed as long as a key // on the keyboard is pressed if (key == CODED) { // This if statement checks if the pressed key // is recognised by Processing. if (keyCode == ENTER) { // This lines will be executed if the pressed key // is the enter key. } } else{ // This lines will be executed if the pressed key // is not recognised by processing. } } } void mousePressed() { // These codes will be executed once, when mouse // is clicked. Note that mouseButton variable is // also be used here. } void keyPressed() { // These codes will be executed once, when a key // is pressed. Note that key and keyCode variables // are also usable here. }

Как видите, довольно легко проверить, щелкнута ли мышь или какая клавиша нажата. Однако для переменных mousePressed и keyCode доступно больше параметров. Доступные параметры для mousePressed : ВЛЕВО, ВПРАВО и ЦЕНТР. Для keyCode доступно гораздо больше; ВВЕРХ, ВНИЗ, ВЛЕВО, ВПРАВО, ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC и DELETE.

Одна вещь, которую нужно знать о переменных мыши, и мы будем часто использовать ее, это как получить координаты мыши. Чтобы получить точные координаты курсора, мы можем использовать переменные mouseX и mouseY непосредственно в блоке draw(). И последнее, но не менее важное: есть много других полезных методов, на которые стоит обратить внимание. Все они задокументированы в справочнике по обработке.

Заключение

Вы уже должны быть знакомы с процессингом. Однако если вы остановитесь на этом, все эти знания улетят . Я настоятельно рекомендую вам продолжать практиковаться, играя с тем, что вы узнали. Чтобы помочь вам попрактиковаться, я дам вам два упражнения. Вы должны постараться сделать это самостоятельно. Если вы застряли, Google и Processing Reference должны быть вашими лучшими друзьями. Я предоставлю код для первого, но просмотр их должен быть последним, что вы будете делать.

Дальнейшее чтение в блоге Toptal Engineering:

Как подойти к написанию интерпретатора с нуля