Video Mapping Toy – 03

En los posts anteriores hemos visto cómo crear un cuadrilátero cuyos vértices podemos arrastrar a la posición que queramos y cómo proyectar una animación de vídeo sobre ese cuadrilátero, a modo de textura, sin rebasar sus límites. Es la base para cualquier programa de vídeo mapping

En este vamos a limpiar un poco la cosa, y emplearemos una clase para crear tantos cuadriláteros como queramos. Por supuesto, cada uno puede tener su propia proyección, de manera que podamos mapear una o varias animaciones sobre cualquier superficie (… que tenga cuatro lados).

Al archivo build.pde vamos a sumar otros dos que nos ayudarán a mantener el código ordenadito: screens.pde y projections.pde. En uno guardaremos la clase Screens() y en el otro las texturas PGraphics que proyectaremos sobre ellas.

Al final del artículo encontrarás un enlace a los archivos de este ejemplo.

Lo primero es crear la clase. Si necesitas información básica sobre qué es una clase y cuál es su estructura puedes ir al artículo Crear una clase en este mismo blog.

Llamaremos a nuestra clase Screen, por aquello de que las vamos a utilizar como pantallas sobre las que proyectaremos nuestras animaciones.

La idea es la siguiente:

  • Creamos una clase que recibe cinco argumentos: los cuatro primero son las coordenadas de sus vértices, el quinto la animación que proyectaremos sobre ella.
  • Si el cursor está sobre la esquina, cambia a MANO, muestra una circunferencia sobre la esquina y queda disponible para ser movida.
  • Si hacemos clic y arrastramos, la esquina se mueve con el cursor.
  • Si soltamos, la esquina queda fija (hasta que volvamos a hacer clic sobre ella)

Continue reading

Video Mapping Toy – 02

En el post anterior vimos cómo crear un cuadrilátero cuya forma pueda modificarse arrastrando las esquinas. Ahora crearemos una animación que pueda usarse como textura de ese cuadrilátero. La idea es que el polígono actúe como una pantalla elástica que pueda adaptarse a la forma de la superficie donde se proyecte.

Para ello creamos una animación que se vaya almacenando como PGraphics. La función texture(), aplicada a un objeto PShape() proporciona una textura al polígono. Esa textura se le proporciona como argumento y debe ser un objeto tipo PGraphics, de ahí la necesidad de almacenar la animación de esa manera. Así que la función texture() lo que hace es guardar constantemente los sucesivos estados de la animación en el mismo PGraphics (‘t1’ en el ejemplo) que pasaremos al polígono como argumento.

