Image Processing. Часть 1

Итак, надеюсь, вы уже прошли вводный курс в processing и python с помощью серии упражнений «Создадим свой Painter». Давайте посмотрим, до чего мы еще можем дотянуться, не сильно углубляясь в программирование. Оставаясь примерно на том же уровне сложности скетчей, предлагаю исследовать возможности процессинга в управлении изображением на уровне пикселей.

Давайте подключим камеру вашего ноутбука и напишем свой видео фильтр из серии Mirror-Fx. Mirror-fx (или Зеркало) – это такие мини-программы / эффекты, которые искажают по разному видео или фото. Например – превращают ваши фото в произведения искусства (как в программе Prizma). Или создают эффект кривого зеркала (как в Water Fall FX TikTok, video).

Water Fall (Водопад)

Прежде всего, хочу показать вам сколько нужно кода, чтобы создать видео эффект Waterfall. Так вот, сам эффект – это ровно две строчки кода. Остальные строчки только устанавливают размер экрана и подключают камеру. Непосредственного отношения к самому эффекту не имеют. Итак, привожу код, который я написал недавно, вдохновившись идеей очень популярного фильтра из тик тока. (Если у вас камера внешняя, то строчку device-index=0, нужно заменить на device-index=1)

add_library('video')
 
def setup():
    size(1280, 720)
    background(0)
    global vid
    vid = Capture(this, 1280, 720, "pipeline:avfvideosrc device-index=0")
    vid.start()    
    
def captureEvent(v):
    v.read()
    
def draw():    
    s = 1
    image(vid, 0,0,width,height/2,0,0,width,height/2)    
    copy(0, height/2-s, width, height/2, 0, height/2, width, height/2)

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

Water fall FX, эффект нашел своих поклонников (день открытых дверей, ВВГУ)

Water fall FX Tik tok (изображения из интернета)

Рисуем кадрами из видео-камеры

Очень простой код, но с очень интересным результатом ) Хотите использовать видеокамеру вместо палитры, вставьте этот код в процессинг! Если у вас есть внешняя камера – будет интересней поиграть в эту игру. Направляйте ее на разные предметы, а мышкой рисуйте какие-нибудь линии на холсте.

Код:

add_library('video')

def setup():
    size(1280, 720)
    background(0)
    global vid
    vid = Capture(this, 1280, 720, "pipeline:avfvideosrc device-index=0")
    vid.start()    
    
def captureEvent(v):
    v.read()
    
def draw():    
    if mousePressed:
        image(vid, mouseX-50,mouseY-50,100,100)

Результат будет примерно таким:

Пиксельный эффект

А теперь все по порядку и подробно =). Вернемся к изображениям и разберем их по пикселям. Создайте новый скетч, добавьте папку data туда же, где и файл скетча. Закиньте в папку data любую картинку. Пусть она будет 400×400 px. Наберите следующий код.

def setup():    
    background('#f1f1f1')
    fill(0)
    noStroke()
    size(400,400)
    global img
        
    tiles = 10    
    s = width/tiles
    
    for x in range(tiles):
        for y in range(tiles):
            ellipse(x*s +s/2 ,y*s + s/2, s, s)

продолжение следует….

папка с картинками на прозрачном фоне здесь

Альтернативный вариант – processing на javaScript

Быстрый доступ на js здесь

let cam;

function setup(){
  createCanvas(1200,1000, WEBGL);
  cam = createCapture(VIDEO)
  cam.size(700,400)
  cam.hide()
  
}

function mouseDragged(){
  image(cam, mouseX-600,mouseY-600, 400,400)
}