cuadriláteros y texturas con processing

publicado el 2018-08-23

parte del proyecto:


este es un ejemplo de manipulación de texturas en processing, como parte de la exploración que estoy haciendo para el proyecto de tortilla stories.

la idea es que hay una imagen original con círculos probablemente deformados por la perspectiva de la cámara (en este ejemplo, la boca de una taza de café), y no solo queremos extraer y enderezar ese círculo, sino probablemente deformarlo de nuevo para ajustarlo a una superficie de proyección (videomapping).

imagen con resultados del programa: fotografia de una taza de café con un cuadrilátero ajustado al círculo de su boca en perspectiva, acompañada de un cuadrado con ese círculo ajustado, y de un cuadrilátero con el círculo deformado

izquierda: imagen original y cuadrilátero de muestreo; derecha: textura alineada a cuadrado, y textura deformada de manera distinta

como paréntesis, no encontré cómo hacer esto que a mi parecer es básico en gráficas computacionales, en openframeworks. eso, y el hecho de que me siento más proficiente trabajando en processing, hace que me esté decidiendo a realizar todo el proyecto ahí :)

antes de ponerme a crear estructuras de datos para los cuadriláteros y su manipulación en vivo, solo quería asegurarme de que este principio funcionara.

así que me puse a escribir las coordenadas de los vértices manualmente (hardcodéandolos) para que fuera probablemente más claro.

cabe notarse que en la versión re-deformada puede verse un “doblez” sobre la diagonal de izquierda arriba a la derecha abajo. esto tiene que ver con cómo todas las figuras se traducen a triángulos. probablemente esa apariencia se pueda resolver agregándole más puntos de muestreo a la textura (y de dibujo a los cuadriláteros), en este caso ya no lo hice porque implica calcular puntos medios entre los vértices de los cuadriláteros… y para eso mejor lo programo ;)

si gustas descargarlo, aquí está la carpeta con el código y proyecto para abrirse en processing 3, en lo que encuentro qué repositorio de código usar que no sea github :)

también copio el código aquí abajo, lo único es que tiene que estar en una carpeta con el nombre imgtexturatest y acompañado de una imagen (con nombre cafe.jpg, u otro y lo cambias en el código) en las siguientes versiones, en vez de tener los vértices hardcodeados, usaré estructuras de datos e interactividad para poderlos mover con el mouse…

/* 
  imgtexturatest.pde
  ---
  demostración de muestreo de una textura
  con un cuadrilátero,
  conversión a cuadrado,
  y conversión a otro cuadrilátero
  usando processing 3.0

  rata panchis 2018
   */

// variable con la imagen / textura origen
PImage img;
// preparación
void setup(){
	// crea la ventana
	// P3D habilita el uso de textura
	size(650,450,P3D);
	// carga la imagen
	img = loadImage("cafe.jpg");
}

// actualiza la pantalla
void draw(){
	// fondo morado
	background(0x66,0, 0x66);
	
	// dibuja la imagen original
	// en 0,0
	image(img,0,0);

	// dibuja el cuadrilátero
	// de muestreo
	stroke(255);
	strokeWeight(2);
	noFill();
	beginShape(QUAD);
	vertex(80,40);
	vertex(290,40);
	vertex(310,160);
	vertex(80, 160);
	endShape();
	
	// dibuja el
	// cuadrado con textura
	translate(450,40);
	noStroke();
	beginShape(QUAD);
	// usa imagen como textura
	texture(img);
	// cada vértice del cuadrado
	// con cada vértice muestreado
	vertex(0,0, 80,40);
	vertex(150,0, 290,40);
	vertex(150,150, 310,160);
	vertex(0,150, 80, 160);
	endShape();

	// dibuja el cuadrilátero
	// deformado con textura
	// (o con textura deformada)
	translate(0,190);
	noStroke();
	beginShape(QUAD);
	texture(img);
	// cada vértice del cuadrilátero 
	// con cada vértice muestreado
	vertex(0,0, 80,40);
	vertex(130,20, 290,40);
	vertex(150,200, 310,160);
	vertex(-20,120, 80, 160);
	endShape();
}

// al hacer click, guarda el resultado
void mouseClicked(){
	save("resultado.png");
}
rata panchis sobre una barra espaciadora