Хотите узнать больше об искусстве через код? У вас есть все необходимое, чтобы начать работу, используя ваш ПК, веб-камеру и Java
Processing – это мощный инструмент, позволяющий создавать произведения искусства с помощью кода. Это сочетание библиотеки Java для работы с графикой и интегрированной среды разработки (IDE), которая позволяет легко писать и выполнять код
Существует множество графических и анимационных проектов для начинающих, которые используют Processing, но он также способен манипулировать живым видео
Сегодня вы будете делать слайд-шоу из живого видео с различными эффектами, управляемыми с помощью мыши, используя библиотеку видео Processing. Помимо перелистывания живого видео, вы научитесь изменять его размер и цвет, а также узнаете, как заставить его следовать за курсором мыши
Настройка проекта
Для начала загрузите Processing и откройте пустой скетч. Этот учебник основан на системе Windows, но он должен работать на любом компьютере с веб-камерой
Возможно, вам потребуется установить библиотеку Processing Video, доступную в разделе Sketch > Import Library > Add Library. Найдите Video в строке поиска и установите библиотеку из The Processing Foundation
После установки вы готовы к работе. Если вы хотите пропустить кодирование, вы можете скачать полный скетч. Однако гораздо лучше сделать его самому с нуля!
Использование веб-камеры в Processing
Начнем с импорта библиотеки и создания функции setup. Введите в пустой скетч Processing следующее:
importprocessing.video.*;
Capture cam;
voidsetup(){
size640480);
cam =newCapture(this640480);
cam.start();
}
После импорта видеотеки создается экземпляр Capture под названием cam для хранения данных с веб-камеры. В разделе setup функция size устанавливает окно размером 640×480 пикселей для работы
Следующая строка назначает cam новому экземпляру Capture для this скетча, который имеет тот же размер, что и окно, а затем сообщает камере о включении с помощью cam.start()
Не волнуйтесь, если вы пока не понимаете всех этих действий. Короче говоря, мы сказали Processing создать окно, найти нашу камеру и включить ее! Чтобы отобразить ее, нам нужна функция draw. Введите ее ниже приведенного кода, за пределами фигурных скобок
voiddraw(){
if(cam.available()){
cam.read();
}
image(cam,);
}
Функция draw вызывается каждый кадр. Это означает, что много раз каждую секунду, если камера имеет данные доступные , вы считываете данные с нее
Затем эти данные отображаются в виде изображения в позиции 0, 0 , которая является верхней левой частью окна
Сохраните свой эскиз и нажмите кнопку воспроизведения в верхней части экрана
Успех! Данные, хранящиеся в cam , правильно выводятся на экран каждый кадр. Если у вас возникли проблемы, тщательно проверьте свой код.Java требует, чтобы каждая скобка и точка с запятой стояли в нужном месте! Обработка может также потребовать несколько секунд для доступа к веб-камере, поэтому если вам кажется, что она не работает, подождите несколько секунд после запуска скрипта
Переворачивание изображения
Теперь, когда у вас есть живое изображение с веб-камеры, давайте им манипулировать. В функции draw замените image(cam,0,0); этими двумя строками кода
scale-1);
image(cam,-width);
Сохраните и повторно запустите скетч. Видите ли вы разницу? Благодаря использованию отрицательного значения scale все значения x (горизонтальные пиксели) теперь перевернуты. Из-за этого нам нужно использовать отрицательное значение ширины окна, чтобы правильно расположить изображение
Переворачивание изображения вверх ногами требует всего лишь пары небольших изменений
scale-1-1);
image(cam,-width,-height);
На этот раз значения x и y переворачиваются, переворачивая изображение с камеры вверх ногами. До сих пор вы кодировали обычное изображение, горизонтально перевернутое изображение и вертикально перевернутое изображение. Давайте настроим способ циклического переключения между ними
Создание цикла
Вместо того чтобы каждый раз переписывать код заново, мы можем использовать числа для циклического перехода. Создайте новое integer в верхней части вашего кода под названием switcher
importprocessing.video.*;
int switcher =;
Capture cam;
Мы можем использовать значение switcher для определения того, что происходит с изображением камеры. Когда скетч запускается, вы присваиваете ему значение 0. Теперь мы можем использовать логику для изменения того, что происходит с изображением. Обновите метод draw , чтобы он выглядел следующим образом:
voiddraw(){
if(cam.available()){
cam.read();
}
if(switcher==){
image(cam,);
}
elseif(switcher ==){
scale-1);
image(cam,-width);
}
elseif(switcher ==){
scale-1-1);
image(cam,-width,-height);
}
else{
println'Switcher = 0 again');
switcher =;
}
}
Теперь все три варианта кода будут срабатывать в зависимости от значения переключателя. Если оно не соответствует ни одному из наших утверждений if или if else , условие else обнуляется до 0. Логика – важный навык для начинающих, и вы можете узнать о них и многом другом из отличного самоучителя по программированию на YouTube!
Использование мыши
Processing имеет встроенные методы для доступа к мыши. Чтобы определить, когда пользователь щелкает мышью, добавьте функцию mousePressed в нижней части вашего скрипта
voidmousePressed(){
switcher++;
}
Обработка слушает любые щелчки мыши и прерывает программу для выполнения этого метода, когда обнаруживает их. Каждый раз, когда вызывается метод, значение переключателя увеличивается на единицу. Сохраните и запустите свой скрипт
Теперь, когда вы нажимаете кнопку мыши, он циклически перебирает различные ориентации видео, а затем возвращается к исходной. До сих пор вы просто переворачивали видео, теперь давайте сделаем кое-что более интересное
Добавление дополнительных эффектов
Теперь вы закодируете эффект четырехцветного живого изображения, похожего на знаменитые произведения искусства Энди Уорхола. Добавить больше эффектов так же просто, как добавить еще один пункт в логику. Добавьте его в сценарий между последним утверждением else if и else
elseif(switcher ==){
tint256);
image(cam,widthheight);
tint256);
image(cam,widthwidthheight);
tint256);
image(cam,heightwidthheight);
tint256256);
image(cam,widthheightwidthheight);
}
Этот код использует функцию image , чтобы создать четыре отдельных изображения камеры в каждом углу экрана и сделать их все половинного размера
Функция tint добавляет цвет к каждому изображению камеры. Числа в скобках – это значения красный, зеленый и синий (RGB). Функция Tint окрашивает все следующие коды в выбранный цвет
Сохраните и воспроизведите, чтобы увидеть результат. Попробуйте изменить числа RGB в каждой функции tint , чтобы изменить цвета!
Заставить его следовать за мышью
Наконец, давайте заставим живое изображение следовать за положением мыши с помощью полезных функций из библиотеки Processing. Добавьте это над частью else вашей логики
elseif(switcher==){
image(cam,mouseXmouseYwidthheight);
}
Здесь вы позиционируете изображение с камеры на mouseX и mouseY. Это встроенные значения Processing, которые возвращают, на какой пиксель наведена мышь
Вот и все! Пять вариаций живого видео с помощью кода. Однако, когда вы запустите код, вы заметите пару проблем
Завершение работы над кодом
Код, который вы создали до сих пор, работает, но вы заметите две проблемы. Во-первых, как только появляется четырехцветная вариация, все последующее окрашивается в фиолетовый цвет. Во-вторых, когда вы перемещаете видео с помощью мыши, оно оставляет след. Вы можете исправить это, добавив пару строк в начало функции draw
voiddraw(){
tint256256256);
background);
//draw function continues normally here!
В начале каждого кадра этот код сбрасывает цвет оттенка на белый и добавляет черный цвет фона, чтобы видео не оставляло следов. Теперь при тестировании программы все работает идеально!
Webcame Effects: Art From Code
Processing очень мощный, и с его помощью можно делать множество вещей. Это отличная платформа для создания искусства с помощью кода, но она также подходит для управления роботами!
Если Java вам не по душе, существует библиотека JavaScript на основе Processing под названием p5.js. Она работает через браузер, и даже новички могут использовать ее для создания фантастических реактивных анимаций!
Image Credit: Syda_Productions/Depositphotos
Комментировать