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

Однако недавно я обнаружил, что процесс не обязательно останавливаться на достигнутом. Фотографии могут быть очень интересным вкладом в процесс генеративного дизайна. Хорошо составленную и сбалансированную фотографию можно преобразовать в совершенно новую форму с помощью программных подходов. Например, ниже представлено импрессионистическое изображение одной из моих первых фотографий Скалистых гор в Колорадо, сделанных мной с помощью нескольких строк кода javascript.

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

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

Ниже я дам вам инструменты для создания ваших собственных импрессионистических произведений из фотографий.

Что такое изображение?

Проще говоря, цифровое изображение - это массив цветов (пикселей), упорядоченный в системе координат X / Y.

Каждый пиксель имеет цвет, который разбивается на красный, синий и зеленый (rgb) каналы. Красный, синий и зеленый цвета можно комбинировать для создания любого цвета. В цифровых изображениях цвета RGB представлены путем присвоения им числа от 0 (нет цвета) до 255 (максимальный цвет).

Файлы цифровых изображений, такие как .jpg и .png, запихивают все эти данные в файл, который можно сохранить, распечатать, поделиться или просмотреть в Интернете.

Библиотека p5.js

Библиотека javascript p5.js - замечательный инструмент, который делает кодирование доступным для художников, дизайнеров и новичков. В этом примере его можно использовать для чтения изображений и извлечения их значений rgb с помощью javascript в Интернете.

На их веб-сайте есть несколько полезных инструментов и руководств, которые помогут вам начать: https://p5js.org/get-started/

Вы также можете кодировать в p5.js, используя их онлайн-редактор, расположенный здесь: https://editor.p5js.org

Как видно выше, весь код p5 разбит на две основные функции:

setup () - код, который запускается при инициализации страницы.

draw () - код, который выполняется непрерывно сверху вниз, пока программа не будет остановлена.

Каждый раз, когда страница отображается, содержимое этих двух функций будет выполняться. Код в setup () хорош для статического изображения, а код в draw () хорош, если вы хотите анимировать объекты с течением времени.

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

Наконец, есть удобная функция preload (), встроенная в p5, которая используется для блокирующей обработки асинхронной загрузки внешних файлов. Эта функция необходима для предварительной загрузки изображений в p5.js и используется в примере ниже.

Извлечение значений RGB из изображения

Чтобы читать изображение с помощью p5.js, вы можете использовать функцию loadImage () в функции preload (), как показано ниже:

function preload() {
  img = loadImage("image.jpg");
}

Это создает переменную с именем img типа p5 Image, которая содержит ряд свойств, включая массив значений пикселей rgb в свойство, называемое пикселями (img.pixels).

Если я запишу эту переменную в консоль (с помощью console.log ()), я смогу увидеть структуру массива пикселей:

Выше вы можете видеть, что я загрузил изображение размером 600x600 пикселей (переменные ширины и высоты). Свойство пикселей содержит массив, и в нем 1440000 значений.

Массив не является двухмерным, а каждый пиксель представлен 4 последовательными значениями в одномерном массиве.

Красный, синий, зеленый и альфа-каналы каждого пикселя можно прочитать с помощью следующего алгоритма, перебирающего координаты x и y изображения:

function setup() {
img.loadPixels();
for (x = 0; x < img.width; x++) {
   for (y = 0; y < img.height; y = y++) {
      index = (floor(x) + floor(y) * img.width) * 4;
      red = img.pixels[index]
      blue = img.pixels[index + 1]
      green = img.pixels[index + 2]
      alpha = img.pixels[index + 3]
      pixel_brightness = (red + blue + green) / 3
    }
}
}

Каждая итерация этого цикла захватывает значения красного, зеленого, синего и альфа одного пикселя.

Чтобы воссоздать изображение на холсте, вы можете просто добавить прямоугольник для каждого пикселя, заштриховывая цвет прямоугольника, чтобы он соответствовал цвету пикселя изображения. Фактически это то, что делают экраны компьютеров для отображения изображений. (См. Код ниже)

function setup() {
img.loadPixels();
for (x = 0; x < img.width; x++) {
   for (y = 0; y < img.height; y = y++) {
      index = (floor(x) + floor(y) * img.width) * 4;
      red = img.pixels[index]
      blue = img.pixels[index + 1]
      green = img.pixels[index + 2]
      alpha = img.pixels[index + 3]
      //pixel_brightness = (red + blue + green) / 3
      fill(red,blue,green,alpha)
      rect(x,y,1,1)
    }
}
}

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

Использование случайности для создания искусства

Вместо использования прямоугольников для создания изображения (например, пикселей в форме прямоугольника, которые вы используете для просмотра этой статьи на своем устройстве) мы можем использовать любое количество форм, которые предоставляет p5 (или любой другой объект, который вы можете закодировать в javascript). В этом документе выделены примитивные формы, доступные в p5: https://p5js.org/reference/

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

Чтобы создать случайные линии, показанные на изображении, вы можете использовать следующий код:

function setup() {
img.loadPixels();
for (x = 0; x < img.width; x = x + 5) {
   for (y = 0; y < img.height; y = y + 5) {
      index = (floor(x) + floor(y) * img.width) * 4;
      red = img.pixels[index]
      blue = img.pixels[index + 1]
      green = img.pixels[index + 2]
      alpha = img.pixels[index + 3]
      //pixel_brightness = (red + blue + green) / 3
      strokeWeight(9 * Math.random())
      stroke(red, blue, green, alpha/(5 * Math.random()))
      line(x + Math.random() * 40,y ,x + 50,y + 50 * Math.random())
    }
}
}

Этот код делает для каждого 5-го пикселя случайный вес обводки, случайный цвет обводки и создает произвольно расположенную линию в соответствии с цветами изображения.

Это всего лишь один из способов создания уникальных изображений. Возможности безграничны, и я надеюсь, что это вдохновило вас на создание собственных уникальных произведений искусства!

Не стесняйтесь подписываться на мои аккаунты в Instagram или следить за мной в Twitter, если вы хотите оставаться на связи!

Генеративное искусство: https://www.instagram.com/colinreid.me