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

Zoom, movimiento y distorsión sobre una imagen de bitmap

Partiendo del ejemplo anterior podemos añadir algo de movimiento a la foto usando variables.

  1. PImage img;
  2. int x = 150;
  3. int y = 75;
  4. int tam = 200;
  5.  
  6. void setup() {
  7.   size(300, 300);
  8.   background(0);
  9. }
  10.  
  11. void draw() {
  12.   img = loadImage("yo.jpg");
  13.   //los cuatro primeros datos están controlados por variables
  14.   copy(img, x, y, tam, tam, 10, 10, width-20, height-20);
  15.   x = x+int(random(-1, 1)*2);
  16.   y = y+int(random(-1, 1)*2);
  17.   tam = tam+int(random(-1, 1)*2);
  18. }

Continue reading