Освой Processing играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

Processing

Processing использует Java, поэтому я решил добавить этот раздел для тех, кто хочет быстро писать десктопные (и не только) приложения, связанные с графикой и мультимедиа.

Домашняя страница программы - https://processing.org/

Советы и хитрости

В Processing встречается ситуация, когда русские буквы, не отображаются (в коде, в комментариях, в консоли). Чтобы исправить ситуацию, идём в File | Preference и в разделе Editor and Console Font выбираем подходящий шрифт, поддерживающий русские символы, например, Consolas.

Первое знакомство

Опустим описание установки. Сразу приступим к созданию программу. Запускаем Processing и пишем простой код из одной строчки:


ellipse(50, 50, 80, 80);

Эта строка кода обозначает:

Нарисуй эллипс, центр которого находится с центром на расстоянии 50 пикселей от левого края окна и 50 пикселей от верхнего края окна, с шириной и высотой в 80 пикселей.

Щёлкните на кнопку Run с треугольником или выберите в меню Sketch | Run (Ctrl+R).

First Sketch

Если вы написали код без ошибок, то увидите окружность, хотя вроде написали ellipse. Так как мы указали одинаковые высоту и ширину, то и получили окружность. Отредактируйте код, чтобы последние два значения стали различными и снова нажмите на треугольник для запуска программы. Теперь увидите эллипс.

Созданный код можно сохранить на память. В Processing такие файлы называются скетчами (набросками).

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


size(300, 200); // размер окна в пикселях
background(0, 0, 0); // цвет фона окна
fill(244, 240, 125); // цвет рисования
noStroke(); // выключаем обводку
ellipse(150, 100, 100, 100); // рисуем эллипс

Если запустить программу, то увидим полную луну в ночном небе.

Moon

Напишем интерактивную программу. Код будет сложнее. Просто скопируйте и вставьте.


void setup() {
  size(480, 120);
}
void draw() {
  if (mousePressed) {
    fill(0);
  } 
  else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

Эта программа создаст окно шириной 480 пикселей и 120 пикселей высотой. Поместите курсор мыши в область окна и начинайте двигать им. И вы увидите чудо - в окне будут рисоваться белые круги, накладываясь друг на друга. Но это ещё не всё! Нажмите и держите левую или правую кнопку мыши и продолжайте двигать мышь внутри окна. Теперь цвет круга сменится на чёрный.

Processing

Запущенную программу можно остановить при помощи кнопки Stop, которая находится рядом с кнопкой Run. На этом первое знакомство со средой разработки можно считать законченным.

Среда разработки поставляется с огромных числом готовых примеров для изучения. Выберите меню File | Examples или щёлкните по значку Open, чтобы открыть список примеров.

По умолчанию используется окно размером 100x100 пикселей. Вы можете задать собственные размеры через функцию size(). Вам нужно указать два параметра - ширину и высоту.


size(400, 300);

Processing имеет ряд специальных переменных, хранящих информацию о программе в процессе её работы. Например, ширина и высота окна сохраняются в переменных под названием width и height. Значения переменной устанавливаются в функции size(). Они могут быть использованы для изображения объектов относительно размера текущего окна, даже если параметры функции size() изменяются.

Начиная с версии 3.0, если необходимо задать размер окна переменными, то используйте предопределённую функцию settings(). В большинстве случаев можно обойтись без вызова данной функции.


// Примеры
int w = 200;
int h = 200;
int x = 0;

void settings() {
  size(w, h);
}

void settings() {
  fullScreen();
}

void settings() {
  fullScreen(P2D, 2);
}

Вы можете использовать комбинацию клавиш Ctrl-/ (Cmd-/ на Mac) для быстрого добавления или удаления комментариев из текущей строки или из выделенного фрагмента текста. Вы также можете превратить в комментарий сразу несколько строк.

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

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

Переменные и встроенные функции

Работаем с мышью

Работаем с клавиатурой

Дополнительное чтение

Игра "Сапёр"

Управление яркостью светодиода на плате Arduino

Реклама