В предыдущем уроке мы написали свою первую программу, и немного поэкспериментировали с возможностями языка Processing. 

Так сказать, познакомились с небольшой частью возможностей программирования в Processing'е. 

Давайте же теперь подробнее разберемся со структурой и с особенностями программирования на данном языке.

Как Вы уже заметили, программирование в Processing'e (далее P), почти не отличается от программирования Arduino. Все те же две основные функции, с одним отличием, что в Arduino одна из функций была loop(), а в P обозначается draw(). Хотя работа двух этих функций одинакова. 

Таким образом, структура программы в P имеет вид:

void setup()
{

}
void draw()
{

}

• Функция setup() так и служит нам, для настройки нашей программы, и добавления каких-либо операций, которые выполнятся только один раз - при запуске программы. 
• Функция draw(), как и в Arduino функция loop(), служит в роли бесконечного цикла, в котором выполняются все те действия, что описаны в фигурных скобках { }. 

Т.к P больше завязан на графику, то в функции setup() обычно создают окно нашей будущей программы. 

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

Это реализуется добавлением функции size(x,y). где, x - размер окна в ширину. y - размер окна в высоту. Все размеры указываются в пикселях. Например, в скетче выше, размер окна будет составлять 200х200 пикселей. 

Если мы запустим сейчас наш скетч, то увидим следующее:

Давайте теперь сменим фон нашего окна. Это делается добавлением в наш код функции background(color). Где color можно расписать как три цвета, т.е аргумент функции изменится background(R,G,B) . R-красный цвет, G-зеленый цвет, B-синий цвет. 

А также можно открыть Color Selector на панели инструментов, во вкладке Tools. 

В открывшемся окошке выбрать понравившейся Вам цвет. Потом скопировать код цвета, нажав кнопку Copy

И вставить как аргумент в функцию. Например как здесь:  

