Home-theater-designers
O Processing é uma ferramenta poderosa que permite a criação de arte por meio de código. É a combinação de uma biblioteca Java para trabalhar com gráficos e um ambiente de desenvolvimento integrado (IDE) que permite escrever e executar código facilmente.
Existem muitos projetos de gráficos e animação para iniciantes que usam Processing, mas também é capaz de manipular vídeo ao vivo.
Hoje você fará uma apresentação de slides de vídeo ao vivo com diferentes efeitos controlados pelo mouse, usando a biblioteca de vídeo Processing. Além de inverter o vídeo ao vivo, você aprenderá a redimensioná-lo e colori-lo, e como fazê-lo seguir o cursor do mouse.
Configuração do Projeto
Começar, Processamento de download e abra um esboço em branco. Este tutorial é baseado em um sistema Windows, mas deve funcionar em qualquer computador com webcam.
Pode ser necessário instalar a biblioteca de processamento de vídeo, acessível em Sketch> Importar Biblioteca> Adicionar Biblioteca . Procurar Vídeo na caixa de pesquisa e instale a biblioteca de The Processing Foundation .
Depois de instalado, você está pronto para começar. Se você quiser pular a codificação, você pode baixe o esboço completo . No entanto, é muito melhor fazer você mesmo do zero!
Usando uma webcam com processamento
Vamos começar importando a biblioteca e criando um configurar função. Insira o seguinte no esboço de processamento em branco:
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
Depois de importar a videoteca, você cria um Capturar instância chamada laranja para armazenar os dados da webcam. No configurar , a Tamanho função configura um 640x480 janela de tamanho de pixel para trabalhar.
A próxima linha atribui laranja para uma nova instância de Capturar , para isto esboço, que tem o mesmo tamanho da janela, antes de dizer à câmera para ligar com cam.start () .
Não se preocupe se você não entender todas as partes disso por enquanto. Resumindo, dissemos ao Processing para fazer uma janela, encontrar nossa câmera e ligá-la! Para exibi-lo, precisamos de um empate função. Insira abaixo do código acima, fora das chaves.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
o empate função é chamada a cada quadro. Isso significa que muitas vezes a cada segundo, E se a câmera tem dados acessível tu leitura os dados dele.
Esses dados são exibidos como um imagem , na posição 0, 0 , que é o canto superior esquerdo da janela.
Salve seu esboço e pressione o botão play na parte superior da tela.
Sucesso! Os dados armazenados por laranja está sendo impresso corretamente na tela a cada quadro. Se você estiver tendo problemas, verifique seu código completamente. Java precisa de cada colchete e ponto-e-vírgula no lugar certo! O processamento também pode levar alguns segundos para acessar a webcam, portanto, se você achar que ela não está funcionando, aguarde alguns segundos após iniciar o script.
Invertendo a imagem
Agora que você tem uma imagem de webcam ao vivo, vamos manipulá-la. Na função desenhar, substitua imagem (came, 0,0); com essas duas linhas de código.
scale(-1,1);
image(cam,-width,0);
Salve e execute novamente o esboço. Você pode ver a diferença? Usando um negativo escala valor, todos os x os valores (os pixels horizontais) agora estão invertidos. Por causa disso, precisamos usar o valor negativo da janela largura para posicionar a imagem corretamente.
Inverter a imagem de cabeça para baixo requer apenas algumas pequenas alterações.
scale(-1,-1);
image(cam,-width,-height);
Desta vez, tanto o x e e os valores são invertidos, virando a imagem da câmera ao vivo de cabeça para baixo. Até agora, você codificou uma imagem normal, uma imagem invertida horizontalmente e uma imagem invertida verticalmente. Vamos configurar uma maneira de alternar entre eles.
Fazendo o ciclo
Em vez de reescrever seu código todas as vezes, podemos usar números para percorrê-los. Crie um novo inteiro no topo do seu código, chamado interruptor .
import processing.video.*;
int switcher = 0;
Capture cam;
Podemos usar o valor de switcher para determinar o que acontece com a imagem da câmera. Quando o esboço começa, você atribui a ele um valor de 0 . Agora podemos usar a lógica para mudar o que acontece com a imagem. Atualize seu empate método para se parecer com este:
void draw(){
if (cam.available()){
cam.read();
}
if(switcher==0){
image(cam,0,0);
}
else if(switcher == 1){
scale(-1,1);
image(cam,-width,0);
}
else if(switcher == 2){
scale(-1,-1);
image(cam,-width,-height);
}
else{
println('Switcher = 0 again');
switcher = 0;
}
}
Agora, todas as três variações do código serão acionadas dependendo do valor de switcher. Se não corresponder a um de nossos E se ou se mais declarações, o outro A cláusula é redefinida para 0. Lógica é uma habilidade importante para iniciantes, e você pode descobrir mais sobre ela e muito mais com um excelente Tutorial de Programação do YouTube!
Usando o Mouse
O processamento possui métodos integrados para acessar o mouse. Para detectar quando o usuário clica com o mouse, adicione o mousePressed função na parte inferior do seu script.
como evitar que seu telefone superaqueça
void mousePressed(){
switcher++;
}
O processamento escuta todos os cliques do mouse e interrompe o programa para executar este método quando detecta um. Cada vez que o método é chamado, o valor de switcher aumenta em um. Salve e execute seu script.
Agora, ao pressionar o botão do mouse, ele percorre as diferentes orientações dos vídeos, antes de retornar ao original. Até agora, você acabou de virar o vídeo, agora vamos fazer algo um pouco mais interessante.
Adicionando mais efeitos
Agora, você codificará um efeito de imagem ao vivo em quatro cores semelhante às famosas obras de arte de Andy Warhol. Adicionar mais efeitos é tão simples quanto adicionar outra cláusula à lógica. Adicione isso ao seu script entre os últimos mais se declaração, e outro .
else if(switcher == 3){
tint(256, 0, 0);
image(cam, 0, 0, width/2, height/2);
tint(0, 256, 0);
image(cam, width/2, 0, width/2, height/2);
tint(0, 0, 256);
image(cam, 0, height/2, width/2, height/2);
tint(256, 0, 256);
image(cam, width/2, height/2, width/2, height/2);
}
Este código usa o imagem função para criar quatro imagens de câmera separadas em cada canto da tela e torná-las todas com metade do tamanho.
o matiz função adiciona cor a cada imagem da câmera. Os números dos colchetes são vermelho, verde e azul (RGB) valores. O matiz colore todos os códigos a seguir com a cor escolhida.
Salve e jogue para ver o resultado. Tente mudar os números RGB em cada matiz função para mudar as cores!
Fazendo seguir o mouse
Finalmente, vamos fazer a imagem ao vivo seguir a posição do mouse usando funções úteis da biblioteca Processing. Adicione isto acima do outro parte de sua lógica.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
Aqui, você está posicionando a imagem de sua câmera em mouseX e mouseY . Estes são valores de Processing incorporados que retornam para qual pixel o mouse está apontando.
É isso! Cinco variações de vídeo ao vivo por meio de código. No entanto, ao executar o código, você perceberá alguns problemas.
Concluindo o Código
O código que você criou até agora funciona, mas você notará dois problemas. Em primeiro lugar, uma vez que a variação de quatro cores aparece, tudo depois é tingido de roxo. Em segundo lugar, quando você move o vídeo com o mouse, ele deixa um rastro. Você pode corrigi-lo adicionando algumas linhas ao topo da função de desenho.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
No início de cada quadro, esse código redefine a cor da tonalidade para branco e adiciona uma cor de fundo preta para impedir que o vídeo deixe rastros. Agora, quando você testa o programa, tudo funciona perfeitamente!
Efeitos da webcam: arte do código
O processamento é muito poderoso e você pode usá-lo para fazer muitas coisas. É uma excelente plataforma para fazer arte com código, mas é igualmente adequada para controlar robôs!
Se Java não é sua praia, existe uma biblioteca JavaScript baseada em Processing chamada p5.js. É baseado em navegador e até mesmo iniciantes podem usá-lo para criar animações reativas fantásticas!
Crédito de imagem: Syda_Productions / Depositphotos
Compartilhado Compartilhado Tweet O email 3 maneiras de verificar se um e-mail é verdadeiro ou falsoSe você recebeu um e-mail que parece um pouco duvidoso, é sempre melhor verificar sua autenticidade. Aqui estão três maneiras de saber se um e-mail é real.
Leia a seguir Tópicos relacionados- Programação
- Java
- Webcam
- Em processamento
- Tutoriais de codificação
Ian Buckley é jornalista freelance, músico, performer e produtor de vídeo que mora em Berlim, Alemanha. Quando não está escrevendo ou no palco, ele está mexendo em eletrônicos ou códigos DIY na esperança de se tornar um cientista maluco.
Mais de Ian BuckleyAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever