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

1. Компьютерная графика
Изображения и текст
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

2. Изображения
•
•
•
•
•
В processing есть класс PImage, с помощью которого можно создавать
объекты типа «изображение» (image)
Функция loadImage()позволяет открывать изображения в следующих
форматах: GIF, JPG, TGA и PNG
Файлы для загрузки должны быть в папке data приложения (в PDE
есть команда 'Add File', которая позволяет выбирать файлы и вставлять
их в эту папку автоматически)
Чтобы сделать изображение видимым, можно вызвать функцию image()
image(image, x, y) -> Показать изображение в
координатах (x, y), не изменяя его изначальный размер
image(image, x, y, width, height) -> Показать
изображение в координатах (x, y) и масштабировать его
к заданной ширине и высоте
Примеры:
•
•
PImage foto = loadImage("foto.jpg");
image(foto, 0, 0);

3. Практика 3-1
•
•
•
Создайте новое приложение. Добавьте изображение в папку data.
Покажите изображение, занимающее всё окно, с сохранением пропорций
и отцентрированное (изотропное и центрированное преобразование)
Можно узнать размер изображения через атрибуты width и height
Если im имеет тип PImage , его размеры im.width и
im.height

4. Изображения
•
•
createImage(width, height, color mode)
Позволяет создать новое изображение
Цветовой режим может быть RGB, ARGB или ALPHA
RGB работает с 24-битными изображениями
(8 бит на канал, ‘true color’)
ARGB добавляет канал для прозрачности
ALPHA для изображений только с одним каналом
(эффекты прозрачности)
•
•
•

5. Изображения
•
get()
get(x, y)
get(x, y, width, height)
Методы get() позволяют получить пиксель изображения,
get(x, y), или новое изображение - фрагмент исходного:
get(x, y, width, height). Метод get()без
параметров возвращает копию того изображения, у
которого вызван метод.

6. Изображения
•
set(x, y, color)
set(x, y, image)
Методы set() позволяют изменить значение пикселя
у того изображения, у которого вызван метод set(x, y,
color), либо расположить изображение в координатах
(x, y) поверх того изображения, у которого вызван метод.

7. Изображения
•
Для упрощения работы с цветами можно использовать
тип данных color (на самом деле — просто число),
функцию color(r, g, b), которая позволяет создать
новый цвет из соответствующих RGB-значений, и функции
red(color), green(color) и blue(color), которые
возвращают соответствующий канал из цвета,
заданного как RGB.

8. Изображения
•
Пример:
// foto.jpg должно быть в папке ‘data’ основной директории приложения
PImage foto_original = loadImage("foto.jpg");
PImage foto_modified = createImage(foto_original.width,
foto_original.height, RGB);
// увеличить интенсивность цвета на 50%
for (int i = 0; i < foto_original.width; i++)
for (int j = 0; j < foto_original.height; j++) {
color c_o = foto_original.get(i, j);
color c_d = color(min(255, red(c_o) * 1.5),
min(255, green(c_o) * 1.5),
min(255, blue(c_o) * 1.5));
foto_modified.set(i, j, c_d);
}
// Показать оба изображения
size(500, 300);
image(foto_original, 0, 0, width/2, height);
image(foto_modified, width/2, 0, width/2, height);

9. Изображения
•
Пример:
// Эффект отражения
PImage foto_original = loadImage("foto.jpg");
PImage foto_modified = createImage(foto_original.width,
foto_original.height / 3,
ARGB);
// Берём 1/3 исходного изображения,
// делаем зеркальное отражение, и применяем градиент
// прозрачности
int h23 = foto_original.height * 2 / 3;
int h13 = foto_original.height / 3;
for (int j = h23; j < foto_original.height; j++) {
int alpha = int((j - h23) * (255.0 / h13)) - 128;
for (int i = 0; i < foto_original.width; i++) {
color c_o = foto_original.get(i, j);
color c_d = color(red(c_o), green(c_o), blue(c_o), alpha);
foto_modified.set(i, h13 - (j - h23), c_d);
}
}
size(1000, 700);
background(0);
// Изображение
image(foto_original, 50, 10);
// Исходное изображение с эффектом отражения
image(foto_original, 500, 10);
image(foto_modified, 500, foto_original.height + 10);

10. Изображения

11. Изображения
save(filename)
•
•
Сохраняет изображение в графическом формате,
определённом в расширении файла.
Разрешённые форматы: TIFF, TARGA, JPEG и PNG

12. Типографика
•
•
•
•
В processing есть класс для создания шрифтов PFont
Шрифты создаются и сохраняются в папке data
в директории приложения. Для этого в PDE есть команда
‘Create Font' в меню инструментов. Шрифты сохраняются
с расширением .vlw
Шрифт загружается в loadFont() и выбирается через
loadFont() , прежде чем использовать в text()
Очень много функций и возможностей:
textAlign(), textSize(), textMode(),
textLeading() и т.д.

13. Типографика
•
Пример:
size(300, 200);
background(0);
// Загружаем шрифт (предварительно
// нужно создать его подходящей командой
// processing)
PFont font = loadFont("Serif-48.vlw");
// Выбираем шрифт
textFont(font);
// Шрифт
fill(255, 0, 0);
// В точке x=10, y = 50 (снизу вверх)
text("Hello World", 20, 100);

14. Практика 3-2
•
•
•
•
Посчитайте и изобразите гистограмму изображения
Гистограмма представляет то, сколько раз величина интенсивности
встречается в изображении
Может быть посчитана для каждого из трёх каналов отдельно или
интегрированным способом для всех каналов вместе (RGB-гистограмма)
RGB-гистограмму можно посчитать так:
Откройте изображение
Преобразуйте в чёрно-белое. Можно использовать метод filter()
im.filter(GRAY), который меняет изображение im , переводя его
в оттенки серой шкалы (1 канал). Этот единственный канал теперь
будет доступен в качестве красного (RED): red(im.get(x, y))
Возвращает значение пикселя в серой шкале после преобразования
filter()
Создайте массив гистограммы: int[] histogram = new int[256]
Пройдите по всем пикселям изображения, канал RED,
увеличивая счётчик в гистограмме:
histogram[red(im.get(x, y))]++ . Так мы посчитаем,
cколько раз каждая величина встречается в изображении. Также
удобно посчитать максимальную величину по всей гистограмме.
•
•
•
•

15. Практика 3-2
•
•
Изобразите эту гистограмму графически так, чтобы её ширина была
256 и её высота была 100, и каждое значение нарисуйте линией
Пример: