Урок 2.1. Основы работы в Processing
Что такое Processing?
Можно подумать, что IT-специалисты – люди точных наук, и для них чуждо искусство, но картина, которую Вы видите была нарисована не художником на холсте, а программистом в программном окне!😉
Processing — открытый язык программирования, основанный на Java с простым и понятным си-подобным синтаксисом. Представляет собой лёгкий и быстрый инструментарий для создания изображений, анимации и разработки интерфейсов. Используется Processing студентами, художниками, дизайнерами и исследователями для изучения, прототипирования и производства. Он создан для изучения основ компьютерного программирования в визуальном контексте.
Вот еще несколько примеров программ написанных на Processing.
Игры:
Сложные программы для анализа изображений:
Разнообразные проекты:
Интерфейс программы
Сначала установим Processing на наш компьютер. Для этого перейдите по ссылке:
Нажмите кнопку “Download” и скачайте актуальную версию для Вашей операционной системы.
Структура самого когда очень похожа на код Arduino IDE. Окно редактора можно условно разделить на 5 блоков:
Первый блок — это меню программы. Через меню можно получить доступ ко всем функциям Processing.
Через меню Файл можно создать, открыть или сохранить скетч, поменять параметры интерфейса программы и найти примеры программ.
В меню Правка хранятся функции для редактирования текущего кода.
В меню Набросок доступны функции запуска анимации, подменю подключения библиотек и добавления файлов.
Меню Отладка предлагает функции для покадровой проверки кода.
Меню Инструменты содержит инструменты для работы с цветом, шрифтами. генерацией видео и доступ к библиотеке доступных для установки инструментов.
В меню Помощь можно найти указатели на справочные ресурсы и формы техподдержки.
Второй блок — панель иконок, на которой размещены часто используемые функции.
В нашем случае это иконки “play” и “stop” – запуск и остановка анимации.
Третий блок — файлы проекта. Каждая вкладка означает один из файлов проекта. Самые простые программы могут состоять только из одного файла.
Четвертый блок — поле текстового редактора. В простых скетчах поле текстового редактора делится на три части:
Область строк до блока void setup( ){ }
В этой области обычно объявляются переменные, константы, библиотеки, объекты.
Область блока void setup( ){ }
Область настройки – код из этого блока внутри { } запускается один раз в начале программы.
Область блока void draw( ){ }
Главная часть программы – код внутри { } повторяется циклически.
Пятый блок — консоль, поле для отображения вызываемых программой, а также служебных сообщений, например, информации об ошибках в программе.
Работа с примитивами в Processing
Напишем простую программу: создадим окно и научимся задавать цвет фона этого окна.
void setup()
{
size(800,800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
} 
Функция setup() имеет функционал, аналогичный одноименной функции в Arduino IDE, она однократно выполняется при запуске программы, и как правило содержит первоначальные настройки приложения.
Функция background() задаёт цвет фона окна.
Если функция принимает один аргумент, то цвета устанавливаются в градациях серого.
Если в функции установить три аргумента, цвет фона будет цветным в системе RGB.
void setup()
{
size(800,800); //создаем окно с шириной и высотой в 800 пикселей
background(255,255,0);
} Для удобства подбора цвета, в Рrocessing встроен специальный инструмент:
Так как мы создали окно определенного размера, то у этого окна должна быть своя система координат, обратите внимание, как правило в компьютерных программах начало координат окна находится в верхнем левом углу.
В Processing можно рисовать большое количество примитивов, более подробно с ними можно ознакомиться в справке, для простоты мы выберем круг.
float x = 100; //координата x круга
float y = 100; //координата y круга
float R = 50; //радиус круга
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0,255,0);
}
void draw()
{
circle(x, y, R); // рисуем круг с координатами x и y радиуса R (в пикселях)
}
Вызываемая непосредственно после setup(), функция draw() непрерывно выполняет строки кода, содержащиеся внутри ее блока, до тех пор, пока программа не будет остановлена. Эта функция аналогична функции loop() в Arduino IDE.
Функция circle() рисует круг на экране. По умолчанию первые два параметра задают расположение центра, а третий задает ширину и высоту фигуры.
Следующим шагом сделаем нашу анимацию более живой, заставим наш шарик двигаться и покрасим его:
float x = 100; //координата x круга
float y = 100; //координата y круга
float R = 50; //радиус круга
// значения скорости смещения нашей окружности по осям вертикали и горизонтали
// эти числа влияют на то, как быстро наш круг будет перемещаться по каждой оси от кадра к кадру
// числовое значение определяет количество пикселей на которое будет смещен наш круг по каждой оси
float Vx=1;
float Vy=2;
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0, 255, 0);
}
void draw()
{
fill(255, 0, 100); // применяем заливку к последующим прописанным элементам в системе RGB
circle(x, y, R); // рисуем круг с координатами x и y радиуса R (в пикселях)
x=x+Vx; // увеличиваем координату X на величину Vx
y=y+Vy; // увеличиваем координату Y на величину Vy
}
Обратите внимание, наш круг скрывается за пределами окна, но программа продолжает работать и рисует наш круг уже за его пределами. Исправим эту ситуацию и сделаем так, что бы наш круг достигнув края окна появился снова.
float x = 100; //координата x круга
float y = 100; //координата y круга
float R = 50; //радиус круга
// значения скорости смещения нашей окружности по осям вертикали и горизонтали
// эти числа влияют на то, как быстро наш круг будет перемещаться по каждой оси от кадра к кадру
// числовое значение определяет количество пикселей на которое будет смещен наш круг по каждой оси
float Vx=1;
float Vy=2;
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0, 255, 0);
}
void draw()
{
fill(255, 0, 100); // применяем заливку к последующим прописанным элементам в системе RGB
circle(x, y, R); // рисуем круг с координатами x и y радиуса R (в пикселях)
x=x+Vx; // увеличиваем координату X на величину Vx
y=y+Vy; // увеличиваем координату Y на величину Vy
if (x >= width) // если центр круга больше ширины экрана то обнуляем координату X
x=0;
else if (y >= height) // если центр круга больше высоты экрана то обнуляем координату Y
y=0;
}
При внимательном рассмотрении анимации Вы можете заметить, что наш круг сопровождают контуры, давайте их уберем:
float x = 100; //координата x круга
float y = 100; //координата y круга
float R = 50; //радиус круга
// значения скорости смещения нашей окружности по осям вертикали и горизонтали
// эти числа влияют на то, как быстро наш круг будет перемещаться по каждой оси от кадра к кадру
// числовое значение определяет количество пикселей на которое будет смещен наш круг по каждой оси
float Vx=1;
float Vy=2;
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0, 255, 0);
noStroke(); // отключаем рисование контура
}
void draw()
{
fill(255, 0, 100); // применяем заливку к последующим прописанным элементам в системе RGB
circle(x, y, R); // рисуем круг с координатами x и y радиуса R (в пикселях)
x=x+Vx; // увеличиваем координату X на величину Vx
y=y+Vy; // увеличиваем координату Y на величину Vy
if (x >= width) // если центр круга больше ширины экрана то обуляем координату X
x=0;
else if (y >= height) // если центр круга больше высоты экрана то обуляем координату Y
y=0;
}
Теперь можно поиграть с цветом: для большей контрастности зададим черный цвет фона и случайную генерацию цвета круга при достижении края окна. Так же добавим случайную генерацию позиции круга.
float x = 100; //координата x круга
float y = 100; //координата y круга
float R = 50; //радиус круга
// значения скорости смещения нашей окружности по осям вертикали и горизонтали
// эти числа влияют на то, как быстро наш круг будет перемещаться по каждой оси от кадра к кадру
// числовое значение определяет количество пикселей на которое будет смещен наш круг по каждой оси
float Vx=1;
float Vy=2;
color c; // переменная для хранения цвета
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
noStroke(); // отключаем рисование контура
colorMode(HSB, 360, 100, 100); // переключение цветовой схемы в режим HSB,
// это полный аналог системы HSV, с которой мы уже знакомы
c=color(random(360), 100, 100);
}
void draw()
{
fill(c);
circle(x, y, R); // рисуем круг с координатами x и y радиуса R (в пикселях)
x=x+Vx; // увеличиваем координату X на величину Vx
y=y+Vy; // увеличиваем координату Y на величину Vy
if (x >= width) // если центр круга больше ширины экрана то обуляем координату X
{
x=random(R, width - R); // генерирование случайной координаты
c=color(random(360), 100, 100); // генерирование случайного цвета круга
} else if (y >= height) // если центр круга больше высоты экрана то обуляем координату Y
{
y=random(R, height - R); // генерирование случайной координаты
c=color(random(360), 100, 100);// генерирование случайного цвета круга
}
}
Следующим шагом добавим обновление фона:
float x = 100; //координата x круга
float y = 100; //координата y круга
float R = 50; //радиус круга
// значения скорости смещения нашей окружности по осям вертикали и горизонтали
// эти числа влияют на то, как быстро наш круг будет перемещаться по каждой оси от кадра к кадру
// числовое значение определяет количество пикселей на которое будет смещен наш круг по каждой оси
float Vx=1;
float Vy=2;
color c; // переменная для хранения цвета
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
noStroke(); // отключаем рисование контура
colorMode(HSB, 360, 100, 100); // переключение цветовой схемы в режим HSB,
// это полный аналог системы HSV, с которой мы уже знакомы
c=color(random(360), 100, 100);
}
void draw()
{
background(0); // обновение фона на каждом кадре
fill(c);
circle(x, y, R); // рисуем круг с координатами x и y радиуса R (в пикселях)
x=x+Vx; // увеличиваем координату X на величину Vx
y=y+Vy; // увеличиваем координату Y на величину Vy
if (x >= width) // если центр круга больше ширины экрана то обуляем координату X
{
x=random(R, width - R); // генерирование случайной координаты
c=color(random(360), 100, 100); // генерирование случайного цвета круга
} else if (y >= height) // если центр круга больше высоты экрана то обуляем координату Y
{
y=random(R, height - R); // генерирование случайной координаты
c=color(random(360), 100, 100);// генерирование случайного цвета круга
}
}
Отлично, у нас получились летающие разноцветные шарики😉 Теперь будем пробовать управлять ими!
Взаимодействие с интерфейсом с помощью мышки
Изменим нашу анимацию так, что бы наш шарик двигался за курсором мыши:
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
noStroke(); // отключаем рисование контура
colorMode(HSB, 360, 100, 100); // переключение цветовой схемы в режим HSB,
// это полный аналог системы HSV, с которой мы уже знакомы
}
void draw()
{
background(0); // обновление фона окна
fill(map(mouseX, 0, width, 0, 360),100,100); // масштабирование координаты мыши X
// в оттенок цвета
circle(mouseX,mouseY,20);
}
Далее добавим действие рисования круга по нажатию левой кнопки мыши:
void setup() {
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
noStroke(); // отключаем рисование контура
colorMode(HSB, 360, 100, 100); // переключение цветовой схемы в режим HSB,
// это полный аналог системы HSV, с которой мы уже знакомы
cursor(CROSS); // устанавливаем вид курсора в нашем окне на крестик
}
void draw() {
fill(map(mouseX, 0, width, 0, 360), 100,
100); // масштабирование координаты мыши X в оттенок цвета
if (mousePressed && (mouseButton == LEFT)) // если нажата левая кнопка мыши,
// то рисуем круг в позиции курсора мыши
circle(mouseX, mouseY, 20);
}
Далее добавим очистку экрана по нажатии правой кнопки мыши:
void setup() {
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
noStroke(); // отключаем рисование контура
colorMode(HSB, 360, 100, 100); // переключение цветовой схемы в режим HSB,
// это полный аналог системы HSV, с которой мы уже знакомы
cursor(CROSS); // устанавливаем вид курсора в нашем окне на крестик
}
void draw() {
fill(map(mouseX, 0, width, 0, 360), 100,
100); // масштабирование координаты мыши X в оттенок цвета
if (mousePressed && (mouseButton == LEFT)) // если нажата левая кнопка мыши,
// то рисуем круг в позиции курсора мыши
circle(mouseX, mouseY, 20);
else if (mousePressed && (mouseButton
== RIGHT)) // если нажата правая кнопка обновляем экран
background(0);
}
Добавим действие на прокручивание колеса мыши, в зависимости от количества тиков колеса мыши, будет изменяться радиус круга:
float R = 5; //радиус круга в пикселях
void setup()
{
size(800, 800); //создаем окно с шириной и высотой в 800 пикселей
background(0);
noStroke(); // отключаем рисование контура
colorMode(HSB, 360, 100, 100); // переключение цветовой схемы в режим HSB,
// это полный аналог системы HSV, с которой мы уже знакомы
cursor(CROSS); // устанавливаем вид курсора в нашем окне на крестик
}
void draw()
{
fill(map(mouseX, 0, width, 0, 360), 100, 100); // масштабирование координаты мыши X
// в оттенок цвета
if (mousePressed && (mouseButton == LEFT)) // если нажата левая кнопка мыши,
// то рисуем круг в позиции курсора мыши
circle(mouseX, mouseY, R);
else if (mousePressed && (mouseButton == RIGHT)) // если нажата правая кнопка обновляем экран
background(0);
}
void mouseWheel(MouseEvent event) // функция события поворота колеса мыши
{
R += event.getCount(); // если событие произошло, увеличиваем радиус круга
// на количество тиков колеса мыши
} В итоге мы получили некоторое подобие графического редактора🙂