Компьютерная графикаИзображения и текст

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

Изображения

• PImage В processing есть класс , с помощью которого можно создавать объекты типа «изображение» (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-1

• Создайте новое приложение. Добавьте изображение в папку data.• Покажите изображение, занимающее всё окно, с сохранением пропорций

и отцентрированное (изотропное и центрированное преобразование)

• Можно узнать размер изображения через атрибуты width и heightЕсли im имеет тип PImage , его размеры im.width и im.height

createImage(width, height, color mode)

• Позволяет создать новое изображение

• Цветовой режим может быть RGB, ARGB или ALPHA

• RGB работает с 24-битными изображениями (8 бит на канал, ‘true color’)

• ARGB добавляет канал для прозрачности

• ALPHA для изображений только с одним каналом(эффекты прозрачности)

Изображения

get()get(x, y)get(x, y, width, height)

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

Изображения

set(x, y, color)set(x, y, image)

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

Изображения

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

colorcolor(r, g, b) которая позволяет создать

новый цвет из соответствующих RGB-значений, и функцииred(color), green(color) и blue(color), которыевозвращают соответствующий канал из цвета, заданного как RGB.

Изображения

• Пример:// 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);

Изображения

• Пример:// Эффект отражения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);

Изображения

Изображения

save(filename)

• Сохраняет изображение в графическом формате, определённом в расширении файла.

• Разрешённые форматы: TIFF, TARGA, JPEG и PNG

Изображения

• В processing есть класс для создания шрифтов PFont

• Шрифты создаются и сохраняются в папке dataв директории приложения. Для этого в PDE есть команда ‘Create Font' в меню инструментов. Шрифты сохраняютсяс расширением .vlw

• Шрифт загружается в loadFont() и выбирается через loadFont() , прежде чем использовать в text()

• Очень много функций и возможностей: textAlign(), textSize(), textMode(), textLeading() и т.д.

Типографика

• Пример:

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

Типографика

Практика 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колько раз каждая величина встречается в изображении. Такжеудобно посчитать максимальную величину по всей гистограмме.

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

• Пример:

Практика 3-2