PImage. Работаем с изображениями

Processing может работать и с изображениями.

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

PImage img;
boolean pixelMode = false;
int copyWidth = 50;
int copyHeight = 3;

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

void setup()
{
  size(640, 480);
  smooth();
  img = loadImage("cat.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() загружает изображение из папки data в этот объект PImage.

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

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

Сохранение изображения

Сохранить скетч на жёсткий диск можно с помощью функции saveFrame().

void setup()
{
  size(640, 480);
} 

void draw()
{
  background(100);
  for (int i = 0; i < 100; i++) {
    fill( random(255), 128);
    stroke(255, 128);
    ellipse(random(width), random(height), 60, 60);
  } 
  if ( keyPressed ) {
    saveFrame("images/ellipses.png");
  }
}

Скетч генерирует окружности в случайном порядке. При нажатии на любую клавишу на жёсткий диск сохранятся картинка. Её можно найти в папке images запущенного скетча. Причём повторное нажатие перезапишет файл. Чтобы этого избежать, используйте формат ellipses-####.png. В этом случае файлы будут создаваться заново под разными именами, подставляя вместо символов # цифры.

Кроме PNG, вы можете указывать и другие форматы изображений - JPG, TIF, TGA.

Где котик?

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

int radius = 75;                      //задаём радиус круга
int x = 300;
int y = 200;
PImage img;


void setup() {
  surface.title
  frameRate(120);                        //частота цикла
  size(600, 400);                        //размер окна (width,height)
  img = loadImage("cat.png");           
  smooth();                              // сглаживание
  noStroke();                            //убираем окантовку круга
}

void draw() {
  background(225);
  ellipse(x, y, radius * 2, radius * 2);        //рисуем круг
  float distance = dist(mouseX, mouseY, x, y);  //отслеживаем положение курсора
  if (distance > radius) {                     
    fill(225, 0, 0, 255);                       //круг красный, курсор за кругом, кнопка не нажата
  } else if (mousePressed) {                    //левая кнопка мышки нажата
    if (mouseButton == LEFT) {
      fill(0, 0, 255, 255);                     // закрашиваем круг синим цветом
      image(img, 20, 20, 200, 150);             // рисуем котика
    }
  } else {
    // если курсор внутри круга, то закрашиваем его в зелёный цвет. кнопка не нажата
    fill(0, 225, 0, 255);
  }
}

Скачать пример

На главную страницу Processing

Реклама