Processing что это за программа

Цель написания этого топика — познакомить вас с замечательным языком Processing. Этот ЯП не может похвастать широкой функциональностью или богатыми выразительными средствами, но он способен предложить кое-что другое…

Что же это такое?

Итак, processing — это подязык программирования, основанный на java с простым и понятным си-подобным синтаксисом.
Processing дает возможность быстро и легко создавать мультимедиа приложения (в терминологии processing — скетчи). Под словом мультимедиа я подразумеваю средства языка, которые позволяют разрабатывать графику, анимацию, разнообразную визуализацию, интерактивные приложения…
В принципе, ничего не мешает создавать даже 3D-аппликации (в том числе и игры), ведь processing имеет средства поддержки OpenGL. Все эти возможности, вкупе с большим количеством функций и очень логичным синтаксисом, делают этот язык идеальным для обучения и прививания интереса к программированию.

Прекрасно понимая, что одна картинка стоит тысячи слов, хочу представить пару примеров визуализации, созданной в processing:

Большой урок по программированию на Processing

Как начать

Procesing 1.0 — это бесплатное, открытое, кроссплатформенное ПО.
Исходный архив включает в себя java-машину, сам интерпретатор, мини-IDE, и несколько десятков примеров. Версии для разных платформ доступны на странице загрузки (все ссылки в конце топика).
После загрузки и распаковки архива, необходимо найти в корневом каталоге исполняемый файл, запускающий IDE, в котором можно и нужно писать код.
Все готово к работе!

Быстрый старт

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

По моему мнению, он очень поход на классический си. Так что если у вас есть опыт работы с такими языками, как C, PHP, JavaScript, etc, то можно считать, что processing вы практически знаете — очень многие языковые конструкции, операторы, циклы выглядят точно так же.

Разберемся с терминологией.

Скетч — исходный файл вашей программы.
Скетчбук — каталог, содержащий исходные файлы, файлы ресурсов и т.д. Короче все, что относится к одному проекту.
PDE — Processing Development Environment. Родная среда разработки языка.

Еще раз о возможностях

Прежде чем я начну рассматривать примеры кода, хочу еще раз упомянуть те возможности, которые нам предлагает processing.
Итак, в нашем распоряжении инструменты для построения графических примитивов, 3D-объектов, работа со светом, текстом, инструментами трансформации. Мы можем импортировать и эскпортировать файлы аудио/видео/звуковых форматов, обрабатывать события мыши/клавиатуры, работать со сторонними библиотеками (openGL, PDF, DXF), работать с сетью.

Вот так выглядит PDE в среде Windows XP:

Результат выполнения программы:

Пишем хелловорлд

Наконец мы подобрались к самому главному — первому примеру кода. Аналогом классического «hello, world» у нас будет вот такой код:

Что делает эта функция, я думаю, в пояснении не нуждается. Но на всякий случай расскажу 🙂
Функция line принимает четыре аргумента и рисует в двухмерной плоскости линию с координатами, заданными в аргументах, с цветом и толщиной по умолчанию. Аргументы в порядке использования: x1, y1, x2, y2 — координаты начальной и конечной точек.
Собственно, практически все задачи решаются в этом языке такими же простыми способами. Для 3D-объектов, естественно, добавляется ось Z.

Начальная инициализация

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

Так, например, все функции инициализации: size() — размер окна, stroke() — цвет линий, background() — цвет фона, и некоторые другие, необходимо помещать внутрь специальной служебной функции void setup(). Рекомендуется писать ее первой.

Следующая служебная функция — void draw(). Её аналогом можно назвать int main() в C++.
Эта функция является основой для построения любой анимации. Её особенностью является то, что она автоматически вызывается при каждом обновлении фреймбуфера.

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

1. ellipse(WIDTH/2, HEIGHT/2, 50, 50);

Вот пример маленькой программки, написанной с использованием соглашений:

1. void setup()
2. size(400, 400);
3. stroke(255);
4. background(192, 64, 0);
5. >
6. void draw()
7. line(150, 25, mouseX, mouseY);
8. >

Функции mouseX и mouseY возвращают текущие координаты курсора мыши. Таким образом, при каждом движении мыши будут рисоваться новые линии. Выглядит это вот так:

Напоследок

Предвидя возможные возгласы, вроде «Да чем этот процессинг лучше того же Adobe Flash/Microsoft Silverlight etc. ».
Во-первых: это отличная бесплатная и открытая альтернатива. Тем более, что результат ваших трудов можно сконвертировать в джава-апплет и вставить на веб-страницу.
Во-вторых: сами разработчики уже ответили на этот вопрос в своем FAQ. Не могу не процитировать один абзац оттуда:

There are things that are always going to be better in Flash, and other types of work that will always be better in Processing. But fundamentally (and this cannot be emphasized enough), this is not an all-or-nothing game… We’re talking about tools. Do people refuse to use pencils because pens exist? No, you just use them for different things, and for specific reasons. If Processing works for you, then use it. If not, don’t. It’s easy!

It’s free! You’re not being forced to do anything.

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

Ссылки

• Официальный сайт языка Processing
• Страница загрузки
• Полная документация
• Страница с огромным количеством живых примеров
• Примеры отличных видео-визуализаций

• processing
• языки прораммирования
• мультимедиа
• графика
• визуализация

• Программирование
• Processing

Источник: habr.com

Processing. Урок 12. Ардуино

Привет! Можно ли связать приложение в компьютере и схему на основе Ардуино? Конечно, можно. Для этого даже существует специальный язык программирования Processing. Хотя данные между компьютером и платой передаются через последовательный порт, так что вы можете использовать любой язык поддерживающий работы через com порт.

В этом уроке нам понадобятся класс и функции для работы с com портом. Для этого у нас уже были уроки. Посмотрите их если уже забыли или пропустили.

С помощью языка программирования Processing мы сможем создать приложение для windows, osx или linux и считывать данные с последовательного порта.

Для того, чтобы выполнить этот урок нам понадобиться.

• Ардуино UNO
• Макетная плата
• Перемычки
• Потенциометр
• Кабель USB

Processing

Это открытый язык программирования, основанный на Java. Программа на Processing называется скетч так же как и в Ардуино. Ну и язык программирования Ардуино основан на Processing. Так что даже среда разработки выглядит одинаково.

Скачаем среду разработки на официальном сайте. http://processing.org

Устанавливать ее не нужно, можно сразу запустить.

Схема и программа Ардуино

Наша цель сегодня собрать схему на Ардуино. Передать данные от потенциометра. И считать данные в программе на компьютере.

Соберем простую схему с двумя потенциометрами. Подключим их к портам А0 и А1.

А на плату Ардуино загрузим простой скетч. Который считает данные из портов А0 и А1 и запишет их в последовательный порт.

const int POT0=0; const int POT1=1; int val0; int val1; void setup() < Serial.begin(9600); >void loop()

Отправлять данные будем одной строкой. Но разделим один потенциометр от другого точкой. После записи данных со второго потенциометра отправим символ перевода строки.

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

Processing программа

Теперь осталось написать программу для считывания данных из com порта и их обработки. Откроем IDE processing и напишем простую программу.

Подключим класс для работы с последовательным портом и создадим объект port.

import processing.serial.*; Serial port;

Объявим все необходимые переменные.

float dataFloat = 0; int dataInt = 0; String strData; String[] listData = ;

В функции setup() создадим окно программы размером 255 на 255 пикселей.

Откроем последовательный порт для работы и настроим считывание до обнаружения специального символа конца строки.

void setup() < // Размер окна size(255, 255); port = new Serial(this, «COM5», 9600); // Инициализация // последовательного порта port.bufferUntil(‘n’);// Символ конца строки >

Настроим событие, которое сработает, если на последовательном порту появятся данные. Мы можем считать данные в переменную float. Таким образом у нас появятся данные с двух потенциометров. Но с первого в целой части, а со второго в дробной.

Чтобы разделить их по разным переменным, преобразуем float в string и разделим ее на элементы массива.

void serialEvent(Serial port) < dataFloat = float(port.readStringUntil(‘n’)); // Получить переменную dataInt = int(dataFloat); strData = str(dataFloat); listData = split(strData, ‘.’); println( listData[0] ); println( listData[1] ); >

Теперь осталось перерисовать окно программы. Для этого есть функция draw(). Она работает как цикл loop() в Ардуино. Постоянно выполняет код внутри функции.

Передадим в нее переменные, которые мы вычислили из последовательного порта.

void draw()

Полный текст программы

// код программы Processing import processing.serial.*; Serial port; float dataFloat = 0; int dataInt = 0; String strData; String[] listData = ; void setup() < // Размер окна size(255, 255); port = new Serial(this, «COM5», 9600); // Инициализация // последовательного порта port.bufferUntil(‘n’);// Символ конца строки >void draw() < background(0, 0, dataFloat); stroke(255); line(float(listData[0]), float(listData[1]), mouseX, mouseY); >// Перерисовать окно void serialEvent(Serial port) < dataFloat = float(port.readStringUntil(‘n’)); // Получить переменную dataInt = int(dataFloat); strData = str(dataFloat); listData = split(strData, ‘.’); println( listData[0] ); println( listData[1] ); >

В целом программа напоминает программу на Ардуино. Языки программирования очень похожи друг на друга.

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

Заключение

Курс Arduino — Processing

Processing Хотелось ли вам сделать свою игру? А управлять собственной игрой с собственного джойстика? Если да, то вы по адресу! Что такое Processing?Processing – это язык программирования, основанный на Java. С помощью него легко можно “оживить” показания датчиков, а из скучных цифр устроить красочную анимацию. Кстати, Arduino IDE написана на Processing. Я не буду рассказывать об основах Processing. Если станет интересно – на сайте processing.org есть обучающие видео от Даниэля Шиффмана. Одна загвоздка – они на английском. Если языковой барьер мешает изучать Processing, то можно поискать в интернете обучающие видео. На helloprocessing.ru есть перевод уроков Шиффмана к часу кода. Поехали! Так как Processing не предназначен для создания игр, от сложных проектов придется отказаться. А вот небольшую игру из 90ых накодить – пожалуйста. Этой игрой будет Арканоид. Если кто не помнит или не знает, Арканоид – это игра, цель которой сбить шариком все кирпичи сверху и при этом не дать мячу упасть ниже платформы. Управлять платформой мы будем с джойстика. А играть будем на экране компьютера.
Примечание: В одном из последующих уроков джойстик станет беспроводным. Начнем с необходимых сегодня компонентов. Их немного:

• Arduino UNO – для считывания показаний с джойстика и передачи их в Processing через Serial port.
• Модуль Джойстик – для управления платформой.
• Компьютер с установленными Arduino IDE и Processing .

Схема джойстика

• Vcc – подключается к выводу в 5V
• VER или X – подключается к A0
• HOR или Y – подключается к А1
• SEL или SW – подключается к 2
• Gnd – подключается к земле

Готовый джойстик

Сейчас нужно подумать, как же связать Arduino и компьютер. Для этого и существует Serial port. Помните – мы использовали Serial monitor в Arduino IDE для просмотра показаний с датчиков? Теперь с помощью передачи данных с джойстика в Serial мы сможем управлять платформой. Осталось разобраться с тем, каким образом мы будем это делать.

Алгоритм

• Джойстик – пишем код на Arduino IDE, с помощью которого считываем показания с джойстика.
• Serial – отправляем показания джойстика в Processing с помощью Serial.
• Processing – обрабатываем поступившие показания и пишем код игры на Processing.

Джойстик и Serial

Открываем Arduino IDE и пишем код.

#define axisX A0 //Ось Х джойстика, отвечающая за движение вверх и вниз #define axisY A1 //Ось Y джойстика, отвечающая за движение влево и вправо #define buttion 2 //Кнопка на джойстике void setup() < //Обозначим оси как выходы. pinMode(axisX, INPUT); pinMode(axisY, INPUT); //. а кнопку как выход с подтягивающим резистором pinMode(buttion, INPUT_PULLUP); //Установим соединение с Serial портом Serial.begin(9600); >void loop() < //Переменные для передачи данных int Y = analogRead(axisY); int X = analogRead(axisX); int B = digitalRead(buttion); //Протокол передачи данных Serial.print(Y); Serial.print(«,»); Serial.print(X); Serial.print(«,»); Serial.println(B); >

Протокол?

Возможности Serial port ограничены передачей только одного показания, а показаний то у нас целых три – ось Х, ось Y и кнопка. Для этого и нужны протоколы связи. Что такое протокол?

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

Так и с устройствами. Они не могут понимать друг друга без протокола связи. Он устанавливает правила общения между устройствами и позволяет им понимать друг друга. Если хочется более полного и “мудреного” объяснения загляните в Википедию.

Вернемся к скетчу. Данные с джойстика отправляются в виде:

ОсьY, ОсьX, Кнопка *Переход на другую строку*

Это и есть наш протокол. Осталось научить Processing его распознавать.

Processing

Теперь нужно открыть Processing.

Начнем с “дешифровки” нашего протокола.

Код

//Импортируем библиотеку для работы с Serial monitor import processing.serial.*; //Создаем объект класса Serial Serial myPort; //Создаем переменные для полученных показаний int reset, axisX, axisY; //Создаем переменную для размера шрифта int fontSize = 36; void setup() < //Определяем размер окна size(480, 480); //Выводим список COM портов и берем тот, //к которому подключен микроконтроллер //У Windows обычно 1 порт, а у MAC — 0 println(Serial.list()) ; String portName = Serial.list()[1]; //Открываем последовательный порт myPort = new Serial(this, portName, 9600); //Считываем приходящие данные, пока не дойдем до символа //перевода строки myPort.bufferUntil(‘n’); >//Этот метод вызывается тогда, когда в буффер пришло //значение перевода строки void serialEvent(Serial myPort) < //Считываем данные из буффера String inputString = myPort.readStringUntil(‘n’); //Отбрасываем ненужные символы(возврат каретки и перевод строки) inputString = trim(inputString); //Разделяем полученную строку по запятым и задаем переменным //нужные значения int axises[] = int(split(inputString, ‘,’)); if(axises.length == 3) < axisY = axises[0]; axisX = axises[1]; reset = axises[2]; >> //Этот метод рисует показания датчиков на экране //В процессе дешифровки протокола участия не принимает void draw() < //Задаем цвет фона в кодировке rgb или html, если не задать — будет черный background(#044f6f); //Задаем цвет заполнения в кодировке rgb или html, если не задать — будт белый fill (#ffffff); //Создаем шрифт — его размер, стиль PFont myFont = createFont(PFont.list () [2], fontSize); //Задаем шрифт textFont(myFont); //Выводим показания датчиков на экран text(axisY, width / 2, height/ 2); text(axisX, width / 2, height / 2 + 40); text(reset, width / 2, height / 2 — 40); >

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

Игра

Теперь можно начинать делать игру. Так как код достаточно большой, я не буду писать его. Код можно найти в прикрепленных файлах под именем Game.pde.

Пояснения

Структура игры состоит из методов или функций, которые взаимодействуя друг с другом, создают игру. А метод draw выводит на экран картинку производимых действий.

Так как Processing не предназначен для создания игр, в нем нет функции о соприкосновении объектов друг с другом, поэтому пришлось определять момент столкновения по координатам, что несколько сложнее.

Каждое действие должно подлежать описанию, а для того чтобы определить действия используются переменные, которые меняют свое значение в соответствии с выполняемым сейчас действием. К примеру – при запуске игры значение переменной start равно нулю, в это время на экране мы видим надпись “Press the button!”, а при нажатии кнопки, значение переменной start становится равным единице и начинается игра.

Итог

Ура! Получился Арканоид V1.0. Я собираюсь дальше улучшать его и привести к канонам настоящего Арканоида с бонусами и уровнями, с кирпичами и блоками.

Геймплей Арканоида можно посмотреть на видео.

Как вторая версия будет готова, обязательно поделюсь, а пока – можно двигаться дальше.

Прикрепленные файлы:

• Joystic.ino (1 Кб)
• Protocol.pde (3 Кб)
• Game.pde (9 Кб)

Теги:

Симилячник Опубликована: 18.08.2016 0 1

Вознаградить Я собрал 0 1

Оценить статью

• Техническая грамотность

Источник: cxem.net