He indicado los añadidos con comentarios precedidos por cuatro barras en vez de dos (////).

Continue reading

Video Mapping Toy – 01

Abro aquí una breve serie de entradas sobre una herramienta muy sencilla para mapear proyecciones sobre superficies poligonales. Evidentemente no se trata de nada que intente emular las herramientas profesionales que existen, sino más bien un juguetillo que nos permita moldear la forma de una o varias pantallas para ajustarse a la de la superficie sobre la que se proyecta.

La idea es usar clips de vídeo o programas de Processing como texturas que se aplicarán  a un polígono cuyas esquinas puedan cambiar de posición al arrastrarlas con el ratón.

Empecemos por crear el polígono editable, al que llamaremos ‘pantalla’.

Aquí va el código (NOTA: Processing 3.0 se publicó justo después de que escribiera los programas de este tutorial. Están realizados para 2.2.1. Donde es necesario indico qué cambios hay que hacer para que funcione en la versión 3):

//VARIABLES
 
//Vértices de la pantalla
//Definimos las coordenadas de cada vértice
PVector v1 = new PVector(10,10);
PVector v2 = new PVector(390,10);
PVector v3 = new PVector(390,390);
PVector v4 = new PVector(10,390);
 
//¿Arrastrar y soltar?
/*Creamos estas 4 variables para indicar
si hay que mover los vértices*/
boolean _v1, _v2, _v3, _v4 = false;
 
//SETUP
 
/*Descomentar el bloque siguiente
si estás usando la versión 3.0 */
/* Processing 3.0
void settings(){
    size(600, 600, P2D);
}
*/
 
void setup() {
    //Comentar la línea siguiente sii usas 3.0
    size(400, 400, P2D);
    //
    background(0);
    stroke(255);
}
 
void draw() {
    background(0);
    fill(0);
    /*Insertamos la función 'pantalla',
    que definiremos luego*/
    pantalla();
    fill(255);
    text("Arrastra las esquinas", 20, 40);
}
 
/*Esta función crea un cuadrilátero
que toma sus coordenadas de las variable PVector
que definimos al principio*/ 
void pantalla(){
 
    // Cuadrilátero
    beginShape(QUADS);
      vertex(v1.x,v1.y);
      vertex(v2.x,v2.y);
      vertex(v3.x,v3.y);
      vertex(v4.x,v4.y);
    endShape();
 
    testMouseOver();
}
 
 
/*Esta función comprueba si el cursor está
sobre una esquina del cuadrilátero*/
void testMouseOver(){
    //Si está cerca de la primera esquina...
    if (mouseX>v1.x-5 && mouseX<v1.x+5 && mouseY>v1.y-5 && mouseY<v1.y+5) { //... cambia el cursor... cursor(HAND); //... dibuja un cí­rculo... ellipse(v1.x, v1.y, 5, 5); //... y avisa de que está. _v1 = true; } //Igual para la segunda esquina else if (mouseX>v2.x-5 && mouseX<v2.x+5 && mouseY>v2.y-5 && mouseY<v2.y+5) { cursor(HAND); ellipse(v2.x, v2.y, 5, 5); _v2 = true; } //Igual para la tercera else if (mouseX>v3.x-5 && mouseX<v3.x+5 && mouseY>v3.y-5 && mouseY<v3.y+5) { cursor(HAND); ellipse(v3.x, v3.y, 5, 5); _v3 = true; } //Igual para la cuarta else if (mouseX>v4.x-5 && mouseX<v4.x+5 && mouseY>v4.y-5 && mouseY<v4.y+5) {
        cursor(HAND);
        ellipse(v4.x, v4.y, 5, 5);
        _v4 = true;
    }
 
    //Si no está sobre las esquinas...
    else {
        //... el cursor es una flecha...
        cursor(ARROW);
 
        //... y avisa.
        _v1 = false;
        _v2 = false;
        _v3 = false;
        _v4 = false;
 
    }
}
 
/*Esta función mueve cada esquina del cuadrilátero
si se hace clic sobre ellas*/ 
void mouseDragged(){
    if (_v1 == true) {
        v1.x = mouseX;
        v1.y = mouseY;
    }
 
    else if (_v2 == true) {
        v2.x = mouseX;
        v2.y = mouseY;
    }
 
    else if (_v3 == true) {
        v3.x = mouseX;
        v3.y = mouseY;
    }
 
    else if (_v4 == true) {
        v4.x = mouseX;
        v4.y = mouseY;
    }
}

En el próximo capítulo de este tutorial incorporaremos una textura animada al cuadrilátero.

Repasando Processing / Índice

Enlazo aquí los diferentes posts de esta última serie que comenta los contenidos del repositorio que hemos abierto en GitHub.

  1. Repositorio en GitHub
  2. Repasando Processing / Estructuras y Formas básicas
  3. Repasando Processing / Curvas
  4. Repasando Processing / Formas 3D
  5. Repasando Processing / Texto
  6. Repasando Processing / Color
  7. Repasando Processing / Transformaciones / translate()
  8. Repasando Processing / Transformaciones / rotate()
  9. Repasando Processing / pushMatrix(), popMatrix()
  10. Repasando Processing / Condicionales y bucles
  11. Repasando Processing / Funciones y clases
  12. Repasando Processing / Arrays
  13. Repasando Processing / Redes
  14. Repasando Processing / Bitmaps y vectoriales
  15. Repasando Processing / Vídeo
  16. Repasando Processing / Juegos

Repasando Processing / Redes

En esta carpeta guardo una serie de sketches que facilitan el diseño de redes poligonales regulares.