Главная » Processing » Работаем с изображениями в Processing

0

В предыдущих примерах мы рисовали на экране фигуры с помощью координат. Processing может работать и с изображениями. В этом примере мы рассмотрим загрузку изображений, отображение их на экране, изменение цветов пикселей и копирование/ вставку частей изображений.

Приступим

Откройте одну из ваших любимых фотографий, измените размер и обрежьте ее в Photoshop так, чтобы она стала размером 640 x 480 пикселей. Если у вас нет Photoshop, вы можете скачать GIMP, открытый редактор изображений. GIMP доступен для Linux, Windows и Mac OS X. Скачать ее можно по адресу: http://www.gimp.org/.

Как это делается

Создайте новый скетч и сохраните его как working_with_images.pde. Как только вы сделаете это, перетащите изображение, которое вы только что обрезали в текстовый рактор Processing. Это самый простой способ добавить файл к скетчу. После этого можно начинать составлять код. Первое, что мы сделаем – объявим несколько переменных.

PImage img;

// some settings to play with boolean pixelMode = false; int copyWidth = 50;

int copyHeight = 3;

В функции setup() мы установим размер окна и загрузим изображение, которое мы только что сохранили в папке data в объект PImage:

void setup()

{

size( 640, 480 );

smooth();

img = loadImage("osaka-fluo.jpg");

}

В функции draw() мы получим несколько случайных чисел и применим их потом для зены пикселей или частей изображения. В блоке if-else реализован алгоритм замены пикселей. Наконец, мы выведем на экран новое изображение с помощью функции image().

void draw()

{

int x1 = floor( random( width ) ); int y1 = floor( random( height ) );

int x2 = floor( random( width ) ); int y2 = floor( random( height ) );

if ( pixelMode == true ) { color c1 = img.get( x1, y1 ); color c2 = img.get( x2, y2 ); img.set( x1, y1, c2 );

img.set( x2, y2, c1 );

} else {

PImage crop1 = img.get( x1, y1, copyWidth, copyHeight ); PImage crop2 = img.get( x2, y2, copyWidth, copyHeight ); img.set( x1, y1, crop2 );

img.set( x2, y2, crop1 );

}

image( img, 0, 0 );

}

Со значениями переменных, установленных по умолчанию, вас должно получиться изображение, похожее на то, что изображено на скриншоте.

Как это работает

Когда вы перетаскиваете изображение в текстовый редактор, Processing создает копию этого файла и сохраняет его в папке data вашего скетча. Просмотреть эту папку можно в меню Sketch | Show Sketch Folder.

Перед тем, как работать с изображениями в Processing, нужно объявить объект класса PImage. Функция loadImage() в функции setup() загружает изображение из папки data в этот объект PImage.

Для копирования пикселей и изменения их цвета мы использовали методы get() и set() из класса PImage. Они могут использоваться с двумя или четырьмя паретрами. Метод get() с двумя параметрами возвращает цвет заданной координаты. Если вы используете его с четырьмя координатами, он возвращает объект класса PImage. Первые два параметра задают координаты x/y верхнего левого угла, третий и четвертый устанавливают ширину и высоту копируемого фрагмента в пикселях. Метод set() аналогичен get, но он меняет цвет заданного пикселя или прямоугольной области пикселей.

В этом примере я применил логическую переменную pixelMode для переключения с одного пикселя на группу пикселей. Переменные copyWidth и copyHeight устанавлают размер копируемой/вставляемой области пикселей.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии