O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

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

1.125 visualizações

Publicada em

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

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×