Перевод практикума по компьютерной графике с использованием Processing.

1. Компьютерная графика
Введение в Processing
Jordi Linares i Pellicer
Escola Politècnica Superior d’Alcoi
Dep. de Sistemes Informàtics i Computació
jlinares@dsic.upv.es
http://www.dsic.upv.es/~jlinares
Перевод: Татьяна Волкова (robofreak.ru), окт.2011

2. Что такое processing ?
• Processing - диалект Java, придуманный для
создания визуального искусства, анимации и
других задач компьютерной графики
• Делается художниками и для художников
ПО, запускается везде,
• Processing - свободное Linux, Windows и т.д.)
где есть Java (Mac OS,
2001 в MIT, авторы Кейси Рис
• Появился вИсточник вдохновения — книгаи
Бен Фрай.
Джона Маэды «Design By Numbers»
• http://processing.org -> центр загрузки и
главный портал для всех из мира
processing

3. Зачем processing ?
• Очень, очень лёгок в освоении... первые скетчи
за несколько минут
• Обладает своей IDE (очень простой)
• Изучается быстрее, чем OpenGL + GLUT или
другие альтернативы
мощный. Позволяет делать и
• Мощный, очень и очень сложные программы
очень простые,
• Масштабируется. Комбинируется с чистой
Java и с библиотеками Java. Программа на
чистой Java тоже может использовать
Библиотеки из processing.

4. Зачем processing?
• Даёт 3 способа программирования: простой,
процедурный и объектно-ориентированный
простом
• Первые скетчи можно писать встрочки кода)
режиме (без функций, только
программы или скетчи могут
• Более сложные (программирование в стиле C)
иметь функции
программ можно применять
• Для сложных(классы Java)
ООП-подход
приложение на
• Наконец, можно сделать других средах (eclipse,
чистой Java и работать в
netbeans) с библиотеками processing

5. Зачем processing ?
к
• Генерирует готовыеOS,запуску приложения
для платформ: Mac
Linux and Windows
• Приложения на processing можно также
запускать из Интернета (как Java-апплеты)
• Возможна разработка под мобильные
устройства (http://mobile.processing.org)
электронные устройства
• Можно подключатьWiring
проектов Arduino и
(http://hardware.processing.org)

6. Графические бибилиотеки. История
• Стандартные:
•
•
•
•
3D Core Graphics System. ACM и SIGGRAPH (1977)
•
SRGP и SPHIGS (Foley)
•
•
•
•
•
•
•
OpenGL
GKS (Graphical Kernel System). 2D. ISO-ANSI (1985)
GKS-3D (1988)
PHIGS (Programmer’s Hierarchical Interactive Graphics System). 3D.
(1988)
• Другие
XWindows, Microsoft Windows, Mac OS ...
VRML, X3D (Интернет-ориентированные)
POV-Ray, Renderman
Java2D, Java3D
DirectX (Direct-3D)
И прочие.

7. processing IDE
• Processing имеет свою IDE (Integrated
Development Environment), написанную
на Java
• Простая и лёгкая. Достаточна для
большинства задач. Переход на eclipse
и пр. возможен в случае более серьёзных
задач
• Называется PDE (processing development
environment)

8. Запуск
Стоп
Новый Открыть Сохранить Экспорт
Имя файла
Код
Вкладки и управление файлами
Номер строки
Область уведомлений
Область текста и отладки

9. processing IDE
•
•
•
•
•
•
Когда сохраняете программу, создаётся папка с именем
программы. В этой папке сохраняется основной файл
программы, с тем же именем и расширением .pde
64 символа — максимальная длина имени файла, пробелы
не разрешаются.
Можно создать другие файлы исходников (менеджер
вкладок). У них по умолчанию то же расширение .pde ,
но ещё может быть расширение .java (они будут считаться
исходными файлами на языке Java).
Дополнительные файлы идеальны для новых функций или
классов (в таком случае обязательная реализация
встроенной функции setup)
Видимые вкладки учитываются, когда генерируется
приложение
Чтобы открыть проект, открываем основной .pde файл в
папке (впрочем, любой файл .pde внутри сработает)

10. processing IDE
•
•
•
Run и Stop запускают и прерывают выполнение программы
Export генерирует апплет для приложения. Export
Application генерирует готовое к запуску приложение
для Mac OS, Linux или Windows. Всё будет лежать
в специальных папках внутри основной папки программы
application
Sketchbook - директория пользователя по умолчанию.
Но и любую другую папку можно использовать.

11. processing IDE
•
Другие интересные возможности:
Import Library. Управляет подключением самых
распространённых библиотек.
.
Add File - добавить изображение, шрифт и другие
мультимедиа в специальную папку внутри приложения:
папка ‘data’. В этой папке мы сохраняем все элементы,
которые хотим использовать внутри приложения (напр.,
функцией loadImage ). Папка ‘data’ будет создана
автоматически, если её ещё не было до этого.
•
•
•
•
Create font — управляет созданием апплета, чтобы
использованные шрифты корректно отображались в
любом Интернет-браузере.
Help — справка по processing - и даже по функции,
которую мы выделили в коде.

12. Язык processing
•
•
•
•
processing основан на Java 1.4.2 (с некоторыми
модификациями для упрощения прграммирования)
Можно использовать 1.5 и выше, но с другой средой
разработки (чистое Java-приложение с графическими
библиотеками processing )
Полная документацияt:
http://java.sun.com/j2se/1.4.2/docs/api/index.html
processing позволяет программировать в стиле C
(структурное программирование, набор функций).
Но разумнее извлечь пользу из ООП-подхода
(Java-классы с некоторыми изменениями)
•

13. Язык processing
Код processing
(.pde)
Препроцессор
(processing)
Компилятор
(javac)
Java-код
(.java)
байткод
(.class)
Запуск
JVM
(Java Virtual Machine)

14. Язык processing
•
•
•
•
•
Переменные
type name;
Основные типы
byte, short, int(178), long (8864L), float (37.266F),
double (37.266/26.77e3), char (‘c’), boolean(true/false)
Массивы
byte[ ] array;
Инициалиация
type name = value;
Константы
final type variable = value;

15. Язык processing
•
•
•
•
•
•
•
Арифметические +,-,*,/,%,++,-Отношения >,>=,<,<=,==,!=
Логические операторы &&,||,!,&,|,^
Побитовые операции <<,>>,&,|,^,~
Присваивания =,+=,-=,*=,/=,%=,&=,|=,^=,<<=,>>=
Другие ?:,[],.,(type),new,instanceof
Приоритет выполения:
1. expr++,expr-2. ++expr,--expr,~,!
3. *,/,%
4. +,5. <<,>>
6. <,>,<=,>=,instanceof
7. ==,!=
8. &
9. ^
10.|
11.&&
12.||
13.?:
14.=,+=,-,=,*=,/=,
%=,&=,^=,|=,<<=,
>>=

16. Язык processing
•
•
Отделение блоков: { инструкции; }
Цикл while
while ( expr ) { instructions }
do { instructions } while ( expr )
•
Цикл for
for ( begin; end; inc ) {instructions }
•
Если/то
if ( expr ) {instructions }
if ( expr ) {instructions } else { instructions }
•
Выбор варианта
switch ( var ) { case val: instructions default: }
•
Переходы: break, continue, return

17. Язык processing
•
Комментарии:
// Этот комментарий — до конца строки
/* Это - многострочный
комментарий */
•
Функции:
returned_type functionName(list of parameters)
Если мы определяем свои функции в processing, то
необходимо реализовать встроенную функцию
setup()

18. Язык processing
•
Пример:
void setup() // Это запускается вначале
{
size(100, 100);
drawLine(5);
}
void drawLine(int x) // Наша собственная функция
{
line(x, 0, x, 99);
}

19. Язык processing
•
•
Строки:
• String message = “hello”;
• String message = “hello” + “bye”;
Множество методов:
• length()
• Доступ к символам: charAt()
• substring()
• Модификация строк:
•
•
•
•
concat(),replace(),trim(),toLowerCase(), и
Поиск: indexOf(), lastIndexOf(), и пр.
Сравнение : startsWith(), endsWith(),
compareTo(), и пр
И т.д.
Примеры:
String message = “hello”+ “bye”;
int len = message.length();
int len = “hello”.length();
пр

20. Язык processing
•
В processing (Java) массив — это объект:
• его длину можно узнать из атрибута length
• Примеры:
int[] vector; // объект vector сейчас ‘null’
vector = new int[3]; // 3 компонента создано
int len = vector.length; // длина = 3
int item = vector[2]; // доступ к компоненту
int [][] matrix = new int[4][4];
matrix[0][0] = 12; // матрицы

21. Язык processing
•
В чём различия между языками processing и Java?
•
•
•
•
•
Препроцессор processing обычно допускает более
вольный синтаксис
Есть простой режим: без функций, только глобальные
переменные, только последовательные строчки кода
Позволяет писать программу в стиле C, определять
свои собственные функции, без определения классов
и методов
Позволяет определять и использовать классы с
более простым синтаксисом; потом они переводятся
в Java-классы
Простой и C-подобный стиль, глобальные переменные
возможны благодаря препроцессору; все эти
элементы встраиваются в класс (незаметно для
программиста)

22. Язык processing
•
Пример простого режима (I)
// Минимальная программа в processing
line(0,0,50,50);
•
Пример простого режима (II)
// Переменные и прочее ...
int i;
background(0); // чёрный экран
stroke(255);
// белая кисть
for (i = 0; i <= 50; i++)
point(i, i);

23. Язык processing
•
Пример C-подобного стиля:
// Если определяет свои функции или классы, то
// дожна быть написана реализация функции setup()
void setup()
{
size(100,100); // Размер окна
noFill(); // Не заполнять окружности
}
void draw() // Вызывается каждый кадр
{
drawRandomCircle();
}
void drawRandomCircle()
{
int r = int(random(50));
// Цвет кисти
stroke(random(255), random(255), random(255));
// Окружности со случайными параметрами(положение, радиус, цвет, размер)
ellipse(random(100), random(100), r, r);
}

24. Язык processing
•
Классы
void setup()
{
size(100,100); // Размер окна
noFill(); }
void draw() // Вызывается каждый кадр
{
Circle c = new Circle();
c.draw();
}
// Класс «окружность»
class Circle
{
// Атрибуты
int r = int(random(50));
int x = int(random(100));
int y = int(random(100));
color c = color(random(255), random(255), random(255));
// Методы
void draw()
{
stroke(c);
ellipse(x, y, r, r);
}
}

25. Практика 1-1
•
•
•
Напишите программу, которая рисует многоугольник с n сторонами.
Чтобы это сделать, напишите функцию poligon со следующими
параметрами: центр (два целых числа), радиус (целое) и число
сторон многоугольника (целое)
Интересная дополнительная информация:
• Вначале реализуйте функцию setup , в которой задается
размер окна, например size(500,500), и потом вызовите
функцию poligon
• poligon может использовать:
• Тригонометрические функции sin() и cos(), у них
аргументы в радианах
• Функцию line(x1, y1, x2, y2) которая рисует
линию от (x1, y1) до (x2, y2)
• (0,0) находится в левом верхнем углу, ось x направлена
вправо, ось y направлена вниз
• Встроенные константы PI и TWO_PI

26. Практика 1-2
•
•
Напишите программу, которая рисует цветовой градиент так, что первый
ряд (линия слева направо) будет начального цвета, а последняя конечного цвета. Промежуточные горизонтальные линии будут рисоваться
Последовательным спуском.
Чтобы это сделать, напишите функцию gradient со следующими
параметрами: 6 целых чисел; первые 3 - это RGB-компоненты начального
цвета (от 0 до 255), остальные 3 — RGB-компоненты последнего цвета
• Интересная дополнительная информация:
• Вначале реализуйте функцию setup , в которой задаётся размер
•
экрана, например size(500,500) , и потом вызовите функцию
gradient
Функция gradient может использовать:
• Линейную интерполяцию каждого цветового компонента
,
• Функцию line(x1, y1, x2, y2) которая рисует линию от
(x1, y1) до (x2, y2)
• Переменные width и height всегда возвращают
ширину и высоту текущего окна приложения
• Функция stroke , которая позволяет менять цвет линий
линий (любая кисть), где 3 параметра - RGB-компоненты
цвета линии