Здравствуйте, дорогие друзья! С сегодняшнего дня мы начинаем изучать взаимодействие платформы Arduino с программной средой Processing. 

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

Весь урок будет разбит на 6 частей:

И так, поехали!

Общая часть

Давайте же разберемся что такое Processing, как его настроить и запустить!

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

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

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

Как видите, этот язык очень богат разнообразными функциями и инструментами. Хотелось бы показать несколько примеров работы Arduino и Processing.

 

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

Теперь давайте познакомимся с данным языком подробнее. Для начала скачиваем среду разработки PDE (Processing Development Evironment) с официального сайта. Перейдя на сайт, нажимаем на кнопку Dowload Processing

Затем скачиваем, нажав на свою операционную систему

После того, как архив загрузился, распаковываем его в удобную папку. И из распакованной папки запускаем файл под названием processing.exe

Перед нами открывается вот такое окно:

Не правда ли знакомый интерфейс? А все потому, что среда для Arduino как раз основана на этой среде. 

Также, как и в Arduino IDE, в Processing'е есть две основные функции:

• setup()
• draw() (такие же функции как и в loop())

Пример

Теперь давайте создадим простое устройство, чтобы понять сам принцип работы. 

Нам нужны следующие компоненты:

• Arduino Uno
• Breadboard
• Соединительные провода "папа-папа"
• Перемычки (в качестве них использовал скобы от степлера)
• Переменный Резистор (в уроке используется на 20кОм)

Для начала собираем вот такую схему:

У меня получилось вот так:

Теперь открываем Arduino IDE и вставляем следующий скетч:

int potPin = 0;

void setup()
{
 
 Serial.begin (9600);

}

void loop() 
{
 int val = map(analogRead(potPin),0,1023,0,255);
 Serial.println(val);
 delay(50); 

}

Подробно на этом останавливаться не будем, т.к. предполагается, что начав изучать графическую среду PDE, Вы уже изучили Arduino и понимаете смысл кода. Скажу только то, что в этом коде считывается значение с аналогового входа A0(potPin). И это значение записывается в цифровом диапазоне в переменную val. Которую затем мы отправляем в последовательный порт. 

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

import processing.serial.*; 
Serial port;
float val = 0;

void setup()
{
 size(300,300);
 port = new Serial(this,"COM3",9600);
 port.bufferUntil('\n');
}

void draw()
{
 background(0,val,0);
}

void serialEvent(Serial port)
{
 val = float (port.readStringUntil ('\n'));
}

Перед тем как запустить, давайте разберемся с кодом. 

• Импортируем Serial библиотеку

  import processing.serial.*; 

• Создаем объект Serial под названием port

  Serial port;

• Создаем переменную float типа val. Это значение мы будем получать с Arduino. То самое значение, которое меняется с изменением сопротивления потенциометра

  float val = 0;

• Так же как и в Arduino IDE, в Processing'e имеется функция setup() . Первым делом, в этой функции, надо создать наше рабочее окно. Создаем окно с размерами 300х300 пикселей

   size(300,300);
  

• Инициализируем наш порт. Также как в Arduino Serial.begin. Только немного иначе. У меня Arduino подключено к порту "COM3" (у Вас этот порт может быть другим). 

   port = new Serial(this,"COM3",9600);

• Теперь проверяем, поступает ли на наш порт что-нибудь. ('\n') - символ, означающий перевод на новую строку. 

   port.bufferUntil('\n');

• Функция drow() (как и loop() в Arduino IDE), работает как бесконечный цикл обновления экрана. Функция background(R,G,B), где R-красный, G-зеленый, B-синий цвета. Меняет фон созданного нами окна. В данном случае, мы будем менять только зеленый цвет, от черного, до ярко-зеленного. 

   background(0,val,0);

• Следующая функция serialEvent(Serial port). Данная функция вызывается автоматически, при поступлении новых данных на порт, основываясь на buferUntil который мы указали в функции setup().  
• Теперь мы считываем значение, которое приходит на наш порт, преобразуем его к типу с плавающей точкой, и записываем его в переменную val. Мы считываем полностью всю строку, до прихода символа '\n'. 

   val = float (port.readStringUntil ('\n'));

Теперь давайте запустим нашу программу. И посмотрим что у нас получилось. 

Видео работы такого устройства:

Как Вы видите, все очень красиво и просто. Давайте же теперь перейдем к экспериментам. 

Эксперимент 1

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

Что нам нужно для эксперимента:

• Arduino Uno
• Breadboard
• Соединительные провода "папа-папа"
• Перемычки (в качестве них использовал скобы от степлера)
• Переменные Резисторы (в уроке используется на 20кОм)

Собираем вот такую схему:

У меня получилось так:

Теперь надо изменить прошивку нашего Arduino. Для этого нужно вставить вот такой скетч в Arduino IDE:

int R = A1;
int G = A2;
int B = A3;

void setup()
{
 
 Serial.begin (9600);

}

void loop() 
{
 int val_1 = map(analogRead(R),0,1023,0,255);
 Serial.println(val_1);
 delay(50); 
 
 int val_2 = map(analogRead(G),0,1023,256,511);
 Serial.println(val_2);
 delay(50); 
 
 int val_3 = map(analogRead(B),0,1023,512,767);
 Serial.println(val_3);
 delay(50); 

}

Здесь, в принципе, все тоже самое что и в предыдущем скетче. Имеются три переменные, отвечающие за порт своего потенциометра (R,G,B). Мы считываем значение и отправляем. Но! На приемной стороне нам нужно понять, какое из значений соответствует какому цвету. Для этого разбиваем диапазон значений.

Например, для красного цвета, значения будут колебаться от 0 до 255. У зеленого цвета, от 256 до 511. И у синего от 512 до 767. Т.е на каждый цвет 256 значений. 

Теперь открываем PDE и вставляем этот код:

import processing.serial.*; 
Serial port;

float R = 0;
float G = 0;
float B = 0;

void setup()
{
 size (170,170);
 port = new Serial(this, "COM3",9600);
 port.bufferUntil('\n');
}

void draw()
{
 
 background(R,G,B); 
 
 fill(R,0,0);
 rect(10,10,50,50);
 
 fill(0,G,0);
 rect(60,60,50,50);
 
 fill(0,0,B);
 rect(110,110,50,50);
 
}

void serialEvent (Serial port)
{
 
 float val = float (port.readStringUntil ('\n'));
 
 if ( val >= 0 && val <=255)
 {
 R = val;
 }
 else if (val >= 256 && val <=511)
 {
 G = map(val,256,511,0,255);
 }
 else if (val >= 512 && val <=767)
 {
 B = map(val,512,767,0,255);
 }
}

Как Вы видите, в принципе все тоже самое. Но изменилось условие приема значений в функции serialEvent. Например. пришло значение. Записываем его в переменную val. Теперь, если это значение от 0 до 255, значит это пришло значение красного цвета. Записываем его в переменную R. Если приходят значения от 256 до 511, то программа понимает, что пришли значения зеленого цвета. Сопоставляет их с цифровым диапазоном, и записывает в переменную G. Тоже самое и с синим цветом. 

Теперь, когда мы приняли значения красного, зеленого и синего цветов, нужно эти значения применить. Все это происходит в функции drow(). 

• Меняет фон нашего окна, на цвет, который является суммой всех трех цветов. 

   background(R,G,B); 

• Теперь добавляем квадрат c помощью функции rect(x,y,a,b), где x-начальная координата по x оси, y - начальная координата по y оси, a - ширина квадрата (в пикселях), b - высота квадрата. Начальные координаты отсчитываются от верхнего левого угла. Т.е в верхнем левом углу координаты X и Y равны 0. 
  Квадрат будет иметь заливку, описанную в функции fill(R,G,B). 

   fill(R,0,0);
   rect(10,10,50,50);

• По аналогии добавляем еще два квадрата. Со своими координатами и заливкой

   fill(0,G,0);
   rect(60,60,50,50);
   
   fill(0,0,B);
   rect(110,110,50,50);

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

Если запустить программу, то результат будет таков:

Эксперимент 2

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

Менять код Arduino мы не будем. Изменим только скетч Processing'a. 

import processing.serial.*; 
Serial port;

float R = 0;
float G = 0;
float B = 0;

void setup()
{
 size (300,300);
 port = new Serial(this, "COM3",9600);
 port.bufferUntil('\n');
}

void draw()
{
 
 fill(R,0,0);
 rect(0,0,300,300);
 
 fill(0,G,0);
 rect(15,15,270,270);
 
 fill(0,0,B);
 rect(30,30,240,240);
 
 fill(R,0,0);
 rect(45,45,210,210);
 
 fill(0,G,0);
 rect(60,60,180,180);
 
 fill(0,0,B);
 rect(75,75,150,150);
 
 fill(R,0,0);
 rect(90,90,120,120);
 
 fill(0,G,0);
 rect(105,105,90,90);
 
 fill(0,0,B);
 rect(120,120,60,60); 
 
 fill(R,G,B);
 rect(135,135,30,30); 
}

void serialEvent (Serial port)
{
 
 float val = float (port.readStringUntil ('\n'));
 
 if ( val >= 0 && val <=255)
 {
 R = val;
 }
 else if (val >= 256 && val <=511)
 {
 G = map(val,256,511,0,255);
 }
 else if (val >= 512 && val <=767)
 {
 B = map(val,512,767,0,255);
 }
}

Как Вы видите, мы добавили 10 квадратов, разных размеров и цветов. Последний квадрат имеет самые маленькие размеры и его заливкой будет сумма всех цветов.

Давайте же посмотрим что у нас получилось:

Задание для самостоятельного выполнения

1. Измените программу, чтобы при изменении сопротивлений потенциометров, менялась заливка не квадратов, а окружностей. А также заливка фона была суммой всех цветов. Функция для окружности ellipse(x,y,a,b); Где x и y - координаты центра окружности. А a и b - диаметры по оси X и Y соответственно. Вот чтобы получилось что-то типа этого. 
   
2. Сделайте небольшой светофор из 2 цветов: красного и зеленого. А синий цвет использовать как фон. Должно получиться примерно так:
   

Заключение

Это был первый урок в разделе "Arduino и Processing". Надеемся, что урок был для Вас полезен и понятен. Также надеемся, что выполнение заданий не вызовет трудностей, и Вы справитесь самостоятельно. Если же возникнут вопросы или проблемы, задавайте их либо в комментариях, либо на форуме. 

Если Вам понравился наш урок, поделитесь им с друзьями.

 Следующий урок→