background(#5EC6F5);

Теперь надо эту строку вставить в наш скетч. Вот тут возникают "подводные камни" в программировании P. 
 

Мы можем добавить эту строку как в функцию setup(), так и в функцию draw().

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

void setup()
{
 background(#5EC6F5);
 size(200,200);
}

Результат будет такой:

Но! Если мы добавим эту строку в функцию draw(), результат будет точно такой же

void setup()
{
 size(200,200);
}
void draw()
{
 background(#5EC6F5); 
}

Хм! Давайте разбираться почему так. Если добавлять bacground() в функцию draw(), то мы можем в программе изменять цвет фона динамически. Как здесь:

void setup()
{
 size(200,200);
}
void draw()
{
 background(mouseX); 
}

Конечно этот способ намного лучше и привлекателен. Но! Помните про "подводные камни"? Именно это один из них! Функция background() это функция заливки экрана (фон). Использование ее в функции draw(), повлечет за собой немалое уменьшение возможностей, предоставляемые языком программирования Р. Только в функции setup() она и будет выполнять свои прямые обязанности, в любой другой функции она будет выполнять покадровое закрашивание экрана.  

Чтобы лучше понять это, давайте разберем небольшой пример. Будем выводить на экране значения, которые отражают положение курсора относительно осей x и y.

int x = 0; //переменная, которая хранит в себе координату х
int y = 0; //переменная, которая хранит в себе координату y

void setup()
{
 size(200,200); //создаем окно 200 на 200 пикселей
}
void draw()
{
 x = mouseX; //записываем в переменную х координату по х оси
 y = mouseY; //записываем в переменную y координату по y оси 
 
 textSize(30); //размер текста
 text("X= "+x, 10, 30); //добавляем текст в координатах 10, 30
 text("Y= "+y, 10, 70); //добавляем текст в координатах 10, 70
}

Запускаем программу и видим следующее:

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

Как решить? Да просто! Добавить заливку фона в функцию draw(). Чтобы при каждом новом кадре, предыдущий закрашивался. Давайте попробуем:

int x = 0; //переменная, которая хранит в себе координату х
int y = 0; //переменная, которая хранит в себе координату y

void setup()
{
 size(200,200); //создаем окно 200 на 200 пикселей
}
void draw()
{
 background(#3CC7F7);
 x = mouseX; //записываем в переменную х координату по х оси
 y = mouseY; //записываем в переменную y координату по y оси 
 
 textSize(30); //размер текста
 text("X= "+x, 10, 30); //добавляем текст в координатах 10, 30
 text("Y= "+y, 10, 70); //добавляем текст в координатах 10, 70
}

Получаем такое:

Видео работы программы:

Ну вот, другое дело! Получилось довольно таки не плохо. 

Давайте теперь немного усложним задачу. Выведем не только значения координат по осям, но а также и график. Только изменять мышкой мы будем теперь координату по Y. По координате X меняться значение будет автоматически. Давайте запустим этот код:

int xn = 0; //переменная координаты x начала
int yn = 0; //переменная координаты y начала
int xt = 0; //переменная координаты x конца
int yt = 0; //переменная координаты y конца

void setup()
{
 size (400,300); //размер экрана 400х300
}

void draw()
{
 background(0); //заливаем фон черным цветом
 yt = mouseY; //записываем координату конца по y
 
 textSize(30); //размер текста
 text("X= "+xt, 10, 30); //добавляем текст в координатах 10, 30
 text("Y= "+yt, 10, 70); //добавляем текст в координатах 10, 70
 
 stroke(255); //выводить график будем белым цветом
 line(xn,yn,xt,yt); //рисуем линию
 
 yn = yt; //после построения линии, присваиваем y началу y конец
 xn = xt; //после построения линии, присваиваем х началу х конец
 xt = xt+1; //смешаем координату по x на 1
}

Запускаем и смотрим:

Ну и как это понимать? Вместо графика у нас выводится обыкновенная точка! 

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

Решить это легко! Мы просто перенесем background() в функцию setup():

int xn = 0; //переменная координаты x начала
int yn = 0; //переменная координаты y начала
int xt = 0; //переменная координаты x конца
int yt = 0; //переменная координаты y конца

void setup()
{
 background(0); //заливаем фон черным цветом
 size (400,300); //размер экрана 400х300
}

void draw()
{
 yt = mouseY; //записываем координату конца по y
 
 textSize(30); //размер текста
 text("X= "+xt, 10, 30); //добавляем текст в координатах 10, 30
 text("Y= "+yt, 10, 70); //добавляем текст в координатах 10, 70
 
 stroke(255); //выводить график будем белым цветом
 line(xn,yn,xt,yt); //рисуем линию
 
 yn = yt; //после построения линии, присваиваем y началу y конец
 xn = xt; //после построения линии, присваиваем х началу х конец
 xt = xt+1; //смешаем координату по x на 1
}

Запускаем. И тут...

Опять двадцать пять.. Теперь график рисуется, а вот координаты не отображаются.. Вот Вам и камень.. Споткнулись? И как быть теперь? 

А все оказывается просто! Нам закрашивать каждый кадр нужно только в одной области - где отображаются координаты. А все остальное стирать не обязательно. Так давайте просто добавим прямоугольник, и уже на нем будем отображать наши значения. Попробуем? Почему бы и нет. Добавляем код:

int xn = 0; //переменная координаты x начала
int yn = 0; //переменная координаты y начала
int xt = 0; //переменная координаты x конца
int yt = 0; //переменная координаты y конца

void setup()
{
 background(0); //заливаем фон черным цветом
 size (400,300); //размер экрана 400х300
}

void draw()
{
 yt = mouseY; //записываем координату конца по y
 
 fill(0); //заливка для прямоугольника
 noStroke();//рисуем прямоугольник без контура
 rect (0,0,150,80); //рисуем прямоугольник по определенным координатам
 
 fill(255); //цвет текста
 textSize(30); //размер текста
 text("X= "+xt, 10, 30); //добавляем текст в координатах 10, 30
 text("Y= "+yt, 10, 70); //добавляем текст в координатах 10, 70
 
 stroke(255); //выводить график будем белым цветом
 line(xn,yn,xt,yt); //рисуем линию
 
 yn = yt; //после построения линии, присваиваем y началу y конец
 xn = xt; //после построения линии, присваиваем х началу х конец
 xt = xt+1; //смешаем координату по x на 1
}

Запускаем программу и видим следующее:

Видео работы программы:

Ну вот! То что надо! Теперь график и значения отображаются как и должны. Обратите внимание, что прямоугольник мы добавили до добавления текста. Если бы было наоборот, то прямоугольник перекрывал бы весь текст. 

На счет заливки фигур ( fill() ), размеров текста ( textSize() ), контуров ( stroke() ) и т.п, если вы хоть раз применили какой-нибудь параметр, то на протяжении всей программы он останется таким же. Для каждого объекта необходимо будет задавать свои параметры. 

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

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

←Предыдущий урок | Следующий урок→