Создадим свой Painter. Часть 1

Привет. Сегодня создадим свой Painter (рисовалку). Для этого используем программу Processing и язык программирования Python. Это проще, чем кажется на первый взгляд ). 

Рабочая среда Processing создана специально для дизайнеров (художников) и всех творческих людей, которые хотят творить с помощью современных технологий, но не сильно погружаться в тонкости программирования. Используя простые логические операторы и немного математики можно создавать визуальные эффекты неограниченной сложности. Особенность этого инструмента в том, что у него большое сообщество, и для нее пишут плагины программисты со всего мира уже около 15 лет. В несколько строчек входа вы можете получить видео из камеры вашего ноутбука, и в реальном времени управлять каждой точкой изображения – так вы сможете создавать собственные интерактивные видео-инсталляции. Также, одной строчкой кода подключается библиотека OpenCV (библиотека компьютерного зрения), которая под капотом хранит обученные нейронные сети для нахождения людей на изображении, умеет выделять их, следить за движением и даже мимикой, строить скелетную анимацию и убирать задний фон, автоматически выравнивать перспективу и многое другое. 

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

Итак. Нам понадобится программа (рабочая среда) Processing 3.  Скачайте отсюда. Будьте внимательны – нас интересует именно версия три, а точнее 3.5.4. В этой версии работает плагин для Python, экспортирующий рисунки в pdf.

Суть работы с программой – создание маленьких эскизов (скетчей). Только вместо бумаги и карандаша у вас текстовый блокнот и настроенный специально для вас Python. При открытии программы, вам будет предложен пустой лист с названием Sketch_001 (или что-то в этом роде), и вы сможете сразу начать писать код. Единственное, нам необходимо ее немного настроить под себя. А именно — переключить режим работы в Python. Т.к. изначально она открывается в режиме Java (другой язык программирования, на котором написана сама программа).

Итак, после скачивания программы, давайте ее настроим под себя:

  • Переключите язык с Java на Python 
  • Скачайте модуль Python для Processing

 

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

# Размер холста 400x600px
# Фон красный 
# Рисуем белые круги размером от 0 до 100 px 

def setup():
    size(400,600)
    background(255,0,0)
    
def draw():
    if mousePressed:
        circle(mouseX, mouseY, random(100))

Тот же скетч, но с сохранением изображения в Pdf. Когда закончите рисовать нажмите клавишу ‘s’. Программа закроется и сохранит pdf файл рядом с вашей программой. Вы можете открыть его в иллюстраторе и убедиться, что это векторное изображение.

# Сохраняем рисунок в pdf

def setup():
    beginRecord(PDF, "poster###.pdf");
    size(400,600)
    background(255,0,0)
    
def draw():
    if mousePressed:
        circle(mouseX,mouseY,random(100))
    if keyPressed:
        if key=='s':
            endRecord()
            exit()

Поменяем немного код. Уберем обводку (stroke). А закрашивание сделаем случайное (random). Посмотрите что получается. Когда мы указываетм только одно значение для цвета fill(255) – это означает, что мы установили одинаковое значение для всех трех каналов.То есть fill(255) тоже, что и fill(255,255,255). В нашем коде fill(random(255)) означает любое число от 0 до 255, одинаковое для трех каналов (для red, для green, для blue). То есть любой серый цвет. 

def setup():    
    size(1000,200)
    background(255,0,0)
    stroke(0,0)
    
def draw():
    if mousePressed:        
        fill(random(255))
        circle(mouseX, mouseY, random(100))

Для справки: функция draw вызывается примерно 60 раз в секунду. Все что находится в этой функции, соответственно, будет стараться выполняться 60 раз в секунду.

Давайте теперь применим random(255) для каждого их цветовых каналов (r,g,b). И сделаем круги одинаковые по размеру.

def setup():    
    size(1000,200)
    background(255,0,0)
    stroke(0,0)
    
def draw():
    if mousePressed:        
        fill(random(255),random(255),random(255))
        circle(mouseX, mouseY, 100)

Снова поменяем пару строчек. Теперь закрашивание (fill) будет белым, а обводка (stroke) черной. Но в в этот раз мы дадим обводке случайную толщину. Посмотрите, как быстро и просто вы можете менять кисть, и как сильно это влияет это на конечный результат.

def setup():    
    size(1000,200)
    background(255,0,0)
    fill(255)
    
def draw():
    if mousePressed:
        strokeWeight(random(10)+5)                
        stroke(0)
        circle(mouseX, mouseY, random(200))

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

xoff = 0.0

def setup():    
    size(1000,200)
    background(255,0,0)
    stroke(0,0)
    
def draw():    
    global xoff
    xoff = xoff+.01    
    if mousePressed:        
        fill(noise(xoff)*255)
        circle(mouseX, mouseY, 100)

А теперь этот же прием используем и для изменения толщины линии (размера кругов, которые мы рисуем). А также, пусть цвет тоже меняется плавно во всех трех каналах.

xoff = 0.0

def setup():    
    size(1000,200)
    background(0)
    stroke(0,0)
    
def draw():    
    global xoff
    xoff = xoff+.01    
    if mousePressed:        
        fill(noise(xoff)*255,noise(xoff+1)*255,noise(xoff+2)*255)
        circle(mouseX, mouseY, noise(xoff)*100)

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

xoff = 0.0

def setup():    
    size(1000,200)
    background(250)
    stroke(255)
    
def draw():    
    global xoff
    xoff = xoff+.01    
    if mousePressed:                                
        fill(noise(xoff)*255,noise(xoff+1)*255,noise(xoff+2)*255)        
        ellipse(mouseX, mouseY, noise(xoff)*200,noise(xoff+10)*150)

Творческое задание

Возьмите код из последнего примера и создайте парочку абстрактных композиций. Перед созданием плаката, добавьте в код строчки, которые позволят сохранить вашу работу в pdf. Пусть размер композиций будет 1920×1080 (горизонтальный) или 1000×1200 (вертикальный).

Пример композиции (взят из интернета)

Свой Painter. Часть 2