Компьютерная графикаВведение в Processing

Jordi Linares i PellicerEscola Politècnica Superior d’AlcoiDep. de Sistemes Informàtics i Computaciójlinares@dsic.upv.eshttp://www.dsic.upv.es/~jlinares

Escola Politècnica Superior d’AlcoiDep. de Sistemes Informàtics i ComputacióDep. de Sistemes Informàtics i Computació

Перевод: Татьяна Волкова (robofreak.ru), окт.2011

Что такое processing ?• Processing - диалект Java, придуманный для

создания визуального искусства, анимации идругих задач компьютерной графики

• Делается художниками и для художников

• Processing - свободное ПО, запускается везде,где есть Java (Mac OS, Linux, Windows и т.д.)

• Появился в 2001 в MIT, авторы Кейси Рис и Бен Фрай. Источник вдохновения — книга Джона Маэды «Design By Numbers»

• http://processing.org -> центр загрузки и главный портал для всех из мира processing

Зачем processing ?

• Очень, очень лёгок в освоении... первые скетчи за несколько минут

• Обладает своей IDE (очень простой)

• Изучается быстрее, чем OpenGL + GLUT илидругие альтернативы

• Мощный, очень мощный. Позволяет делать иочень простые, и очень сложные программы

• Масштабируется. Комбинируется с чистой Java и с библиотеками Java. Программа на чистой Java тоже может использовать Библиотеки из processing.

Зачем processing?• Даёт 3 способа программирования: простой,

процедурный и объектно-ориентированный

• Первые скетчи можно писать в простом режиме (без функций, только строчки кода)

• Более сложные программы или скетчи могутиметь функции (программирование в стиле C)

• Для сложных программ можно применятьООП-подход (классы Java)

• Наконец, можно сделать приложение начистой Java и работать в других средах (eclipse, netbeans) с библиотеками processing

Зачем processing ?

• Генерирует готовые к запуску приложения для платформ: Mac OS, Linux and Windows

• Приложения на processing можно также запускать из Интернета (как Java-апплеты)

• Возможна разработка под мобильные устройства (http://mobile.processing.org)

• Можно подключать электронные устройствапроектов Arduino и Wiring(http://hardware.processing.org)

Графические бибилиотеки. История

• Стандартные:• 3D Core Graphics System. ACM и SIGGRAPH (1977)

• GKS (Graphical Kernel System). 2D. ISO-ANSI (1985)

• GKS-3D (1988)

• PHIGS (Programmer’s Hierarchical Interactive Graphics System). 3D. (1988)

• SRGP и SPHIGS (Foley)

• Другие• OpenGL

• XWindows, Microsoft Windows, Mac OS ...

• VRML, X3D (Интернет-ориентированные)

• POV-Ray, Renderman

• Java2D, Java3D

• DirectX (Direct-3D)

• И прочие.

processing IDE

• Processing имеет свою IDE (Integrated Development Environment), написанную на Java

•Простая и лёгкая. Достаточна длябольшинства задач. Переход на eclipseи пр. возможен в случае более серьёзныхзадач

•Называется PDE (processing development environment)

Область текста и отладки

Область уведомлений

Имя файла

Запуск Стоп Новый Открыть Сохранить Экспорт

Номер строки

Код Вкладки и управление файлами

processing IDE• Когда сохраняете программу, создаётся папка с именем

программы. В этой папке сохраняется основной файлпрограммы, с тем же именем и расширением .pde

• 64 символа — максимальная длина имени файла, пробелыне разрешаются.

• Можно создать другие файлы исходников (менеджервкладок). У них по умолчанию то же расширение .pde , но ещё может быть расширение .java (они будут считатьсяисходными файлами на языке Java).

• Дополнительные файлы идеальны для новых функций иликлассов (в таком случае обязательная реализация встроенной функции setup)

• Видимые вкладки учитываются, когда генерируетсяприложение

• Чтобы открыть проект, открываем основной .pde файл в папке (впрочем, любой файл .pde внутри сработает)

processing IDE

• Run и Stop запускают и прерывают выполнение программы

• Export генерирует апплет для приложения. Export Application генерирует готовое к запуску приложениедля Mac OS, Linux или Windows. Всё будет лежатьв специальных папках внутри основной папки программыapplication

• Sketchbook - директория пользователя по умолчанию. Но и любую другую папку можно использовать.

processing IDE• Другие интересные возможности:

• Import Library. Управляет подключением самыхраспространённых библиотек.

• Add File. - добавить изображение, шрифт и другиемультимедиа в специальную папку внутри приложения:папка ‘data’. В этой папке мы сохраняем все элементы,которые хотим использовать внутри приложения (напр., функцией loadImage ). Папка ‘data’ будет созданаавтоматически, если её ещё не было до этого.

• Create font — управляет созданием апплета, чтобыиспользованные шрифты корректно отображались в любом Интернет-браузере.

• Help — справка по processing - и даже по функции,которую мы выделили в коде.

Язык 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-классы с некоторыми изменениями)

processing ЯзыкКод processing

(.pde)

Java-код(.java)

байткод(.class)

JVM(Java Virtual Machine)

Препроцессор(processing)

Компилятор(javac)

Запуск

• Переменные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;

processing Язык

• Арифметические +,-,*,/,%,++,--

• Отношения >,>=,<,<=,==,!=

• Логические операторы &&,||,!,&,|,^

• Побитовые операции <<,>>,&,|,^,~

• Присваивания =,+=,-=,*=,/=,%=,&=,|=,^=,<<=,>>=

• Другие ?:,[],.,(type),new,instanceof

• Приоритет выполения: 1. expr++,expr--2. ++expr,--expr,~,!3. *,/,%4. +,-5. <<,>>

6. <,>,<=,>=,instanceof7. ==,!=8. &9. ̂

10. |11. &&12. ||13. ?:14. =,+=,-,=,*=,/=,%=,&=,^=,|=,<<=,>>=

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

processing Язык

• Комментарии:// Этот комментарий — до конца строки

/* Это - многострочный

комментарий */

• Функции:returned_type functionName(list of parameters)

Если мы определяем свои функции в processing, то необходимо реализовать встроенную функциюsetup()

processing Язык

• Пример:

void setup() // Это запускается вначале{

size(100, 100);drawLine(5);

}void drawLine(int x) // Наша собственная функция{

