Cómo crear increíbles efectos de cámara web usando Java y procesamiento
Anuncio
El procesamiento es una herramienta poderosa que permite la creación de arte a través del código. Es la combinación de una biblioteca Java para trabajar con gráficos y un entorno de desarrollo integrado (IDE) que le permite escribir y ejecutar código fácilmente.
Hay muchos proyectos gráficos y de animación para principiantes que usan Processing, pero también es capaz de manipular video en vivo.
Hoy realizarás una presentación de diapositivas de video en vivo de diferentes efectos controlados por el mouse, utilizando la biblioteca de video Processing. Además de voltear el video en vivo, aprenderá a cambiar su tamaño y colorearlo, y cómo hacer que siga el cursor del mouse.
Configuración del proyecto
Para comenzar, descargue Procesamiento y abra un boceto en blanco. Este tutorial está basado en un sistema Windows, pero debería funcionar en cualquier computadora con una cámara web.
Es posible que deba instalar la biblioteca de procesamiento de video, accesible en Bosquejo> Importar biblioteca> Agregar biblioteca . Busque Video en el cuadro de búsqueda e instale la biblioteca de The Processing Foundation .
Una vez instalado, ya está listo para comenzar. Si desea omitir la codificación, puede descargar el boceto completo. ¡Sin embargo, es mucho mejor hacerlo usted mismo desde cero!
Usar una cámara web con procesamiento
Comencemos importando la biblioteca y creando una función de configuración . Ingrese lo siguiente en el boceto de procesamiento en blanco:
import processing.video.*; Capture cam; void setup(){ size(640, 480); cam = new Capture(this, 640, 480); cam.start(); } Después de importar la biblioteca de videos, crea una instancia de Capture llamada cam para almacenar los datos de la cámara web. En la configuración, la función de tamaño configura una ventana de 640 × 480 píxeles para trabajar.
La siguiente línea asigna cam a una nueva instancia de Capture, para este boceto, que es del mismo tamaño que la ventana, antes de decirle a la cámara que se encienda con cam.start () .
No se preocupe si no comprende cada parte de esto por ahora. En resumen, ¡le hemos dicho a Processing que haga una ventana, encuentre nuestra cámara y la encienda! Para mostrarlo necesitamos una función de dibujo . Ingrese esto debajo del código de arriba, fuera de las llaves.
void draw(){ if (cam.available()){ cam.read(); } image(cam, 0, 0); } La función de dibujar se llama cada cuadro. Esto significa que muchas veces cada segundo, si la cámara tiene datos disponibles, usted los lee .
Estos datos se muestran como una imagen, en la posición 0, 0, que es la esquina superior izquierda de la ventana.
Guarde su boceto y presione el botón de reproducción en la parte superior de la pantalla.
¡Éxito! Los datos almacenados por la cámara se imprimen correctamente en la pantalla cada fotograma. Si tiene problemas, verifique su código a fondo. ¡Java necesita cada paréntesis y punto y coma en el lugar correcto! El procesamiento también puede requerir unos segundos para acceder a la cámara web, por lo que si cree que no funciona, espere unos segundos después de iniciar el script.
Voltear la imagen
Ahora que tiene una imagen de cámara web en vivo, manipúlela. En la función de dibujo, reemplace la imagen (cam, 0, 0); con estas dos líneas de código.
scale(-1, 1); image(cam, -width, 0); Guarde y vuelva a ejecutar el boceto. ¿Puedes ver la diferencia? Al usar un valor de escala negativo, todos los valores de x (los píxeles horizontales) ahora se invierten. Debido a esto, necesitamos usar el valor negativo del ancho de la ventana para posicionar la imagen correctamente.
Voltear la imagen al revés requiere solo un par de pequeños cambios.
scale(-1, -1); image(cam, -width, -height); 
Esta vez, se invierten los valores xey, volteando la imagen de la cámara en vivo. Hasta ahora, ha codificado una imagen normal, una imagen volteada horizontalmente y una imagen volteada verticalmente. Vamos a establecer una forma de alternar entre ellos.
Haciéndolo ciclo
En lugar de reescribir su código cada vez, podemos usar números para recorrerlos. Cree un nuevo número entero en la parte superior de su código llamado conmutador .
import processing.video.*; int switcher = 0; Capture cam; Podemos usar el valor de switcher para determinar qué sucede con la imagen de la cámara. Cuando comienza el boceto, le das un valor de 0 . Ahora podemos usar la lógica para cambiar lo que le sucede a la imagen. Actualice su método de dibujo para que se vea así:
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; } } Ahora, las tres variaciones del código se dispararán según el valor del conmutador. Si no coincide con una de nuestras declaraciones if o if else, la cláusula else se restablece a 0. La lógica es una habilidad de principiante importante para aprender, y puede averiguar sobre ellas y mucho más con un excelente Tutorial de programación de YouTube. Los 17 mejores tutoriales de programación de YouTube Los 17 mejores tutoriales de programación de YouTube En esta publicación, nos gustaría señalarle algunas de las mejores series de programación de YouTube que hemos encontrado. Todos estos son suficientes para mojarse los pies como programador novato. Lee mas !
Usando el mouse
El procesamiento tiene métodos incorporados para acceder al mouse. Para detectar cuándo el usuario hace clic con el mouse, agregue la función mousePressed en la parte inferior de su script.
void mousePressed(){ switcher++; } El procesamiento escucha cualquier clic del mouse e interrumpe el programa para llevar a cabo este método cuando detecta uno. Cada vez que se llama al método, el valor de switcher aumenta en uno. Guarda y ejecuta tu script.
Ahora, cuando presiona el botón del mouse, recorre las diferentes orientaciones de los videos, antes de regresar al original. Hasta ahora acabas de voltear el video, ahora hagamos algo un poco más interesante.
Agregar más efectos
Ahora, codificará un efecto de imagen en vivo de cuatro colores similar a las famosas obras de arte de Andy Warhol. Agregar más efectos es tan simple como agregar otra cláusula a la lógica. Agregue esto a su secuencia de comandos entre la última instrucción if y else .
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 la función de imagen para crear cuatro imágenes de cámara separadas en cada esquina de la pantalla y hacer que todas tengan el tamaño medio.
La función de tinte agrega color a cada imagen de la cámara. Los números entre paréntesis son valores rojo, verde y azul (RGB) . Tinte colorea todo el siguiente código con el color elegido.
Guarda y juega para ver el resultado. ¡Intente cambiar los números RGB en cada función de tinte para cambiar los colores!
Hacer que siga al mouse
Finalmente, hagamos que la imagen en vivo siga la posición del mouse usando funciones útiles de la biblioteca Processing. Agregue esto arriba de la otra parte de su lógica.
else if(switcher==4 ){ image(cam, mouseX, mouseY, width/2, height/2); } Aquí, está colocando la imagen de su cámara en mouseX y mouseY . Estos están integrados en los valores de procesamiento que devuelven a qué píxel apunta el mouse.
¡Eso es! Cinco variaciones de video en vivo a través del código. Sin embargo, cuando ejecute el código, notará un par de problemas.
Terminando el Código
El código que ha creado hasta ahora funciona, pero notará dos problemas. En primer lugar, una vez que se muestra la variación de cuatro colores, todo después se tiñe de púrpura. En segundo lugar, cuando mueve el video con el mouse, deja un rastro. Puede solucionarlo agregando un par de líneas en la parte superior de la función de dibujo.
void draw(){ tint(256, 256, 256); background(0); //draw function continues normally here! Al comienzo de cada cuadro, este código restablece el color del tinte a blanco y agrega un color de fondo negro para evitar que el video deje rastros. Ahora cuando prueba el programa, ¡todo funciona perfectamente!
Efectos de Webcame: Arte del Código
El procesamiento es muy poderoso y puede usarlo para hacer muchas cosas. Es una excelente plataforma para hacer arte con código, ¡pero es igualmente adecuada para controlar robots!
Si Java no es lo tuyo, hay una biblioteca de JavaScript basada en procesamiento llamada p5.js. Está basado en un navegador, e incluso los principiantes pueden usarlo para crear fantásticas animaciones reactivas Cómo escribir una animación de robot sensible a la voz en p5.js Cómo escribir una animación de robot sensible a la voz en p5.js Quiere que sus hijos se interesen en la programación ? Muéstreles esta guía para construir una cabeza de robot animada reactiva al sonido. Lee mas !
Haber de imagen: Syda_Productions / Depositphotos
Explore más sobre: Tutoriales de codificación, Java, Procesamiento, Webcam.
