Home-theater-designers
El procesamiento es una poderosa herramienta que permite la creación de arte a través de 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 para principiantes de gráficos y animación que usan Processing, pero también es capaz de manipular video en vivo.
Hoy harás una presentación de diapositivas de video en vivo de diferentes efectos controlados por el mouse, utilizando la biblioteca de videos de Processing. Además de voltear el video en vivo, aprenderá a cambiar su tamaño y color, y cómo hacer que siga el cursor del mouse.
Configuración del proyecto
Empezar, descargar procesamiento y abra un boceto en blanco. Este tutorial se basa en un sistema Windows, pero debería funcionar en cualquier computadora con cámara web.
Es posible que deba instalar la biblioteca Processing Video, accesible en Boceto> Importar biblioteca> Agregar biblioteca . Buscar Video en el cuadro de búsqueda e instale la biblioteca desde La Fundación de Procesamiento .
Una vez instalado, estará listo para comenzar. Si desea omitir la codificación, puede descargar el boceto completo . ¡Sin embargo, es mucho mejor hacerlo tú mismo desde cero!
Usar una cámara web con procesamiento
Comencemos por importar la biblioteca y crear una configuración función. Ingrese lo siguiente en el boceto de procesamiento en blanco:
|_+_|
Después de importar la biblioteca de videos, crea una Capturar instancia llamada naranja para almacenar los datos de la cámara web. En configuración , los Talla función configura un 640x480 ventana del tamaño de un píxel para trabajar.
La siguiente línea asigna naranja a una nueva instancia de Capturar , por esta 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 todas las partes de esto por ahora. En resumen, le hemos dicho a Processing que haga una ventana, busque nuestra cámara y ¡la encienda! Para mostrarlo necesitamos un dibujar función. Ingrese esto debajo del código de arriba, fuera de las llaves.
|_+_|los dibujar se llama a la función en cada fotograma. Esto significa que muchas veces por segundo, si la cámara tiene datos disponible usted leer los datos de él.
A continuación, estos datos se muestran como un imagen , en la posición 0, 0 , que es la parte 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 naranja se imprime correctamente en la pantalla en cada fotograma. Si tiene problemas, verifique su código minuciosamente. ¡Java necesita cada corchete 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, manipulémosla. En la función de dibujo, reemplace imagen (cam, 0,0); con estas dos líneas de código.
|_+_|Guarde y vuelva a ejecutar el boceto. ¿Puedes ver la diferencia? Usando un negativo escala valor, todos los x los valores (los píxeles horizontales) ahora están invertidos. Debido a esto, necesitamos usar el valor negativo de la ventana. ancho para colocar la imagen correctamente.
Dar la vuelta a la imagen requiere solo un par de pequeños cambios.
|_+_|Esta vez, tanto el x y y los valores se invierten, dando la vuelta a la imagen de la cámara en directo. Hasta ahora, ha codificado una imagen normal, una imagen invertida horizontalmente y una imagen invertida verticalmente. Configuremos una forma de alternar entre ellos.
Haciéndolo ciclo
En lugar de reescribir su código cada vez, podemos usar números para recorrerlos. Crear un nuevo entero en la parte superior de su código llamado conmutador .
|_+_|Podemos usar el valor del conmutador para determinar qué sucede con la imagen de la cámara. Cuando comienza el boceto, le da un valor de 0 . Ahora podemos usar la lógica para cambiar lo que le sucede a la imagen. Actualiza tu dibujar método para verse así:
|_+_|Ahora, las tres variaciones del código se activarán según el valor del conmutador. Si no coincide con uno de nuestros si o si mas declaraciones, el demás la cláusula se restablece a 0. ¡La lógica es una habilidad importante para principiantes que debe aprender, y puede obtener información sobre ellas y mucho más con un excelente tutorial de programación de YouTube!
Usando el mouse
El procesamiento tiene métodos incorporados para acceder al mouse. Para detectar cuando el usuario hace clic con el mouse, agregue el mousePressed función en la parte inferior de su secuencia de comandos.
60 hz vs tv de 120 hz|_+_|
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 del conmutador aumenta en uno. Guarde y ejecute su secuencia de comandos.
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 script entre los últimos si no declaración, y demás .
|_+_|Este código usa el imagen función para crear cuatro imágenes de cámara independientes en cada esquina de la pantalla y hacerlas todas a la mitad.
los tinte La función agrega color a cada imagen de la cámara. Los números son los corchetes rojo, verde y azul (RGB) valores. Tinte colorea todo el código siguiente con el color elegido.
Guarda y juega para ver el resultado. Intente cambiar los números RGB en cada tinte función para cambiar los colores!
Haciendo que siga al ratón
Finalmente, hagamos que la imagen en vivo siga la posición del mouse usando funciones útiles de la biblioteca Processing. Agregue esto encima del demás parte de tu lógica.
|_+_|Aquí, está colocando la imagen de su cámara en mouseX y pardusco . Estos son valores de procesamiento integrados que devuelven a qué píxel apunta el mouse.
¡Eso es todo! Cinco variaciones de video en vivo a través de 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 se tiñe de púrpura. En segundo lugar, cuando mueves 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.
|_+_|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 pruebes el programa, ¡todo funcionará perfectamente!
Efectos de Webcame: Arte a partir del código
El procesamiento es muy poderoso y puede usarlo para hacer muchas cosas. Es una plataforma excelente 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 Processing llamada p5.js. Está basado en navegador, ¡e incluso los principiantes pueden usarlo para crear fantásticas animaciones reactivas!
Crédito de la imagen: Syda_Productions / Depositphotos
Cuota Cuota Pío Correo electrónico 3 formas de comprobar si un correo electrónico es real o falsoSi ha recibido un correo electrónico que parece un poco dudoso, siempre es mejor verificar su autenticidad. Aquí hay tres formas de saber si un correo electrónico es real.
Leer siguiente Temas relacionados- Programación
- Java
- Cámara web
- Procesando
- Tutoriales de codificación
Ian Buckley es un periodista, músico, intérprete y productor de video independiente que vive en Berlín, Alemania. Cuando no está escribiendo o en el escenario, está jugando con la electrónica o el código de bricolaje con la esperanza de convertirse en un científico loco.
Más de Ian BuckleySuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse