Главная » Статьи » Arduino с нуля » Arduino и Processing

PDE. Урок 1. Первые шаги к освоению

Здравствуйте, дорогие друзья! С сегодняшнего дня мы начинаем изучать взаимодействие платформы 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". Надеемся, что урок был для Вас полезен и понятен. Также надеемся, что выполнение заданий не вызовет трудностей, и Вы справитесь самостоятельно. Если же возникнут вопросы или проблемы, задавайте их либо в комментариях, либо на форуме

 

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

 

 

 


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


 

Категория: Arduino и Processing | Добавил: GM (21.10.2015)
Просмотров: 8285 | Комментарии: 7 | Рейтинг: 4.8/9
Всего комментариев: 7
avatar
1 zirkov_micha • 21:24, 27.10.2015 [Материал]
Спасибо большое за урок, все понятно и доступно описано)) то что надо biggrin
avatar
0
2 GM • 22:16, 27.10.2015 [Материал]
Стараемся)
avatar
3 Stradivarius • 23:40, 28.10.2015 [Материал]
где можно скачать процессинг?!
avatar
0
4 GM • 08:08, 29.10.2015 [Материал]
В данном уроке подробно описано где скачать, а также как установить данную среду. Советую прочесть этот абзац внимательнее:


Цитата
Теперь давайте познакомимся с данным языком подробнее. Для начала скачиваем среду разработки PDE (Processing Development Evironment) с официального сайта. Перейдя на сайт, нажимаем на кнопку Dowload Processing
avatar
5 Arduino1507 • 15:41, 30.07.2017 [Материал]
Спасибо!
Очень понятно все расписано.
Для новичков в самый раз!
avatar
Отлично! Как и последующие уроки! Четко, методично и результативно.
avatar
7 Alex • 10:39, 25.06.2020 [Материал]
Большое спасибо за этот сайт.  Очень мне помог. Только жалко, что он дальше не развивается. Можно ли пообщаться с создателями  этого сайта?
А то мне кажется, что он уже подзаброшен. С уважением Александр.
avatar