line(x, 0, x, 99);}

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();

processing Язык

• В processing (Java) массив — это объект: • его длину можно узнать из атрибута length • Примеры:

int[] vector; // объект vector сейчас ‘null’ vector = new int[3]; // 3 компонента созданоint len = vector.length; // длина = 3int item = vector[2]; // доступ к компоненту

int [][] matrix = new int[4][4];matrix[0][0] = 12; // матрицы

processing Язык

• В чём различия между языками processing и Java?

• Препроцессор processing обычно допускает болеевольный синтаксис

• Есть простой режим: без функций, только глобальныепеременные, только последовательные строчки кода

• Позволяет писать программу в стиле C, определятьсвои собственные функции, без определения классови методов

• Позволяет определять и использовать классы с более простым синтаксисом; потом они переводятся в Java-классы

• Простой и C-подобный стиль, глобальные переменныевозможны благодаря препроцессору; все этиэлементы встраиваются в класс (незаметно для программиста)

processing Язык

• Пример простого режима (I)

// Минимальная программа в processingline(0,0,50,50);

• Пример простого режима (II)

// Переменные и прочее ...int i;background(0); // чёрный экранstroke(255); // белая кистьfor (i = 0; i <= 50; i++)

point(i, i);

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);}

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); }}

processing Язык

Практика 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

Практика 1-2• Напишите программу, которая рисует цветовой градиент так, что первый

ряд (линия слева направо) будет начального цвета, а последняя - конечного цвета. Промежуточные горизонтальные линии будут рисоватьсяПоследовательным спуском.

• Чтобы это сделать, напишите функцию gradient со следующими параметрами: 6 целых чисел; первые 3 - это RGB-компоненты начальногоцвета (от 0 до 255), остальные 3 — RGB-компоненты последнего цвета

• Интересная дополнительная информация:• Вначале реализуйте функцию setup , в которой задаётся размер

экрана, например size(500,500) , и потом вызовите функцию

• Функция gradient может использовать:• Линейную интерполяцию каждого цветового компонента• Функцию line(x1, y1, x2, y2), которая рисует линию от

(x1, y1) до (x2, y2)• Переменные width и height всегда возвращают

ширину и высоту текущего окна приложения• Функция stroke , которая позволяет менять цвет линий

линий (любая кисть), где 3 параметра - RGB-компонентыцвета линии

gradient