Компьютерная графикаВведение в Processing
Jordi Linares i PellicerEscola Politècnica Superior d’AlcoiDep. de Sistemes Informàtics i Computació[email protected]://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
Top Related