Введение
Язык программирования Processing предназначен для написания графических, анимационных и интерактивных программ. Принцип написания программ заключается в следующем: вы пишете всего одну строчку кода и на экране появляется кружок. Добавляете еще несколько строк - и ваш кружок начитает двигаться вслед за курсором. Ещё строка - и кружок будет менять цвет при нажатии на кнопку мыши. Мы называем этот процесс скетчинг. Вы пишете одну строчку, потом ещё одну и так далее. В результате перед вами окажется готовая программа.
Гибкость
Как и любое программное обеспечение, Processing состоит из большого количества компонентов, работающих вместе. Он может быть использован как для простых поделок, так и для подробного исследования. Программа на Processing может составлять от одной до нескольких тысяч строк кода, поэтому вы всегда сможете улучшить и расширить его функционал.
Существует более 100 библиотек расширения, позволяющих применять Processing для обработки звука, исследований в области машинного зрения и технических расчетов. Что и как звязанно с процессингом - эта иллюстрация объясняет.
Начинаем программировать.
Для начала Вам надо будет скачать среду разработки. Показывать, как это делать я не буду, так как там всё элементарно, и если вы не можете скачать приложение, то скорее всего до программирования Вам рановато. Допустим скачали. Открываем среду и начинаем танцы с бубном.
Для начала рассмотрим главные особенности языка. Обязательно нужно указать функцию setup и draw. Функция setup нужна для всяких настроек, например, можно указать размер окна с помощью функции size(x, y); Функция draw аналогичная функции loop в ардуино, тут то, что в функции draw будет выполнятся 60 раз в секунду. То есть 60 кадров в секунду. Также у процессинга, как и у ардуино необходимо ставить точку с запятой в конце строки.
Давайте уже напишем что-нибудь.
Для начала мы просто нарисуем круг или эллипс. для этого напишем следующий код:
void setup(){
size(100,100); //Размер окна, если не указать, будет 100 на 100
}
void draw(){
ellipse(50,50,80,80); //Рисуем эллипс. Параметры x, y, height, width
}
И это выведет круг посередине.
Давайте будем следить за курсором мыши и рисовать круги.
void setup() {
size(480, 120);
smooth();
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
В этом скетче мы рисуем круги, но когда мы нажимаем на мышь цвет круга меняется на черный.
Это мы просто поигрались и протестировали нашу среду на работоспособность.
Теперь давайте более подробнее всё рассмотрим.
Функция size() имеет 2 параметра: первый устанавливает ширину окна, второй - высоту. Чтобы получить окно в 800 пикселей в ширину и 600 в высоту, наберите: size(800, 600);
Рисуем точку.
Чтобы выделить пиксель в окне, мы используем функцию point(). Она имеет 2 параметра, определяющие положение: x-координату и y-координату. Чтобы изобразить небольшое окно и точку в его центре, заданном координатами (240, 60), наберите:
size(480, 120);
point(240, 60);
Рисуем линию.
Чтобы нарисовать линию между точками с координатами (20, 50) и (420, 110) используем эту функцию:
size(480, 120);
line(20, 50, 420, 110);
Рисуем прямоугольник.
Прямоугольники, как и эллипсы, задаются 4 параметрами: первый и второй являются координатами опорной точки, третий и четвертый нужны для ширины и длины. Для рисования прямоугольника из точки (180, 60) длиной 220 пикселей и шириной(высотой) в 40 используем функцию rect():
size(480, 120);
rect(180, 60, 220, 40);
Рисуем эллипс.
Опорная точка прямоугольника находится в верхнем левом углу, эллипса - в центре. Заметьте, что в этом примере y-координата опорной точки первого эллипса находится за пределами окна. Задание фигуры частично (или полностью) за пределами окна не считается ошибкой:
size(480, 120);
ellipse(278, -100, 400, 400);
ellipse(120, 100, 110, 110);
ellipse(412, 60, 18, 18);
Processing не содержит специальных функций для рисования квадрата или круга. Для изображения этих фигур, используйте функции ellipse() и rect() и те же параметры width и height.
Рисуем часть эллипса.
Функция arc() позволяет изобразить часть эллипса:
size(480, 120);
arc(90, 60, 80, 80, 0, HALF_PI);
arc(190, 60, 80, 80, 0, PI+HALF_PI);
arc(290, 60, 80, 80, PI, TWO_PI+HALF_PI);
arc(390, 60, 80, 80, QUARTER_PI, PI+QUARTER_PI);
Первый и второй параметр устанавливают положение, третий и четвертый определяют ширину и высоту. Пятый параметр устанавливает угол начала дуги, шестой устанавливает конец дуги. Значение углов лучше указывать в радианах, а не в градусах. Радианы основаны на значении пи (3.14159). Как видно из данного примера, указанные 4 значения углов в радианах используются настолько часто, что в Processing им присвоены имена. Значения PI, QUARTER_PI, НALF_PI и TWO_PI можно заменить на значения в градусах 180º, 45º, 90º и 360º
Используем градусы.
Если вы предпочитаете использовать градусы, вы можете конвертировать ваше значение в градусах в радианы функцией radians(). Эта функция заменяет значение угла в градусах на соответствующее значение в радианах. Следующий пример выполняет те же действия, что и предыдущий, но для обозначения начального и конечного угла применена функция radians():
size(480, 120);
arc(90, 60, 80, 80, 0, radians(90));
arc(190, 60, 80, 80, 0, radians(270));
arc(290, 60, 80, 80, radians(180), radians(450));
arc(390, 60, 80, 80, radians(45), radians(225));
Последовательность рисования.
После запуска программы ваш компьютер начинает выполнять команды последовательно, начиная с первой строки, и останавливается, когда достигает последней. Если вы хотите, чтобы фигура была нарисована поверх остальных, соответствующая функция должна быть написана после функций, описывающих остальные фигуры.
Соблюдаем последовательность.
size(480, 120);
ellipse(140, 0, 190, 190);
// Прямоугольник расположен поверх эллипса
// потому, что в программе он стоит после него
rect(160, 30, 260, 20);
Напишем наоборот.
Измените предыдущий пример, поменяйте местами функции rect() и ellipse() и убедитесь в том, что круг нарисован поверх прямоугольника.
size(480, 120);
rect(160, 30, 260, 20);
// Эллипс расположен поверх прямоугольника
// потому, что в программе он стоит после него
ellipse(140, 0, 190, 190);
Представьте, что вы рисуете кистью или делаете коллаж. Видимым будет тот элемент, который вы добавите последним.
Я думаю на этом мы сегодня остановимся. Давайте попробуем собрать 10 лайков под этой статьёй. Всем спасибо за просмотр, всем удачи, всем пока!
Видео: https://dzen.ru/video/watch/634a67e36bb32a6cb90d0383