Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Компьютерная графика в Processing, часть 3. Изображения и текст

1,110 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Компьютерная графика в Processing, часть 3. Изображения и текст

  1. 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. 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. Практика 3-1 • • • Создайте новое приложение. Добавьте изображение в папку data. Покажите изображение, занимающее всё окно, с сохранением пропорций и отцентрированное (изотропное и центрированное преобразование) Можно узнать размер изображения через атрибуты width и height Если im имеет тип PImage , его размеры im.width и im.height
  4. 4. Изображения • • createImage(width, height, color mode) Позволяет создать новое изображение Цветовой режим может быть RGB, ARGB или ALPHA RGB работает с 24-битными изображениями (8 бит на канал, ‘true color’) ARGB добавляет канал для прозрачности ALPHA для изображений только с одним каналом (эффекты прозрачности) • • •
  5. 5. Изображения • get() get(x, y) get(x, y, width, height) Методы get() позволяют получить пиксель изображения, get(x, y), или новое изображение - фрагмент исходного: get(x, y, width, height). Метод get()без параметров возвращает копию того изображения, у которого вызван метод.
  6. 6. Изображения • set(x, y, color) set(x, y, image) Методы set() позволяют изменить значение пикселя у того изображения, у которого вызван метод set(x, y, color), либо расположить изображение в координатах (x, y) поверх того изображения, у которого вызван метод.
  7. 7. Изображения • Для упрощения работы с цветами можно использовать тип данных color (на самом деле — просто число), функцию color(r, g, b), которая позволяет создать новый цвет из соответствующих RGB-значений, и функции red(color), green(color) и blue(color), которые возвращают соответствующий канал из цвета, заданного как RGB.
  8. 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. 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. 10. Изображения
  11. 11. Изображения save(filename) • • Сохраняет изображение в графическом формате, определённом в расширении файла. Разрешённые форматы: TIFF, TARGA, JPEG и PNG
  12. 12. Типографика • • • • В processing есть класс для создания шрифтов PFont Шрифты создаются и сохраняются в папке data в директории приложения. Для этого в PDE есть команда ‘Create Font' в меню инструментов. Шрифты сохраняются с расширением .vlw Шрифт загружается в loadFont() и выбирается через loadFont() , прежде чем использовать в text() Очень много функций и возможностей: textAlign(), textSize(), textMode(), textLeading() и т.д.
  13. 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. 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. 15. Практика 3-2 • • Изобразите эту гистограмму графически так, чтобы её ширина была 256 и её высота была 100, и каждое значение нарисуйте линией Пример:

×